组态 SCADA 子系统

2026年7月8日大约 17 分钟

组态 SCADA 子系统

组态（scada-2d）是一个搭建型（builder）组件，用于绘制工业工艺流程图：泵、阀、罐、电机、传感器等图元用连线组成拓扑，并由测点数据驱动其状态色、液位、数值文本与流动动画。渲染基于原生 SVG，切主题整屏协调。

提示

组态通常独占一页——把 size 设为整页、position: [0,0]。

在线演示（工艺链 + 测点驱动）

纯 SVG 渲染，无需外部服务。泵按 PUMP1_STATE 状态色变绿并旋转、连线流动、清水池按 TANK1_LEVEL 画液位、仪表指针随 FLOW1——数据来自内置演示测点长表（键 / 值两列）。

电力单线图（SLD）——母线抽头 + 变压器 / 断路器 / 互感器 / 负荷，换 theme: 'amber-gold' 主题整屏协调：

污水处理工艺——格栅 → 沉淀池 → 曝气池 → 紫外消毒直线工艺链，加药泵旁路汇入，aurora-green 主题；曝气池冒泡（fx-bubbles 特效叠加在池体上）：

新能源微电网——光伏 / 风机 / 储能经逆变器并网，deep-purple 主题；储能电量条内置值驱动（mock-value 演示 78%）：

暖通空调机房——冷水机组 → 空气处理机组 → 风阀 → 风管送风，风机盘管末端回风，graphite 主题：

各图元形状画廊 / 值驱动细节见组态图元，连线流动与路径动画见组态连线；131 个形状的独立文档见形状库分类页。

结构：画板 + 图元 + 连线

图元与连线都放在 pieces 里，顺序即叠放顺序（靠后在上）。图元用场景坐标 geo-x/y/w/h（不是 position/size）。

{
  "uid": "w_scada", "type": "scada-2d",
  "options": {
    "position": [0,0], "size": [1920,1080],
    "scene-width": 1920, "scene-height": 1080,   // 场景逻辑尺寸（含缩放适配）
    "theme": "tech-blue", "grid": true, "snap": true, "grid-size": 24,
    "scada-initialized": true,                    // ⚠️ 写 true 禁止首挂播种演示场景
    "point-key-field": [["conn_pts","tbl_pts","键"]],
    "point-value-field": [["conn_pts","tbl_pts","值"]]
  },
  "pieces": [
    { "uid": "n_pump", "type": "scada-node", "options": {
        "shape": "pump", "geo-x": 200, "geo-y": 400, "geo-w": 96, "geo-h": 96,
        "node-text": "1#提升泵", "data-enabled": true, "data-key": "PUMP1_STATE", "state-by-value": true } },
    { "uid": "l_1", "type": "scada-link", "options": {
        "from-node": "n_pump", "from-port": "e", "to-node": "n_tank", "to-port": "w",
        "router": "polyline", "flow": true, "flow-style": "flow" } }
  ]
}

主题与场景

主题 theme（5 套）：tech-blue 科技蓝 / aurora-green 极光绿 / deep-purple 深空紫 / amber-gold 琥珀金 / graphite 石墨灰。图元颜色留空即跟随主题。
场景尺寸 scene-width / scene-height：内容坐标系；图元的 geo-* 相对它，画板按容器缩放适配。
appearance-3d：立体观感（默认开）——图元渐变 + 柔和阴影；图元很多时可关以提性能。
depth-sort：2.5D 深度排序（默认关）——按图元底边 y 自动排前后遮挡（越靠下越在前），地台 / 标区恒垫底，替代手工层级。
grid / snap / grid-size：网格与吸附。
view-zoom / view-pan（默认开）：预览/运行态的视图交互——view-zoom 鼠标滚轮以光标为中心缩放场景（0.2~10 倍）；view-pan 按住左键（或中键）拖拽平移。开启任一后双击空白处复位到适配全貌；缩放平移只改观看视口，不改图元坐标；不需要时可分别关闭。
scada-initialized：建议写 true——否则无图元时首次挂载会播种「罐 → 阀 → 泵」演示场景。

测点数据模型（长表，最重要）

组态用「长表」喂数：一张表两列——键列（测点名，如 PUMP1_STATE）+ 值列（当前值）。画板 options 绑 point-key-field / point-value-field（各恰 1 个三元组）；每个图元用 data-key 填自己关心的键（字符串，非三元组）。运行时值变化 → 图元自动重算。

实时演示

配一个 mock 连接（refreshInterval + wave/walk 字段）即可无后端跑动态组态。

图元数据驱动 options（都在 data-enabled: true 下生效）：

option	作用
`data-key`	测点键（匹配键列的值）
`value-min` / `value-max`	量程（液位 / 高度映射的输入区间）
`show-value-text` / `value-decimals` / `value-unit`	图元下方数值文本
`state-by-value: true` + `state-rules`	状态 → 颜色：文本规则每行 `匹配=颜色`，如 `run\|1=#22c55e` / `stop\|0=#94a3b8` / `fault=#ef4444`（`\|` 分隔同义值，末行无值 = 兜底）
`fill-by-value: true` + `fill-th1/th2` + `fill-low/mid/high`	阈值 → 填充色（三段）
`height-by-value: true` + `height-in/out-min/max`	值 → 高度线性映射（柱状液位）
`mock-value`	编辑态无数据时的预览值（运行态失效）
`liquid-wave: true`	液面叠加轻摆波浪线（`tank` / `iso-tank` 支持），液位驱动时更生动

液面 / 进度类形状（tank / iso-tank / sphere-tank / silo / mixer / level-bar / progress-bar / thermometer / gauge / battery 等）自带 overlay：值按量程归一化直接画液位 / 电量 / 进度 / 指针，无须额外配置。

图元 scada-node

形状库（内置 131 种，可插件扩展）

shape 填形状类型名。每个形状都有独立文档（用途、端口布局、值驱动行为、在线演示、可复制 JSON），按行业分 13 个分类页：

分类页	数量	说明
通用图形	6	矩形 / 圆 / 多边形，背景框与状态色块
管阀与管件	16	10 种阀 + 管段弯头三通法兰，全部带管线端口
通用设备	11	泵 / 电机 / 风机 / 换热 / 锅炉，旋转类配 `anim: spin`
容器与储罐	8	立罐 / 球罐 / 料仓 / 塔器，值驱动液面
仪表与指示	10	仪表盘 / 温度计 / 液位柱 / 数显 / 报警灯，值驱动
电气与电子	16	开关 / 断路器 / 变压器 + 电阻电容等原理图符号
电力单线图	8	母线（`t1/t2/t3` 抽头）/ 互感器 / 避雷器 / 负荷
新能源与油气	6	逆变器 / 燃料电池 / 充电桩 + 抽油机 / 火炬 / 井口
水处理	6	格栅 / 沉淀 / 曝气 / 紫外 / 加药 / 消化池
暖通空调	6	AHU / 冷机 / 表冷 / 风阀 / 盘管 / 风管
特效与天气	11	火焰烟雾蒸汽气泡 + 雨雪雾云晴闪电（纯装饰）
2.5D 等轴测	26	地台 / 标区 / 道路 / 立式罐 / 水池 / 厂房 / 冷却塔 / 机柜 / 光伏板 / 变压器 / 储能舱 / 货架 / 集装箱 / AGV / 机械臂 / 机床 / 货车 / 树木等立体图元（顶面亮 / 侧面暗，随填充联动）
自定义 SVG	1	`svg-path` 导入任意 SVG 作图元
图片图元	1	`image` 把用户自备的位图 / 矢量图当图元，支持按值换图

其中 25 种形状自带值驱动 overlay（液面 / 指针 / 电量 / 开度随测点值变化），机制见组态图元 · 值驱动与状态。

图元属性

几何：geo-x / geo-y / geo-w / geo-h / geo-rotate（°）——场景坐标；iso-plane（floor / wall-l / wall-r）把平面图元斜切投影到等轴测地面 / 墙面（2.5D 场景与立体图元拼装）。
外观：fill / stroke / accent / text-color 留空 = 跟随画板主题（推荐）；material（metal 金属 / glass 玻璃 / plastic 塑料 / matte 哑光 / flat 纯色，默认跟随场景「立体观感」）；ground-shadow（落地接触阴影，站立感）；line-width、opacity、node-text、font-size。
动画 anim：none / blink（闪烁，指示灯）/ pulse（脉冲，强调）/ spin（旋转），配 anim-speed。泵 / 风机 / 风力发电机为部件级旋转——spin 时仅叶轮 / 叶片转动、机体静止。
特效（仅 fx-* 粒子 / 天气形状生效）：fx-density（密度 1~5）、fx-speed、fx-size、fx-color（留空 = 默认色）、fx-seed（随机种子）。特效为环境动效、不占主题填充、不依赖数据；用 geo-w/h 控制发射 / 覆盖区域。
端口：连线锚点，通用形状为四边中点 n / e / s / w；部分工业形状有专属端口（如 pipe 两端、pump 的 w/e/s）。

自定义 SVG 图元

形状选 svg-path 时，图元由自带 SVG 提供——支持编辑器上传解析、粘贴路径 d、多元素 JSON 三种来源，与内置形状同等能力（端口 / 绑数据 / 状态规则 / 动画）。选项表、演示与写法详见自定义 SVG。svg-symbol 是 svg-path 的兼容别名；图元的自定义 SVG 与连线的 marker-svg-*（路径动画符号）字段各自独立。

图片图元

形状选 image 时，图元内容是一张用户自备的图片（设备照片、厂区底图、第三方图标）：image-url 指地址、image-fit 控贴合方式，还能 image-by-value + image-rules 按测点值换图（泵启停两张图、阀开关三态图）。图片可从素材库挑、从桌面直接拖进画布、或 Ctrl+V 粘贴截图。详见图片图元。

图元 / 连线的数据交互

图元（scada-node）与连线（scada-link）也支持组件级数据能力：cross-filter-emit / cross-filter-receive（联动）、select-sync-emit / select-sync-receive（选中传递）、filter + row-filter-mode（数据过滤），写法与普通组件一致，见数据系统。

连线 scada-link

两端有三种写法（可混用）：

写法	options
拓扑端（挂图元端口，随图元移动）	`from-node` + `from-port`、`to-node` + `to-port`
自由端（固定场景坐标）	对应端 node 留空 `""`，写 `from-x/y` 或 `to-x/y`
途径点（线依次穿过）	`waypoints: [[x,y], …]`

样式：router（line 直线 / polyline 折线 / curve 曲线）、stroke（留空跟随主题）、line-width、arrow、dash。
立体管道：line-style: "pipe"（对照组态王立体管道）——同心分层描边出圆柱观感，线宽即管径（建议 10~16）；pipe-joints（默认开）在途径点画弯头节点圆、两端画法兰短线；流动动画自动贴合管芯内腔。
流动动画：flow: true + flow-style（flow 水流 / beads 水珠 / dot 圆点 / arrow 箭头 / waterdrop 水滴）+ flow-direction / flow-color / flow-speed。
路径动画（符号沿线行进，随线弯折自动转向）：marker: true + marker-shape（几何 arrow / triangle / chevron / dot / ring / square / diamond / star；工业图标 droplet / bolt / box / flame / gear；svg 自定义）+ marker-size / marker-count（1~12）/ marker-speed / marker-color / marker-rotate / marker-direction。与 flow 可叠加。开了 flow-by-value / flow-map-by-value 时，符号随流动启停（停机则箭头/水滴一并消失），方向跟流动换向。
自定义 SVG 符号（marker-shape: "svg"）：本条连线自带 marker-svg-els 或 marker-svg-path + marker-svg-viewbox，编辑器「SVG 图形」入口自动填。与图元的自定义 SVG 字段各自独立。

形状用法示例

图元共用 geo-* 几何与 data-* 数据驱动属性，下面按行为类型给代表性示例（覆盖全部形状族）：

静态图形 / 管阀（无数据，纯拓扑）：

{ "uid": "n_valve", "type": "scada-node", "options": {
  "shape": "gate-valve", "geo-x": 300, "geo-y": 200, "geo-w": 64, "geo-h": 48, "node-text": "V-101" } }

值驱动液位（容器类 tank / silo / sphere-tank 等，自带 overlay）：

{ "uid": "n_tank", "type": "scada-node", "options": {
  "shape": "tank", "geo-x": 500, "geo-y": 160, "geo-w": 140, "geo-h": 200,
  "data-enabled": true, "data-key": "TANK1_LEVEL", "value-min": 0, "value-max": 100, "value-unit": "%" } }

状态色映射（泵 / 阀 / 指示灯，按值文本切颜色）：

{ "uid": "n_pump", "type": "scada-node", "options": {
  "shape": "pump", "geo-x": 200, "geo-y": 400, "geo-w": 96, "geo-h": 96,
  "data-enabled": true, "data-key": "PUMP1_STATE", "state-by-value": true,
  "state-rules": "run|1=#22c55e\nstop|0=#94a3b8\nfault=#ef4444" } }

阈值填充（三段色）：

{ "uid": "n_meter", "type": "scada-node", "options": {
  "shape": "sensor", "geo-x": 700, "geo-y": 400, "geo-w": 96, "geo-h": 96,
  "data-enabled": true, "data-key": "T1", "fill-by-value": true, "fill-th1": 40, "fill-th2": 80 } }

值 → 高度（液位柱 / 进度条）：

{ "uid": "n_bar", "type": "scada-node", "options": {
  "shape": "level-bar", "geo-x": 880, "geo-y": 360, "geo-w": 48, "geo-h": 160,
  "data-enabled": true, "data-key": "LV", "height-by-value": true, "height-in-min": 0, "height-in-max": 100 } }

粒子 / 天气特效（环境动效，不依赖数据；用 geo-w/h 控制范围）：

{ "uid": "n_fire", "type": "scada-node", "options": {
  "shape": "fx-fire", "geo-x": 220, "geo-y": 300, "geo-w": 90, "geo-h": 120, "fx-density": 3, "fx-speed": 1 } }

自定义 SVG 图元：

{ "uid": "n_svg", "type": "scada-node", "options": {
  "shape": "svg-path", "geo-x": 1000, "geo-y": 200, "geo-w": 80, "geo-h": 80,
  "svg-path": "M8 40 L40 8 L72 40 L40 72 Z", "svg-viewbox": "0 0 80 80" } }

连线 · 流动 + 路径动画：

{ "uid": "l1", "type": "scada-link", "options": {
  "from-node": "n_pump", "from-port": "e", "to-node": "n_tank", "to-port": "w",
  "router": "polyline", "flow": true, "flow-style": "flow",
  "marker": true, "marker-shape": "droplet", "marker-count": 3 } }

事件与动作

触发器（写在 scada-2d 的 options.interactions）：scada-node-click / scada-node-dblclick（可选目标图元 uid）、scada-link-click、scada-blank-click。payload 含 nodeUid / name / shape / dataKey / value，公式 {:dataKey}、{:value} 可取。
动作：scadaWritePoint（写测点：目标组态 + key + 字面值或取 payload 字段；value 填 toggle 则在 0↔1 翻转，适合点管线开/关流），配合按钮 / 图元点击做「点泵下发启停」。scadaSetOption（改图元选项：piece-uid + option + value；写 sprite-stop-frame 会自动停播并停在那一帧；同一图元不要再开 sprite-by-value，否则测点会盖掉按钮）。也可用通用动作（changeOption / switchScreen / 弹窗等）。SDK：getScada(uid).setPieceOption(...)。

编辑器内操作

双击组态进入内部编辑：拖拽图元库落点、端口拉线（落端口 = 拓扑线、落空白 = 自由线）、选中线拖端点改接 / 脱开、双击线段加途径点、旋转手柄、对齐分布、右键菜单。生成 JSON 时无须这些，直接写 pieces 即可。

图元库五个页签：工业图元、行业图片（内置 2.5D / 序列帧，精灵图插入时写 sprite-*）、我的图片、我的图元、通用组件。

可导入示例

data/组态/ 提供智慧水厂、工业组件、电力新能源油气、水务暖通、天气粒子特效、动画连接、2.5D 立体组态、开源符号、精灵图（12）、行业图像集（13–16：画廊 / 水务工艺 / 2.5D 场站 / 煤矿采运提）与生成图复原（20 化工罐区 / 21 煤矿井口洗选：抠图组件 + mock 测点/交互 + 2.5D 摆位规范）等多套科技蓝综合示例（含 mock 实时数据、值驱动、流动 / 路径动画、内嵌图表）。

延伸阅读：数据系统（测点长表的连接与 mock）· 事件交互（interactions 结构、scadaWritePoint）· 2D 地图与三维场景（另两大搭建型子系统）· 组件手册。