98 lines
3.8 KiB
Markdown
98 lines
3.8 KiB
Markdown
# 网络流量数据来源分析
|
||
|
||
## 数据来源
|
||
|
||
### 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`
|
||
- **数据结构**：
|
||
```json
|
||
{
|
||
"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），提高了数据的可读性。 |