面向用户: 组态实施 / 现场运维人员
本指南介绍在 2D 组态中,如何通过「点击触发组件显示目标组件」的方式,实现点击设备查看属性的交互效果。按本指南操作完成后,读者可以在 2D 组态画面中配置出「点击设备 → 弹出属性面板」的交互行为。
1 整体流程概览
图 1 整体配置流程
| 步骤 | 操作要点 | 对应章节 |
|---|---|---|
| 1. 选择触发组件 | 确定点击事件的主体 | 2 选择触发组件 |
| 2. 选择展示组件 | 确定属性数据的展示主体 | 3 选择展示组件 |
| 3. 隐藏展示组件并记录 ID | 将展示组件初始状态设为隐藏,并记录组件 ID | 4 隐藏展示组件并记录%20ID |
| 4. 添加单击事件 | 为触发组件绑定 JavaScript 事件 | 5 触发组件添加单击事件 |
2 选择触发组件
在 2D 组态画面中,选择一个组件作为触发事件的主体(即点击后会触发属性显示的设备图元)。
图 2 选择触发事件的主体组件
3 选择展示组件
选择一个组件作为数据展示的主体(即点击后用于显示属性内容的组件,例如属性面板、弹框、文本框等)。
图 3 选择数据展示的主体组件
4 隐藏展示组件并记录 ID
4.1 将展示组件隐藏
展示组件在页面初始加载时应处于隐藏状态,仅在触发事件后才显示。将步骤 3 中选定的组件属性设置为隐藏。
图 4 将展示组件设置为隐藏
4.2 记录展示组件 ID
记录该展示组件的 id,后续 JavaScript 事件中需要通过此 ID 引用组件。
图 5 记录展示组件的 ID
📌 本示例中记录到的 ID 为
45fe580,实际操作时请以自己画面中的真实 ID 为准。
5 触发组件添加单击事件
5.1 打开事件配置面板
选中步骤 2 中的触发组件,在属性面板中找到**「事件」配置项,点击「添加事件」**。
图 6 触发组件添加事件入口
5.2 填写事件参数
按下表填写事件的各项参数:
| 参数 | 取值 | 说明 |
|---|---|---|
| 事件类型 | 单击 | 在下拉菜单中选择**「单击」** |
| 事件行为 | 执行 JavaScript | 在下拉菜单中选择**「执行 JavaScript」** |
| JavaScript | 见 5.3 JavaScript 代码 | 将展示组件设为可见 |
| 函数参数 | 空 | 本场景无需传入参数 |
| 触发条件 | 无 | 本场景无条件约束,点击即触发 |
图 7 事件类型下拉菜单位置
5.3 JavaScript 代码
在 JavaScript 输入框中填入以下代码,通过组件 ID 找到展示组件,并将其设置为可见:
const targetPen_45fe580 = meta2d.findOne('45fe580');
meta2d.setVisible(targetPen_45fe580, true);
图 8 JavaScript 输入框填写效果
⚠️ 代码中的
45fe580需替换为 4.2 记录展示组件 ID 中实际记录到的 ID,否则事件无法生效。
💡 变量名建议采用
targetPen_<组件ID>的格式(如targetPen_45fe580)。同一页面存在多个类似事件时,不同变量名不可重复,否则后声明的变量会覆盖前者,导致事件相互干扰。
6 配置效果
配置完成后预览画面,初始状态下展示组件保持隐藏;单击**「圆」**组件后,展示组件显示出对应的设备数据。
图 9 初始状态:展示组件处于隐藏
图 10 单击「圆」组件后:展示组件显示设备数据