3.8 KiB
3.8 KiB
网络流量数据来源分析
数据来源
1. API调用
- 函数：
loadMetrics() - 调用方式：
fetchMetric('network') - API路径：
${API_BASE_URL}/metrics/network - 参数：
start_time: 起始时间end_time: 结束时间aggregation: 聚合方式（默认为average）interval: 时间区间（固定为10m）
2. WebSocket实时更新
- 函数：
handleMetricsUpdate(message) - 消息类型：
metrics_update - 数据结构：
{ "type": "metrics_update", "device_id": "device_id", "metrics": { "network": {...} } }
数据处理流程
1. 数据格式化
- 函数：
formatNetworkDataForCards(networkData) - 作用：将API或WebSocket返回的原始网络数据格式化为状态卡片可用的格式
- 处理逻辑：
- 初始化返回数据结构，包含发送速率、接收速率、发送总量、接收总量
- 根据数据类型（数组或对象）进行不同处理
- 遍历所有网卡，累加所有网卡的流量数据
- 支持多种数据格式，包括数组格式、WebSocket消息格式、按网卡分组的数据格式
- 支持旧格式的总量数据（bytes_sent_total, bytes_received_total）
2. 数据更新
- 函数：
_updateStatusCards(metrics) - 作用：更新状态卡片的显示内容
- 网络流量卡片更新逻辑：
- 解析网络数据，获取发送速率、接收速率、发送总量、接收总量
- 计算接收速率/发送速率的比值，根据比值显示箭头
- 使用
formatBytes函数格式化速率和总量，自动处理MB和GB的转换 - 更新DOM元素，显示比值、速率和总量
显示内容
1. 大数字显示
- 内容：接收速率/发送速率的比值
- 逻辑：
- 如果接收速率和发送速率都为0，显示无穷符号（∞）
- 如果发送速率为0，接收速率不为0，显示无穷符号（∞）和↓
- 如果接收速率为0，发送速率不为0，显示0和↑
- 正常情况：计算比值，显示比值和箭头（比值>1显示↓，否则显示↑）
2. 速率显示
- 格式：接收速率 MB/s | 发送速率 MB/s
- 处理：使用
formatBytes函数格式化，自动处理MB/s和GB/s的转换
3. 总量显示
- 格式：接收总量 MB | 发送总量 MB
- 处理：使用
formatBytes函数格式化，自动处理MB和GB的转换
正确性验证
1. 网卡总流量
formatNetworkDataForCards函数会遍历所有网卡，累加所有网卡的流量数据- 这样显示的是所有网卡的总流量信息，符合用户需求
2. 数据类型转换
formatBytes函数会根据数据大小自动转换为合适的单位（MB或GB）- 速率显示带有正确的单位（MB/s或GB/s）
- 总量显示带有正确的单位（MB或GB）
3. 边界情况处理
- 处理了接收速率和发送速率都为0的情况
- 处理了发送速率为0，接收速率不为0的情况
- 处理了接收速率为0，发送速率不为0的情况
代码优化
1. 已完成的优化
- 使用
formatBytes函数格式化流量数据，自动处理MB和GB的转换 - 确保显示的是所有网卡的总流量信息
- 处理了各种边界情况
2. 优化效果
- 显示内容更准确，带有正确的单位
- 自动适应数据大小，提高可读性
- 处理了各种边界情况，避免显示错误
结论
网络流量卡片的数据来源是可靠的，通过API调用或WebSocket实时更新获取原始数据，经过formatNetworkDataForCards函数格式化处理后，显示的是所有网卡的总流量信息。使用formatBytes函数格式化后，显示内容带有正确的单位，并且会根据数据大小自动转换为合适的单位（MB或GB），提高了数据的可读性。