# 网络流量数据来源分析

## 数据来源

### 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），提高了数据的可读性。