UI 设计要求符合性检查报告
设计文档
- 来源:
docs/南向通道指标监控.md
- 检查日期: 2026-02-24
- 实现版本: 当前代码库
一、总体设计原则检查
1.1 分层展示模型 ✅ 部分符合
| 层级 |
设计要求 |
实现状态 |
说明 |
| 南向通道 (Channel) |
独立展示 |
✅ 已实现 |
Dashboard + ChannelMetricsCard |
| 设备 (Device) |
独立展示 |
✅ 已实现 |
DeviceMetricsCard 组件 |
| 点位 (Point) |
独立展示 |
⚠️ 部分实现 |
仅在 DeviceList 显示状态，无详细监控 |
缺失项:
- 点位级监控指标 (原始寄存器值、字节序、质量码等)
二、通道级监控指标检查
2.1 基础连接信息 ⚠️ 部分符合
| 指标 |
设计要求 |
实现状态 |
实现位置 |
| 通道状态 (Excellent/Good/Unstable/Offline) |
必须显示 |
✅ 已实现 |
Dashboard 通道卡片 |
| 物理类型 (TCP/RTU) |
必须显示 |
✅ 已实现 |
ChannelList 显示 protocol |
| 本地 IP |
必须显示 |
❌ 未实现 |
- |
| 本地端口 |
必须显示 |
❌ 未实现 |
- |
| 远端 IP |
必须显示 |
❌ 未实现 |
- |
| 远端端口 |
必须显示 |
❌ 未实现 |
- |
| 连接模式 (Client/Server) |
必须显示 |
❌ 未实现 |
- |
| 当前连接时长 |
必须显示 |
✅ 已实现 |
Metrics Dialog |
| 最后断开时间 |
必须显示 |
❌ 未实现 |
- |
| 当前 Socket FD |
可选 |
❌ 未实现 |
- |
缺失项: 连接详情 (IP/端口/模式)、最后断开时间
2.2 通信质量指标 ✅ 基本符合
| 指标 |
设计要求 |
实现状态 |
说明 |
| 成功率 |
实时统计 |
✅ 已实现 |
Dashboard + Metrics Dialog |
| 超时次数 |
实时统计 |
✅ 已实现 |
Dashboard + Metrics Dialog |
| CRC 错误次数 |
实时统计 |
✅ 已实现 |
Dashboard + Metrics Dialog |
| 异常响应次数 |
实时统计 |
⚠️ 部分实现 |
只有 CRC 错误，无 Exception Code |
| 平均响应时间 (Avg RTT) |
实时统计 |
✅ 已实现 |
Metrics Dialog |
| 最大响应时间 (Max RTT) |
实时统计 |
⚠️ 部分实现 |
数据结构有，UI未显示 |
| 当前重试次数 |
实时统计 |
⚠️ 部分实现 |
有 reconnectCount，无 currentRetry |
| 丢包率 |
实时统计 |
✅ 已实现 |
计算显示 |
缺失项: Exception Code 统计、Max RTT 显示、currentRetry
2.3 通道质量评分算法 ✅ 完全符合
| 要求 |
实现状态 |
说明 |
| score = 100 |
✅ 已实现 |
ChannelMetricsCard |
| score -= timeoutRate * 40 |
✅ 已实现 |
权重一致 |
| score -= crcRate * 20 |
✅ 已实现 |
权重一致 |
| score -= retryRate * 20 |
✅ 已实现 |
权重一致 |
| score -= rttPenalty |
✅ 已实现 |
RTT > 100ms开始扣分 |
评分等级映射 ✅ 完全符合：
- ≥90: Excellent (绿色)
- ≥75: Good (蓝色)
- ≥60: Unstable (黄色)
- <60: Poor (红色)
2.4 高级指标 ❌ 大部分未实现
| 指标 |
设计要求 |
实现状态 |
|
| 当前并发请求数 |
专业模式 |
❌ 未实现 |
|
| 请求队列长度 |
专业模式 |
❌ 未实现 |
|
| 最近 10 次异常详情 |
专业模式 |
✅ 已实现 |
Metrics Dialog |
| 最近一次异常码 |
专业模式 |
⚠️ 部分实现 |
有时间线，无异常码详情 |
| 串口帧间隔统计 |
RTU专用 |
❌ 未实现 |
|
| TCP 重连次数 |
专业模式 |
✅ 已实现 |
Metrics Dialog |
缺失项: 并发请求数、队列长度、串口帧间隔、异常码详情
三、设备级监控指标检查
3.1 基础信息 ✅ 基本符合
| 指标 |
设计要求 |
实现状态 |
实现位置 |
| 设备在线状态 |
必须显示 |
✅ 已实现 |
DeviceList 状态列 |
| 当前调度周期 |
必须显示 |
✅ 已实现 |
DeviceList 采集间隔列 |
| 上次采集时间 |
必须显示 |
✅ 已实现 |
DeviceMetricsCard |
| 连续失败次数 |
必须显示 |
✅ 已实现 |
DeviceMetricsCard 徽章 |
| 降级状态 |
必须显示 |
✅ 已实现 |
DeviceMetricsCard 降级标识 |
| 是否恢复中 |
必须显示 |
✅ 已实现 |
DeviceMetricsCard 恢复提示 |
3.2 采集质量 ✅ 基本符合
| 指标 |
设计要求 |
实现状态 |
| 点位成功率 |
必须显示 |
✅ 已实现 |
| 平均采集耗时 |
必须显示 |
✅ 已实现 |
| 异常点位数量 |
必须显示 |
✅ 已实现 |
| 无效值数量 |
必须显示 |
✅ 已实现 |
| Null值比例 |
必须显示 |
✅ 已实现 |
3.3 设备健康度算法 ✅ 完全符合
| 要求 |
实现状态 |
说明 |
| health = 100 |
✅ 已实现 |
DeviceMetricsCard |
| health -= 连续失败 * 10 |
✅ 已实现 |
权重一致 |
| health -= 异常点位比例 * 30 |
✅ 已实现 |
权重一致 |
| health -= 超时比例 * 30 |
✅ 已实现 |
权重一致 |
评分等级映射 ✅ 完全符合：
- ≥90: Healthy
- ≥70: Warning
- ≥50: Risk
- <50: Critical
四、点位级监控指标 ❌ 未实现
| 指标 |
设计要求 |
实现状态 |
| 最近更新时间 |
必须显示 |
❌ 未实现 |
| 质量码 (Good/Bad/Uncertain) |
必须显示 |
❌ 未实现 |
| 原始值 |
必须显示 |
❌ 未实现 |
| 解析值 |
必须显示 |
❌ 未实现 |
| 字节序 |
必须显示 |
❌ 未实现 |
| 原始寄存器数据 |
必须显示 |
❌ 未实现 |
缺失项: 点位级监控全部功能
五、UI 页面设计方案检查
5.1 通道详情页（专家视图）⚠️ 部分符合
| 区域 |
设计要求 |
实现状态 |
说明 |
| 顶部：状态灯 |
必须 |
✅ 已实现 |
Dashboard 通道卡片 |
| 顶部：质量评分圆形进度条 |
必须 |
✅ 已实现 |
Metrics Dialog |
| 顶部：当前连接时长 |
必须 |
✅ 已实现 |
Metrics Dialog |
| 顶部：成功率 |
必须 |
✅ 已实现 |
Dashboard + Metrics Dialog |
| 中部左侧：连接信息 |
必须 |
⚠️ 部分实现 |
只有协议，无IP/端口 |
| 中部右侧：成功率趋势图 |
必须 |
✅ 已实现 |
Metrics Dialog 柱状图 |
| 中部右侧：RTT 曲线 |
必须 |
❌ 未实现 |
只有平均值，无曲线 |
| 中部右侧：错误类型饼图 |
必须 |
❌ 未实现 |
- |
| 底部：最近50条通信日志 |
必须 |
⚠️ 部分实现 |
只有最近异常，无完整日志 |
缺失项:
- 完整的连接信息 (IP/端口)
- RTT 曲线图
- 错误类型饼图
- 完整通信日志
5.2 设备详情页 ⚠️ 基础实现
| 要求 |
实现状态 |
说明 |
| 设备健康度评分 |
✅ 已实现 |
DeviceMetricsCard |
| 连续失败次数 |
✅ 已实现 |
DeviceMetricsCard |
| 当前调度周期 |
✅ 已实现 |
DeviceList |
| 降级状态 |
✅ 已实现 |
DeviceMetricsCard |
| 点位异常统计图 |
❌ 未实现 |
只有数字，无图表 |
5.3 点位详情页 ❌ 未实现
- 原始寄存器值显示
- 字节序转换演示
- 数据类型切换预览
- 解析前后对比
六、后台指标接口检查
6.1 接口定义 ✅ 已预留
| 接口 |
设计要求 |
实现状态 |
|
| GET /api/channels/{id}/metrics |
必须 |
✅ 已预留 |
ChannelList.vue openMetricsDialog |
| GET /api/devices/{id}/metrics |
必须 |
⚠️ 未预留 |
需要添加 |
| GET /api/points/{id}/debug |
必须 |
⚠️ 未预留 |
需要添加 |
6.2 返回结构 ✅ 符合
已实现的数据结构与设计要求一致：
{
qualityScore: 92,
successRate: 0.99,
timeoutCount: 3,
crcError: 0,
avgRtt: 12.5,
maxRtt: 45,
reconnectCount: 1
}
七、项目强关联建议检查
| 建议 |
设计要求 |
实现状态 |
|
| 通道质量不影响设备在线显示 |
UI层必须体现 |
✅ 已实现 |
Dashboard 独立显示 |
| 设备异常但通道 Excellent 可见 |
UI层必须体现 |
✅ 已实现 |
分层显示 |
| 降级设备但通道正常可见 |
UI层必须体现 |
✅ 已实现 |
DeviceMetricsCard 显示降级 |
八、符合性总结
8.1 完全符合项 ✅
- 质量评分算法 - 100分制算法及等级映射完全匹配
- 设备健康度算法 - 算法及等级映射完全匹配
- 基础通信指标 - 成功率、RTT、错误统计
- 分层展示模型 - Channel/Device 分层清晰
- 状态隔离 - 通道与设备状态独立显示
8.2 部分符合项 ⚠️
- 连接信息 - 缺少 IP/端口等详细信息
- 趋势图表 - 只有成功率柱状图，无RTT曲线
- 异常记录 - 只有简单时间线，无异常码详情
- 设备详情 - 缺少点位异常统计图表
8.3 未实现项 ❌
- 点位级监控 - 全部功能缺失
- 连接详情 - IP/端口/模式等信息
- 高级图表 - RTT曲线、错误饼图
- 通信日志 - 50条完整日志
- 原始报文 - 调试级数据展示
九、改进建议优先级
P0 - 核心功能 (必须实现)
- 补充连接信息展示
- 在 Metrics Dialog 显示远端 IP/端口
- 显示连接模式
- 增强异常记录
P1 - 重要功能 (建议实现)
- RTT 趋势曲线
- 错误类型饼图
- 点位级基础监控
- 在 PointList 添加质量码列
- 显示最后更新时间
P2 - 增强功能 (可选实现)
- 通信日志
- 点位详情页
- 专业模式切换
十、结论
总体符合度: 70%
- 核心质量评分算法: ✅ 100% 符合
- 基础监控指标: ⚠️ 80% 符合
- UI 页面设计: ⚠️ 60% 符合
- 点位级监控: ❌ 0% 符合
已实现核心能力:
- ✅ 通信可观测性 (成功率、RTT、错误统计)
- ✅ 质量评分 (100分制算法)
- ✅ 实时链路状态
- ✅ 设备健康度
- ✅ 通道级 & 设备级分层监控
- ⚠️ 运维诊断能力 (基础实现)
建议下一步:
- 补充 P0 优先级功能 (连接信息、异常详情)
- 实现 P1 优先级功能 (图表增强、点位监控)
- 根据实际需求评估 P2 优先级功能