HMI触屏网关-创建第二个组态

上文：HMI触屏网关-创建第一个组态-CSDN博客

概述

本章节在“创建第一个组态”的基础上深入展开，旨在进一步增强用户对VISION各项功能的掌握程度，并逐步引领用户深刻理解与体验VISION所具备的高度自由性与广泛适用性。

了解构建组态界面的流程

1.需求分析与规划

本项目需要提供下列可视化界面：

• • 供能历史曲线
  • 能耗排名条形图
  • 设备故障统计条形图
  • 供能数据统计报表
  • 设备工艺流程界面
  • 故障报警提示

2.系统架构设计

本项目仅演示一个界面。

3.组件设计与开发

• VISION为用户提供了丰富的组件以及各种风格的素材。

• 用户可以根据现有的形状组件组合成不同的效果。

• 用户也可根据实际需求上传素材。对于svg，下面是一份标准的文件以供用户参考对比。

4.界面布局设计

5.交互设计

• • 图表支持手动刷新、手动查询
  • 支持通过组态控制指定设备
  • 支持提示窗口

6.组态实现

7.测试

组态实现

📍组态实现初期不必太过严格要求各组件的位置，等到形成一定效果后再来调整各组件的位置更为妥当。

📍组态实现初期建议"前后端分离设计"，即先实现效果，最后再绑定数据源。

标题区域

时间和日期

图表区域

历史曲线

能耗排名

故障统计

数据报表

控制面板

注意:绘制图形时最好主动命名，以便绑定数据源是快速找到相应的图形

1.绘制"按键"

2.绘制"控制泵"背景

3.添加"控制泵"面板

4.自定义小组件

建议根据风格自行设计小组件。

注意：在部分提供了触摸屏的设备上，大量使用"仪表盘"组件且绑定了数据源会导致界面卡顿。

5.组合绘制

创建"分离式"数据源

绑定按键

绑定按键数据源

制作按键效果

组件可见度绑定

通过按键切换部分组件的可见度。

注意

请针对单个实现图形填充、边框的属性绑定。通过 组 实现的图形无法绑定属性。

部分svg源文件设定了属性，也无法通过绑定来改变属性的值。

使用脚本呈现数据源状态

本例中，当NO.1补水泵和NO.2补水泵中任一启动时，水箱即出水，两者为 或 关系 。

新建变量 <水箱出水> = NO.1补水泵 | NO.2补水泵

*通过脚本模拟水位自动化

本单元主要用于模拟一些 阈值 场景。

1.项目中每隔1s运行一次脚本，判断各种阈值状态

1.1. 单个补水泵单元时间消耗 1% 水箱液位。

1.2. 水箱液位 80 ~100 时，电磁阀 开度 0。

1.3.水箱液位 60 ~80 时，开启电磁阀 50 %，自来水接入。

1.4.水箱液位 0 ~60 时，自流井接入,开启电磁阀 90 %。

1.6.自来水接入时，水位单元时间 增加 1%

1.7.自流井接入时，水位单元时间 增加 3%

let water_level = $getTag('t_9b483f41-020e455c' /* VISION Server - level-水箱液位-percentage */);
let valeve1 = $getTag('t_c79eadb7-3ac2452b' /* VISION Server - switch-NO.1补水泵-启停 */);
let valeve2 =$getTag('t_9bae97b5-3f7a4642' /* VISION Server - switch-NO.2补水泵-启停 */);

if(valeve1 == true)
{
	water_level = water_level-1;
}


if(valeve2 == true)
{
	water_level = water_level-1;
}
if(water_level > 80 && water_level <=100)
{
	$setTag('t_bd223262-36d4405b' /* VISION Server - valve-水箱电磁阀-开合度 */,0 );
	$setTag('t_a6b5ea4d-56ba49ba' /* VISION Server - switch-深井泵-启停 */, false);
}
else if(water_level > 60 && water_level <=80)
{
	$setTag('t_bd223262-36d4405b' /* VISION Server - valve-水箱电磁阀-开合度 */,50 );
    water_level = water_level+1;
}
else if(water_level > 0 && water_level <=60)
{

    $setTag('t_a6b5ea4d-56ba49ba' /* VISION Server - switch-深井泵-启停 */, true);
  

}

if($getTag('t_a6b5ea4d-56ba49ba' /* VISION Server - switch-深井泵-启停 */)==true)
{
  	 $setTag('t_bd223262-36d4405b' /* VISION Server - valve-水箱电磁阀-开合度 */,90 );
     water_level = water_level+3;
}
$setTag('t_9b483f41-020e455c' /* VISION Server - level-水箱液位-percentage */, water_level);

*通过脚本实现自动化

参考：边缘计算网关_PLC网关_RTU-成都纵横智控W