SCADA 符号开发指南

正文与配图来自原稿（官方 Fan 示例流程整理）。开发人员定义符号，最终用户把符号放进仪表盘。

1、关键概念

概念	说明
标签 (tag)	赋给 SVG 形状，挂渲染函数与 onClick
行为 (behavior)	从平台取数 / 向设备发动作
属性 (property)	给最终用户的外观配置（颜色、字体、单位等）
状态渲染函数	根据数据改 SVG
点击动作	onClick 逻辑
ScadaSymbolContext	JS 上下文：标签、行为、属性与辅助 API

示例目标：静态风扇 SVG → 可开关、可旋转、可显示转速的交互符号。

任务：On/Off 按钮改共享属性并支持配色；风扇按 fanOn 旋转；转速文本可配字体/单位，关闭时可隐藏。

2、步骤 1：上传 SVG

资源 → SCADA 符号 → 上传，命名如 Fan：

3、步骤 2：编辑器

左 SVG，右「常规 / 标签 / 行为 / 属性」。可创建部件、应用/撤销、预览：

填写 Title、Description、Search tags，设置合理行列比（如 3×3，避免怪异比例）：

4、步骤 3：标签

建议 camelCase。本例标签：onButton、onButtonBackground、onButtonText、offButton…、rotationSpeedText、fan。

复杂 SVG 可切 XML，用 tb:tag="..."：

<g tb:tag="onButton" ...>
  <rect tb:tag="onButtonBackground" .../>
  <text tb:tag="onButtonText" ...>...</text>
</g>

标签页可挂状态渲染与点击动作。

5、步骤 4：行为

典型配置：

1. 取值：订阅共享属性 fanOn（布尔）、时序 fanSpeed（Double）。
2. 动作：On 点击 → 设共享属性 fanOn=true；Off → false；可选打开 URL 等部件动作。

6、步骤 5：属性

为最终用户暴露：按钮文案、启用/禁用色、风扇开/关色、转速字体与单位等。Id 供渲染函数 ctx.properties.xxx 引用。

7、渲染与点击（要点）

• 状态渲染：根据 fanOn 旋转 fan path、改填充色；根据 fanSpeed 更新 rotationSpeedText；按钮背景用属性色。
• 点击：onButton / offButton 触发对应 behavior；可用 ctx.api 调用平台动作。

完整函数体以官方文档与原稿「标签函数」章节为准（编辑器内粘贴）。

8、预览与创建部件

预览：点「预览」——左侧 SVG、右侧配置。测 On：按钮灰掉、风扇变色旋转并显示转速；再点 Off 应停止。

「创建部件」→ 选/建部件包 → 添加。可下载含配置的 SCADA 符号 SVG。

仪表盘布局改为 SCADA，添加自建风扇部件并绑定设备验证。

9、小结

上传 SVG → 打标签 → 配行为与属性 → 写渲染/点击 → 预览 → 创建部件 → SCADA 布局试用。操作长图见 docs/public/blog/thingsboard-scada-symbol/。