王普超 田 勇 高志強(qiáng)

（1.河南工業(yè)大學(xué) 機(jī)電工程學(xué)院，河南 鄭州 450007；2.寧夏大學(xué) 機(jī)械工程學(xué)院，寧夏 銀川 750021）

中國(guó)閥門(mén)制造廠家眾多，型號(hào)各異，應(yīng)用場(chǎng)合各不相同。 傳統(tǒng)的閥門(mén)選型主要是通過(guò)客戶提供的介質(zhì)屬性，通過(guò)查找閥門(mén)選型手冊(cè)，確定閥門(mén)型號(hào)，這種方法效率低，選型的誤差較大。 之后，一些閥門(mén)生產(chǎn)廠家開(kāi)發(fā)了針對(duì)閥門(mén)選型的選型軟件， 但這些軟件都是通過(guò)輸入介質(zhì)參數(shù)得到閥門(mén)型號(hào)的。 這些軟件都是單機(jī)版，需要安裝后才能使用，并且都不能直觀地體現(xiàn)閥門(mén)的應(yīng)用場(chǎng)合。 為了實(shí)現(xiàn)基于工藝流程圖進(jìn)行網(wǎng)絡(luò)信息化選型，分析工藝流程圖，采集閥門(mén)信息， 并整理閥門(mén)信息將其轉(zhuǎn)換為知識(shí)， 應(yīng)用Edraw 軟件對(duì)工藝流程圖進(jìn)行重新繪制，將其轉(zhuǎn)換為SVG格式的“選型流程圖”，然后對(duì)“選型流程圖”進(jìn)行編程，從而實(shí)現(xiàn)了基于工藝流程圖完成網(wǎng)絡(luò)信息化選型。

1 知識(shí)信息化的概念

知識(shí)和信息是兩種不同的概念。 信息具有知識(shí)的品質(zhì)，而知識(shí)具有信息的特征，知識(shí)由知識(shí)信息所構(gòu)成，知識(shí)中存有大量的知識(shí)信息[1]。 1988年世界銀行對(duì)數(shù)據(jù)、信息、知識(shí)之間的區(qū)別做了如下闡述：數(shù)據(jù)是未經(jīng)組織的數(shù)字、詞語(yǔ)、聲音、圖像等；信息是以有意義的形式加以排列和處理的數(shù)據(jù)；知識(shí)是用于生產(chǎn)的信息；信息經(jīng)過(guò)加工處理，應(yīng)用于生產(chǎn)，才能轉(zhuǎn)變?yōu)橹R(shí)[2]。 知識(shí)按照是否可以編碼可分為編碼知識(shí) （Codified Knowledge） 與非編碼知識(shí)（Tacit Know1edge）兩類(lèi)，非編碼知識(shí)不能實(shí)現(xiàn)知識(shí)信息化表達(dá)[1]。 首先對(duì)知識(shí)進(jìn)行遴選，剔除非編碼知識(shí)，然后對(duì)知識(shí)進(jìn)行技術(shù)處理，最后編程實(shí)現(xiàn)知識(shí)信息化操作。 知識(shí)和信息的轉(zhuǎn)換過(guò)程如圖1 所示。

圖1 知識(shí)與信息之間的轉(zhuǎn)化

2 閥門(mén)知識(shí)的采集、整理

閥門(mén)知識(shí)采集是閥門(mén)知識(shí)表達(dá)的實(shí)質(zhì)內(nèi)容，采集源和采集方法決定了表達(dá)的完整性、準(zhǔn)確性。 根據(jù)知識(shí)的表現(xiàn)形式，知識(shí)可分為顯性知識(shí)和隱性知識(shí)。 顯性知識(shí)包括任何以文檔形式保存的知識(shí)，隱性知識(shí)是存在于人頭腦中難以顯性化的知識(shí)[2]。 本文主要介紹對(duì)顯性知識(shí)的采集。

本文知識(shí)表達(dá)主要是為閥門(mén)選型提供便利， 故針對(duì)閥門(mén)選型知識(shí)對(duì)知識(shí)進(jìn)行采集。

第一步：采集信息。采集信息源主要包括客戶和設(shè)計(jì)院提供的簡(jiǎn)單的工藝流程圖（只顯示裝置過(guò)程原理和閥門(mén)位置）、客戶的競(jìng)標(biāo)書(shū)、客戶提供的流過(guò)閥門(mén)的介質(zhì)屬性數(shù)據(jù)、生產(chǎn)商的投標(biāo)書(shū)等。

第二步：分析、整理信息。 以采集到的資料為依據(jù)對(duì)工藝流程圖的原理進(jìn)行分析， 并將其做成word 文檔形式，為選型人員提供參考。 然后對(duì)客戶提供的介質(zhì)屬性數(shù)據(jù)與工藝流程圖進(jìn)行對(duì)照分析， 使工藝流程圖中的閥門(mén)與介質(zhì)屬性一一對(duì)應(yīng)，并制成Excel 表格。 如表1 所示。

表1 各控制閥介質(zhì)屬性表（部分）

第三步：重新美化繪制工藝流程圖。 按照“基于網(wǎng)絡(luò)、突出閥門(mén)顯示效果”的原則，應(yīng)用Edraw 軟件（Edraw 軟件是一款非常好的繪圖工具， 它可以直接導(dǎo)出SVG 格式的網(wǎng)絡(luò)圖形）重新繪制工藝流程圖。主要管路以寬度為3mm黑色中部帶小箭頭的實(shí)線表示， 輔助管路以寬度為2mm顏色為紅色的細(xì)點(diǎn)劃線表示。 過(guò)程設(shè)備以1mm 的黑色細(xì)實(shí)線為輪廓并以立體效果展示。 控制閥應(yīng)使用國(guó)標(biāo)的閥門(mén)標(biāo)注形式，控制閥用紅色3mm 邊框，填充顏色為漸變中國(guó)藍(lán)。 為了突出閥門(mén)并和介質(zhì)屬性對(duì)應(yīng)，對(duì)各個(gè)閥門(mén)進(jìn)行編號(hào)，閥門(mén)位號(hào)標(biāo)識(shí)形式為FV 000001。

3 閥門(mén)知識(shí)的信息化表達(dá)

3.1 閥門(mén)知識(shí)信息化表達(dá)原理

重新美化繪制后，工藝流程圖如圖2 所示，將其導(dǎo)出為SVG 格式的“選型流程圖”。SVG 是使用XML 格式定義的圖像，可以將其存儲(chǔ)為文檔格式，通過(guò)編輯SVG 文檔可以編輯不同的圖形。應(yīng)用HTML 中的＜embed＞標(biāo)簽可以將SVG 圖形內(nèi)嵌到HTML 網(wǎng)頁(yè)中， 然后利用DOM 來(lái)提取SVG 中的圖形元素，通過(guò)編輯Javascript 腳本來(lái)控制圖形元素。

圖2 SVG 選型流程圖表達(dá)模型

3.2 SVG 的概念

SVG（Scalable Vector Graphic）是可縮放矢量圖形，是基于可擴(kuò)展標(biāo)記語(yǔ)言XML（Extensible Markup Language）， 用于描述二維矢量圖形的一種圖形格式。 SVG 規(guī)定了17 類(lèi)80多種元素，是圖形、文字和圖像的有機(jī)統(tǒng)一[3]。 通過(guò)點(diǎn)、直線、多邊形等基本矢量圖形元素的組合，可以編輯出任何復(fù)雜的圖形，再加上文本，就可以實(shí)現(xiàn)對(duì)工藝流程圖的SVG 編碼。

3.3 工藝流程圖的編碼

根據(jù)工藝流程圖中數(shù)據(jù)類(lèi)型的不同，可以使用如下編碼方法。

3.3.1 工藝流程圖整體信息的編碼

工藝流程圖整體信息主要包括工藝流程圖的名稱(chēng)、圖幅、比例尺以及工藝流程圖包含的圖層等。 工藝流程圖名稱(chēng)可以通過(guò)＜title＞或者＜desc＞元素來(lái)表示， 而工藝流程圖的圖幅大小和比例尺則通過(guò)＜svg＞元素的”height”、”width”、”viewbox” 三個(gè)屬性的共同作用來(lái)表示[4]。 通過(guò)這三個(gè)屬性來(lái)定義控制閥知識(shí)表達(dá)區(qū)域，程序如下：

3.3.2 工藝流程圖中各元素的編碼

工藝流程圖中的元素主要包括線條、設(shè)備以及文字。工藝流程圖中的線條包括粗實(shí)線的主管道線路和細(xì)點(diǎn)畫(huà)線的控制閥的控制回路，這兩種對(duì)象可以用元素＜line＞、＜polyline＞或＜path＞來(lái)表示。 設(shè)備可以用基本圖形元素＜rect＞、＜circel＞、＜polygon＞等組合來(lái)表示，標(biāo)注的文字信息使用文本元素＜text＞來(lái)表示。 控制閥圖片及控制閥說(shuō)明程序如下。

3.3.3 工藝流程圖的圖層編碼

工藝流程圖按照?qǐng)D形的疊放順序， 分為不同的圖層來(lái)繪制，所以使用SVG 對(duì)工藝流程圖進(jìn)行顯示時(shí)，利用＜g＞元素可以將特征類(lèi)似的圖像元素集合在一起而組成一個(gè)圖層。 圖層的名稱(chēng)使用＜g＞元素的”id”屬性來(lái)表示。 同理，＜g＞元素的”style”屬性則可以用來(lái)控制圖層的顏色、線型、顯示與否等。 用＜g＞＜/g＞可以對(duì)多個(gè)元素進(jìn)行組合。

3.3.4 屬性數(shù)據(jù)的處理

工藝流程圖是幾何數(shù)據(jù)與屬性數(shù)據(jù)的統(tǒng)一體。 屬性數(shù)據(jù)是工藝流程圖中數(shù)據(jù)的重要組成部分，也是實(shí)現(xiàn)工藝流程圖交互功能（如：工藝流程圖中點(diǎn)擊控制閥可以彈出關(guān)于該控制閥的信息）的基礎(chǔ)。 屬性數(shù)據(jù)的處理方法有兩種， 一種是直接使屬性數(shù)據(jù)包含在SVG 文檔中（比如使用＜desc＞元素）， 另一種是將屬性數(shù)據(jù)存儲(chǔ)在外部數(shù)據(jù)庫(kù)中，通過(guò)控制閥對(duì)象的唯一標(biāo)識(shí)符與幾何數(shù)據(jù)進(jìn)行關(guān)聯(lián)[5]。

上文對(duì)工藝流程圖編碼方法進(jìn)行了探究， 下面給出表示某工藝流程圖的一部分的SVG 文檔片段。

通過(guò)Edraw 軟件可以實(shí)現(xiàn)工藝流程圖的重繪， 并將其轉(zhuǎn)換成SVG 格式，這樣就省去了復(fù)雜的編程任務(wù)。

3.4 SVG 圖形的DOM 接口設(shè)計(jì)

SVG 是基于可擴(kuò)展標(biāo)記語(yǔ)言（XML）的，而文檔對(duì)象模型DOM（Document Object Model）是用與平臺(tái)和語(yǔ)言無(wú)關(guān)的方式表示XML 文檔的官方W3C 標(biāo)準(zhǔn)，它為XML 文檔提供了隨機(jī)訪問(wèn)機(jī)制，可以將XML 文檔轉(zhuǎn)換為一種分層對(duì)象模式的集合，并組織成DOM 樹(shù)。 文檔的所有內(nèi)容都用節(jié)點(diǎn)表示，節(jié)點(diǎn)本身包含一些信息，節(jié)點(diǎn)還可包含其他節(jié)點(diǎn)，節(jié)點(diǎn)對(duì)象模型類(lèi)型包含文檔根、元素、注釋、處理命令、文檔類(lèi)型、命名空間等多種對(duì)象模型。 DOM 不僅描述了節(jié)點(diǎn)的內(nèi)容與屬性， 還定義了用來(lái)操作節(jié)點(diǎn)的方法以及模型中對(duì)象之間的關(guān)系。 通過(guò)對(duì)對(duì)象模型的操作，可實(shí)現(xiàn)對(duì)XML 文檔的操作。

3.5 JavaScript 在SVG 工藝流程圖中的應(yīng)用

應(yīng)用柵格圖片只能將圖片作為一個(gè)對(duì)象來(lái)處理，而圖片內(nèi)部的元素不可以實(shí)現(xiàn)交互。SVG 圖片利用DOM 的支持可以實(shí)現(xiàn)每個(gè)圖像元素的交互操作，但利用DOM 來(lái)操作SVG 文檔中的元素需要用到腳本語(yǔ)言。 目前流行的是JavaScript 腳本和VBScript 腳本， 由于JavaScript 腳本可以支持多種瀏覽器， 故采用JavaScript 腳本語(yǔ)言來(lái)編程。 它可以嵌入到SVG 文檔中通過(guò)客戶端的瀏覽器顯示出效果。 通過(guò)嵌入到選型流程圖中的JavaScript 程序，客戶端可以實(shí)現(xiàn)對(duì)控制閥的交互操作。

JavaScript 可直接內(nèi)嵌到SVG 內(nèi)部文檔中，也可以將JavaScript 放到SVG 文檔外部實(shí)現(xiàn)對(duì)SVG 文檔的操作。

如下面的代碼所示，將函數(shù)user_function（）內(nèi)嵌到SVG 的矩形元素中， 當(dāng)點(diǎn)擊該矩形元素時(shí)會(huì)執(zhí)行user_function（）函數(shù)。

3.5.1 內(nèi)部腳本的應(yīng)用方法

SVG 格式的選型流程圖實(shí)質(zhì)上是一個(gè)XML 文檔，同XML 一樣提供了＜script＞元素，應(yīng)用該元素可以將JavaScript 程序嵌入到SVG 文檔中，但必須應(yīng)用在“CDATA” 標(biāo)記中， 這樣就可以將腳本內(nèi)嵌到SVG 文檔中。 其一般的格式如下:

3.5.2 外部腳本的應(yīng)用方法

在實(shí)際選型流程圖中，通常將SVG 格式的選型流程圖作為一個(gè)片段插入到HTML 中進(jìn)行顯示。 SVG 文檔通過(guò)HTML 中的＜embed＞嵌入到網(wǎng)頁(yè)中， 而用來(lái)操作SVG文檔的JavaScript 腳本則會(huì)放在HTML 代碼中， 相對(duì)于SVG 文檔， 這些JavaScript 腳本是外部腳本。 可以在＜embed＞元素中定義一個(gè)“name（）”屬性，作為SVG 文檔在HTML 網(wǎng)頁(yè)中的標(biāo)識(shí)，外部腳本便可以通過(guò)這個(gè)標(biāo)識(shí)來(lái)對(duì)其對(duì)象、元素、屬性等進(jìn)行操作。

4 實(shí)驗(yàn)驗(yàn)證

按照上述方法編程，運(yùn)行結(jié)果如表2、表3 所示。單擊圖中的控制閥會(huì)彈出介質(zhì)屬性表（表2）、控制閥選型參數(shù)表（表3）。

表2 流過(guò)控制閥的介質(zhì)參數(shù)

表3 推薦控制閥選型參數(shù)

5 總結(jié)

通過(guò)對(duì)工藝流程圖的分析計(jì)算，總結(jié)出流過(guò)控制閥的介質(zhì)的屬性數(shù)據(jù)。 然后重新繪制工藝流程圖，將其轉(zhuǎn)換成SVG 格式的選型流程圖，通過(guò)應(yīng)用HTML、DOM、JavaScript 對(duì)SVG 文檔進(jìn)行編程，實(shí)現(xiàn)對(duì)選型流程圖中控制閥的交互。 文本為控制閥的流程選型提供了依據(jù)，還需要進(jìn)一步拓展其功能，加強(qiáng)應(yīng)用。

［1］丁曉琴.知識(shí)信息化:知識(shí)轉(zhuǎn)化為信息過(guò)程［M］.江蘇圖書(shū)館學(xué)報(bào)，1990，20（4）:20-23.

［2］王建芳.知識(shí)管理中的信息技術(shù)與知識(shí)信息化［M］.江西圖書(shū)館學(xué)刊，2005，35（1）:103-106.

［3］Yan-tao XI.Application of GML and SVG in the development of WebGIS［M］.Journal of China University of Mining and Technology，Volume 18，Issue 1，March 2008，Pages 140–143.

［4］張杰，劉曉平.SVG 動(dòng)畫(huà)編程及其應(yīng)用［M］.汕頭大學(xué)學(xué)報(bào)，2005，20（2）:69-74.

［5］劉廣深，杜文才，符華兒，等.SVG 動(dòng)態(tài)交互性研究［M］.網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2008，14（3）:56-58.