ui-design.md 13 KB
故障录波前端页面设计
状态：初稿，2026-10-16；同日按用户意见调整：“参数读取”页改为“功能操作”，参数设置只保留 5、6 并改用 cmd=0 读取。用户将根据实现效果再提意见。功能目标见 requirements.md，后端设计见 technical-design.md。组件库沿用 naive-ui，波形图沿用 uPlot。
1. 菜单结构
故障录波 （替换现有“故障录波配置”）
├── 生产服
│ ├── 录波记录
│ ├── 设备信息
│ ├── 功能操作（功能码 1、3、4、7）
│ └── 参数设置（功能码 5、6）
└── 测试服
└── （同上）
- 路由形如
fault-record/prod/record、fault-record/prod/function、fault-record/test/param-write。两套环境使用同一组页面组件，环境从路由参数获取。 - 现有
fault-record/read、fault-record/write页面下线，参数设置按第 6 节重新设计。 - 功能码按页面划分：
| 功能码 | 名称 | 页面 | 读取 | 设置／执行 |
|---|---|---|---|---|
| 1 | 清除设备故障波形 | 功能操作 | 无（动作） | cmd=1 |
| 2 | 采样通道配置 | 暂不开放 | — | 设备端暂未实现 |
| 3 | 手动触发故障录波 | 功能操作 | 无（动作） | cmd=1 |
| 4 | 设备对时 | 功能操作 | cmd=3 | cmd=1 |
| 5 | 采样频率 | 参数设置 | cmd=0 code=2 | cmd=1 |
| 6 | 可配采样通道 | 参数设置 | cmd=0 code=1 | cmd=1 |
| 7 | 录波功能开关 | 功能操作 | cmd=3 | cmd=1 |
- 每个页面顶部固定显示环境标签：生产服用醒目的警示色，测试服用中性色，避免在错误的环境操作。
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 表，表外代码只显示代码）。
- 可勾选多条记录后点“获取所选”，设备把所选记录打成一个包上传（最多 32 条，用户确认设备支持，2026-10-19）；每行的“获取”按钮仍可单条获取。获取进行中时，其他获取按钮禁用。
- 操作进度的“原始报文与下载记录”中，除 MQTT 报文外，还记录每次 HTTP 文件下载（路径、结果、大小或错误、耗时），并记录 609 之后短时间内到达的报文（如 610）。
- 导出下拉：原始压缩包、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. 功能操作
┌ 设备选择条 ───────────────────────────────────────────────────────┐
├ 设备对时 (4) ──────────────────┬ 录波功能开关 (7) ────────────────┤
│ 设备当前时间：2026-10-16 12:00:00│ 当前状态：使能 │
│ [日期时间] [取当前时间] [对时] │ [使能录波] [关闭录波] │
├ 动作 ───────────────────────────┼ 读取当前值（cmd=3）────────────────┤
│ [手动触发故障录波 (3)] │ ☑4 设备时间 ☑7 录波开关 [读取] │
│ [清除设备故障波形 (1)] │ │
├ 结果（进度 + 逐项结果）────────────────────────────────────────────┤
├ 操作历史（读取与执行合并显示）──────────────────────────────────────┤
└──────────────────────────────────────────────────────────────────┘
- 每个按钮单独执行一个功能码，执行前弹窗确认；1、3、4 以及关闭录波（7=00）标红，需勾选“我已确认”。
- 4、7 执行成功后自动复读该项。
- 4、7 的读取依赖
cmd=3（待实测，B01）；不支持时只能执行，不能读取。
6. 参数设置
只包含功能码 5（采样频率）和 6（可配采样通道）；功能码 2 设备端暂未实现，暂不开放。
┌ 设备选择条 ───────────────────────────────────────────────────────┐
│ 读取当前值（cmd=0）：☑5 采样频率 ☑6 可配采样通道 [读取当前值] │
├ 参数 ────────────────────────────────────┬ 待提交 ─────────────────┤
│ 采样频率 (5) [ 4500 ] Hz 设备当前值 4500 Hz │ 5 采样频率 1194 [×] │
│ 可配采样通道 (6) │ 6 可配采样通道 01… [×] │
│ 索引 │ 方式 │ 地址类型 │ 地址/代码 │ ☑ 设置成功后自动复读 │
│ 设备当前：索引1 Uint16@0x14990 … （点击带入）│ [提交设置] │
│ 高级：原始模式（仅 5、6） │ │
├ 设置结果 + 复读核对 ─────────────────────────────────────────────────┤
├ 操作历史 ────────────────────────────────────────────────────────────┤
└──────────────────────────────────────────────────────────────────┘
- 读取当前值改用
cmd=0：5 取 code=2 的采样频率，6 取 code=1 的可配采样通道；可勾选读取哪些项，默认全选；切换设备时清空。 - 可配采样通道：读取后设备有几个通道就并列显示几行编辑框（每行：索引、方式、地址类型、地址／代码、setVal 预览、设备当前值），修改过的行高亮并标“已修改”，索引重复的行标红；可逐行“加入”，也可“全部加入待提交”或“加入已修改”一键导入多行，无效行跳过并提示；可“新增一行”或删除行。索引 1 对应 code=1 可配采样通道列表的第 1 项。默认方式和代码方式按同一格式解析（类型低字节的高 4 位为设置方式、低 4 位为地址类型，数据 4 字节；代码方式取前 2 字节为代码），后续出问题再改。
- 数据类型选项统一首字母大写：Empty、Uint16、Int16、Float32、Uint32_HWord、Uint32_LWord、Uint32。
- 提交前弹窗确认；生产服的确认按钮用警示色。
- 复读核对同样用
cmd=0：5 比对采样频率；6 按索引取列表对应项，拼成 setVal 后比对。
相对旧页面的改进：
| 旧页面 | 新设计 |
|---|---|
| 手填功能码数字和十六进制值 | 结构化表单，自动生成 setVal 并实时预览；保留原始模式 |
| 不知道设备当前值 | 可读取当前值预填表单，点击设备当前通道带入 |
| 无提交前确认 | 统一确认弹窗 |
| 只显示成功／失败 | 显示进度、逐项 resultOne 和复读核对 |
| 一次可填多个子设备 | 一次操作只针对一个设备 |