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

關(guān)鍵詞：HTML5；標準化；文96塊

1 項目概況

1.1 項目背景

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

文96儲氣庫已經(jīng)投產(chǎn)，生產(chǎn)數(shù)據(jù)已經(jīng)進入生產(chǎn)信息系統(tǒng)，我廠生產(chǎn)環(huán)境正在發(fā)生巨大變化，我們應(yīng)以此為契機，利用最新技術(shù)更新我們的生產(chǎn)信息系統(tǒng)，滿足各級人員的需求。采用B/S模式，即直接使用網(wǎng)絡(luò)瀏覽器進行數(shù)據(jù)操作。

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

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

1.2 項目攻關(guān)的內(nèi)容及目標

目標：將HTML5各項技術(shù)應(yīng)用到網(wǎng)站開發(fā)中，滿足技術(shù)人員對儲氣庫生產(chǎn)數(shù)據(jù)的統(tǒng)計分析需求，在開發(fā)過程中積累HTML5開發(fā)經(jīng)驗。

攻關(guān)內(nèi)容：a.網(wǎng)頁中顯示圖表；b.網(wǎng)頁中3D地層、生產(chǎn)井模型顯示及操作；c.網(wǎng)頁中教學視頻及學習資料顯示。

1.3 目標完成情況

要求的功都已實現(xiàn)，在后續(xù)的工作中，將不斷完善，以提高運行速度，增強穩(wěn)定性目標。

2 項目研究的主要內(nèi)容

2.1 系統(tǒng)整體布局

整體布局為滿足用戶習慣，沿用原系統(tǒng)中左側(cè)為菜單區(qū)，右側(cè)為以表格形式顯示的數(shù)據(jù)區(qū)。

2.2 應(yīng)用HTML5在網(wǎng)頁上繪制圖表

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

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

2.2.1 單井注采曲線

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

2.2.2 某階段各井注采量餅圖

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

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

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

2.4 注采變化率

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

2.5 應(yīng)用HTML5在網(wǎng)頁上顯示3D模型

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

2.6 應(yīng)用HTML5在網(wǎng)頁上進行視頻播放

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

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

3 現(xiàn)場應(yīng)用情況

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

4 結(jié)論與建議

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

技術(shù)創(chuàng)新點：將最新HTML5網(wǎng)絡(luò)技術(shù)應(yīng)用到生產(chǎn)信息系統(tǒng)中，對生產(chǎn)數(shù)據(jù)進行加工整理以繪圖的方式呈現(xiàn)給用戶。

存在問題：處理大量數(shù)據(jù)時速度較慢，下一步應(yīng)著重進行系統(tǒng)代碼及數(shù)據(jù)庫優(yōu)化，提高系統(tǒng)運行速度。

建議：

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

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