煤礦數據的移動化研究

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

煤礦數據的移動化研究

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

隨著移動網絡和移動終端的發展，煤礦中的生產數據、監控數據也需要滿足移動化的要求。本文分析了煤礦中數據的種類，結合HTML5技術，研究了不同種類數據的移動化方法。

移動化；HTML5；數據發布

一、引言

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

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

二、煤礦的數據種類

通過對煤礦中現有系統的分析，把煤礦中數據分為三類：

1.經調數據、生產數據

這類數據以表格數據和列表數據為主，顯示煤礦的生產、經營情況。如生產日報、銷售日報、進度日報等。

2.Intouch組態

用圖形的方式展示生產流程、設備狀態等。

3.設備和環境的3D展示

把礦井環境和設備3D化，提供了更加直觀和真實的數據展示。

三、HTML5關鍵技術

（一）HTML5簡介

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

（二）WebSocket

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

（三） Canvas

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

（四） WebGL

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

四、使用HTML5實現煤礦數據的移動化

通過對煤礦中數據的分類和HTML5中技術的分析，可以實現數據發布系統、Web組態系統和3D數據展示系統。

（一） 數據發布系統

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

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

之后頁面中加入的導航列表、按鈕、數據列表等內容，將以統一的風格顯示。

數據發布系統架構如圖1所示：

圖1　煤礦移動數據發布系統架構

系統共分為三層：

1.數據采集層：這部分的主要功能是提供系統所需要的數據。從煤礦中采集數據，主要數據來源是煤礦中已經部署的各生產系統。

2.數據處理層：該層提供了四種功能。數據封裝將從數據采集層獲取的文本數據進行分析、提煉和數據格式的封裝提供給用戶展示層顯示；報警推送接收報警信息（如瓦斯濃度超限、設備斷電等關鍵報警）并主動推送給用戶展示層；后臺管理為用戶展示層提供權限管理和系統模塊管理，使用戶只能使用自己職責范圍內的功能。

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

（二） Web組態系統

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

Web組態系統功能，系統收集、整理礦山物聯網中環境監測系統、皮帶監測系統、工況監測系統、通風系統、壓風系統、排水系統和提升系統中的監測數據，對數據進行整理、統計后使用數據圖形、實時曲線、歷史曲線、數據報表等方式展示這些數據。

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

2.圖形展示：以圖形的方式展示監測系統的數據，展示內容與原監測系統內容一致。

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

4.歷史曲線：查詢某段時間內某個測點的歷史曲線。

5.歷史數據查詢：查詢某段時間內某個測點的歷史數據，以列表的方式展示。

圖2　機房3D效果

（三） 3D數據展示

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

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

五、總結

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

[1]趙越,陳志偉.大數據量科學計算數據的動態Web可視化[J].現代計算機,2012(5).

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

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

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

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