51 lines
2.7 KiB
Markdown
51 lines
2.7 KiB
Markdown
|
# web/cockpit — iAOP 配置化驾驶舱 Web 前端
|
|||
|
|
|
|||
|
|
issue #131 / PRD 5.5「⑤ 配置化驾驶舱」。纯静态 HTML + 原生 JS（无构建链），
|
|||
|
|
按布局资产渲染：四状态工艺流程视图、实时趋势、KPI 卡片、告警面板、NL 查询入口。
|
|||
|
|
|
|||
|
|
## 目录
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
web/cockpit/
|
|||
|
|
├── index.html # 驾驶舱页面（顶栏模板切换 + 栅格容器）
|
|||
|
|
├── cockpit.css # 样式（调色由 themeTokens CSS 变量注入）
|
|||
|
|
├── cockpit.js # 渲染客户端：组件注册表 + WidgetHost + 推理服务对接
|
|||
|
|
├── plans/ # 编译产物（前端唯一数据源，fetch 加载）
|
|||
|
|
│ ├── ti-cl4.json # ← templates/ti-cl4/dashboard/cockpit.ti.yaml
|
|||
|
|
│ ├── resin.json # ← templates/resin/dashboard/cockpit.resin.yaml
|
|||
|
|
│ └── alarm_panel.ti.json # ← templates/ti-cl4/dashboard/alarm_panel.ti.yaml
|
|||
|
|
└── scripts/
|
|||
|
|
└── build_plans.py # 布局/告警 YAML → RenderPlan JSON 编译脚本
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 1) 模板资产变更后重新编译渲染计划（开发期依赖 PyYAML）
|
|||
|
|
python web/cockpit/scripts/build_plans.py
|
|||
|
|
|
|||
|
|
# 2) 本地起静态服务（首屏全本地资源，≤ 2s，PRD 9）
|
|||
|
|
cd web/cockpit && python -m http.server 8080
|
|||
|
|
# 浏览器打开 http://localhost:8080 （Chrome / Edge 最新两版）
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 设计要点
|
|||
|
|
|
|||
|
|
- **切换模板零改码**（PRD 5.5 验收）：前端只消费 `plans/*.json` 渲染计划，
|
|||
|
|
组件注册表（`ProcessView/TrendChart/KpiCard/AlarmPanel/NlQuery`，键名对齐
|
|||
|
|
`core/cockpit/renderer.py` 的 `WIDGET_COMPONENT`）+ 通用 WidgetHost 逐个挂载；
|
|||
|
|
ti-cl4 ↔ resin 切换 = 加载另一份 plan JSON，布局/主题/绑定全部随之重排。
|
|||
|
|
- **主题**：`theme: dark` 的调色由 plan JSON 的 `themeTokens` 注入 CSS 变量，
|
|||
|
|
切主题 = 换一套变量，组件样式不动。
|
|||
|
|
- **告警面板**：severity P0/P1/P2 配色、`requireAck` 确认、`showSop` 处置建议、
|
|||
|
|
排序与最大条数全部来自 `alarm_panel.ti.json`（#52 `render_alarm_panel_props`）。
|
|||
|
|
- **推理服务对接**：`http://39.101.182.167:30800` —— `/health`（顶栏状态灯）、
|
|||
|
|
`/v1/models`（取模型名）、`/v1/chat/completions`（NL 查询）。
|
|||
|
|
- **模拟数据**：时序总线尚未提供点位订阅接口，趋势/KPI/告警暂用按 bind 点 ID
|
|||
|
|
确定性播种的模拟源（`DataFeed`），接入真实总线只需替换该对象的三个方法。
|
|||
|
|
|
|||
|
|
## 浏览器兼容
|
|||
|
|
|
|||
|
|
Chrome / Edge 最新两版（PRD 9）：使用了 `fetch`、`Promise`、`classList`、
|
|||
|
|
CSS Grid、`String.prototype.replaceWith` 等基准特性，无 ES 模块/构建依赖。
|