基于HTML5的DCS可視化遠(yuǎn)程實時監(jiān)控系統(tǒng)設(shè)計

1、    基于html5的dcs可視化遠(yuǎn)程實時監(jiān)控系統(tǒng)設(shè)計    李偉+趙文哲摘 要：研究了現(xiàn)場總線在dcs監(jiān)控系統(tǒng)中的應(yīng)用以及基于canvas和websocket技術(shù)實現(xiàn)dcs實時數(shù)據(jù)web發(fā)布的可能。利用canvas實現(xiàn)dcs實時、歷史曲線以及流程監(jiān)控圖的瀏覽器端無插件顯示。采用websocket通信協(xié)議實現(xiàn)實時通信，提高了網(wǎng)絡(luò)通信效率，降低了服務(wù)器的通信壓力。實例證明所設(shè)計的監(jiān)控系統(tǒng)可視化效果良好、穩(wěn)定且易維護。關(guān)鍵詞：實時監(jiān)控；dcs；現(xiàn)場總線doi：10.16640/ki.37-1222/t.2017.03.2020 引言工業(yè)互聯(lián)網(wǎng)時代將會帶來開

2、放、全球化的網(wǎng)絡(luò)，它將把人、機器與數(shù)據(jù)結(jié)合起來，這就要求更高、更實時的通信方式來提高工業(yè)控制中的數(shù)據(jù)傳輸1。傳統(tǒng)電廠信息化監(jiān)控系統(tǒng)大多采用輪詢或者comet的方式進行數(shù)據(jù)傳輸，這在工業(yè)互聯(lián)網(wǎng)的時代已經(jīng)不能滿足要求。電廠廠級監(jiān)控信息系統(tǒng)是基于電廠dcs系統(tǒng)實現(xiàn)人機交互的重要組成部分，它可以直觀的顯示監(jiān)測節(jié)點的實時以及歷史數(shù)據(jù)，方便了解和分析電力設(shè)備的運行狀態(tài)2。然而，當(dāng)前的大部分dcs系統(tǒng)所提供的監(jiān)控畫面只能在安裝了特有的客戶端之后才能查看，這顯然不易于隨時隨地了解設(shè)備運行情況。為此，本文提出了基于html5實現(xiàn)實時監(jiān)控系統(tǒng)的方法和思路。近年來出現(xiàn)的html5技術(shù)在html4的基礎(chǔ)上新增了許多控

3、件與元素，比如data、article等。在新功能上，html5增加了語義化標(biāo)簽、音頻、視頻、canvas以及實時通信協(xié)議websocket等先進技術(shù)。canvas實現(xiàn)了前端頁面的動態(tài)顯示，websocket協(xié)議實現(xiàn)了數(shù)據(jù)的動態(tài)實時傳輸?；诖?，本文提出了一種dcs數(shù)據(jù)監(jiān)控的實時可視化方法，服務(wù)器端采用了java語言實現(xiàn)websocket server，客戶端采用canvas繪圖技術(shù)繪制動態(tài)頁面，并結(jié)合實例對系統(tǒng)進行了評估與測試。1 實驗對象模型設(shè)計20世紀(jì)80年代發(fā)展起來的現(xiàn)場總線主要用于實現(xiàn)控制設(shè)備之間的雙向串行多節(jié)點通信，它的出現(xiàn)為打破自動化系統(tǒng)的信息孤島創(chuàng)造了可能?，F(xiàn)場總線的出現(xiàn)節(jié)約了

4、現(xiàn)場控制系統(tǒng)成本，同時其良好的互操作性以及系統(tǒng)拓展性都促進了傳統(tǒng)dcs的系統(tǒng)結(jié)構(gòu)轉(zhuǎn)變。因此在現(xiàn)場總線系統(tǒng)尚未成熟時，dcs與現(xiàn)場總線技術(shù)的結(jié)合為我們提供了比較好的技術(shù)選擇4。dcs分散控制系統(tǒng)的現(xiàn)場儀表大多由傳感器與調(diào)理電路組成，其采用4-20ma標(biāo)準(zhǔn)電流輸出與二線制連線。被測量量不論是壓力、溫度或是其他物理量都會被轉(zhuǎn)換為4-20ma的標(biāo)準(zhǔn)量傳送給dcs系統(tǒng)。然而傳統(tǒng)dcs現(xiàn)場儀表接線復(fù)雜、不易維護且拓展性能差等缺點早已成為制約工業(yè)自動化發(fā)展的一大障礙5?，F(xiàn)場總線儀表的使用可以大量采集控制量與過程信息，實現(xiàn)就地處理、就地控制等，這樣更方便實現(xiàn)分散控制?，F(xiàn)場總線儀表能實現(xiàn)自己管控自己，能很大程度

5、上保證工作的穩(wěn)定性，其內(nèi)部的微處理器能夠進行自我非線性校正、頻率和溫度補償。在開放性與互換性方面，不同廠家生產(chǎn)的產(chǎn)品只要采用國際標(biāo)準(zhǔn)，其硬件軟件連線方式就可以互相兼容，這也對用戶選擇不同的現(xiàn)場總線儀表帶來了極大的方便?，F(xiàn)場總線儀表可以互相交換信息完成閉環(huán)控制的功能，也可以通過標(biāo)準(zhǔn)總線接口與dcs系統(tǒng)交換信息。本文根據(jù)百萬千瓦超超臨界燃煤機組電廠生產(chǎn)流程及工藝，設(shè)計了一套一體化半實物模擬仿真對象。對象模型的設(shè)計按照某電氣集團1000mw超超臨界直流鍋爐圖紙按相應(yīng)比例縮小制作。鍋爐以整體適宜，其余（過熱器、再熱器、水冷器、省煤器、汽水分離器）做出外形展示。脫硝脫硫部分（煙氣部分）按1000mw機組

6、脫硝脫硫布置的流程圖按比例設(shè)計，對象測點根據(jù)實際電廠的測點分布，測點數(shù)據(jù)能夠被dcs采集進行邏輯控制和聯(lián)鎖保護等。同時，對象的現(xiàn)場采用了hart、ff、profibus-dp/pa等先進智能化儀表，實現(xiàn)溫度、壓力、流量等信號的現(xiàn)場總線方式傳輸。對象的設(shè)計符合“兩化融合”、“工業(yè)4.0”等智能工廠建設(shè)需求，仿真對象如圖1所示。2 web監(jiān)控系統(tǒng)設(shè)計2.1 現(xiàn)場控制站與web服務(wù)器的通信設(shè)計現(xiàn)場總線儀表采集的實時數(shù)據(jù)傳入現(xiàn)場控制站，現(xiàn)場控制站與web服務(wù)器之間的通信設(shè)計顯得尤為重要。本文中現(xiàn)場控制站與web服務(wù)器的通信采用基于tcp/ip協(xié)議的socket技術(shù)。socket作為一個完成通信的句柄，

7、主要用來描述ip地址與相應(yīng)的端口。通信連接分為三個步驟：web服務(wù)器啟動監(jiān)聽、客戶端請求連接及連接確認(rèn)。web服務(wù)器作為socket套接字的服務(wù)器，現(xiàn)場控制站作為socket套接字的客戶端。具體通信的流程圖如圖2所示?？蛻舳说膕ocket通過指定的ip地址與端口號請求連接服務(wù)器，服務(wù)器監(jiān)聽到連接請求后會建立一個新的進程并將服務(wù)器端套接字描述發(fā)送給客戶端，客戶端接收并確認(rèn)服務(wù)器的描述信息后，連接完成。此后，服務(wù)器端套接字會繼續(xù)監(jiān)聽其他客戶端是否有連接請求。2.2 服務(wù)器端與前端頁面的數(shù)據(jù)通信設(shè)計websocket是html5規(guī)范中的一個重要組成部分，也被標(biāo)榜為下一代客戶端-服務(wù)器異步通信的標(biāo)準(zhǔn)6

8、，websocket通過websocket協(xié)議在第一次握手時建立。瀏覽器端通過固定的端口（80和443）和服務(wù)器請求握手，此時服務(wù)器通過http header來判斷請求是否是一個websocket請求，如果是，就將協(xié)議升級為websocket協(xié)議，此后就進入雙向長連接的數(shù)據(jù)傳輸階段7。websocket協(xié)議的工作示意圖如圖3所示。websocket只需要發(fā)送一次請求就可以建立連接，且發(fā)送請求的header比傳統(tǒng)的http請求更小，可以節(jié)約帶寬以解決消息滯后的問題7。websocket使用相對簡單，首先需要根據(jù)客戶端提供的url創(chuàng)建一個websocket對象。此后在服務(wù)器端發(fā)送數(shù)據(jù)之前建立一些監(jiān)

9、聽事件，監(jiān)聽事件建立完成之后只便可以調(diào)用send函數(shù)來發(fā)送數(shù)據(jù)，數(shù)據(jù)發(fā)送完成之后調(diào)用close函數(shù)。 2.3 基于canvas的實時數(shù)據(jù)顯示前端采用canvas畫布技術(shù)繪制監(jiān)控畫面，可以實現(xiàn)在瀏覽器上無插件顯示，同時canvas提供了通過javascript繪制各類簡單圖形（路勁、矩形、圓弧、字符等）的方法，因此，使用canvas繪制圖形非常方便。html5是w3c制定的標(biāo)準(zhǔn)，這使得它基本兼容所有瀏覽器，canvas允許瀏覽器直接繪制矢量圖，在有硬解碼的幫助下，繪圖效率得到大幅提升。使用canvas繪圖也非常簡單，只需要在html頁面中建立一個標(biāo)簽，然后使用其內(nèi)置對象getcontext（2d

10、）即可繪圖。dcs可視化監(jiān)控畫面設(shè)計采用基于canvas的sparkline和echarts圖表控件實現(xiàn)。sparkline是一類信息體積小和數(shù)據(jù)密度高的圖表，目前它被用作一些測量相關(guān)變化信息呈現(xiàn)的方式。sparkline常常以一組多條的形式出現(xiàn)在柱狀圖、折線圖當(dāng)中；echarts是商業(yè)級數(shù)據(jù)圖表，一個純javascript的圖表庫，可以流暢的運行在pc和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（ie6/7/8/9/10/11、chrome、firefox、safari等）。底層依賴輕量級的canvas類庫zrender，提供直觀、生動、可交互及可高度個性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計算、數(shù)

11、據(jù)視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數(shù)據(jù)進行挖掘、整合的能力。支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、k線圖、餅圖（環(huán)形圖）等火種圖形。監(jiān)控畫面包括實時數(shù)據(jù)的縮略圖、實時數(shù)據(jù)的完整圖以及一些歷史數(shù)據(jù)圖。對于實時數(shù)據(jù)的縮略圖，將后臺壓縮的數(shù)據(jù)在前端通過jquery解析并賦值給相應(yīng)變量，利用sparkline繪制小體積的圖表。對于完整的實時數(shù)據(jù)圖以及歷史數(shù)據(jù)圖，首先根據(jù)標(biāo)簽選擇不同機組不同參數(shù)確定查詢條件，然后服務(wù)器根據(jù)查詢條件推送不同的json數(shù)據(jù)，在瀏覽器端將后臺讀取的實時數(shù)據(jù)存入數(shù)組data0中，data0中包含實時數(shù)據(jù)以及時間標(biāo)簽，此時通過將data0中

12、的第（s+1）*n個元素讀出并存入數(shù)組time0中。在瀏覽器端調(diào)用echarts.init（）將圖表實例化，再接受json數(shù)據(jù)后開始定義option格式，最后按照定義好的option進行繪制圖像mychart.setoption（option）。當(dāng)服務(wù)器有新的數(shù)據(jù)推送時，調(diào)用mychart.clear（）清空圖表，調(diào)用mychart.dispose（）釋放圖表，然后重新定義圖表。圖4所示為根據(jù)機組dcs監(jiān)控系統(tǒng)實現(xiàn)的遠(yuǎn)程實時趨勢顯示。為方便pc端與移動端同時訪問監(jiān)控畫面，本文中監(jiān)控畫面都采用了自適應(yīng)網(wǎng)頁設(shè)計。自適應(yīng)網(wǎng)頁設(shè)計（responsive web design）是由ethan marco

13、tte在2010年提出的，指可以自動識別屏幕寬度，并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。自適應(yīng)頁面的設(shè)計實現(xiàn)相較容易，首先在頁面頭部加入viewport元標(biāo)簽，然后定義initial-scale屬性的值為1，這樣做的目的在于定義網(wǎng)頁寬度默認(rèn)為屏幕寬度，其次不能使用絕對寬度布局網(wǎng)頁，因為網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局。再者字體大小不能使用px定義，取而代之應(yīng)使用相對大小em定義。3 結(jié)束語本文設(shè)計的基于現(xiàn)場總線的dcs可視化實時監(jiān)控系統(tǒng)已經(jīng)通過測試，被證實是完全可行的。該系統(tǒng)實現(xiàn)了服務(wù)器端與瀏覽器端的全雙工通信，降低了網(wǎng)絡(luò)負(fù)荷，實現(xiàn)了無插件的頁面動態(tài)顯示，為dcs監(jiān)控領(lǐng)域提供了一種新的實時解決方案。參考文獻：1沈蘇彬，楊震.工業(yè)互聯(lián)網(wǎng)概念和模型分析j.南京郵電大學(xué)學(xué)報（自然科學(xué)版），2015，35（05）：1-10.2張楨，牛玉剛.dcs與現(xiàn)場總線綜述j.電氣自動化，2013， 35（01）：4-6.3張釗熙.基于b/s架構(gòu)的dcs現(xiàn)場控制站數(shù)據(jù)服務(wù)器設(shè)計d.