# 稳态数据历史趋势页面设计

## 1. 背景

当前 `frontend/src/views/steady/steadyDataView/index.vue` 是稳态数据分页列表页，已接入：

- `POST /steady/data/view/page`
- `POST /steady/data/view/export`

同目录下已有 `2026-05-14-steady-data-view-trend-design.md`，定义了稳态历史趋势能力：台账树、指标树、趋势查询、按天加载、统计摘要和谐波展示策略。

本次页面设计按用户确认的 B 方案执行：直接将当前 `steadyDataView` 页面改造成“稳态历史趋势”页面，暂不保留原分页列表视图。

## 2. 已确认范围

### 2.1 页面目标

在 `steadyDataView` 页面内展示稳态历史趋势工作台，用于先验证趋势页面交互和展示结构。

### 2.2 数据来源

- 台账树使用真实数据，优先复用 `tools/addLedger` 的 `getAddLedgerTree()`。
- 指标树使用前端模拟数据。
- 趋势曲线使用前端模拟数据。
- 当前范围统计摘要使用前端模拟数据。
- 谐波趋势、谱图和 TopN 第一版均使用模拟数据和模拟面板，不接真实后端。

### 2.3 不在本次范围

- 不实现 InfluxDB 真实查询。
- 不新增后端接口。
- 不保留原稳态分页表入口。
- 不执行重型构建、打包或 Electron 构建。

## 3. 推荐方案

采用“真实台账 + 前端模拟趋势”的最小落地方案。

页面入口仍为：

- `frontend/src/views/steady/steadyDataView/index.vue`

页面按现有复杂页面拆分约定维护：

- `index.vue` 只保留布局编排、顶层状态、接口调用流程和事件分发。
- `components/` 放台账树、指标树、查询工具栏、趋势图、统计摘要等展示组件。
- `utils/` 放指标目录、台账归一化、模拟趋势生成、统计计算、图表配置构造等纯函数。

该方案后续接真实接口时，只需要将 `utils/mockTrendData` 替换为 API 调用，并保持组件 props / emits 基本稳定。

## 4. 页面布局

页面采用三栏工作台结构，不叠加页面级外边距，跟随 `el-main` 默认 `15px` 内容区。

### 4.1 顶部查询区

顶部查询区固定在页面上方，包含：

- 时间范围选择，默认近 24 小时。
- 统计类型选择：平均值、最大值、最小值、CP95。
- 相别选择：A、B、C 或 T，根据当前指标动态可用。
- 查询按钮。
- 重置按钮。

查询按钮使用 `type="primary"`，重置使用 `type="primary" plain`。

### 4.2 左侧台账树

左侧上半区展示真实台账树：

- 工程
- 项目
- 设备
- 监测点

台账树支持搜索和勾选。

选择规则：

- 选中监测点时，直接作为趋势查询的测点。
- 选中设备、项目、工程时，自动收集下级监测点。
- 第一版前端限制最多 8 个监测点参与查询，超过时给出提示。

当真实台账接口不可用或返回空时，页面显示空状态，不自动伪造台账树。这样可以明确区分真实台账数据与模拟趋势数据。

### 4.3 左侧指标树

左侧下半区展示模拟指标树，分组包括：

- 电压趋势
- 电流趋势
- 频率趋势
- 谐波趋势
- 功率趋势
- 闪变趋势

指标叶子节点包含：

- 指标编码
- 指标名称
- 单位
- 支持相别
- 支持统计类型
- 是否谐波指标

查询模式限制：

- 多测点查询时，只允许选择一个指标。
- 单测点查询时，允许选择多个指标，最多 8 个。
- 单次生成曲线不超过 24 条，超过时提示缩小选择范围。

### 4.4 中间趋势图区

中间区域展示 ECharts 折线图，复用已有 `frontend/src/components/echarts/line/index.vue`。

图表能力：

- 多序列折线。
- 图例开关。
- tooltip。
- dataZoom。
- 采样信息展示，包括原始点数、展示点数、bucket。

趋势点位由前端根据当前测点、指标、相别、统计类型和时间范围生成模拟数据。模拟数据应保持不同指标的数值区间差异，例如：

- 电压约 `210-235V`
- 电流约 `20-120A`
- 频率约 `49.8-50.2Hz`
- 功率约 `20-900kW`
- 闪变约 `0.2-1.2`
- 谐波含量约 `0-8%`

### 4.5 右侧统计摘要

右侧展示当前查询结果的统计摘要：

- 最大值
- 平均值
- 最小值
- CP95

摘要以序列为维度展示，可滚动。每个摘要项展示测点、指标、相别、统计类型、单位和值。

### 4.6 谐波扩展区

当选中谐波类指标时，趋势图上方显示：

- 谐波次数选择，范围 2-50，第一版默认选 3、5、7 次。
- 趋势 / 谱图 / TopN 切换。

第一版规则：

- 趋势模式展示所选谐波次数的模拟趋势曲线。
- 谱图模式展示当前时刻的模拟谐波柱状数据。
- TopN 模式展示当前范围内模拟 TopN 排名。

## 5. 数据流

### 5.1 初始化

1. 页面加载。
2. 调用 `getAddLedgerTree()` 获取真实台账树。
3. 归一化台账节点。
4. 初始化指标树和默认查询条件。
5. 如果存在可用监测点，则默认选中第一个监测点和第一个电压指标，生成模拟趋势。

### 5.2 查询

1. 用户选择台账节点、指标、相别、统计类型和时间范围。
2. 页面构造查询上下文。
3. 执行前端限制校验。
4. 调用模拟数据生成函数。
5. 生成图表 option 和统计摘要。
6. 更新趋势图与右侧摘要。

### 5.3 重置

重置恢复：

- 默认近 24 小时时间范围。
- 默认统计类型为平均值。
- 默认相别为 A、B、C。
- 默认选中首个可用测点和电压有效值指标。

## 6. 文件设计

预计新增或修改：

- `frontend/src/views/steady/steadyDataView/index.vue`
- `frontend/src/views/steady/steadyDataView/components/TrendToolbar.vue`
- `frontend/src/views/steady/steadyDataView/components/TrendLedgerTree.vue`
- `frontend/src/views/steady/steadyDataView/components/TrendIndicatorTree.vue`
- `frontend/src/views/steady/steadyDataView/components/TrendChartPanel.vue`
- `frontend/src/views/steady/steadyDataView/components/TrendSummaryPanel.vue`
- `frontend/src/views/steady/steadyDataView/components/types.ts`
- `frontend/src/views/steady/steadyDataView/utils/ledgerTree.ts`
- `frontend/src/views/steady/steadyDataView/utils/indicatorCatalog.ts`
- `frontend/src/views/steady/steadyDataView/utils/mockTrendData.ts`
- `frontend/src/views/steady/steadyDataView/utils/trendChart.ts`
- `frontend/src/views/steady/steadyDataView/utils/trendQuery.ts`

现有 `utils/queryParams.ts` 只服务原列表页。页面替换后可保留不引用，避免额外删除历史代码；如果类型检查或 lint 提示未使用，再按最小范围清理本次造成的问题。

## 7. 样式原则

- 不使用营销式 hero。
- 不额外叠加页面级外边距。
- 工作区以紧凑、可扫描为主。
- 卡片只用于明确的工具面板，不做多层卡片嵌套。
- 按钮沿用业务页按钮约定。
- 图表区域需要稳定高度，避免查询条件变化造成布局跳动。

## 8. 验证方案

默认不执行重型构建。

建议验证：

1. 代码结构：`index.vue` 只保留编排、状态和事件分发。
2. 台账真实数据：页面调用 `getAddLedgerTree()`，空数据时显示空状态。
3. 指标模拟数据：指标树包含电压、电流、频率、谐波、功率、闪变分组。
4. 查询限制：多测点多指标、超 8 测点、超 8 指标、超 24 曲线时有明确提示。
5. 图表展示：查询后折线图、图例、tooltip、dataZoom 可用。
6. 统计摘要：最大值、平均值、最小值、CP95 随当前模拟序列更新。
7. 谐波模式：选择谐波指标后显示次数选择和模式切换。
8. 轻量命令：优先执行 `cd frontend; npm run type-check`，必要时执行 `npm run lint`。

## 9. 风险与注意事项

- 台账接口是真实数据，页面需要处理接口失败、空树和节点字段大小写不一致。
- 趋势和统计是模拟数据，界面上应避免让用户误以为已经接入 InfluxDB。
- 当前页面替换原列表后，原导出入口会暂时不可见。
- 后续接真实趋势接口时，需要补充 API 类型、接口封装和异常处理。

## 10. 结论

本设计按用户确认的 B 方案将 `steadyDataView` 直接改造为稳态历史趋势页面。第一版使用真实台账树验证业务选择路径，其余趋势相关数据全部使用前端模拟数据，以最小改动先完成页面结构、交互和视觉验证。