一文了解边缘计算网关利用VISION构建web组态界面的流程

在之前的文章中，我们介绍了VISION WEB组态软件，它是一款功能强大的组态软件，可基于浏览器操作，通过简单的拖拉拽，就可以快速创建高度个性化的数据可视化界面，非常的简单易用。在纵横智控的EG8200pro边缘计算网关和EV8010 HMI工控一体机网关中，都能支持VISION，方便用户对物联网应用中的数据做可视化展示和分析。那么，接下来我们通过搭建【换热站监控系统】界面为例，介绍一下利用VISION构建web组态界面的流程。

一、构建组态界面的流程

1.1 需求分析与规划

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

供能历史曲线

能耗排名条形图

设备故障统计条形图

供能数据统计报表

设备工艺流程界面

故障报警提示

1.2 系统架构设计

本项目仅演示一个界面。

1.3 组件设计与开发

VISION为用户提供了丰富的组件以及各种风格的素材，用户可以根据现有的形状组件组合成不同的效果或者根据实际需求上传素材。

1.4 界面布局设计

1.5 交互设计

图表支持手动刷新、手动查询

支持通过组态控制指定设备

支持提示窗口

1.6 组态实现

下面第2章节，我们将单独对组态实现做详细操作介绍。

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

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

1.7 测试

对最后的界面进行功能与性能测试，保障能够满足所需功能。

二、WEB组态界面的实现步骤

2.1 添加时间和日期

2.2 添加历史曲线

拖拽左侧的组建到右侧画布中，添加文字，调整位置、大小、颜色、透明度等。其他部件也是这样一个个添加到画布中。

2.3 自定义小组件

用户可根据风格自行设计小组件。

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

2.4 界面效果

当把所有组件都摆放并调整好之后，我们就得到了一个界面，此时，界面是“死”的，因为我们还没有绑定任何数据源，也没有设置任何交互。

2.5 创建"分离式"数据源

点击左上角设置按钮，并在弹出的页面中，添加数据源。

2.6 绑定按键数据源

点击设置，点击链接，选择一个数据源；

在画布中点击要绑定数据源的按钮，点击右侧属性按钮，在弹出的设置页面-事件中，选择动作、值、是哪个数据源，点击确定按钮；

点击左上角保存按钮，保存项目。

2.7 设置按钮选中状态

点击选中按钮，再点击右侧属性按钮，即可进入编辑页面。在编辑页面中，点击属性，点击右侧添加一条属性，填写颜色、透明度等，完成按钮的选中状态下的显示设置。

2.8 使用脚本呈现数据源状态

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

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

首先点击设置，进入脚本页面，设置好脚本；

再进入视图，点击某个需要控制的组建-属性-事件，选择对应的事件与脚本，并保存。

PS：

通过脚本模拟水位自动化

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

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);