南向采集监控指标 UI - 设计符合性最终报告

📋 项目概述

根据 docs/南向通道指标监控.md 设计要求，实现工业边缘网关南向采集的通信可观测性 UI。

实现日期: 2026-02-24
符合性评分: 75% (较初次检查提升5%)

✅ 完全符合项 (100%)

1. 质量评分算法

// 通道质量评分 (100分制)
score = 100
score -= timeoutRate * 40      // 成功率权重40%
score -= crcErrorRate * 20     // CRC错误权重20%
score -= retryRate * 20        // 重试率权重20%
score -= rttPenalty            // RTT权重

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

2. 设备健康度算法

// 设备健康度评分 (100分制)
health = 100
health -= consecutiveFailures * 10
health -= abnormalPointRate * 30
health -= timeoutRate * 30
health -= nullValueRate * 20

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

3. 基础通信指标

✅ 成功率 (successRate)
✅ 超时次数 (timeoutCount)
✅ CRC错误次数 (crcError)
✅ 平均响应时间 (avgRtt)
✅ 重连次数 (reconnectCount)
✅ 丢包率 (packetLoss)

4. 分层展示模型

✅ Channel 层: Dashboard + Metrics Dialog
✅ Device 层: DeviceList + DeviceMetricsCard
✅ Point 层: 基础状态显示 (待增强)

5. 状态隔离

✅ 通道质量不影响设备在线显示
✅ 设备异常但通道 Excellent 可见
✅ 降级设备但通道正常可见

⚠️ 部分符合项 (80%)

连接信息展示 (已补充实现)

指标	原状态	现状态	实现位置
远端 IP/端口	❌	✅	Dashboard + Metrics Dialog
从机 ID	❌	✅	Metrics Dialog
串口参数	❌	✅	Metrics Dialog
连接模式	❌	⚠️	待添加
最后断开时间	❌	✅	Metrics Dialog

趋势图表

图表	状态	说明
成功率趋势	✅	柱状图实现
RTT 曲线	⚠️	只有平均值，无历史曲线
错误类型饼图	❌	未实现

❌ 未实现项 (P1/P2 优先级)

点位级监控 (P1)

❌ 最近更新时间
❌ 质量码 (Good/Bad/Uncertain)
❌ 原始寄存器数据
❌ 字节序转换演示

高级图表 (P1)

❌ RTT 曲线图
❌ 错误类型饼图
❌ 点位异常统计图表

通信日志 (P2)

❌ 最近50条通信日志
❌ 原始报文展开
❌ 请求/响应时间对比

专业模式 (P2)

❌ 简化/专家视图切换
❌ 并发请求数
❌ 请求队列长度

📁 实现文件清单

新增组件

ui/src/components/
├── ChannelMetricsCard.vue      # 通道监控指标卡片
└── DeviceMetricsCard.vue       # 设备监控指标卡片

增强页面

ui/src/views/
├── Dashboard.vue               # 首页通道卡片增强
└── ChannelList.vue             # 监控指标详情对话框

文档

docs/
├── UI_SOUTHBOUND_METRICS.md         # UI实现详细文档
├── UI_IMPLEMENTATION_SUMMARY.md     # 实现总结
├── UI_DESIGN_COMPLIANCE_CHECK.md    # 符合性检查报告
├── UI_DESIGN_FINAL_REPORT.md        # 本报告
└── MODBUS_HEARTBEAT_OPTIMIZATION.md # 心跳优化文档

🖼️ UI 效果预览

1. Dashboard 首页

┌─────────────────────────────────────────────────────────┐
│ 采集通道                                    [在线: 8]   │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────┐    │
│ │ [图标] Modbus-TCP-1                     [92分]  │    │
│ │ 192.168.1.100:502 | 启用                        │    │
│ ├─────────────────────────────────────────────────┤    │
│ │ 设备: 10    在线: 8    离线: 2    成功率: 99%   │    │
│ ├─────────────────────────────────────────────────┤    │
│ │ [成功率进度条 ████████████████████░░░]          │    │
│ │ 通信质量: RTT 15ms   超时: 0   CRC: 0           │    │
│ └─────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────┘

2. 监控指标详情对话框

┌─────────────────────────────────────────────────────────┐
│ [图表] 通道监控指标 - Modbus-TCP-1              [X]     │
├──────────────────────────┬──────────────────────────────┤
│                          │  [成功率] [RTT] [超时] [CRC] │
│       [质量评分]         │   99.0%    15ms    0      0  │
│          92              │                              │
│      Excellent           │  [成功率趋势柱状图]          │
│                          │  ▁▃▅▇███▇▅▃▁                 │
│ 协议: Modbus TCP         │                              │
│ 地址: 192.168.1.100:502  │  最近异常:                   │
│ 从机ID: 1                │  • 读取超时 (10:05)         │
│ 连接: 2h 30m             │  • CRC错误 (09:45)          │
│ 最后断开: 08:30          │                              │
└──────────────────────────┴──────────────────────────────┘

🔌 API 接口规范

GET /api/channels/{id}/metrics

请求: 无

响应:

{
  "qualityScore": 92,
  "successRate": 0.99,
  "timeoutCount": 3,
  "crcError": 0,
  "crcErrorRate": 0,
  "retryRate": 0.01,
  "avgRtt": 12.5,
  "maxRtt": 45,
  "reconnectCount": 1,
  "connectionSeconds": 3600,
  "lastDisconnectTime": "2026-02-24T08:30:00Z",
  "totalRequests": 1000,
  "successCount": 990,
  "packetLoss": 0.01,
  "trend": [
    {"time": "2026-02-24T10:00:00Z", "rate": 0.99},
    {"time": "2026-02-24T10:05:00Z", "rate": 0.98}
  ],
  "recentErrors": [
    {
      "time": "2026-02-24T10:00:00Z",
      "type": "timeout",
      "code": "TIMEOUT",
      "message": "读取超时"
    }
  ]
}

📊 符合性统计

检查项	符合度	说明
总体设计原则	90%	分层模型、状态隔离完整
通道级指标	85%	核心算法、连接信息完整
设备级指标	95%	健康度算法、基础信息完整
点位级指标	20%	仅基础状态显示
UI 页面设计	70%	主要功能实现，图表待增强
后台接口	80%	数据结构完整，部分端点待添加

综合评分: 75%

🎯 后续优化建议

P1 - 重要功能 (建议下一版本实现)

点位级监控增强
- PointList 添加质量码列
- 显示原始寄存器数据
- 最后更新时间
图表增强
- RTT 趋势曲线图
- 错误类型分布饼图
异常详情
- 异常码分类展示
- 异常频率统计

P2 - 增强功能 (根据需求评估)

通信日志
- 最近50条日志查询
- 原始报文展示
专业模式
- 简化/专家视图切换
- 高级指标显示
点位详情页
- 字节序转换演示
- 数据类型切换预览

✅ 验收结论

当前实现已满足核心需求：

✅ 通信可观测性 (成功率、RTT、错误统计)
✅ 质量评分 (100分制算法)
✅ 实时链路状态 (连接信息、时长)
✅ 设备健康度 (独立评分)
✅ 通道级 & 设备级分层监控
✅ 运维诊断能力 (异常记录、趋势图)

建议: 当前版本可进入测试阶段，P1优先级功能可在下一迭代中补充实现。