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

李偉+趙文哲

摘 要：研究了現(xiàn)場總線在DCS監(jiān)控系統(tǒng)中的應用以及基于Canvas和WebSocket技術(shù)實現(xiàn)DCS實時數(shù)據(jù)Web發(fā)布的可能。利用Canvas實現(xiàn)DCS實時、歷史曲線以及流程監(jiān)控圖的瀏覽器端無插件顯示。采用WebSocket通信協(xié)議實現(xiàn)實時通信，提高了網(wǎng)絡(luò)通信效率，降低了服務器的通信壓力。實例證明所設(shè)計的監(jiān)控系統(tǒng)可視化效果良好、穩(wěn)定且易維護。

關(guān)鍵詞：實時監(jiān)控；DCS；現(xiàn)場總線

DOI：10.16640/j.cnki.37-1222/t.2017.03.202

0 引言

工業(yè)互聯(lián)網(wǎng)時代將會帶來開放、全球化的網(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]。然而，當前的大部分DCS系統(tǒng)所提供的監(jiān)控畫面只能在安裝了特有的客戶端之后才能查看，這顯然不易于隨時隨地了解設(shè)備運行情況。為此，本文提出了基于HTML5實現(xiàn)實時監(jiān)控系統(tǒng)的方法和思路。

近年來出現(xiàn)的HTML5技術(shù)在HTML4的基礎(chǔ)上新增了許多控件與元素，比如data、article等。在新功能上，HTML5增加了語義化標簽、音頻、視頻、Canvas以及實時通信協(xié)議WebSocket等先進技術(shù)。Canvas實現(xiàn)了前端頁面的動態(tài)顯示，WebSocket協(xié)議實現(xiàn)了數(shù)據(jù)的動態(tài)實時傳輸。基于此，本文提出了一種DCS數(shù)據(jù)監(jiān)控的實時可視化方法，服務器端采用了java語言實現(xiàn)WebSocket Server，客戶端采用Canvas繪圖技術(shù)繪制動態(tài)頁面，并結(jié)合實例對系統(tǒng)進行了評估與測試。

1 實驗對象模型設(shè)計

20世紀80年代發(fā)展起來的現(xiàn)場總線主要用于實現(xiàn)控制設(shè)備之間的雙向串行多節(jié)點通信，它的出現(xiàn)為打破自動化系統(tǒng)的信息孤島創(chuàng)造了可能。現(xiàn)場總線的出現(xiàn)節(jié)約了現(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標準電流輸出與二線制連線。被測量量不論是壓力、溫度或是其他物理量都會被轉(zhuǎn)換為4-20mA的標準量傳送給DCS系統(tǒng)。然而傳統(tǒng)DCS現(xiàn)場儀表接線復雜、不易維護且拓展性能差等缺點早已成為制約工業(yè)自動化發(fā)展的一大障礙[5]。現(xiàn)場總線儀表的使用可以大量采集控制量與過程信息，實現(xiàn)就地處理、就地控制等，這樣更方便實現(xiàn)分散控制。現(xiàn)場總線儀表能實現(xiàn)自己管控自己，能很大程度上保證工作的穩(wěn)定性，其內(nèi)部的微處理器能夠進行自我非線性校正、頻率和溫度補償。在開放性與互換性方面，不同廠家生產(chǎn)的產(chǎn)品只要采用國際標準，其硬件軟件連線方式就可以互相兼容，這也對用戶選擇不同的現(xiàn)場總線儀表帶來了極大的方便。現(xiàn)場總線儀表可以互相交換信息完成閉環(huán)控制的功能，也可以通過標準總線接口與DCS系統(tǒng)交換信息。

本文根據(jù)百萬千瓦超超臨界燃煤機組電廠生產(chǎn)流程及工藝，設(shè)計了一套一體化半實物模擬仿真對象。對象模型的設(shè)計按照某電氣集團1000MW超超臨界直流鍋爐圖紙按相應比例縮小制作。鍋爐以整體適宜，其余（過熱器、再熱器、水冷器、省煤器、汽水分離器）做出外形展示。脫硝脫硫部分（煙氣部分）按1000MW機組脫硝脫硫布置的流程圖按比例設(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服務器的通信設(shè)計

現(xiàn)場總線儀表采集的實時數(shù)據(jù)傳入現(xiàn)場控制站，現(xiàn)場控制站與WEB服務器之間的通信設(shè)計顯得尤為重要。本文中現(xiàn)場控制站與WEB服務器的通信采用基于TCP/IP協(xié)議的Socket技術(shù)。Socket作為一個完成通信的句柄，主要用來描述IP地址與相應的端口。通信連接分為三個步驟：WEB服務器啟動監(jiān)聽、客戶端請求連接及連接確認。WEB服務器作為Socket套接字的服務器，現(xiàn)場控制站作為Socket套接字的客戶端。具體通信的流程圖如圖2所示。

客戶端的Socket通過指定的IP地址與端口號請求連接服務器，服務器監(jiān)聽到連接請求后會建立一個新的進程并將服務器端套接字描述發(fā)送給客戶端，客戶端接收并確認服務器的描述信息后，連接完成。此后，服務器端套接字會繼續(xù)監(jiān)聽其他客戶端是否有連接請求。

2.2 服務器端與前端頁面的數(shù)據(jù)通信設(shè)計

WebSocket是HTML5規(guī)范中的一個重要組成部分，也被標榜為下一代客戶端-服務器異步通信的標準[6]，WebSocket通過WebSocket協(xié)議在第一次握手時建立。瀏覽器端通過固定的端口（80和443）和服務器請求握手，此時服務器通過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對象。此后在服務器端發(fā)送數(shù)據(jù)之前建立一些監(jiān)聽事件，監(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制定的標準，這使得它基本兼容所有瀏覽器，Canvas允許瀏覽器直接繪制矢量圖，在有硬解碼的幫助下，繪圖效率得到大幅提升。使用Canvas繪圖也非常簡單，只需要在HTML頁面中建立一個標簽，然后使用其內(nèi)置對象getContext（‘2d）即可繪圖。

DCS可視化監(jiān)控畫面設(shè)計采用基于Canvas的Sparkline和ECharts圖表控件實現(xiàn)。Sparkline是一類信息體積小和數(shù)據(jù)密度高的圖表，目前它被用作一些測量相關(guān)變化信息呈現(xiàn)的方式。Sparkline常常以一組多條的形式出現(xiàn)在柱狀圖、折線圖當中；ECharts是商業(yè)級數(shù)據(jù)圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設(shè)備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11、chrome、firefox、Safari等）。底層依賴輕量級的Canvas類庫ZRender，提供直觀、生動、可交互及可高度個性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計算、數(shù)據(jù)視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數(shù)據(jù)進行挖掘、整合的能力。支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）等火種圖形。

監(jiān)控畫面包括實時數(shù)據(jù)的縮略圖、實時數(shù)據(jù)的完整圖以及一些歷史數(shù)據(jù)圖。對于實時數(shù)據(jù)的縮略圖，將后臺壓縮的數(shù)據(jù)在前端通過jquery解析并賦值給相應變量，利用Sparkline繪制小體積的圖表。

對于完整的實時數(shù)據(jù)圖以及歷史數(shù)據(jù)圖，首先根據(jù)標簽選擇不同機組不同參數(shù)確定查詢條件，然后服務器根據(jù)查詢條件推送不同的json數(shù)據(jù)，在瀏覽器端將后臺讀取的實時數(shù)據(jù)存入數(shù)組Data0中，Data0中包含實時數(shù)據(jù)以及時間標簽，此時通過將Data0中的第（s+1）*n個元素讀出并存入數(shù)組Time0中。在瀏覽器端調(diào)用echarts.init（）將圖表實例化，再接受json數(shù)據(jù)后開始定義option格式，最后按照定義好的option進行繪制圖像myChart.setOption（option）。當服務器有新的數(shù)據(jù)推送時，調(diào)用myChart.clear（）清空圖表，調(diào)用myChart.dispose（）釋放圖表，然后重新定義圖表。圖4所示為根據(jù)機組DCS監(jiān)控系統(tǒng)實現(xiàn)的遠程實時趨勢顯示。

為方便PC端與移動端同時訪問監(jiān)控畫面，本文中監(jiān)控畫面都采用了自適應網(wǎng)頁設(shè)計。自適應網(wǎng)頁設(shè)計（Responsive Web Design）是由Ethan Marcotte在2010年提出的，指可以自動識別屏幕寬度，并做出相應調(diào)整的網(wǎng)頁設(shè)計。自適應頁面的設(shè)計實現(xiàn)相較容易，首先在頁面頭部加入viewport元標簽，然后定義initial-scale屬性的值為1，這樣做的目的在于定義網(wǎng)頁寬度默認為屏幕寬度，其次不能使用絕對寬度布局網(wǎng)頁，因為網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局。再者字體大小不能使用px定義，取而代之應使用相對大小em定義。

3 結(jié)束語

本文設(shè)計的基于現(xiàn)場總線的DCS可視化實時監(jiān)控系統(tǒng)已經(jīng)通過測試，被證實是完全可行的。該系統(tǒng)實現(xiàn)了服務器端與瀏覽器端的全雙工通信，降低了網(wǎng)絡(luò)負荷，實現(xiàn)了無插件的頁面動態(tài)顯示，為DCS監(jiān)控領(lǐng)域提供了一種新的實時解決方案。

參考文獻：

[1]沈蘇彬，楊震.工業(yè)互聯(lián)網(wǎng)概念和模型分析[J].南京郵電大學學報（自然科學版），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ù)服務器設(shè)計[D]. 河北大學，2012.

[4]張靖宇.基于DCS與現(xiàn)場總線集成的管控一體化系統(tǒng)的設(shè)計與實現(xiàn)[D].山東大學，2007.

[5]邢建春，楊啟亮，王平.新技術(shù)形勢下DCS的發(fā)展對策[J].自動化儀表，2003，24（01）：1-4.

[6]李興華.基于WebSocket的移動即時通信系統(tǒng)[D].重慶大學， 2013.

[7]鄭玲，鄭曉天.基于WebSocket的電力系統(tǒng)實時數(shù)據(jù)更新研究[J]. 計算機與現(xiàn)代化，2013（01）：85-87.