HTML5在文96儲氣庫生產信息查詢系統中的應用

摘 要：HTML5是近十年來Web開發標準最巨大的飛躍，它統一了視頻、音頻、圖像、動畫以及不同終端（包括各種移動終端）的交互都被標準化。實用性增加，簡化了標簽，細分了功能，增加了移動互聯網元素，革命性地增加了API、渲染等。

關鍵詞：HTML5；標準化；文96塊

1 項目概況

1.1 項目背景

我廠《生產信息系統》采用C/S方式設計，即采用客戶端/服務端模式開發，用戶在應用時必需安裝客戶端，實際應用過程中造成很多不便：a.安全性差，用戶在使用計算機過程中易造成對客戶端程序的損壞；b.升級困難，雖然實現了對主程序的升級，但很難從大的功能塊上進行滿足實際的更新維護；c.功能單一，基本只具有數據查詢顯示功能；d.由于已經使用十年，計算機軟硬件已經多次升級換代，該系統已難以適應新的應用環境；

文96儲氣庫已經投產，生產數據已經進入生產信息系統，我廠生產環境正在發生巨大變化，我們應以此為契機，利用最新技術更新我們的生產信息系統，滿足各級人員的需求。采用B/S模式，即直接使用網絡瀏覽器進行數據操作。

HTML5是近十年來Web開發標準最巨大的飛躍。和以前的版本不同，HTML5并非僅僅用來表示Web內容，它的新使命是將Web帶入一個成熟的應用平臺，在HTML 5平臺上，視頻，音頻，圖像，動畫，以及同電腦的交互都被標準化。不再需要各種插件就能實現眾多功能，目前HTML5標準已經制定完成，但還處在開發階段，但基本上主流的瀏覽器都已經支持該技術。所以HTML5技術是目前開發信息系統的最好選擇。

由于整個《生產信息系統》項目龐大，開發周期長，在新技術的應用過程中存在眾多未知因素和困難，因此先選擇一小部分來做，進行技術儲備和經驗積累是一個正確的選擇。因此我們決定進行《文96儲氣庫生產信息查詢分析系統》的開發。

1.2 項目攻關的內容及目標

目標：將HTML5各項技術應用到網站開發中，滿足技術人員對儲氣庫生產數據的統計分析需求，在開發過程中積累HTML5開發經驗。

攻關內容：a.網頁中顯示圖表；b.網頁中3D地層、生產井模型顯示及操作；c.網頁中教學視頻及學習資料顯示。

1.3 目標完成情況

要求的功都已實現，在后續的工作中，將不斷完善，以提高運行速度，增強穩定性目標。

2 項目研究的主要內容

2.1 系統整體布局

整體布局為滿足用戶習慣，沿用原系統中左側為菜單區，右側為以表格形式顯示的數據區。

2.2 應用HTML5在網頁上繪制圖表

HTML5之前的網絡應用標準無法在網頁上直接繪制圖形，而是通過插件方式，以圖片形式顯示。HTML5允許在網頁指定區域利用Javascript語言腳本直接進行圖形繪制，并可與圖形進行交互，并可以圖片形式存儲，提高圖表顯示的實時性、靈活性，減小了服務器的訪問壓力。

采用兩步法繪圖：a.根據用戶需要查詢所需數據存儲并顯示；b.將存儲的數據傳給Javascript腳本進行圖形繪制。

2.2.1 單井注采曲線

目的：分析注采期間，單井注采氣量、油壓、累積氣量動態信息。（如下圖1）

2.2.2 某階段各井注采量餅圖

目的：一個注采期間，各井注采氣量占總氣量的比例，分析單井吸氣能力，判斷地層物性。（如上圖2）

2.3 某階段各井油壓與氣田累積注氣量曲線

目的：分析隨著氣田累積注氣量的增加，各注采井油壓的變化情況。通過注采油壓變化的早晚快慢可分析井間連通情況、地層物性等，為注采方案提供參考。

2.4 注采變化率

目的：分析各單井注采氣量與油壓關系，以及隨時間的變化趨勢

2.5 應用HTML5在網頁上顯示3D模型

通過HTML5+WebGL實現3D效果，而不用安裝插件或其它軟件，減少了內存的占用，加快了用戶訪問速度。（如下圖3）

2.6 應用HTML5在網頁上進行視頻播放

由于HTML5本身對視頻格式的支持，而客戶端無需安裝播放器，所以降低了視頻的播放成本，而且減少了工作量，并大大降低了單位的培訓成本。

2.7 應用HTML5在網頁上進行幻燈片播放，這樣可以組建一個網上數據圖書館，供大家網上學習，資料共享。（如下圖4）

3 現場應用情況

通過三個攻關目標的實現，能夠實現對文96儲氣庫生產數據的按階段、按需要統計分析，了解各項生產參數的實時變化及變化趨勢。實現了技術專家的視頻無插件播放。通過地層及氣井的三維顯示，使用戶對注采井的地層分布一目了然，點擊即顯示近期生產信息，方便快捷。

4 結論與建議

結論：經過實踐檢驗，新一代HTML5網絡標準結合Javascrit腳本，所提供的在網頁中進行圖形繪制、3D模型顯示、視頻無插件播放、數據本地緩存等功能，能夠在生產信息系統中得到良好運用，滿足生產信息系統的數據顯示、分析需求。

技術創新點：將最新HTML5網絡技術應用到生產信息系統中，對生產數據進行加工整理以繪圖的方式呈現給用戶。

存在問題：處理大量數據時速度較慢，下一步應著重進行系統代碼及數據庫優化，提高系統運行速度。

建議：

（1）組織相關技術人員進一步對HTML5及Javascript進入研究學習，滿足開發需要。（2）組織各部門人員提出對生產信息系統功能需求意見，便于進一步開發完善信息系統。

作者簡介：王瑞杰（1975-）女，河南平輿人，石油大學（華東）信息工程專業.