修复网络流量图表显示异常问题

backend/static/js/app.js

@@ -2239,6 +2239,34 @@ function _updateCharts({ cpuData, memoryData, diskData, networkData }) {
         return summedData;
     };
     
+    // 计算流量差值的辅助函数
+    const calculateTrafficDiff = (data) => {
+        if (!Array.isArray(data) || data.length <= 1) {
+            return data;
+        }
+        
+        // 确保数据按时间排序
+        const sortedData = [...data].sort((a, b) => new Date(a.time) - new Date(b.time));
+        
+        // 计算每个时间点与前一个时间点的差值
+        const diffData = [];
+        
+        for (let i = 1; i < sortedData.length; i++) {
+            const current = sortedData[i];
+            const previous = sortedData[i - 1];
+            
+            // 计算差值，确保为正数
+            const diff = {
+                time: current.time,
+                value: Math.max(0, current.value - previous.value)
+            };
+            
+            diffData.push(diff);
+        }
+        
+        return diffData;
+    };
+    
     // 更新网络流量趋势图表（发送总和和接收总和）
     if (networkData && charts.network) {
         let txBytesData, rxBytesData;
@@ -2264,42 +2292,48 @@ function _updateCharts({ cpuData, memoryData, diskData, networkData }) {
         
         if (txBytesData.length > 0 || rxBytesData.length > 0) {
             // 使用发送累积总流量数据
-            if (Array.isArray(txBytesData) && txBytesData.length > 0) {
-                // 排序发送数据
-                const sortedTxBytes = sortDataByTime(txBytesData);
-                
-                // 转换为MB
-                const txBytesSumData = sortedTxBytes.map(item => ({
-                    time: item.time,
-                    value: item.value / (1024 * 1024) // 直接转换为MB
-                }));
-                
-                // 使用固定份数X轴数据计算
-                const fixedPointsTxBytesSum = getFixedPointsData(txBytesSumData);
-                charts.network.data.datasets[0].data = fixedPointsTxBytesSum.map(item => ({
-                    x: formatTime(item.time),
-                    y: item.value
-                }));
-            }
+        if (Array.isArray(txBytesData) && txBytesData.length > 0) {
+            // 排序发送数据
+            const sortedTxBytes = sortDataByTime(txBytesData);
             
-            // 使用接收累积总流量数据
-            if (Array.isArray(rxBytesData) && rxBytesData.length > 0) {
-                // 排序接收数据
-                const sortedRxBytes = sortDataByTime(rxBytesData);
-                
-                // 转换为MB
-                const rxBytesSumData = sortedRxBytes.map(item => ({
-                    time: item.time,
-                    value: item.value / (1024 * 1024) // 直接转换为MB
-                }));
-                
-                // 使用固定份数X轴数据计算
-                const fixedPointsRxBytesSum = getFixedPointsData(rxBytesSumData);
-                charts.network.data.datasets[1].data = fixedPointsRxBytesSum.map(item => ({
-                    x: formatTime(item.time),
-                    y: item.value
-                }));
-            }
+            // 计算流量差值，只显示指定时间范围内的流量变化
+            const diffTxBytes = calculateTrafficDiff(sortedTxBytes);
+            
+            // 转换为MB
+            const txBytesSumData = diffTxBytes.map(item => ({
+                time: item.time,
+                value: item.value / (1024 * 1024) // 转换为MB
+            }));
+            
+            // 使用固定份数X轴数据计算
+            const fixedPointsTxBytesSum = getFixedPointsData(txBytesSumData);
+            charts.network.data.datasets[0].data = fixedPointsTxBytesSum.map(item => ({
+                x: formatTime(item.time),
+                y: item.value
+            }));
+        }
+        
+        // 使用接收累积总流量数据
+        if (Array.isArray(rxBytesData) && rxBytesData.length > 0) {
+            // 排序接收数据
+            const sortedRxBytes = sortDataByTime(rxBytesData);
+            
+            // 计算流量差值，只显示指定时间范围内的流量变化
+            const diffRxBytes = calculateTrafficDiff(sortedRxBytes);
+            
+            // 转换为MB
+            const rxBytesSumData = diffRxBytes.map(item => ({
+                time: item.time,
+                value: item.value / (1024 * 1024) // 转换为MB
+            }));
+            
+            // 使用固定份数X轴数据计算
+            const fixedPointsRxBytesSum = getFixedPointsData(rxBytesSumData);
+            charts.network.data.datasets[1].data = fixedPointsRxBytesSum.map(item => ({
+                x: formatTime(item.time),
+                y: item.value
+            }));
+        }
             
             charts.network.update();
         }