图元 scada-node

组态图元：泵 / 阀 / 罐 / 电机 / 仪表等，由 shape 指定形状（内置 131 种，含 26 种 2.5D 等轴测），测点数据可驱动状态色 / 液位 / 数值文本；支持材质 / 落地阴影 / 斜切投影与部件级旋转。

放在 scada-2d 的 pieces 里；图元用场景坐标 geo-x/y/w/h。

在线演示

① 设备形状画廊（代表性工业图元，颜色留空自动跟随主题）：

② 管阀 / 管件族（valve 系 10 种阀 + 管段管件；两端口 w/e 可挂拓扑线）：

③ 仪表族（多数自带值驱动 overlay：指针 / 液位 / 进度 / 数码管）：

④ 电气 / 电力 / 新能源族（单线图 SLD 元件与新能源设备）：

⑤ 水处理 / 暖通族：

⑥ 值驱动（绑演示测点长表：液位 / 指针 / 状态色自动映射）——罐与液位柱按 TANK*_LEVEL 画液面，仪表指针随 FLOW1，泵按 PUMP1_STATE 状态色规则变绿：

⑦ 粒子 / 天气特效形状（环境动效，不依赖数据）：

⑧ 2.5D 等轴测族（顶面亮 / 侧面暗三面体块，随填充联动换色；罐为玻璃材质 + 液位波浪 + 落地阴影。配画板 depth-sort 深度排序、连线立体管道与图元 material / iso-plane 搭 2.5D 场站）：

⑨ 2.5D 常用场站图元（园区 / 产线 / 仓储 / 新能源：水池液位波浪、储能舱 SOC 电量条、道路深度排序恒垫底）：

形状库（131 种，按分类分页）

每个形状的用途、端口布局、值驱动行为与可复制 JSON 见分类页：

分类页	数量	代表形状
通用图形	6	rect 矩形、circle 圆形、diamond 菱形
管阀与管件	16	valve 阀门、gate-valve 闸阀、pipe-tee 三通
通用设备	11	pump 泵、fan 风机、heat-exchanger 换热器
容器与储罐	8	tank 储罐、sphere-tank 球罐、silo 料仓
仪表与指示	10	gauge 仪表盘、level-bar 液位柱、beacon 报警灯
电气与电子	16	breaker 断路器、transformer 变压器、battery 蓄电池
电力单线图	8	busbar 母线、current-transformer CT、load 负荷
新能源与油气	6	inverter 逆变器、ev-charger 充电桩、pump-jack 抽油机
水处理	6	clarifier 沉淀池、aeration-tank 曝气池
暖通空调	6	ahu 空气处理机组、chiller 冷水机组、damper 风阀
特效与天气	11	fx-fire 火焰、fx-bubbles 气泡、fx-rain 雨
2.5D 等轴测	26	iso-platform 地台、iso-tank 立式罐、iso-pool 水池、iso-solar 光伏板、iso-robot-arm 机械臂
自定义 SVG	1	svg-path 任意 SVG 导入

值驱动与状态机制

图元从「绑定测点」到「画面变化」的完整数据链：

1. 画板绑长表：scada-2d 组件把测点表绑到 point-key-field（键列）与 point-value-field（值列），运行时形成 键 → 最新值 的测点字典（见组态总览 · 测点数据模型）。
2. 图元认领测点：图元开 data-enabled: true 并填 data-key（如 TANK1_LEVEL），即从字典取到自己的实时值。
3. 值的呈现方式（可叠加）：
   • 自带 overlay（容器 / 仪表等 25 种形状）：值按 value-min / value-max 归一化后直接画液面 / 指针 / 电量 / 开度，无须配置；tank / iso-tank / iso-pool 还可开 liquid-wave 液面波浪。
   • 数值文本 show-value-text: true（默认开）：图元下方显示 数值 + value-unit，小数位 value-decimals。
   • 状态色 state-by-value: true + state-rules：按值文本换主体颜色（见下）。
   • 阈值填充 fill-by-value: true + fill-th1 / fill-th2：低 / 中 / 高三段色。
   • 值 → 高度 height-by-value: true + height-in-min/max：把值映射为图元高度（自制柱状效果）。

状态规则 state-rules 语法——每行一条 匹配值=颜色，多个匹配值用 | 分隔，无 = 左侧的行为兜底色：

run|1=#22c55e     ← 值为 "run" 或 "1" 时绿色
stop|0=#94a3b8    ← 值为 "stop" 或 "0" 时灰色
fault=#ef4444     ← 值为 "fault" 时红色

编辑态调试：真实测点没接上之前，开 mock-enabled: true + mock-value（如 65）即可在编辑器 / 文档预览里看到液面 / 指针 / 状态色效果；运行态 mock 自动失效，换用真实测点值。

属性

属性	名称	类型	默认	说明
shape	形状	select	rect	可选：rect / round-rect / circle / ellipse / diamond / triangle / valve / pump / tank / motor / sensor / gauge / indicator / pipe / knife-switch / toggle-switch / breaker / resistor / capacitor / inductor / diode / ground / thermometer / flow-meter / fan / conveyor / heat-exchanger / filter / ball-valve / check-valve / pipe-elbow / pipe-tee / sphere-tank / tank-horizontal / silo / mixer / compressor / cooling-tower / boiler / battery / solar-panel / transformer / level-bar / progress-bar / gate-valve / butterfly-valve / three-way-valve / hopper / distillation-column / vfd / generator / beacon / globe-valve / safety-valve / solenoid-valve / control-valve / reducer / flange / pipe-cross / turbine / plate-exchanger / cyclone / transmitter / pilot-light / digital-display / fuse / wind-turbine / busbar / disconnector / current-transformer / voltage-transformer / surge-arrester / energy-meter / inverter / load / grid-tower / fuel-cell / ev-charger / pump-jack / flare-stack / wellhead / clarifier / aeration-tank / bar-screen / uv-reactor / dosing-pump / digester / ahu / chiller / cooling-coil / damper / fan-coil / duct / fx-fire / fx-smoke / fx-steam / fx-spark / fx-bubbles / fx-rain / fx-snow / fx-fog / fx-cloud / fx-sun / fx-lightning / svg-path / iso-cube / iso-platform / iso-zone / iso-tank / iso-tank-h / iso-box / iso-conveyor / iso-rack / iso-building / iso-cooling-tower / iso-pump / iso-pipe-support / iso-wall / iso-stack / iso-pool / iso-solar / iso-transformer / iso-ess-container / iso-shelf / iso-container / iso-agv / iso-robot-arm / iso-machine / iso-truck / iso-tree / iso-road
node-text	文本	string	—
svg-graphic	SVG 图形	scada-svg	—
svg-fit	缩放方式	select	contain	可选：contain / stretch
svg-path	自定义路径(d)	string(textarea,rows=3)	—
svg-viewbox	源viewBox	string	—
svg-els	符号元素(JSON)	string	—
svg-src	SVG源码	string	—
geo-x	X	number(unit=px)	40
geo-y	Y	number(unit=px)	40
geo-w	宽	number(unit=px,min=4)	120
geo-h	高	number(unit=px,min=4)	64
geo-rotate	旋转	number(unit=°,min=-360,max=360)	0
iso-plane	等轴测投影	select	—	可选：`` / floor / wall-l / wall-r
fill	填充	color	—
stroke	描边	color	—
accent	强调色	color	—
material	材质	select	—	可选：`` / metal / glass / plastic / matte / flat
ground-shadow	落地阴影	boolean	false
line-width	描边宽	number(unit=px,min=0)	2
opacity	不透明度	slider(min=0,max=100,step=1,unit=%)	100
text-color	文字色	color	—
font-size	字号	number(unit=px,min=6)	12
anim	动画	select	none	可选：none / blink / pulse / spin / shake / bounce / sway / flash / breathe / float / wobble / ripple / glow（光晕用强调色画在图元外侧）
anim-speed	速度	number(min=0.1,max=20,step=0.1)	1
fx-density	密度	slider(min=1,max=5,step=1)	3
fx-speed	速度	number(min=0.1,max=10,step=0.1)	1
fx-size	粒子大小	number(min=0.2,max=5,step=0.1)	1
fx-color	颜色	color	—
fx-seed	随机种子	number(min=0,step=1)	0
row-row-filter-mode-id	选择数据规则	select(condition)	—
data-enabled	启用	boolean	false
data-key	测点键	select(editable)	—
mock-enabled	编辑预览Mock	boolean	false
mock-value	Mock值	string	—
value-min	量程下限	number	0
value-max	量程上限	number	100
liquid-wave	液面波浪	boolean	false
show-value-text	数值文本	boolean	true
value-decimals	小数位	number(min=0,max=6,step=1)	0
value-unit	单位	string	—
state-by-value	状态色映射	boolean	false
anim-by-value	按值动画	boolean	false
anim-rules	动画规则	string(textarea,rows=4)	run|1=spin:1.5 stop|0=none fault=shake
anim-speed-by-value	按值动画速度	boolean	false
speed-in-min	输入下限	number	0
speed-in-max	输入上限	number	100
speed-out-min	速度下限	number(min=0.1,max=20,step=0.1)	0.5
speed-out-max	速度上限	number(min=0.1,max=20,step=0.1)	3
fill-by-value	按值填充	boolean	false
fill-th1	阈值1	number	30
fill-th2	阈值2	number	70
fill-low	低档色	color	#1f9d55
fill-mid	中档色	color	#e0a106
fill-high	高档色	color	#d64545
height-by-value	按值高度	boolean	false
height-in-min	输入下限	number	0
height-in-max	输入上限	number	100
height-out-min	高度下限	number(unit=px,min=1)	8
height-out-max	高度上限	number(unit=px,min=1)	120
rotate-by-value	按值旋转	boolean	false
rotate-in-min	输入下限	number	0
rotate-in-max	输入上限	number	100
rotate-deg-min	角度下限	number(unit=°,min=-1080,max=1080)	0
rotate-deg-max	角度上限	number(unit=°,min=-1080,max=1080)	90
move-by-value	按值移动	boolean	false
move-in-min	输入下限	number	0
move-in-max	输入上限	number	100
move-x-min	X位移起点	number(unit=px)	0
move-x-max	X位移终点	number(unit=px)	0
move-y-min	Y位移起点	number(unit=px)	0
move-y-max	Y位移终点	number(unit=px)	-100
scale-by-value	按值缩放	boolean	false
scale-in-min	输入下限	number	0
scale-in-max	输入上限	number	100
scale-out-min	缩放下限	number(min=0,max=10,step=0.05)	0.5
scale-out-max	缩放上限	number(min=0,max=10,step=0.05)	1.5
value-tween	值变化补间	number(unit=ms,min=0,max=5000,step=50)	300
visible-by-value	按值显隐	boolean	false
visible-rules	显隐规则	string(textarea,rows=3)	1=show 0=hide

事件

触发器	名称	配在哪	payload
scada-node-click	点击图元	scada-2d 组件的 options.interactions（可选目标图元 uid）	{nodeUid, name, shape, dataKey, value}
scada-node-dblclick	双击图元	同上	同上

事件写在组态组件上而非图元上；动作可用 scadaWritePoint（写测点）、scadaSetOption（改图元选项，如指定图像集第几张）及全部通用动作，见事件交互。

示例

{
  "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
  }
}

延伸阅读：组态 SCADA 子系统（结构 / 主题 / 测点数据模型 / 形状库）· 数据系统 · 事件交互。