TopStack 文档

主题

图纸模板 ​

图纸模板主要用于以下几种使用场景，以达到图纸复用的目的：

  • 多个设备共用同一张图纸，比如通过点击设备进入设备详情页或者弹窗方式显示设备详情。
  • 通过变量替换，实现多条产线或车间共用一张图纸。

下面我们分别来介绍这两种使用场景的实现。

基于设备制作模板 ​

本教程我们将基于设备图纸模板实现一套储油罐监测的组态画面。

准备工作

提前制作好两个图标，一个用于导航显示，一个用于显示详情： image.pngimage.png 左侧为用于导航的图标，右侧为用于显示详情信息的图标。

新建储油罐详情画面

  1. 新建图纸，将图纸类型设置为【设备模板】，并选择储油罐对应的设备模型。

image.png

  1. 将储油罐图标和面板图标拖到图纸中。
  2. 分别选中储油罐和面板图标，将相应的数据绑定到设备模板的测点上。
image.png

新建导航画面

首先新建图纸，绘制一个储油罐导航画面，本教程中我们放置了 4 个储油罐图标。

image.png

分别选中每个储油罐，绑定相应的设备，如果图标里封装了测点属性，可以进一步绑定相应的测点。

image.png

分别选中每个储油罐，并设置交互动作为弹出画面，画面选择之前创建好的详情画面。

image.png

点击预览按钮，在预览窗口中点击储油罐图标，会自动弹出相应的详情画面，如下图所示：

image.png

基于变量替换制作模板 ​

通过变量替换实现的图纸模板，适合于更灵活的场景，用户可以通过编写脚本自定义模板的实现方式。

新建模板图纸

新建图纸，将图纸类型设置为模板。 image.png

编辑变量替换脚本

点击“绑定ID转换”编辑按钮，设置绑定变量的转换脚本。

在运行该图纸时，需要将用到的变量值传过去，对模板中的 bindingID 进行批量替换。点击绑定 ID 转换，在窗口中编写脚本，获取弹窗中的附加参数进行替换。

image.png
javascript
// 每个图纸都可以单独发布，可以从发布的 url 地址中获取相应的参数
var deviceID= window.iotopo.utils.getQueryString('deviceID')
if (deviceID) {
// 将绑定中绑定的 bindingID 前缀替换为实际设备 ID
// bindingID 的组成规则一般为 {deviceID}.{pointID} 这样的形式
return bindingID.replace('000000', deviceID)
}
// 如果不是设备图标，则正常返回原 bindingID
return bindingID