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

兗礦集團(tuán)信息化中心 王 斌 彭繼國(guó) 楊 林

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

兗礦集團(tuán)信息化中心 王 斌 彭繼國(guó) 楊 林

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

移動(dòng)化；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í)時(shí)查看數(shù)據(jù)。隨著智能手機(jī)、平板電腦的普及和3G通訊技術(shù)的推廣，煤礦業(yè)務(wù)信息處理要從固定辦公環(huán)境向固定/移動(dòng)融合辦公環(huán)境發(fā)展。因此要研究煤礦數(shù)據(jù)的移動(dòng)化方法，使信息化建設(shè)模式變得更加靈活方便，滿足人員在出差、外出、休假，或是某些突發(fā)性事件時(shí)，與單位信息體系的全方位順暢溝通。

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

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

通過(guò)對(duì)煤礦中現(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)營(yíng)情況。如生產(chǎn)日?qǐng)?bào)、銷售日?qǐng)?bào)、進(jìn)度日?qǐng)?bào)等。

2.Intouch組態(tài)

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

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

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

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

（一）HTML5簡(jiǎn)介

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

（二）WebSocket

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

（三） Canvas

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

（四） WebGL

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

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

通過(guò)對(duì)煤礦中數(shù)據(jù)的分類和HTML5中技術(shù)的分析，可以實(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的移動(dòng)開發(fā)平臺(tái)，提供了可觸摸的用戶界面和導(dǎo)航系統(tǒng)。jQuery Mobile不僅提供了一個(gè)完整統(tǒng)一的移動(dòng)UI框架，還支持主流的手機(jī)、平板、臺(tái)式電腦等平臺(tái)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖2　機(jī)房3D效果

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

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

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

五、總結(jié)

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

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

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

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

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

王斌（1983—），男，山東鄒城人，碩士，兗礦集團(tuán)信息化中心自動(dòng)化部工程師。