ui-design.md 13 KB
故障录波前端页面设计
状态：初稿，2026-10-16。用户将根据实现效果再提意见。功能目标见 requirements.md，后端设计见 technical-design.md。组件库沿用 naive-ui，波形图沿用 uPlot。
1. 菜单结构
故障录波 （替换现有“故障录波配置”）
├── 生产服
│ ├── 录波记录
│ ├── 设备信息
│ ├── 参数读取
│ └── 参数设置
└── 测试服
└── （同上）
- 路由形如
fault-record/prod/record、fault-record/test/param-write。两套环境使用同一组页面组件，环境从路由参数获取。 - 现有
fault-record/read、fault-record/write页面下线，参数设置按第 6 节重新设计。 - 每个页面顶部固定显示环境标签：生产服用醒目的警示色，测试服用中性色，避免在错误的环境操作。
2. 公共组件
2.1 设备选择条
┌──────────────────────────────────────────────────────────────────┐
│ [生产服] 网关 SN [________________] [查询] 设备 [aGate ▼] │
│ 站点：xxx 在线 aPower ×3 │
└──────────────────────────────────────────────────────────────────┘
- 输入网关 SN 后查询站点信息，设备下拉为
aGate+ 各 aPower SN（pe）。 - 显示站点在线状态，离线时给出提示但不禁止操作。
- 最近使用的网关 SN 存在本地，方便再次选择。
2.2 操作进度
已发送 ─── 设备已应答 ─── 数据就绪 ─── 平台上传中 ─── 上传完成 ─── 已下载 ─── 完成
✓ ✓ ●
[取消]
- 每个阶段显示时间；失败时在对应阶段显示原因（设备忙、超时、单项失败等）。
- “设备忙”单独提示：“设备正在处理其他命令（可能来自 FWH 平台），请稍后再试”。
- 可取消的阶段显示“取消”按钮，规则见 technical-design.md。
- 可展开“原始报文”，按时间列出收发的全部报文 JSON，便于排查。
2.3 操作历史
各功能页底部都有历史表，按当前环境和网关筛选，所有人共享：
| 时间 | 操作人 | 网关 | 设备 | 操作 | 参数摘要 | 状态 | 操作 |
|---|
点击一行可回看当时的进度、原始报文和结果。
3. 录波记录
┌ 设备选择条 ───────────────────────────────────────────────────────┐
├ 故障录波总目录 [刷新目录] ────────┤
│ 序号 │ 发生时间（设备时间）│ 触发源 │ 参数版本 │ 操作 │
│ 7 │ 2026-08-18 03:03:08 │ 0x1001 并网发生状态切换故障 │ 00000001 │ [获取] │
│ … │
├ 当前操作进度（见 2.2） ─────────────────────────────────────────────┤
├ 操作历史（见 2.3），已完成的行有 [查看] [导出 ▼] ──────────────────────┤
└──────────────────────────────────────────────────────────────────┘
- 目录按设备返回的顺序显示，不按序号推断时间先后；允许按时间列排序。
- 触发源显示代码和名称（名称来自协议文档 F15 表，表外代码只显示代码）。
- 每次只获取一条记录；获取进行中时，其他“获取”按钮禁用。
- 导出下拉：原始压缩包、CSV。
3.1 录波详情（抽屉或独立标签页）
┌ 基本信息 ───────────────────────────────────────────────────────┐
│ 记录序号 7 发生时间 2026-08-18 03:03:08 触发源 0x1001 │
│ 采样频率 4500 Hz 采样点 1536（故障前 1024 / 故障后 512） │
│ 存储格式 v1 CAN 协议 v1 参数版本 00000001 DCDC EMS_SL:V10R80B21D00 │
├ 波形 ────────────────────────────────────────────────────────────┤
│ 通道：☑0 0x0010 ☑1 0x0011 … ☑12 可配 Uint16@0x14990 … [全选][反选] │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ uPlot 多通道折线，竖线标出故障时刻（第 1024 点 / 0 ms） │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ X 轴：[采样点 | 相对故障时刻 ms] Y 轴：原始值（int16） │
├ 快照通道 ──────────────────────────────────────────────────────────┤
│ 序号 │ 含义代码 │ 原始值 │ │
├ 可配通道 ──────────────────────────────────────────────────────────┤
│ 序号 │ 类型 │ 地址 │ │
└──────────────────────────────────────────────────────────────────┘
- 通道数值量级差异大，提供“分组显示”：每个勾选通道一个小图，共享 X 轴和游标，避免小信号被大信号压平。
- 游标悬停显示所有勾选通道在该点的原始值。
4. 设备信息
- 勾选
code：故障总体信息（1）、录波功能基本信息（2）、录波总目录（3），点击“读取”。 - 每个 code 一张卡片，按协议字段列出原始值；可展开原始
hexData。
5. 参数读取
┌ 设备选择条 ───────────────────────────────────────────────────────┐
├ 功能码：☑2 采样通道配置 ☑4 设备时间 ☑5 采样频率 ☑6 可配采样通道 ☑7 录波开关 [读取] ┤
├ 结果 ─────────────────────────────────────────────────────────────┤
│ 功能码 │ 名称 │ 原始十六进制 │ 解读 │ 结果 │
│ 5 │ 采样频率 │ 1194 │ 4500 Hz │ ok │
│ 7 │ 录波开关 │ 01 │ 使能 │ ok │
│ 2 │ 采样通道配置 │ … │ 16 个通道（展开）│ ok │
└──────────────────────────────────────────────────────────────────┘
- 功能码 1、3 是动作，没有可读的状态，不在读取列表中。
- “解读”只针对协议已定义结构的功能码（2、4、5、6、7），解不出来时只显示原始值。
- 结果可一键“带入参数设置”。
6. 参数设置
相对现有页面的改进：
| 现有页面 | 新设计 |
|---|---|
| 手填功能码数字和十六进制值 | 按功能码提供结构化表单，自动生成 setVal，并实时显示十六进制预览 |
| 不知道设备当前值 | 可先“读取当前值”预填表单，修改项高亮 |
| 无提交前确认 | 统一确认弹窗，危险操作醒目标注 |
| 只显示成功／失败 | 显示进度和逐项 resultOne，可选设置后自动复读 |
| 一次可填多个子设备 | 一次操作只针对一个设备（与后端操作模型一致） |
┌ 设备选择条 ─────────────────────────────── [读取当前值] ──────────┐
├ 功能项 ─────────────────────────────────┬ 待提交 ─────────────────┤
│ ▸ 采样频率 (5) [ 4500 ] Hz │ 5 采样频率 1194 [×] │
│ ▸ 录波开关 (7) (●使能 ○关闭) │ 7 录波开关 01 [×] │
│ ▸ 设备对时 (4) [日期时间] [取当前时间] │ 6 可配通道1 010100014990│
│ ▸ 采样通道配置 (2) 通道列表编辑器 │ │
│ ▸ 可配采样通道 (6) 行编辑器： │ ☐ 设置成功后自动复读 │
│ 索引 │ 方式 │ 地址类型 │ 地址/代码 │ │
│ ▸ 危险操作 │ [提交设置] │
│ [清除故障波形 (1)] [手动触发录波 (3)] │ │
├ 高级：原始模式（直接输入功能码 + 十六进制，保留旧页面的能力） ────────┤
├ 进度与逐项结果 ───────────────────────────────────────────────────────┤
├ 操作历史 ────────────────────────────────────────────────────────────┤
└──────────────────────────────────────────────────────────────────┘
各功能码的表单：
| id | 表单 | 校验 |
|---|---|---|
| 2 | 通道含义代码列表（每项 4 位十六进制），可增删、拖动排序；通道数自动计算 | 每项 2 字节 |
| 4 | 日期时间选择（按设备时间）+“取当前时间” | 年 0～65535 |
| 5 | 数字输入，单位 Hz | 1～65535 |
| 6 | 每行：索引号、设置方式（默认／代码）、地址类型（默认方式时）、地址或代码（十六进制）；可多行，每行生成一项 id=6 |
按方式校验长度 |
| 7 | 单选：使能／关闭 | — |
| 1、3 | 按钮加入待提交列表 | 无参数 |
6.1 提交确认弹窗
┌ 确认设置 ────────────────────────────────────┐
│ 环境：[生产服] 网关：xxx 设备：pe 10050015…│
│ │
│ 5 采样频率 4500 Hz (1194) │
│ 7 录波开关 关闭 (00) ⚠ 将停止录波 │
│ 1 清除故障波形 ⚠ 不可恢复 │
│ │
│ ☐ 我已确认以上操作 │
│ [取消] [确认提交] │
└──────────────────────────────────────────────┘
- 所有设置都弹窗确认；包含 id=1（清除波形）、id=3（手动触发）、id=4（对时）、id=7 关闭录波时，对应行标红并加说明，且必须勾选“我已确认”才能提交。
- 生产服环境的确认按钮使用警示色。
6.2 结果
- 进度同 2.2，到
379为止。 - 逐项结果表：功能码、名称、设置值、
resultOne（非 ok 时显示错误码含义，来自协议文档 10.5／10.6）。 - 勾选“自动复读”时，成功后对涉及的功能码自动发起一次参数读取，并与设置值比对。