创建纯水净化系统组态页面


组态页面常用于构建设备运行状况的实时组态页面。本教程以纯水净化系统的智能监控为示例场景,实现氮封水箱液位、碳罐阀门开关状态及高压泵进水阀的交互跳转等设备数据的实时监控。


../_images/finish.png


教程目标


通过本教程,你将学习如何在组态页面中创建纯水净化系统组态页面及相关数据绑定。

前提条件


  • 确保你已经在 EnOS 注册了个人账户或企业账户,以访问 EnOS 管理控制台和 EnOS 应用门户。

  • 确保帐户已被分配 设备连接和管理时序数据管理数字孪生可视化 菜单的访问权限。

  • 确保当前 OU 已有 EDT_纯水系统 资产并已配置 TSDB 存储策略,参见 准备模拟数据

  • 确保当前 OU 的 EDT_纯水系统 资产已挂载至 Trainee Tree 资产树下,参见 新建资产树 文档。

  • 确保当前 OU 的 数字孪生可视化 > DTV 中心 > 组态页面 中已有 Training 文件夹,并在文件夹中已有 纯水模板阀门弹窗 图纸。若无,你可以下载 panel_PureWater.zippanel_Valve.zip 导入模板。因该模板附带图纸路径信息,将会自动导入至 Training 文件夹下。若当前 OU 不存在 Training 文件夹,则会自动创建该文件夹。有关导入模板的更多信息,参见 导出与导入图纸

步骤 1:创建图纸


在配置图元前,需要创建一个图纸来摆放图元。

  1. 登录 EnOS 应用门户,选择 数字孪生可视化

  2. 在左侧导航栏中,选择 DTV 中心 > 组态页面

  3. 选择 图纸根目录 > Training,在左侧预览区空白处点击右键,选择 新建文件夹


    ../_images/createfolder.png


  4. 在弹窗中,确认文件夹的路径为 displays/Training,输入文件夹名称 Demo

  5. 点击 确定 创建文件夹,可在侧边栏的 图纸根目录 列表中查看新文件夹。

  6. 选择左侧预览区的 纯水模板 图纸,点击右键并选择 拷贝

  7. 选择 Demo 进入该文件夹。

  8. 在左侧预览区空白处点击右键,并选择 粘贴,即可在侧边栏的 Demo 文件夹下查看到该 纯水模板 图纸。


    ../_images/paste.png


步骤 2:绑定资产


新的文件夹与图纸已成功创建,现在你可以对图纸进行资产绑定。根据以下步骤完成纯水系统的资产数据与纯水图纸连接。

  1. 双击 纯水模板 进入图纸设置。

  2. 选择右上方工具栏中的 资产绑定 bind 打开弹窗,选择 添加资产

  3. 选择 Trainee Tree 标签(资产所挂的资产树)。

  4. 搜索 EDT_纯水系统 并选择该资产。

  5. 选择 确定,可看到资产已展示在资产列表中。

  6. 选择 确定 完成图纸的资产绑定。

步骤 3:添加与配置图元


创建图纸并绑定资产后,你可以在页面中添加和编辑图元组件,将数据与图元组件进行绑定。组态页面提供丰富的图元类型,帮助你以最合适的方式对数据进行展示。

绑定图元数据


根据以下步骤完成氮封水箱的液位下方的文本内容与纯水系统的氮封水箱液位测点数据绑定,使组态页面可以实时显示该真实数据。

  1. 选择 氮封水箱 > 液位显示 下方的数值,进入图元编辑态。


    ../_images/clicknumber.png


    备注

    请确保选中文本图元,不为数值区域底部的橙色色块。


  2. 选择右侧 图纸设置 > 文本 > 内容 配置项右方的连接按钮 connect,打开数据绑定弹窗。

  3. 选择 添加数据 进入数据选择弹窗。

  4. 选择 EDT_纯水系统 资产,选择 测点 标签,进入测点列表。

  5. 在右上方搜索 氮封水箱液位,选择该测点。

  6. 选择 确定,将该测点数据与文本图元绑定。

  7. 添加的测点已显示在数据列表中,数据编号为 v1。在函数编辑区添加逻辑代码 return Number(v1).toFixed(2),使文本内容为返回的测点数据,并保留小数点后两位。


    ../_images/binddata.png


  8. 选择 确定 完成图元的数据绑定。

  9. 选择图纸右上角保存按钮 save 保存图纸后,选择 预览 preview 进行预览,即可看到该图元绑定数据后的效果。


    ../_images/preview2.png


绑定图元业务属性


根据以下步骤完成砂罐正进阀的阀门与纯水系统的碳进水电动阀开关状态测点数据绑定,使组态页面可以实时显示阀门状态。

  1. 砂罐的上排阀的阀门 图元复制到 正进阀 下。


    ../_images/valve.png


  2. 选择该图元,勾选右侧 图纸设置 > 基础 > state 开启该图元的业务属性。将阀门的开关状态与背景颜色进行关联,开启时为蓝色,关闭时为灰色。

  3. 选择右侧 图纸设置 > 基础 > state 配置项右侧的连接按钮 connect,打开数据绑定弹窗。

  4. 选择 添加数据 进入数据选择弹窗。

  5. 选择 EDT_纯水系统 资产,选择 测点 标签,进入测点列表。

  6. 在右上方搜索 碳进水电动阀开到位,选择该测点。

  7. 添加的测点已显示在数据列表中,数据编号为v1。在函数编辑区添加逻辑代码 return v1

  8. 选择 确定 即完成图元的数据绑定。

  9. 选择图纸右上角保存按钮 save 保存图纸后,选择 预览 preview 进行预览,即可看到该图元绑定数据后的效果。


    ../_images/preview21.png


绑定图元交互事件


根据以下步骤完成配置高压泵进水阀的交互事件,选择高压泵进水阀后可出现弹窗。

  1. 选择 高压泵进水阀 图元,进入图元编辑态。


    ../_images/pump.png


  2. 在右侧 图纸设置 > 交互 > 交互列表 选择 添加交互,进入交互配置弹窗。

    • 事件点击

    • 动作打开新页面

    • 目标页面Training > 阀门弹窗

    • 替换目标页资产a1

    • 打开方式弹窗打开

    • 弹窗大小:宽 640px,高 480px

  3. 选择 确定 完成交互配置。

  4. 选择图纸右上角保存按钮 save 保存图纸后,选择 预览 preview 进行预览。

  5. 选择 高压泵进水阀 图元,即可看到弹窗。


    ../_images/preview3.png


步骤 4:获取图纸 URL


  1. 图纸编辑完成并选择保存按钮 save 后,选择右上方工具栏 预览 preview ,进入预览弹窗。

  2. 选择 复制URL URL 即可复制该页面的 URL,用于嵌入其他页面中使用。