跳到主要内容
版本：Next

页面参数-画面模板

1.概述​

​ 页面中元素相同，唯独绑定的数据不同，此时可通过参数控制，动态生成对应内容显示，可满足以下功能：

  • 画面模板：页面参数可用于动态生成内容，例如：一个电机模板页面可通过参数传递电机号，以显示对应电机实例的信息；
  • 数据传递：将数据传递至页面，根据参数值显示不同的内容，例如：一个产品详情页面可以通过参数传递产品ID，以显示相应的产品信息；

2.应用说明(以画面模板为例)​

本处以“画面模板”功能为例，为您介绍页面参数的使用

2.1构建参数化页面（创建画面模板）​

第一步：定义页面参数​

  • 将页面动态部分定义为页面参数，如“电机号”

  • 操作：选中页面，在右侧属性栏-页面参数处，点击[添加]按钮，输入页面参数名称；

    image-20231019172415357

第二步：绑定页面参数​

  • 页面元素动态化，由"固定格式"拼接"页面参数"实现动态效果，如[电机状态灯]动态绑定变量为"Motor"+$getParams()["MotorNumber"]+"_State"

    注：后续复用时可控制“电机号”参数的值，如设定电机号=1，此时动态关联了Motor1_State变量

  • 操作：

    a）文本类组件：文本内容动态显示，如电机标题（静态文本），您可通过表达式动态生成文本内容，如"电机"+$getParams()["电机号"]

    image-20231019174817834

    b）读写组件：变量动态关联，如电机状态灯，您可通过表达式动态绑定变量，

    通过**$vars[变量名]**声明变量，表示绑定该变量的值，其中变量名通过'静态字符'+$参数拼接

    $vars[
    'Motor'+$getParams()["电机号"]+'_state'
    ]

    image-20231020111104311

    注：

    i. 字符串需使用英文单引号或双引号，如"str" 'str'

    ii.实际使用过程中表达式非硬性分行，本处分行只是便于观察结构，$vars[ 'Motor'+$getParams()["电机号"]+'_state' ]同样适用

2.2 传参页面动态化（应用画面模板）​

第三步：设置页面参数值​

​ 当需复用画面时，关联所构建的参数化页面（画面模板），设置对应的参数值，实现页面复用动态效果。如按钮1/2/3点击分别弹窗查看电机1/2/3的监控页面，每个按钮都关联电机监控模板页面，分别设置，弹出的页面“MotorNumber”（电机号）=1/2/3。

案例1：复用整个画面​

项目中存在大量相同部件，其监控画面相同，唯一更改的是绑定的数据，期望复用画面，对应点击部件显示对应部件的信息

按钮点击式：点击按钮弹出查看对应设备监控页面

image-20231020111407314

按钮式案例效果

下拉选择式：下拉选择查看对应设备监控页面

image-20231020111702369

下拉式案例效果

案例2：画面中部分组件复用​

项目内存在相同设备，其组态布局一致变量关联不同，期望引用模板，根据实际需要更改即完成配置

平铺式：画面中存在多个相同部件平铺展示，每个组件引用模板（容器关联模板页面），进行模板实例（设置页面参数值）。

image-20231020113014228