# 故障录波前端页面设计 > 状态：初稿，2026-10-16。用户将根据实现效果再提意见。功能目标见 [requirements.md](requirements.md)，后端设计见 [technical-design.md](technical-design.md)。组件库沿用 naive-ui，波形图沿用 uPlot。 ## 1. 菜单结构 ```text 故障录波 （替换现有“故障录波配置”） ├── 生产服 │ ├── 录波记录 │ ├── 设备信息 │ ├── 参数读取 │ └── 参数设置 └── 测试服 └── （同上） ``` - 路由形如 `fault-record/prod/record`、`fault-record/test/param-write`。两套环境使用同一组页面组件，环境从路由参数获取。 - 现有 `fault-record/read`、`fault-record/write` 页面下线，参数设置按第 6 节重新设计。 - 每个页面顶部固定显示环境标签：**生产服**用醒目的警示色，测试服用中性色，避免在错误的环境操作。 ## 2. 公共组件 ### 2.1 设备选择条 ```text ┌──────────────────────────────────────────────────────────────────┐ │ [生产服] 网关 SN [________________] [查询] 设备 [aGate ▼] │ │ 站点：xxx 在线 aPower ×3 │ └──────────────────────────────────────────────────────────────────┘ ``` - 输入网关 SN 后查询站点信息，设备下拉为 `aGate` + 各 aPower SN（`pe`）。 - 显示站点在线状态，离线时给出提示但不禁止操作。 - 最近使用的网关 SN 存在本地，方便再次选择。 ### 2.2 操作进度 ```text 已发送 ─── 设备已应答 ─── 数据就绪 ─── 平台上传中 ─── 上传完成 ─── 已下载 ─── 完成 ✓ ✓ ● [取消] ``` - 每个阶段显示时间；失败时在对应阶段显示原因（设备忙、超时、单项失败等）。 - “设备忙”单独提示：“设备正在处理其他命令（可能来自 FWH 平台），请稍后再试”。 - 可取消的阶段显示“取消”按钮，规则见 [technical-design.md](technical-design.md#45-取消cmd4)。 - 可展开“原始报文”，按时间列出收发的全部报文 JSON，便于排查。 ### 2.3 操作历史 各功能页底部都有历史表，按当前环境和网关筛选，所有人共享： | 时间 | 操作人 | 网关 | 设备 | 操作 | 参数摘要 | 状态 | 操作 | | --- | --- | --- | --- | --- | --- | --- | --- | 点击一行可回看当时的进度、原始报文和结果。 ## 3. 录波记录 ```text ┌ 设备选择条 ───────────────────────────────────────────────────────┐ ├ 故障录波总目录 [刷新目录] ────────┤ │ 序号 │ 发生时间（设备时间）│ 触发源 │ 参数版本 │ 操作 │ │ 7 │ 2026-08-18 03:03:08 │ 0x1001 并网发生状态切换故障 │ 00000001 │ [获取] │ │ … │ ├ 当前操作进度（见 2.2） ─────────────────────────────────────────────┤ ├ 操作历史（见 2.3），已完成的行有 [查看] [导出 ▼] ──────────────────────┤ └──────────────────────────────────────────────────────────────────┘ ``` - 目录按设备返回的顺序显示，不按序号推断时间先后；允许按时间列排序。 - 触发源显示代码和名称（名称来自协议文档 F15 表，表外代码只显示代码）。 - 每次只获取一条记录；获取进行中时，其他“获取”按钮禁用。 - 导出下拉：原始压缩包、CSV。 ### 3.1 录波详情（抽屉或独立标签页） ```text ┌ 基本信息 ───────────────────────────────────────────────────────┐ │ 记录序号 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. 参数读取 ```text ┌ 设备选择条 ───────────────────────────────────────────────────────┐ ├ 功能码：☑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`，可选设置后自动复读 | | 一次可填多个子设备 | 一次操作只针对一个设备（与后端操作模型一致） | ```text ┌ 设备选择条 ─────────────────────────────── [读取当前值] ──────────┐ ├ 功能项 ─────────────────────────────────┬ 待提交 ─────────────────┤ │ ▸ 采样频率 (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 提交确认弹窗 ```text ┌ 确认设置 ────────────────────────────────────┐ │ 环境：[生产服] 网关：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）。 - 勾选“自动复读”时，成功后对涉及的功能码自动发起一次参数读取，并与设置值比对。