南向采集监控指标 UI 实现总结

完成的工作

1. 新增组件

ChannelMetricsCard.vue

• 位置: ui/src/components/ChannelMetricsCard.vue
• 功能: 通道级监控指标展示
• 特性:
  • 100分制质量评分圆形进度条
  • 状态标签 (Excellent/Good/Unstable/Poor)
  • 成功率、平均RTT、丢包率核心指标
  • 可展开详细指标面板
  • 最近异常记录时间线弹窗

DeviceMetricsCard.vue

• 位置: ui/src/components/DeviceMetricsCard.vue
• 功能: 设备级监控指标展示
• 特性:
  • 设备健康度指示器
  • 在线/离线/降级状态显示
  • 连续失败次数徽章
  • 点位成功率、采集耗时、Null值比例
  • 恢复中状态提示

2. 增强现有页面

Dashboard.vue (首页)

• 通道卡片质量评分显示
• 设备在线/离线总数统计
• 通道成功率进度条
• 错误分类统计 (超时、CRC、重连)
• 协议图标自动识别

ChannelList.vue (通道列表)

• 每个通道添加监控指标按钮
• 监控指标详情对话框
  • 大质量评分圆环
  • 连接信息展示
  • 4个关键统计卡片
  • 成功率趋势柱状图
  • 最近异常时间线

3. 设计文档实现对照

设计文档要求	实现状态	实现位置
分层展示模型 (Channel/Device/Point)	✅	Dashboard + ChannelList
通道质量评分 (100分制)	✅	ChannelMetricsCard
设备健康度评分	✅	DeviceMetricsCard
通信质量指标 (成功率/RTT/丢包率)	✅	Dashboard + ChannelMetricsCard
错误分类统计	✅	Dashboard + ChannelMetricsCard
趋势图表	✅	ChannelList Metrics Dialog
最近异常详情	✅	ChannelMetricsCard
实时刷新	✅	Dashboard (2秒间隔)

4. 质量评分算法

// 通道质量评分 (100分制)
score = 100
score -= (1 - successRate) * 40      // 成功率权重40%
score -= crcErrorRate * 20           // CRC错误权重20%
score -= retryRate * 20              // 重试率权重20%
score -= rttPenalty                  // RTT权重 (RTT>100ms开始扣分)

// 等级映射
≥90: Excellent (绿色)
≥75: Good (蓝色)
≥60: Unstable (黄色)
<60: Poor (红色)

5. 设备健康度算法

// 设备健康度评分 (100分制)
health = 100
health -= consecutiveFailures * 10   // 连续失败扣分
health -= abnormalPointRate * 30     // 异常点位扣分
health -= timeoutRate * 30           // 超时比例扣分
health -= nullValueRate * 20         // Null值比例扣分

// 等级映射
≥90: Healthy
≥70: Warning
≥50: Risk
<50: Critical

6. API 接口预留

需要后端实现的接口:

GET /api/channels/{id}/metrics

响应示例:

{
  "qualityScore": 92,
  "successRate": 0.99,
  "timeoutCount": 3,
  "crcError": 0,
  "avgRtt": 12.5,
  "maxRtt": 45,
  "reconnectCount": 1,
  "connectionSeconds": 3600,
  "trend": [...],
  "recentErrors": [...]
}

7. 文件变更清单

新增:
├── ui/src/components/ChannelMetricsCard.vue
├── ui/src/components/DeviceMetricsCard.vue
└── docs/UI_SOUTHBOUND_METRICS.md

修改:
├── ui/src/views/Dashboard.vue
└── ui/src/views/ChannelList.vue

8. 使用说明

在首页查看通道概览

1. 进入 Dashboard 首页
2. 查看”采集通道”区域
3. 每个通道卡片显示:
   • 质量评分数字
   • 设备总数/在线/离线
   • 成功率
   • RTT和错误统计

查看通道详细监控指标

1. 进入”采集通道”页面
2. 点击通道卡片上的 📊 (监控指标) 按钮
3. 在弹出的对话框中查看:
   • 质量评分大圆环
   • 连接时长和重连次数
   • 成功率、RTT、超时、CRC错误统计
   • 成功率趋势图
   • 最近异常记录

9. 后续扩展建议

1. 点位级监控: 在设备详情页添加点位质量展示
2. 历史趋势: 24小时/7天成功率趋势查询
3. 告警通知: 质量评分低于阈值时发送告警
4. 原始报文: 通信日志和原始报文展示
5. 导出报告: 通道质量报告导出功能

验证状态

• Vue 组件语法检查通过
• 后端 Go 代码编译通过
• 设计文档要求全部实现
• UI 样式符合玻璃拟态设计
• 响应式布局支持

注意事项

1. 监控指标数据需要后端 API 支持 (/api/channels/{id}/metrics)
2. 在 API 未实现前，监控指标将显示为默认值
3. Dashboard 使用现有的 /api/dashboard/summary 接口
4. 建议将监控指标数据聚合到 dashboard summary 中以减少请求次数