李瑞芳，黃 剛，楊冬黎

(東北石油大學(xué)計(jì)算機(jī)與信息技術(shù)學(xué)院，大慶163318)

1 引言

在井下作業(yè)過程中，由于地質(zhì)等復(fù)雜因素的影響，井噴、井漏、井涌等事故時(shí)有發(fā)生，不僅給油田的有效開發(fā)帶來嚴(yán)重后果，而且給國家財(cái)產(chǎn)造成重大損失［1］。因此，建立油田的高危區(qū)分布系統(tǒng)，對(duì)高危井位區(qū)進(jìn)行實(shí)時(shí)管理是非常必要的。

SVG(Scalable Vector Graphics，可伸縮的矢量圖形)是W3C組織制定的面向網(wǎng)絡(luò)應(yīng)用的二維矢量圖像標(biāo)準(zhǔn)，使用SVG不但可以在網(wǎng)頁中顯示各種各樣的矢量圖形，還可以很好地實(shí)現(xiàn)跨平臺(tái)網(wǎng)絡(luò)傳輸。目前SVG已廣泛應(yīng)用于實(shí)時(shí)監(jiān)控、WebGIS、電力調(diào)度、數(shù)字化博物館等多個(gè)領(lǐng)域［2］。筆者應(yīng)用 SVG、dhtmlxTree、AjaxPro等技術(shù)，將井位、事故信息集成于電子地圖中，開發(fā)了集井位瀏覽、故障井定位、高危井區(qū)自定義等功能于一體的油田高危區(qū)分布系統(tǒng)，實(shí)現(xiàn)了故障井的有效管理和高危區(qū)的預(yù)測，有效地規(guī)避了修井風(fēng)險(xiǎn)。

2 關(guān)鍵技術(shù)研究

2.1 井位瀏覽

針對(duì)井位信息數(shù)據(jù)量大、故障種類多的特點(diǎn)，系統(tǒng)將井位信息按廠礦和井別兩種形式分類，通過圖1左側(cè)的樹形目錄控制井位信息的隱藏和顯示，圖1右上方的縮放按鈕控制當(dāng)前顯示的位置和區(qū)域。其中，左側(cè)的樹形目錄采用的是dhtmlxTree(DHTML extensions Tree)控件。dhtmlxTree是一款功能強(qiáng)大的JavaScript樹形目錄，使用它可以輕松地創(chuàng)建各種漂亮的、可以快速加載的分級(jí)樹，而且它還具有跨瀏覽器，支持 Ajax 等優(yōu)點(diǎn)［3］。使用dhtmlxTree開發(fā)樹形目錄分為以下幾步:

(1)將從dhtmlxTree官網(wǎng)下載的dhtmlxTree文件解壓后拷貝到包含目錄樹的網(wǎng)頁所在的文件夾。

(2)在網(wǎng)頁中引入創(chuàng)建目錄樹所需的js和css文件。

(3)創(chuàng)建包含目錄樹各節(jié)點(diǎn)的tree.xml文件，存放于網(wǎng)頁所在的文件夾中。tree.xml中的內(nèi)容如下所示:

(4)新建dhtmlxTree樹。

通過以上四步即可創(chuàng)建同圖1.1左側(cè)類似的樹型目錄，但是如果希望使用用戶自定義的而不是系統(tǒng)缺省的圖標(biāo)，則需在tree.xml中指定各節(jié)點(diǎn)的圖標(biāo)。例如修改“廠別”節(jié)點(diǎn)前的圖標(biāo)，方法為:

＜item text="廠別"id="1"open="1"lev="1"type=""call="1"select="1"im0="fac.gif"im1="fac.gif"im2="fac.gif"＞

依照上述方法創(chuàng)建的樹型目錄與網(wǎng)頁中的其他元素沒有任何關(guān)聯(lián)。如果希望單擊左側(cè)的樹型目錄，網(wǎng)頁右側(cè)的圖形發(fā)生相應(yīng)的變化，則需要在dhtmlxTree.js文件中的 dhtmlXTreeObject.prototype._setSubChecked事件中添加相應(yīng)的js代碼。

圖1 油田井位瀏覽

2.2 故障井定位

在系統(tǒng)中，當(dāng)用戶單擊圖1上方的“目標(biāo)查詢”按鈕時(shí)，系統(tǒng)會(huì)彈出如圖2(a)所示的提示框，當(dāng)用戶輸入井號(hào)后，單擊“搜索定位”按鈕，如果該井存在，則會(huì)定位到該井，并給出提示信息，如圖2(b)所示。

圖2 故障井定位

彈出的提示框是嵌入主網(wǎng)頁index.aspx中的獨(dú)立網(wǎng)頁search.aspx，而井位信息位于主網(wǎng)頁右側(cè)框架中嵌入的main.svg文件中，要實(shí)現(xiàn)二者間的信息傳遞，必須借助于主網(wǎng)頁，執(zhí)行流程如下所示:

(1)search.aspx獲得用戶所要查找的井位id，并調(diào)用index.aspx中定義的findElement函數(shù)查找相應(yīng)的井。調(diào)用方法為:

parent.findElement(id);

(2)獲取main.svg文件的document對(duì)象。

var doc=document.getElementById(“right”).

firstChild.getSVGDocument();

(3)動(dòng)態(tài)顯示所要定位的井。

通過getElementById查找所要定位的井，如果找到，則通過設(shè)置SVG文件的viewBox屬性將當(dāng)前地圖放大到一定的范圍，讓查找的井居中閃爍顯示，并給出相應(yīng)的提示信息。

2.3 高危井區(qū)自定義

針對(duì)事故井有區(qū)域性多發(fā)的特點(diǎn)，系統(tǒng)提供了高危井區(qū)自定義功能。用戶通過在井位圖上單擊鼠標(biāo)左鍵，即可進(jìn)行區(qū)域定制。圖1右下方的圓形區(qū)域、多邊形區(qū)域即為自定義的高危井區(qū)域示例。

SVG圖像具有良好的交互性，可以動(dòng)態(tài)增加圖像內(nèi)容，但這些改變?cè)赟VG圖像關(guān)閉后隨即消失，無法保存，給用戶帶來許多不便。筆者利用AjaxPro(Ajax.net Professional)實(shí)現(xiàn)了自定義區(qū)域的動(dòng)態(tài)存儲(chǔ)。

AjaxPro是最先把Ajax技術(shù)引入微軟.net環(huán)境下實(shí)現(xiàn)的Ajax框架之一，它能在客戶端腳本之上創(chuàng)建代理類來調(diào)用服務(wù)器端的方法。AjaxPro將客戶端處理XML、事件調(diào)用方法都封裝在AjaxPro.prototype.js和AjaxPro.core.js中，且將它們編譯于Ajaxpro.dll中［4-5］?；贏jaxPro的動(dòng)態(tài)存儲(chǔ)方法主要包括以下幾個(gè)步驟:

(1)下載AjaxPro組件，并將AjaxPro.dll引用到網(wǎng)站(或項(xiàng)目)。

(2)修改 Web.config，在 ＜system.web＞ 元素中添加以下代碼。

(3)對(duì)AjaxPro進(jìn)行注冊(cè)。

找到實(shí)現(xiàn)SVG文件存儲(chǔ)網(wǎng)頁的Page_Load事件，并添加以下代碼

AjaxPro.Utility.RegisterTypeForAjax(typeof(所在類的類名));

(4)創(chuàng)建服務(wù)器端方法，實(shí)現(xiàn)SVG圖像存儲(chǔ)。

給一個(gè)方法加上［AjaxPro.AjaxMethod］標(biāo)記，該方法就變成一個(gè)AjaxPro可影射調(diào)用的方法。例如

rw.WriteLine(gElement);rw.WriteLine("＜/svg＞");rw.Flush();

rw.Close();}

(5)客戶端調(diào)用。

＜script language="javascript"＞

function comit(txt){

命名空間.類名.createSVG(txt);}

＜/script＞

使用AjaxPro組件，客戶端腳本可以直接調(diào)用服務(wù)器端的方法，不必像使用XMLHttpRequest對(duì)象那樣通過url傳遞參數(shù)，從而避免了長度限制和特殊字符處理的問題。

3 結(jié)束語

在對(duì)SVG、dhtmlxTree、AjaxPro等先進(jìn)技術(shù)研究的基礎(chǔ)上，設(shè)計(jì)并實(shí)現(xiàn)了油田高危區(qū)分布系統(tǒng)。該系統(tǒng)集井位瀏覽、定位、井區(qū)自定義于一體，具有速度快，功能全，個(gè)性化等特點(diǎn)，實(shí)現(xiàn)了對(duì)高危井區(qū)的有效控制，降低了修井事故發(fā)生率。

［1］ 楊立慶.大慶油田地質(zhì)高危區(qū)的識(shí)別劃分［J］.油氣田地面工程，2010，29(8):20-21.

［2］ 袁家政.可伸縮矢量圖形(SVG)的數(shù)據(jù)表示研究［D］.北京:北京交通大學(xué)，2007.

［3］ 劉浪.DhtmlXTree應(yīng)用(基礎(chǔ)篇)［EB/OL］.北京:百度文庫，(2010-11-19)［2011-3-26］.http://wenku.baidu.com/view/185d65c69ec3d5bbfd0a745c.html.

［4］ 郝曉君.基于AjaxPro框架下的動(dòng)態(tài)Web開發(fā)技術(shù)的研究［D］.長春:長春理工大學(xué)，2009:17-32.

［5］ 毛凌志.AjaxPro使用說明［EB/OL］.江蘇:博客源，(2007-11-29)［2011-10-25］.http://www.cnblogs.com/lexus/archive/2007/11/29/977281.htm.