iAOP/web/cockpit

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 编译脚本

使用

# 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 模块/构建依赖。