中海創WEB組态水污染處理組态實戰案例

使用中海創WEB組态産品，完成組态效果，下面以"水污染處理"為例，用海創微聯采集裝置資料上傳到阿裡雲，中海創web可視化開發端擷取阿裡雲的資料進行展示以及回報變更的裝置資料到阿裡雲。

水污染處理 的組态看闆如下圖所示：

水污染處理的具體工藝流程如下：

這個組态實作的功能有：

• 資料展示
• 水管水流等級控制

前期準備

阿裡雲 中海創物聯網

一、建立産品裝置和規則引擎

我們打開

，注冊一個賬号并登入，進入阿裡雲物聯網平台。

1.1 産品建立

在左邊裝置管理中找到産品，建立後點選儲存。

然後打開建立的産品，點選功能定義，根據實際裝置的資料在自定義功能中添加原水池水位、厭氧池溫度、厭氧池orp等。

1.2 裝置建立

接着我們在産品中添加一個裝置。

建立完成後有彈窗顯示裝置的三個唯一辨別，點選一鍵複制，備用。

此時檢視裝置狀态是未激活狀态，檢視裝置，在裝置運作狀态中也能看到需要采集的資料暫時為空。

1.3 規則引擎建立

1.3.1 建立

1.3.2 設定規則

• 處理資料

  

• 轉發資料

  

• 啟動

  

二、資料采集和上傳

登入

海創web可視化開發平台

，點選“服務開發”，選擇項目（提示：建立的微服務要群組态看闆在同一個項目下，資料綁定的時候才可以選到對應的微服務），建立微服務“ali水污染處理”。從左邊的節點清單中拖出海創IOT、阿裡雲IOT、function、switch和調試節點，按下圖連接配接，注意節點連線的端口

2.1 節點配置

關于各個節點的配置說明請參考文檔

海創微聯

• 定時器

  

• function

  阿裡雲或者海創雲節點接收資料格式相似，兩者之間可以直接傳遞資料，由于本次組态看闆中的報表和折線圖需要裝置所有的資料，是以以下的function是将接收的阿裡雲的資料進行整合後存儲，再傳遞給可視化平台。

• 阿裡雲IOT

  

• switch

  添加switch的原因在于阿裡雲IOT下發的資料有兩個包，一個是裝置資料包，另一個是建立規則引擎産生的包，我們需要的是裝置資料包

• 可視化平台

  根據阿裡下發的資料可知，我們需要産品裝置資料包裡的items對象，這裡存儲着裝置資料。

用于接收：

用于回報：

此節點不需要編輯，連接配接即可。

• 調試

  用于顯示目前連接配接的節點下發的資料内容，預設顯示msg.payload，便于調試和檢視資料。

全部完成後點選部署。

傳回阿裡雲檢視資料狀态，說明連接配接成功。

三、web可視化資料綁定和回報

3.1 建立應用

建立一個組态看闆“ali水污染處理”，如下：

3.1 繪制圖示

建立應用後，點選“線上編輯”進入，在“設計”欄建立一個檔案夾“水污染處理”，用于存放自己設計的圖示，這裡選擇幾個圖示進行舉例說明：

3.1.1 按鈕

1、在“水污染處理”檔案夾下建立一個圖示“按鈕”，選擇圓角矩形拖拽至編輯框中并設定屬性

将文字拖拽至編輯框并設定屬性

選擇矩形，點選“事件處理”，選擇按下和離開，編輯腳本

• 按下事件

data.a('Reset_bc', 'rgb(142,194,250)');//data指的是目前的矩形，表示設定矩形的背景色
data.a('Reset_pc', 'rgb(97,163,232)');//表示設定矩形的漸進色           

• 離開事件

data.a('Reset_bc', '#1080bb');//data指的是目前的矩形，表示設定矩形的背景色
data.a('Reset_pc', 'rgb(97,163,232)');//表示設定矩形的漸進色           

• 資料綁定并儲存

  

效果圖：

3.1.2 水管

将管道拖拽至編輯框并設定屬性

設定拐彎：

3.1.3 公共圖示複制并使用

公共圖示能修改的屬性比較少，如果你想引用一個圖示，同時要添加自己的一些特色進去，可以選擇将這個圖示複制到自己的檔案夾裡再去更改屬性、儲存（例如：你想更改這個圖示的顔色）

3.2 頁面排版

在“ali水污染處理”頁面，将準備好的素材全部拖入調整。

3.2.1 組合塊

擷取組合塊标簽後，能擷取塊内所有圖示的屬性，或者通過簡單的腳本去設定圖示屬性，友善圖示的統一管理，例如：要實作多個圖示的顯示隐藏如下：

3.3 頁面功能介紹

3.3.1 點選按鈕切換頁面

将同一個頁面的圖示組成塊後，設定塊的标簽，在監聽視圖事件方法内控制對應塊的顯示和隐藏,具體代碼參考使用者腳本。

例如，點選首頁面按鈕，對應的腳本為：

if(tagName=='one'){//如果單擊首頁面按鈕
    zy.s("2d.visible",true);//首頁面塊顯示
    history.s("2d.visible",false);//實時資料頁面塊隐藏
    dataTable.s("2d.visible",false);//資料報表頁面塊隐藏
    PAnalysis.s("2d.visible",false);//工藝解析頁面塊隐藏
    Anim.resume();//水管流動和風扇轉動繼續
}           

3.3.1 首頁面

• 資料顯示

  我們需要對組态界面的所有展示資料進行裝置資料綁定，以原水池水位為例：

• • 綁定裝置

    

• • 綁定字段

    

• 水管流動和資料回報

• • 設定标簽

給每根水管設定标簽：

lin0-line12

• • “确定”按鈕綁定裝置并且添加腳本

    

3.3.2 實時資料頁面

• 下拉框

  綁定裝置後，在改變事件裡添加腳本：

dm.lineChart.a('seriesData')[0].name=newValue;//将newValue的值指派給折線圖的标簽
if(oldValue!=newValue &&newValue!=''){//如果下拉選擇的是新值
    var lineData = '';
    for(key in waterNew[0]){//循環周遊waterNew[0]對象
        if(key==newValue){//如果waterNew[0]的key和下拉值相同
             lineData = waterNew[0][key];//将key的值指派給lineData
        }
    }
    var time = util.formatDate(new Date(),'mm:ss');//擷取目前時間的分秒
    dataInsert(dm,lineData,time);//調用方法，将目前擷取的值插入折線圖Y軸資料，具體定義請檢視使用者腳本
    dm.lineChart.iv();//強制重新整理折線圖
}           

• • 效果

    

• 折線圖

  綁定裝置和字段後，在屬性“資料參數”的資料插入前添加腳本

• • 腳本

function(val){
    waterNew.push(val);//将擷取到的所有裝置資料存入waterNew數組
    var selectName=dm.Dropdown.a('hc.value');//下拉框選擇的裝置屬性名稱
    var lineData = '';
    for(key in val){
        if(key==selectName){//如果名稱和val裡的屬性名稱一緻
             lineData = val[key];//将這個屬性對應的值賦給lineData
        }
    }
    var time = util.formatDate(new Date(),'mm:ss');//擷取目前時間分秒
    dataInsert(dm,lineData,time);//調用方法
    //折線圖接收Y軸的資料格式如下，更改資料後再傳回值
    var insertDatas=[
        {
            "name": selectName,
            "type": "line",
            "data": dataY,
            "smooth": true,
            "areaStyle": {}
        }
    ]
    return insertDatas;
}           

3.3.3 資料報表頁面

這個頁面能實時檢視所有資料的變更情況，表格綁定裝置後，屬性“行資料”再綁定字段即可。

3.3.1 工藝解析頁面

通過這個頁面你能實了解水污染處理工藝流程的整體資訊，沒有配置難點，這裡不介紹了。

3.4 使用者腳本

中海創可視化開發平台不僅提供豐富的可視化看闆素材，還有強大的2D、3D編輯平台，現提供以下幾個簡單點的組态看闆功能供大家參閱：

鍋爐控制系統

海創進料系統

換熱站遠端監控系統

想要了解更多歡迎登陸

。