TopStack 文档

主题

配置交互 ​

预置交互动作 ​

在组态编辑右侧面板中，选择交互 Tab，点击展开“预置动作”面板，可设置预置的交互动作。 交互动作采用的是触发事件 + 执行动作的模式，可通过单击、双击、按下、抬起等事件来触发预置的动作。 image.png

切换画面 ​

触发事件时，将当前图纸的画面切换到其它图纸内容。 image.png附加参数 脚本中 return 的对象就是附加参数，在目标图纸的初始化脚本里，可以通过 dm.a('extraParams') 获取附加参数。 设备信息（v5.1.2） 如果事件源绑定了设备，则会自动将设备信息传递到切换到的画面中，可以在初始化脚本里，通过 dm.a('device') 获取设备信息。

javascript
var device = dm.a('device')
console.log(device.id)

弹出画面 ​

触发事件时，以弹窗方式显示一个图纸画面。 image.png附加参数 脚本中 return 的对象就是附加参数，在弹出图纸的初始化脚本里，可以通过 dm.a('extraParams') 获取附加参数。 设备信息（v5.1.2） 如果事件源绑定了设备，则会自动将设备信息传递到弹窗的画面中，可以在初始化脚本里，通过 dm.a('device') 获取设备信息。

javascript
var device = dm.a('device')
console.log(device.id)

关闭弹窗 在弹窗图纸中，可通过脚本方式关闭弹窗：gv.pageHandler.closeParentDialog。

界面回退 ​

触发事件时，将当前画面回退到上一个画面，可与切换画面配合使用。

闪烁复归 ​

触发事件时，停止当前画面中的闪烁动画，可与闪烁动画配合使用。

控制输出 ​

触发事件时，执行控制指令下发，支持二次确认和预置下发值。 image.png

打开链接 ​

触发事件时，弹窗或在新窗口打开新的页面。 image.png

历史回放 ​

触发事件时，切换为历史回放模式，通过调取历史数据可实现不同时间点的图形画面同步更新。 在历史回放模式下，时间范围可选、回放速度可调、可暂停。可用于事故分析、操作示范、案例分析、启停机过程分析等场景。

自定义交互 ​

如果平台提供的预置交互动作，无法满足使用需求，我们可以通过脚本方式自定义交互内容。

启用自定义交互 ​

选中图元，在组态编辑器右侧面板中，选择样式 Tab，点击展开“控制”面板，使第一行中的“可交互”处于选中状态。 image.png

编写交互脚本 ​

启用自定义交互后，点击 左侧的“事件处理”按钮，弹出交互脚本对话框。 image.pngimage.png

示例：通过自定义事件实现鼠标光标变化 鼠标移入时，执行 view.getView().style.cursor = 'pointer' 鼠标移出时，执行 view.getView().style.cursor = 'default'

图标内部配置交互 ​

用户自定义图标时，可以在图标内部配置交互。 默认情况下图标是不支持交互的，首先需要开启图标交互功能，操作步骤如下：

  1. 在组态编辑器中，点击左侧面板的图标Tab。
  2. 在图标列表中双击该图标，打开图标编辑器。
  3. 在右侧属性面板中，点击展开“控制”面板。
  4. 勾选“可交互”选项，开启图标交互功能。

image.png

图标整体交互 ​

在图标编辑器中，按如下步骤配置图标内部元素的交互事件：

  1. 在右侧属性面板中，点击展开“控制”面板。
  2. 点击“事件处理”按钮，弹出交互脚本对话框。

image.png

内部元素交互 ​

在图标编辑器中，按如下步骤配置图标内部元素的交互事件：

  1. 在右侧元素列表中选中其中一项元素。
  2. 在右侧属性面板中，点击展开“控制”面板。
  3. 点击“事件处理”按钮，弹出交互脚本对话框。

image.png