跳到主要内容
版本：Next

自定义模板

1. 概述​

模板 是从创新版 v2.40.0 或 LTS 26H1 开始提供的新版模板功能。它将可复用的界面内容抽象为主模板，通过模板参数完成实例化，实现“一处设计、多处复用、统一维护”。

模板适用于大量重复设备、标准化页面和批量复用场景。例如多个电机面板、多个阀门控制面板、多个工位监控区块，都可以通过同一个模板快速生成实例，并在后续集中维护。

2. 功能价值​

  • 一次设计，多处复用：同一套界面结构可在多个页面或区域重复使用，无需重复搭建。
  • 统一维护，自动同步：修改主模板后，所有实例自动更新，减少重复修改工作。
  • 降低配置成本：只需关注实例之间变化的参数，不必为每个副本重新绑定全部内容。
  • 提升标准化程度：可与自定义数据类型（UDT）结合，形成统一的数据结构和统一的页面样式。
  • 适合大规模工程：当项目中存在大量相似设备或相同监控单元时，模板能显著提升开发和维护效率。

3. 操作说明​

3.1 创建模板​

在模板库中创建空白模板后，即可在模板画布中拖拽组件并完成布局设计。

以创建“电机”模板为例，可按以下步骤完成模板内容搭建：

  • 创建一个名称为“电机”的模板，作为多个电机实例的统一复用模板。
  • 拖拽静态文本组件，显示电机名称。
  • 拖拽动态图片组件，显示电机启动状态。
  • 拖拽读写组件，显示并控制电机转速。

image-20260604191600135

3.2 配置模板参数​

方式一：传入实例值（通用方式）​

仍以电机模板为例。模板中的电机名称、启动状态、转速控制界面结构相同，变化的只是它们关联的变量。此时可将“电机号”抽为模板参数，创建实例时传入不同电机号，模板内部再按统一命名规则自动拼接对应变量，从而实现同一模板复用到多个电机。

第一步：定义模板参数​

  • 选中模板画布，在右侧属性栏-模板参数处，点击[添加]按钮，输入参数名称 MotorNum。

    image-20260604193838158

第二步：绑定模板参数​

a）标题文本：根据 MotorNum 动态显示电机名称。

"电机"+$this.parent.params.MotorNum

b）关联变量：根据 MotorNum 动态关联电机启动状态、转速变量。

$vars[
  "Motor"+$this.parent.params.MotorNum+"_state"
]

电机转速变量也可按同样方式绑定，例如：

$vars[
  "Motor"+$this.parent.params.MotorNum+"_speed"
]

第三步：设置参数值​

  • 创建实例时，分别传入 MotorNum=1、MotorNum=2、MotorNum=3，模板会自动对应到 Motor1、Motor2、Motor3 的相关变量。

    image-20260604205226346

示例：

模板参数：MotorNum
标题文本："电机"+$this.parent.params.MotorNum
状态灯：$vars["Motor"+$this.parent.params.MotorNum+"_state"]
转速：$vars["Motor"+$this.parent.params.MotorNum+"_speed"]

实例1：MotorNum=1
实例2：MotorNum=2
实例3：MotorNum=3

方式二：传入自定义数据类型（UDT）引用​

适用场景：项目中已定义电机结构体变量，或数据结构已标准化为 UDT。

该方式可直接绑定对象下的元素变量，无需再通过字符串拼接变量名，配置更直观，后续维护也更方便。

仍以电机模板为例。若项目中已定义 Motor1、Motor2、Motor3 等电机结构体变量，可先选取其中一个对象完成模板配置。模板参数保存当前引用的电机对象，模板内的标题文本、状态组件、转速组件都绑定该对象下的元素变量。后续创建实例时，只需将模板参数改为其他电机对象，即可整体切换到对应电机的数据，实现模板动态化。

第一步：定义模板参数​

  • 选中模板画布，在右侧属性栏-模板参数处，点击[添加]按钮，新增模板参数 MotorUDT，并将初始值绑定为 Motor1。

    image-20260604221945656

第二步：绑定模板参数​

a）标题文本：以初始对象 Motor1 完成标题配置，例如直接输入 "Motor1"。

image-20260604222103291

b）关联变量：将模板内元素绑定到 Motor1 下的元素变量，例如状态组件关联 Motor1.state，转速组件关联 Motor1.speed。

image-20260604222205027

注意：模板元素需与模板参数初始值保持一致。若初始值绑定为 Motor1，则模板内元素也应绑定 Motor1 下的元素变量。

第三步：绑定对象​

  • 创建实例时，可分别绑定到 Motor1、Motor2、Motor3 等结构体变量，模板会整体切换到对应对象的状态、转速变量。

    image-20260604223243982

示例：

模板参数：MotorUDT
初始值：Motor1
标题文本：Motor1
状态灯：Motor1.state
转速：Motor1.speed

实例1：绑定 Motor1
实例2：绑定 Motor2
实例3：绑定 Motor3

3.3 应用模板​

完成模板设计后，可从模板库中将模板拖入页面，在实例上分别配置参数值或绑定结构体对象，即可生成多个实例。

仍以电机 Motor 模板为例，可在页面中创建多个实例，分别对应 Motor1、Motor2、Motor3、从而快速生成多个电机监控单元。

image-20260604223521128

选中某个实例后，可在右侧直接修改该实例的参数值，或切换绑定对象：

image-20260604223542201

3.4 统一维护模板​

模板支持两种编辑入口：

  • 在模板库中选中模板；
  • 在页面中双击任意模板实例。

进入编辑后，修改的是主模板本身。保存后，所有引用该模板的实例都会自动同步更新，无需逐个实例单独调整。

4. 注意事项​

  • 本功能从创新版 v2.40.0 或 LTS 26H1 开始支持，如果低版本可参考下述方案

  • 如果需要运行时动态控制模板实例，可设置控制模板实例组件的参数

    例如：页面中放置一个电机模板实例 电机UDT1，并在其上方放置 M1、M2、M3 三个按钮。可通过按钮组件的关联变量或选项值，动态设置模板实例参数 MotorUDT，使同一个模板实例在运行时切换显示 Motor1、Motor2、Motor3 对应的状态和转速数据。

    image-20260604224724377

    注意：如果为 UDT 方式模板，运行时设置参数对象时需要传入字符串，即需要加上引号，例如 "Motor1"、"Motor2"、"Motor3"。