HTML5在文96儲(chǔ)氣庫(kù)生產(chǎn)信息查詢系統(tǒng)中的應(yīng)用

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

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

1 項(xiàng)目概況

1.1 項(xiàng)目背景

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

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

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

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

1.2 項(xiàng)目攻關(guān)的內(nèi)容及目標(biāo)

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

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

1.3 目標(biāo)完成情況

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

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

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

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

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

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

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

2.2.1 單井注采曲線

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

2.2.2 某階段各井注采量餅圖

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

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

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

2.4 注采變化率

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

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

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

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

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

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

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

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

4 結(jié)論與建議

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

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

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

建議：

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

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