面向用户: 项目经理 / 实施工程师 版本: v1.0

可切换组件通过绑定实时点位数据，驱动同一图形位置在多个预设状态之间自动切换，常用于设备运行状态、阀门开关、信号灯等的可视化呈现。本手册描述从素材准备到效果验证的端到端配置流程，并补充修改绑点与多点位绑定的进阶用法。

1 整体流程

图 1 可切换组件配置整体流程

2 选择基础图形元素

2.1 操作入口

打开 2D 组态编辑器，定位到左侧 「图形库」 面板，展开 「常用图形」 / 「基本形状」 / 「可切换组件」 等分类。

2.2 操作步骤

1. 从图形库中拖拽至少 3 个基础图形到画布中（例如：正方形、圆形、三角形），分别对应组件后续的不同显示状态。
2. 选中每个图形，在右侧属性面板中设置清晰、有区分度的名称。该名称将作为后续 「显示状态」 的取值，需与 5.2 配置显示规则 中填写的状态名称完全一致。

图 2 从图形库中拖入 3 个基础图形

3 组合为可切换组件

3.1 操作步骤

1. 在画布中框选已准备好的 3 个基础图形。
2. 右键单击选区，在菜单中选择 「组合为可切换组件」，多个独立图形即合并为一个可切换组件。

图 3 右键将多个图形组合为可切换组件

3.2 组合前的优化建议

组合前或组合时，可通过编辑器提供的以下能力优化呈现效果：

• 对齐方式：支持按参照框对齐，或按首个选中元素对齐。
• 图层管理：置顶、置底、上移、下移，避免图形之间互相遮挡。
• 样式调整：线型、线宽、渐变、透明度、填充色、字体字号与颜色等。

组合操作完成后若自动弹出绑点配置窗口，可直接跳至 5 配置点位与显示规则 继续操作，跳过 4 初始化绑点。

4 初始化绑点

4.1 操作步骤

1. 选中已组合完成的可切换组件。
2. 在右侧属性面板切换至 「数据」 页签。
3. 找到 「可切换组件绑点」 配置项，完成绑点的初始化与绑定，使组件具备接入点位数据并驱动状态切换的能力。

图 4 在 「数据」 页签初始化可切换组件绑点

4.2 外观可选配置

在 「外观」 页签中，可进一步调整组件的呈现效果：

5 配置点位与显示规则

本章是可切换组件配置的核心环节，决定 「什么值显示什么状态」。

5.1 绑定点位信息

在绑点配置面板中按系统实际字段填写目标点位信息：

Topic 通信地址 示例完整写法：

ws/device/90/9DQpiyceGi/modbus-slave-1

5.2 配置显示规则

在 「显示规则」 区域新增规则。每条规则包含三个要素：

图 5 在显示规则面板新增条件并指定目标状态

⚠️ 规则按 从上到下顺序匹配，命中第一条即生效，后续规则不再判断。规则顺序直接决定切换结果，请按业务优先级排列。

「显示状态」 取值需与组合前每个基础图形 「数据」 页签中的 「名称」 完全一致（区分大小写），否则组件无法正确切换，如下图所示：

图 6 显示状态名称必须与基础图形名称完全一致

5.3 规则操作

6 验证效果

配置完成后，当绑定点位的实时数值发生变化时，组件应依据预设规则自动切换到对应的显示状态。

6.1 切换示例

以 5.2 配置显示规则 中的规则为例：

6.2 效果观测

依次推送 1 / 2 / 3 三个值，组件应在三种状态间正确切换：

图 7 点位实时值为 1，组件切换为正方形

图 8 点位实时值为 2，组件切换为圆形

图 9 点位实时值为 3，组件切换为三角形

7 修改与多点位绑定

可切换组件除了为同一点位的不同值绑定状态外，还支持为不同的显示状态分别绑定不同的点位。本章描述两种进阶用法。

7.1 多点位绑定示例

为不同状态绑定不同点位时，每条规则指向各自的点位与触发值：

⚠️ 多点位绑定下，规则仍按 从上到下顺序匹配，命中第一条即生效。当多个点位的实时值同时满足条件时，靠上的规则优先生效，请根据业务优先级安排顺序。

7.2 初次绑定点位

为可切换组件首次绑定点位的操作界面：

图 10 首次为组件绑定点位的配置面板

7.3 修改已绑定的点位

需要重新选择或更换已绑定的点位时，按以下步骤操作：

1. 在绑点配置面板中定位到目标规则的点位字段。

   

   图 11 修改绑点 — 进入点位选择界面

2. 选择新的点位并确认保存。

   

   图 12 修改绑点 — 选择目标点位

7.4 验证绑定结果

修改绑点或完成多点位绑定后，组件根据新点位的实时数值驱动状态切换：

图 13 修改绑点后效果验证 — 状态 1

图 14 修改绑点后效果验证 — 状态 2

图 15 修改绑点后效果验证 — 状态 3