兗礦集團信息化中心 王 斌 彭繼國 楊 林

煤礦數(shù)據(jù)的移動化研究

兗礦集團信息化中心 王 斌 彭繼國 楊 林

隨著移動網(wǎng)絡(luò)和移動終端的發(fā)展，煤礦中的生產(chǎn)數(shù)據(jù)、監(jiān)控數(shù)據(jù)也需要滿足移動化的要求。本文分析了煤礦中數(shù)據(jù)的種類，結(jié)合HTML5技術(shù)，研究了不同種類數(shù)據(jù)的移動化方法。

移動化；HTML5；數(shù)據(jù)發(fā)布

一、引言

為了滿足煤礦安全生產(chǎn)的需要，煤礦建設(shè)了安全監(jiān)控系統(tǒng)、束管系統(tǒng)、人員定位系統(tǒng)、排水系統(tǒng)、視頻監(jiān)控系統(tǒng)、應(yīng)急廣播通訊系統(tǒng)等。但現(xiàn)有系統(tǒng)需求固定的辦公環(huán)境，不能實時查看數(shù)據(jù)。隨著智能手機、平板電腦的普及和3G通訊技術(shù)的推廣，煤礦業(yè)務(wù)信息處理要從固定辦公環(huán)境向固定/移動融合辦公環(huán)境發(fā)展。因此要研究煤礦數(shù)據(jù)的移動化方法，使信息化建設(shè)模式變得更加靈活方便，滿足人員在出差、外出、休假，或是某些突發(fā)性事件時，與單位信息體系的全方位順暢溝通。

目前的移動化方法都是針對Android和IOS分別開發(fā)獨立的系統(tǒng)。由于不同操作系統(tǒng)的開發(fā)方式不同，顯示方式不同造成了兩者的內(nèi)容和效果不完全一致。HTML 5這一新技術(shù)的出現(xiàn)為煤礦數(shù)據(jù)的移動化提供了新的方法和思路。通過HTML 5實現(xiàn)跨平臺的數(shù)據(jù)展示，不需要修改即可部署在Android、IOS、Windows Mobile等目前流行的移動設(shè)備操作系統(tǒng)中，減少了開發(fā)成本，提高了開發(fā)效率。同時利用HTML 5提供的豐富的動畫功能和3D展示功能，實現(xiàn)WEB組態(tài)和3D數(shù)據(jù)展示。

二、煤礦的數(shù)據(jù)種類

通過對煤礦中現(xiàn)有系統(tǒng)的分析，把煤礦中數(shù)據(jù)分為三類：

1.經(jīng)調(diào)數(shù)據(jù)、生產(chǎn)數(shù)據(jù)

這類數(shù)據(jù)以表格數(shù)據(jù)和列表數(shù)據(jù)為主，顯示煤礦的生產(chǎn)、經(jīng)營情況。如生產(chǎn)日報、銷售日報、進度日報等。

2.Intouch組態(tài)

用圖形的方式展示生產(chǎn)流程、設(shè)備狀態(tài)等。

3.設(shè)備和環(huán)境的3D展示

把礦井環(huán)境和設(shè)備3D化，提供了更加直觀和真實的數(shù)據(jù)展示。

三、HTML5關(guān)鍵技術(shù)

（一）HTML5簡介

HTML5是最新的HTML標準版本，大部分瀏覽器尤其是移動設(shè)備操作系統(tǒng)中的瀏覽器都已經(jīng)支持HTML5技術(shù)。HTML5強化了Web網(wǎng)頁的表現(xiàn)性能，并且追加了本地數(shù)據(jù)庫、在線監(jiān)測等Web應(yīng)用的功能。HTML5技術(shù)的多種新特性和跨平臺特點正迎合了移動平臺多樣性的需要，使用HTML5技術(shù)將使快速開發(fā)各種移動互聯(lián)網(wǎng)應(yīng)用成為可能，從而更好地促進了移動互聯(lián)網(wǎng)的發(fā)展和移動應(yīng)用的推陳出新。

（二）WebSocket

WebSocket是HTML5開始提供的一種瀏覽器與服務(wù)器間進行全雙工通訊的網(wǎng)絡(luò)技術(shù)。它使客戶端瀏覽器具備像 C/S 架構(gòu)下桌面系統(tǒng)的實時通訊能力。 瀏覽器通過 JavaScript 向服務(wù)器發(fā)出建立WebSocket 連接的請求，連接建立以后，客戶端和服務(wù)器端就可以通過 TCP 連接直接交換數(shù)據(jù)。當服務(wù)器中數(shù)據(jù)發(fā)送變化時，服務(wù)器能夠把變化的數(shù)據(jù)主動推送給客戶端瀏覽器，不需要客戶端使用HTTP請求獲取服務(wù)器數(shù)據(jù)。在數(shù)據(jù)發(fā)布系統(tǒng)中用于服務(wù)器和瀏覽器之間的雙工通訊，保證數(shù)據(jù)的實時刷新。

（三） Canvas

Canvas（畫布）是HTML5中新增的重要標簽，用來進行繪制圖形，繪制游戲的圖案或者其他圖形圖案，允許使用腳本動態(tài)渲染點陣圖像。簡單來說，Canvas允許在HTML5中，使用Javascript去繪制任何圖形，包括文字，圖片、線、點、各種形狀等。使用Canvas可以創(chuàng)建豐富的圖形引用，利用Canvas可以實現(xiàn)Web組態(tài)系統(tǒng)。在數(shù)據(jù)發(fā)布系統(tǒng)中用于數(shù)據(jù)的圖形展示和圖形的繪制。

（四） WebGL

WebGL是一種3D繪圖標準,為HTML5 Canvas提供硬件3D加速渲染。通過WebGL可以借助系統(tǒng)顯卡來在瀏覽器里更流暢地展示3D場景和模型，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化。WebGL完美地解決了現(xiàn)有的Web交互式三維動畫的兩個問題：第一，它通過HTML腳本本身實現(xiàn)Web交互式三維動畫的制作，無需任何瀏覽器插件支持；第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是通過統(tǒng)一的、標準的、跨平臺的OpenGL接口實現(xiàn)的。

四、使用HTML5實現(xiàn)煤礦數(shù)據(jù)的移動化

通過對煤礦中數(shù)據(jù)的分類和HTML5中技術(shù)的分析，可以實現(xiàn)數(shù)據(jù)發(fā)布系統(tǒng)、Web組態(tài)系統(tǒng)和3D數(shù)據(jù)展示系統(tǒng)。

（一） 數(shù)據(jù)發(fā)布系統(tǒng)

jQuery Mobile是基于HTML5的移動開發(fā)平臺，提供了可觸摸的用戶界面和導(dǎo)航系統(tǒng)。jQuery Mobile不僅提供了一個完整統(tǒng)一的移動UI框架，還支持主流的手機、平板、臺式電腦等平臺。

只需要使用代碼引用jQuery Mobile的樣式和框架文件，就可以制作移動風(fēng)格的應(yīng)用程序。

之后頁面中加入的導(dǎo)航列表、按鈕、數(shù)據(jù)列表等內(nèi)容，將以統(tǒng)一的風(fēng)格顯示。

數(shù)據(jù)發(fā)布系統(tǒng)架構(gòu)如圖1所示：

圖1　煤礦移動數(shù)據(jù)發(fā)布系統(tǒng)架構(gòu)

系統(tǒng)共分為三層：

1.數(shù)據(jù)采集層：這部分的主要功能是提供系統(tǒng)所需要的數(shù)據(jù)。從煤礦中采集數(shù)據(jù)，主要數(shù)據(jù)來源是煤礦中已經(jīng)部署的各生產(chǎn)系統(tǒng)。

2.數(shù)據(jù)處理層：該層提供了四種功能。數(shù)據(jù)封裝將從數(shù)據(jù)采集層獲取的文本數(shù)據(jù)進行分析、提煉和數(shù)據(jù)格式的封裝提供給用戶展示層顯示；報警推送接收報警信息（如瓦斯?jié)舛瘸?、設(shè)備斷電等關(guān)鍵報警）并主動推送給用戶展示層；后臺管理為用戶展示層提供權(quán)限管理和系統(tǒng)模塊管理，使用戶只能使用自己職責(zé)范圍內(nèi)的功能。

3.數(shù)據(jù)展示層：即移動客戶端，表現(xiàn)形式為數(shù)據(jù)列表界面。用戶通過這個界面查看數(shù)據(jù)。數(shù)據(jù)展示層向數(shù)據(jù)處理層請求數(shù)據(jù)，數(shù)據(jù)處理層接受這個請求后將請求的數(shù)據(jù)返回給客戶端，客戶端將數(shù)據(jù)展示給用戶。

（二） Web組態(tài)系統(tǒng)

利用HTML5技術(shù)借助瀏覽器的支持，在客戶端實現(xiàn)數(shù)據(jù)的繪制。服務(wù)端主動提供數(shù)據(jù)，數(shù)據(jù)源可以是數(shù)據(jù)庫，OPC等。服務(wù)端把這些數(shù)據(jù)預(yù)處理為定義好的JSON格式，依靠Web Socket服務(wù)器,向客戶端主動推送數(shù)據(jù)。瀏覽器接收服務(wù)端的數(shù)據(jù)后使用HTML5提供的繪圖技術(shù)Canvas渲染出對應(yīng)的圖形。由于圖形的繪制是基于瀏覽器的，所以這種方式可以跨平臺使用，對于智能手機和平板電腦，只要系統(tǒng)中安裝有支持HTML5的瀏覽器就可以繪制圖形。

Web組態(tài)系統(tǒng)功能，系統(tǒng)收集、整理礦山物聯(lián)網(wǎng)中環(huán)境監(jiān)測系統(tǒng)、皮帶監(jiān)測系統(tǒng)、工況監(jiān)測系統(tǒng)、通風(fēng)系統(tǒng)、壓風(fēng)系統(tǒng)、排水系統(tǒng)和提升系統(tǒng)中的監(jiān)測數(shù)據(jù)，對數(shù)據(jù)進行整理、統(tǒng)計后使用數(shù)據(jù)圖形、實時曲線、歷史曲線、數(shù)據(jù)報表等方式展示這些數(shù)據(jù)。

1.圖形編輯器：原有監(jiān)測系統(tǒng)中的內(nèi)容隨著時間發(fā)生變化，Web組態(tài)系統(tǒng)中也需要隨著變化。因此需要在線的圖形編輯功能，在瀏覽器中直接編輯組態(tài)圖形，方便系統(tǒng)的維護。根據(jù)煤礦業(yè)務(wù)需求實現(xiàn)了各種礦井設(shè)備圖形在Web 瀏覽器中的連接、移動、添加和刪除等編輯功能。當組態(tài)界面需要修改時，可以直接在瀏覽器中使用圖形編輯器修改。

2.圖形展示：以圖形的方式展示監(jiān)測系統(tǒng)的數(shù)據(jù)，展示內(nèi)容與原監(jiān)測系統(tǒng)內(nèi)容一致。

3.實時曲線：以曲線的方式展示離散類型的數(shù)據(jù)；以柱狀圖的方式展示布爾型的數(shù)據(jù)。數(shù)據(jù)刷新間隔為5秒。

4.歷史曲線：查詢某段時間內(nèi)某個測點的歷史曲線。

5.歷史數(shù)據(jù)查詢：查詢某段時間內(nèi)某個測點的歷史數(shù)據(jù)，以列表的方式展示。

圖2　機房3D效果

（三） 3D數(shù)據(jù)展示

采用Three.js在Web中展示3D模型。Three.js是一個 3D JavaS-cript 庫，它封裝了底層的圖形接口，用簡單的代碼實現(xiàn)三維場景的渲染，同時支持導(dǎo)入其它3D建模軟件（3D max、Sketchup等）生成的模型。可以使用Sketchup生成環(huán)境和靜態(tài)設(shè)備的3D模型，Three. js直接導(dǎo)入這些模型，并在Web中顯示。需要動態(tài)展示的部分，使用Three.js動態(tài)生成，形成動態(tài)的效果。

如圖2所示，機房的環(huán)境（布局，機柜等）是3D建模軟件中編輯，并由Three.js導(dǎo)入到Web中，機柜中的服務(wù)器、服務(wù)器狀態(tài)等是根據(jù)后臺數(shù)據(jù)動態(tài)的生成。生成后可以直接在瀏覽器中查看，即能夠在PC、Android系統(tǒng)和IOS系統(tǒng)中查看。

五、總結(jié)

本文研究了煤礦數(shù)據(jù)的移動化方法：基于HTML5的煤礦數(shù)據(jù)移動化。該方法基于瀏覽器的支持，通過使用HTML5中的Canvas，通過Javascript實現(xiàn)具體的數(shù)據(jù)圖形的繪制，實現(xiàn)了煤礦中數(shù)據(jù)的發(fā)布展示。系統(tǒng)具有良好的跨平臺特性，只需在服務(wù)器中部署，就能夠在電腦、智能手機、平板電腦中使用，減少了系統(tǒng)的重復(fù)開發(fā)，節(jié)約了時間和資金，利于系統(tǒng)的維護。

[1]趙越,陳志偉.大數(shù)據(jù)量科學(xué)計算數(shù)據(jù)的動態(tài)Web可視化[J].現(xiàn)代計算機,2012(5).

[2]吳雷,張福慶.基于HTML Canvas的WebGIS客戶端技術(shù)研究[J].地理信息世界,2009,7(3):78-82.

[3]楊恒,徐學(xué)洲.基于SVG的Web頁面動態(tài)刷新[J].微機發(fā)展,2005(16).

[4]徐卓揆.基于HTML5、Ajax和Web Service的WebGIS研究[J].測繪科學(xué),2012(1):29-34.

王斌（1983—），男，山東鄒城人，碩士，兗礦集團信息化中心自動化部工程師。