技术栈
| 技术 | 用途 |
|---|---|
| Vue 3 + TypeScript | 前端框架 |
| Vite | 构建工具 |
| vue-konva | Canvas 渲染引擎，基于 Konva.js |
| Element Plus | UI 组件库（卡片、表格、描述列表） |
| WebSocket | 实时遥测推送 |
| Hash Router | 路由（兼容静态部署） |
页面路由
共 10 个页面，按路由懒加载：
| 路由 | 页面 | 功能 |
|---|---|---|
/process | ProcessView | 工艺流程图（默认首页） |
/designer | ScadaEditorView | 组态编辑器 |
/dashboard | DashboardView | 实时数据总览 |
/history | HistoryView | 历史趋势图 |
/thresholds | AlarmThresholdsView | 告警阈值配置 |
/alarms | AlarmView | 告警列表 |
/control | ControlView | 继电器远程控制 |
/rules | RelayRulesView | 继电器规则配置 |
/ota | OtaView | 远程固件升级 |
/audit | AuditView | 操作审计日志 |
核心架构
数据流
STM32 → MQTT → stm32-mill-api → WebSocket → mill-scada前端通过 useScadaAssessment composable 订阅 WebSocket 实时数据：
const {
runtime, // 设备状态、遥测数据、告警
payload, // 当前遥测字段
status, // 链路状态
dbConnected, // 数据库连接
mqttConnected, // MQTT 连接
hasPayload, // 是否有有效数据
} = useScadaAssessment();领域分层
domains/
├── alarms/ # 告警 API + 状态管理
├── alarm-thresholds/ # 告警阈值
├── audit/ # 审计日志
├── auth/ # 用户认证
├── control/ # 继电器控制
├── history/ # 历史数据查询
├── ota/ # 远程固件升级
├── relay-rules/ # 继电器规则
├── runtime/ # 实时遥测 + WebSocket
└── scada/ # SCADA 布局 API + 模型每个领域独立管理自己的 API 调用和状态，不跨域耦合。
SCADA 组态引擎
11 种元件类型
| 类型 | 分类 | 说明 |
|---|---|---|
text | 基础 | 标题、注释、工艺说明 |
container | 基础 | 设备区、工段分组框 |
image | 基础 | 现场照片或设备图 |
value | 数据 | 实时遥测数值卡 |
gauge | 数据 | 流量、压力等区间仪表盘 |
level | 数据 | 液位/料位百分比指示 |
bar | 数据 | 百分比进度条 |
pipe | 链路 | 数据流、工艺流向管线 |
status-light | 链路 | 在线/运行/告警状态灯 |
relay-bank | 链路 | DO/DI 16 路位图面板 |
alarm-badge | 链路 | 状态位和阈值提示牌 |
元件与遥测字段的绑定
每个元件通过 binding.path 绑定到遥测字段：
// 数值卡：绑定到温度 T1
{ type: "value", binding: { path: "temp.0", unit: "°C", decimals: 1 } }
// 状态灯：绑定到设备在线状态
{ type: "status-light", binding: { path: "deviceOnline", trueText: "在线", falseText: "离线" } }
// 仪表盘：绑定到瞬时流量，带阈值着色
{ type: "gauge", binding: { path: "flow", unit: "m3/h", min: 0, max: 100, warningMax: 80 } }支持的遥测字段共 17 个，覆盖温度（T1-T4）、重量（W1-W4）、流量、心跳、继电器位图、链路状态等。
ScadaRuntimeCanvas
核心渲染组件基于 vue-konva 实现，支持：
- 自适应缩放：
fitMode="contain"按容器尺寸等比缩放画布 - 右键平移：预览模式下右键拖动平移画布
- 实时数据驱动：每个元件根据绑定的遥测字段实时更新显示
- 阈值着色：数值超过
warningMax黄色、超过dangerMax红色 - 大屏模式：全屏 + 隐藏侧边栏/顶栏，纯画布展示
默认工艺总览布局
默认模板展示从”现场采集”到”云端展示”的完整数据流：
┌─────────────────────────────────────────────────────────┐
│ 智能磨坊 │
│ 称重/温度/流量 → STM32_Mill → MQTT/API/WS → 网页组态 │
│ │
│ [现场] ──→ [控制] ──→ [云端] [设备在线] [Broker] [数据库] │
│ │
│ ┌─ 现场采集层 ─────────────┐ ┌─ 流量计/脉冲采集 ─┐ │
│ │ 称重 CH1-CH4 │ │ [瞬时流量仪表盘] │ │
│ │ [料仓重量] W1 W2 W3 W4 │ │ 瞬时流量 累计流量 │ │
│ │ 温度 PT100 │ └──────────────────┘ │
│ │ T1 T2 T3 T4 │ │
│ └─────────────────────────┘ ┌─ STM32_Mill ─┐ │
│ │ 采集/计算/控制 │ │
│ 采集 ──→ TIM2 ──→ │ 心跳 状态寄存器 │ │
│ └── MQTT ──→ ──┐ │
│ ┌─ 云端/API/WebSocket ───┐ │ │
│ │ [MQTT] [mill-api/WS] │ DO ──→ │ │
│ │ [MySQL 历史库] │ │ │
│ │ cloud_ack │ │ │
│ └─────────────────────────┘ │ │
│ │ │
│ ┌─ 执行输出/反馈输入 ───────────────────────────┐ │ │
│ │ [DO 输出 16路位图] [DI 反馈输入 16路位图] │ │ │
│ └──────────────────────────────────────────────┘ │ │
│ [运行关注/报警入口] │ │
└─────────────────────────────────────────────────────────┘组态编辑器
ScadaEditorView 提供布局编辑功能：
- 拖放元件：从左侧面板拖入新元件，设置绑定字段
- 框选/多选：Shift+点击或框选多个元件，批量移动
- Transformer：8 点缩放句柄，锁定元件禁止移动
- 图层管理：zIndex 控制显示层级
- 保存/发布：草稿和已发布两种状态，发布后运行时页面使用
DashboardView 数据总览
非 SCADA 的表格化数据视图，展示：
- 告警条：设备在线、MQTT、数据库连接状态 + 活跃告警计数
- 活跃告警面板：当前未确认的告警列表
- 指标网格：4 路温度 + 4 路重量 + 瞬时流量 + 累计流量 + 心跳计数
- 设备状态：继电器输出/输入位图、有效位、状态位
- 链路状态：设备在线、MQTT Broker、数据库、WS 客户端、消息统计
每个指标卡片根据遥测状态自动着色：正常（蓝/绿）、未上报（黄）、离线（灰）。
大屏模式
ProcessView 点击”大屏模式”按钮后：
- 隐藏侧边栏和顶栏，全屏展示画布
- 右上角叠加状态浮层：运行异常、活跃告警、升级任务、遥测状态
- 告警时浮层红色高亮
- 按 ESC 或点击退出按钮退出
构建与部署
作为纯静态前端，构建产物直接由 Nginx 托管：
cd D:\Project\Mill\Platform
pnpm build:mill-scada产物输出到 dist/，通过 Docker Compose 与后端 API 一起部署。