diff --git a/backend/static/js/app.js b/backend/static/js/app.js index e9e3fd6..d769c1a 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -1615,20 +1615,86 @@ function updateCharts(cpuData, memoryData, diskData, networkData) { // 保存当前选中的网卡 state.currentInterface = state.currentInterface || 'all'; - // 更新网络流量趋势图表(发送总和和接收总和) - if (networkData && charts.network) { - let selectedNetworkData = networkData; - - // 如果是按网卡分组的数据,选择当前选中的网卡数据 - if (typeof networkData === 'object' && networkData.sent === undefined && networkData.received === undefined) { - selectedNetworkData = networkData[state.currentInterface] || networkData['all'] || {}; + // 数据求和辅助函数:计算所有网卡在同一时间点的数据之和 + const sumAllInterfacesData = (networkData, metricType) => { + if (typeof networkData !== 'object' || networkData === null) { + return []; } - if (selectedNetworkData.sent && selectedNetworkData.received) { + // 收集所有时间点 + const allTimes = new Set(); + const interfaceDatas = []; + + // 遍历所有网卡 + for (const iface in networkData) { + if (networkData.hasOwnProperty(iface) && typeof networkData[iface] === 'object') { + const ifaceData = networkData[iface][metricType]; + if (Array.isArray(ifaceData)) { + interfaceDatas.push(ifaceData); + // 收集所有时间点 + ifaceData.forEach(item => { + allTimes.add(item.time); + }); + } + } + } + + // 如果没有数据,返回空数组 + if (interfaceDatas.length === 0) { + return []; + } + + // 将时间点转换为数组并排序 + const sortedTimes = Array.from(allTimes).sort((a, b) => new Date(a) - new Date(b)); + + // 计算每个时间点的总和 + const summedData = sortedTimes.map(time => { + let sum = 0; + // 遍历所有网卡数据,累加同一时间点的值 + interfaceDatas.forEach(ifaceData => { + // 查找当前时间点的数据 + const dataPoint = ifaceData.find(item => item.time === time); + if (dataPoint) { + sum += dataPoint.value; + } + }); + return { + time: time, + value: sum + }; + }); + + return summedData; + }; + + // 更新网络流量趋势图表(发送总和和接收总和) + if (networkData && charts.network) { + let sentData, receivedData; + + // 如果是按网卡分组的数据 + if (typeof networkData === 'object' && networkData.sent === undefined && networkData.received === undefined) { + if (state.currentInterface === 'all') { + // 计算所有网卡的发送总和 + sentData = sumAllInterfacesData(networkData, 'sent'); + // 计算所有网卡的接收总和 + receivedData = sumAllInterfacesData(networkData, 'received'); + } else { + // 选择当前选中的网卡数据 + const selectedNetworkData = networkData[state.currentInterface] || networkData['all'] || {}; + sentData = selectedNetworkData.sent || []; + receivedData = selectedNetworkData.received || []; + } + } else { + // 直接使用数据 + sentData = networkData.sent || []; + receivedData = networkData.received || []; + } + + if (sentData.length > 0 || receivedData.length > 0) { // 计算发送总和(时间段内的累积值) - if (Array.isArray(selectedNetworkData.sent) && selectedNetworkData.sent.length > 0) { + if (Array.isArray(sentData) && sentData.length > 0) { // 排序发送数据 - const sortedSent = sortDataByTime(selectedNetworkData.sent); + const sortedSent = sortDataByTime(sentData); // 计算累积发送总和(MB) let cumulativeSent = 0; @@ -1651,9 +1717,9 @@ function updateCharts(cpuData, memoryData, diskData, networkData) { } // 计算接收总和(时间段内的累积值) - if (Array.isArray(selectedNetworkData.received) && selectedNetworkData.received.length > 0) { + if (Array.isArray(receivedData) && receivedData.length > 0) { // 排序接收数据 - const sortedReceived = sortDataByTime(selectedNetworkData.received); + const sortedReceived = sortDataByTime(receivedData); // 计算累积接收总和(MB) let cumulativeReceived = 0; @@ -1681,17 +1747,31 @@ function updateCharts(cpuData, memoryData, diskData, networkData) { // 更新网速趋势图表 if (networkData && charts.speed) { - let selectedNetworkData = networkData; + let sentData, receivedData; - // 如果是按网卡分组的数据,选择当前选中的网卡数据 + // 如果是按网卡分组的数据 if (typeof networkData === 'object' && networkData.sent === undefined && networkData.received === undefined) { - selectedNetworkData = networkData[state.currentInterface] || networkData['all'] || {}; + if (state.currentInterface === 'all') { + // 计算所有网卡的发送速率总和 + sentData = sumAllInterfacesData(networkData, 'sent'); + // 计算所有网卡的接收速率总和 + receivedData = sumAllInterfacesData(networkData, 'received'); + } else { + // 选择当前选中的网卡数据 + const selectedNetworkData = networkData[state.currentInterface] || networkData['all'] || {}; + sentData = selectedNetworkData.sent || []; + receivedData = selectedNetworkData.received || []; + } + } else { + // 直接使用数据 + sentData = networkData.sent || []; + receivedData = networkData.received || []; } - if (selectedNetworkData.sent && selectedNetworkData.received) { + if (sentData.length > 0 || receivedData.length > 0) { // 更新发送流量 - if (Array.isArray(selectedNetworkData.sent) && selectedNetworkData.sent.length > 0) { - const sortedData = sortDataByTime(selectedNetworkData.sent); + if (Array.isArray(sentData) && sentData.length > 0) { + const sortedData = sortDataByTime(sentData); // 使用固定份数X轴数据计算 const fixedPointsData = getFixedPointsData(sortedData); charts.speed.data.datasets[0].data = fixedPointsData.map(item => ({ @@ -1701,8 +1781,8 @@ function updateCharts(cpuData, memoryData, diskData, networkData) { } // 更新接收流量 - if (Array.isArray(selectedNetworkData.received) && selectedNetworkData.received.length > 0) { - const sortedData = sortDataByTime(selectedNetworkData.received); + if (Array.isArray(receivedData) && receivedData.length > 0) { + const sortedData = sortDataByTime(receivedData); // 使用固定份数X轴数据计算 const fixedPointsData = getFixedPointsData(sortedData); charts.speed.data.datasets[1].data = fixedPointsData.map(item => ({