自研 SCADA 组态引擎 - 基于 AntV X6
npm install @nywqs/scada-engine
bash
npm install vue@^3.4.0 vue-router@^4.6.0 @antv/x6@^2.18.0 echarts@^5.5.0 pinia@^2.1.0
`
$3
`bash
npm install @nywqs/scada-engine
或
pnpm add @nywqs/scada-engine
或
yarn add @nywqs/scada-engine
`
快速开始
$3
在你的应用入口文件(如 main.ts)中引入并注册组件:
`typescript
import { createApp } from 'vue'
import ScadaEngine from '@nywqs/scada-engine'
import '@nywqs/scada-engine/dist/scada-engine.css' // 引入样式
import App from './App.vue'
const app = createApp(App)
app.use(ScadaEngine)
app.mount('#app')
`
$3
最核心的组件是 ScadaCanvas,它承载了画布编辑器和预览功能。
`vue
ref="canvasRef"
:auth-code="authCode"
@node-click="handleNodeClick"
/>
`
目录结构
项目采用了清晰的模块划分:
`
src/
├── components/ # 核心 UI 组件
│ ├── Header.vue # 顶部工具栏
│ ├── Footer.vue # 底部版权栏
│ ├── ScadaCanvas.vue # 核心画布组件
│ └── ...
├── scada-components/ # 业务组件库
│ ├── basic/ # 基础图形组件 (rect, circle, text)
│ ├── iot/ # IoT 设备组件 (gauge, motor, tank...)
│ ├── canvas/ # 画布配置管理
│ └── registry.ts # 组件注册表
├── views/workflow/ # 流程编排模块
├── services/ # 数据服务层
│ ├── websocketService.ts
│ ├── mqttService.ts
│ └── ...
├── utils/ # 工具函数与引擎核心
│ ├── animationEngine.ts # 动画引擎
│ ├── authCrypto.ts # 授权加密模块
│ └── viewportCulling.ts # 视口优化
└── styles/ # 样式文件
`
核心概念
$3
画布是整个系统的核心,提供以下能力:
- 编辑模式:用于设计组态画面。
- 预览模式:用于运行展示,隐藏编辑 UI。
- 数据绑定:支持将设备点位(Point)绑定到组件属性,实时更新显示。
$3
引擎使用了懒加载注册机制来优化性能。
- 支持按分类(basic, iot)获取组件列表。
- 支持动态注册新组件。
$3
引擎不强制绑定特定后端,提供了灵活的数据接入适配器:
- WebSocket:适用于高频实时数据。
- MQTT:适用于物联网消息订阅。
- HTTP:适用于请求-响应式查询。
- SSE:适用于服务器推送事件。
$3
内置的可视化脚本系统,允许用户在画布上通过图形化节点编写逻辑,无需编写大量代码即可实现:
- 定时触发任务
- 条件判断分支
- HTTP 外部请求
- 自定义 JavaScript 代码执行
API 参考
$3
通过 ref 可以直接调用画布的操作方法:
| 方法 | 说明 |
|------|------|
| save() | 保存当前画布数据到 LocalStorage |
| export() | 导出当前画布为 JSON 文件 |
| import() | 触发文件选择器导入 JSON |
| getCanvasData() | 获取画布完整数据对象(包含节点、连线和配置) |
| zoomIn() / zoomOut() | 放大/缩小画布 |
| clearAll() | 清空画布 |
$3
getCanvasData() 返回的结构大致如下:
`json
{
"version": "1.0",
"config": {
"width": 1920,
"height": 1080,
"grid": true
},
"cells": [
{
"id": "node-1",
"type": "rect",
"x": 100,
"y": 100,
"label": "电机",
"data": { "binding": "device_01_status" }
}
]
}
``