在之前的文章中，我們介紹了VISION WEB組態(tài)軟件，它是一款功能強(qiáng)大的組態(tài)軟件，可基于瀏覽器操作，通過簡(jiǎn)單的拖拉拽，就可以快速創(chuàng)建高度個(gè)性化的數(shù)據(jù)可視化界面，非常的簡(jiǎn)單易用。在縱橫智控的EG8200pro邊緣計(jì)算網(wǎng)關(guān)和EV8010 HMI工控一體機(jī)網(wǎng)關(guān)中，都能支持VISION，方便用戶對(duì)物聯(lián)網(wǎng)應(yīng)用中的數(shù)據(jù)做可視化展示和分析。那么，接下來我們通過搭建【換熱站監(jiān)控系統(tǒng)】界面為例，介紹一下利用VISION構(gòu)建web組態(tài)界面的流程。

一、構(gòu)建組態(tài)界面的流程

1.1 需求分析與規(guī)劃

本項(xiàng)目需要提供下列可視化界面：

供能歷史曲線

能耗排名條形圖

設(shè)備故障統(tǒng)計(jì)條形圖

供能數(shù)據(jù)統(tǒng)計(jì)報(bào)表

設(shè)備工藝流程界面

故障報(bào)警提示

1.2 系統(tǒng)架構(gòu)設(shè)計(jì)

本項(xiàng)目僅演示一個(gè)界面。

1.3 組件設(shè)計(jì)與開發(fā)

VISION為用戶提供了豐富的組件以及各種風(fēng)格的素材，用戶可以根據(jù)現(xiàn)有的形狀組件組合成不同的效果或者根據(jù)實(shí)際需求上傳素材。

1.4 界面布局設(shè)計(jì)

1.5 交互設(shè)計(jì)

圖表支持手動(dòng)刷新、手動(dòng)查詢

支持通過組態(tài)控制指定設(shè)備

支持提示窗口

1.6 組態(tài)實(shí)現(xiàn)

下面第2章節(jié)，我們將單獨(dú)對(duì)組態(tài)實(shí)現(xiàn)做詳細(xì)操作介紹。

組態(tài)實(shí)現(xiàn)初期不必太過嚴(yán)格要求各組件的位置，等到形成一定效果后再來調(diào)整各組件的位置更為妥當(dāng)。

組態(tài)實(shí)現(xiàn)初期建議"前后端分離設(shè)計(jì)"，即先實(shí)現(xiàn)效果，最后再綁定數(shù)據(jù)源。

1.7 測(cè)試

對(duì)最后的界面進(jìn)行功能與性能測(cè)試，保障能夠滿足所需功能。

二、WEB組態(tài)界面的實(shí)現(xiàn)步驟

2.1 添加時(shí)間和日期

2.2 添加歷史曲線

拖拽左側(cè)的組建到右側(cè)畫布中，添加文字，調(diào)整位置、大小、顏色、透明度等。其他部件也是這樣一個(gè)個(gè)添加到畫布中。

2.3 自定義小組件

用戶可根據(jù)風(fēng)格自行設(shè)計(jì)小組件。

注意：在部分提供了觸摸屏的設(shè)備上，大量使用"儀表盤"組件且綁定了數(shù)據(jù)源會(huì)導(dǎo)致界面卡頓。

2.4 界面效果

當(dāng)把所有組件都擺放并調(diào)整好之后，我們就得到了一個(gè)界面，此時(shí)，界面是“死”的，因?yàn)槲覀冞€沒有綁定任何數(shù)據(jù)源，也沒有設(shè)置任何交互。

2.5 創(chuàng)建"分離式"數(shù)據(jù)源

點(diǎn)擊左上角設(shè)置按鈕，并在彈出的頁面中，添加數(shù)據(jù)源。

2.6 綁定按鍵數(shù)據(jù)源

點(diǎn)擊設(shè)置，點(diǎn)擊鏈接，選擇一個(gè)數(shù)據(jù)源；

在畫布中點(diǎn)擊要綁定數(shù)據(jù)源的按鈕，點(diǎn)擊右側(cè)屬性按鈕，在彈出的設(shè)置頁面-事件中，選擇動(dòng)作、值、是哪個(gè)數(shù)據(jù)源，點(diǎn)擊確定按鈕；

點(diǎn)擊左上角保存按鈕，保存項(xiàng)目。

2.7 設(shè)置按鈕選中狀態(tài)

點(diǎn)擊選中按鈕，再點(diǎn)擊右側(cè)屬性按鈕，即可進(jìn)入編輯頁面。在編輯頁面中，點(diǎn)擊屬性，點(diǎn)擊右側(cè)添加一條屬性，填寫顏色、透明度等，完成按鈕的選中狀態(tài)下的顯示設(shè)置。

2.8 使用腳本呈現(xiàn)數(shù)據(jù)源狀態(tài)

本例中，當(dāng)NO.1補(bǔ)水泵和NO.2補(bǔ)水泵中任一啟動(dòng)時(shí)，水箱即出水，兩者為 或 關(guān)系 。

新建變量 <水箱出水> = NO.1補(bǔ)水泵 | NO.2補(bǔ)水泵

首先點(diǎn)擊設(shè)置，進(jìn)入腳本頁面，設(shè)置好腳本；

再進(jìn)入視圖，點(diǎn)擊某個(gè)需要控制的組建-屬性-事件，選擇對(duì)應(yīng)的事件與腳本，并保存。

PS：

通過腳本模擬水位自動(dòng)化

本單元主要用于模擬一些 閾值 場(chǎng)景。

1.項(xiàng)目中每隔1s運(yùn)行一次腳本，判斷各種閾值狀態(tài)

1.1. 單個(gè)補(bǔ)水泵單元時(shí)間消耗 1% 水箱液位。

1.2. 水箱液位 80 ~100 時(shí)，電磁閥 開度 0。

1.3.水箱液位 60 ~80 時(shí)，開啟電磁閥 50 %，自來水接入。

1.4.水箱液位0 ~60 時(shí)，自流井接入,開啟電磁閥 90 %。

1.6.自來水接入時(shí)，水位單元時(shí)間 增加 1%

1.7.自流井接入時(shí)，水位單元時(shí)間 增加 3%

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

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