基于SVG流程圖的設(shè)備管理系統(tǒng)的設(shè)計與實現(xiàn)

翟廣鵬，朱群雄

（北京化工大學(xué) 信息科學(xué)與技術(shù)學(xué)院，北京100029）

0 引 言

目前，以圖形作為信息交互平臺的設(shè)備管理軟件極為缺乏。提及企業(yè)設(shè)備的信息資源，人們很自然地想到設(shè)備臺賬、設(shè)備維護(hù)等文字信息，圖形作為一種企業(yè)潛在的信息資源卻常常被忽視。在流程企業(yè)尤其是石化企業(yè)中，設(shè)備流程圖是其設(shè)備管理工作的重要組成部分。圖形信息與設(shè)備信息的結(jié)合，不僅可以實現(xiàn)操作和信息分析的可視化，大大增加枯燥、單調(diào)的業(yè)務(wù)數(shù)據(jù)的可讀性，更重要的是它可以提供信息交互的平臺，提高信息資源的綜合利用率，達(dá)到信息處理的優(yōu)化。此外，現(xiàn)有的設(shè)備管理軟件圖形格式多樣化。由于缺乏統(tǒng)一的圖形標(biāo)準(zhǔn)，目前的設(shè)備管理系統(tǒng)與其它信息系統(tǒng)之間難以進(jìn)行圖形數(shù)據(jù)的共享，不但造成信息冗余而且增加了繪圖成本。采用點陣圖作為圖形信息發(fā)布格式，也遠(yuǎn)遠(yuǎn)無法滿足網(wǎng)絡(luò)時代，用戶對實時性和交互性的要求。

針對上述現(xiàn)狀，如何采用SVG這一標(biāo)準(zhǔn)的矢量圖形格式對企業(yè)設(shè)備及其流程圖進(jìn)行圖形建模，建立一個可擴(kuò)展的設(shè)備矢量圖元庫，構(gòu)建一個基于WEB的設(shè)備管理信息交互的平臺，將設(shè)備管理的業(yè)務(wù)屬性通過SVG流程圖的圖形化界面展示給用戶，具有很高的研究以及應(yīng)用價值。

1 SVG技術(shù)簡介

SVG是一種開放標(biāo)準(zhǔn)的文本式矢量圖形描述語言。使用SVG可以在網(wǎng)頁上顯示出各種各樣的高質(zhì)量矢量圖形，包括圖像處理中常見的許多功能，如圖形、文字、動畫、色彩、濾鏡效果等。關(guān)鍵的是：SVG完全用普通文本來描述。也就是說，這是一種專門為網(wǎng)絡(luò)而設(shè)計的、基于文本的圖像格式。并且SVG是基于XML（extensible markup language）語言的，所以可擴(kuò)展性很強(qiáng)，并能夠描述任意復(fù)雜的圖像［1］。

SVG嚴(yán)格遵循XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，以較小的文件體積，實現(xiàn)較高的圖形品質(zhì)，支持豐富的視覺表現(xiàn)效果，內(nèi)嵌的文字內(nèi)容可以被搜索和選擇，具有交互性和動態(tài)性，完全支持DOM，同時這個規(guī)范是開放和中立的，使其可以與其它類型的數(shù)據(jù)相互轉(zhuǎn)換，提供了優(yōu)良的擴(kuò)展性和開放性。

2 系統(tǒng)分析與設(shè)計

2.1 基于SVG的設(shè)備流程圖圖形交互策略

在基于SVG的設(shè)備管理系統(tǒng)中，通過鼠標(biāo)與SVG流程圖的交互，用戶可以查看不同廠區(qū)不同工段各個設(shè)備的業(yè)務(wù)信息。為用戶提供的業(yè)務(wù)信息包括設(shè)備的規(guī)格、型號、安裝日期、生產(chǎn)廠家、所在部門、設(shè)備類別、折舊年限、設(shè)備負(fù)責(zé)人等基礎(chǔ)信息，還包括該設(shè)備相關(guān)的技術(shù)文檔、維護(hù)手冊等輔助資料，根據(jù)設(shè)備維護(hù)計劃，接近維護(hù)時間的設(shè)備還會在流程圖上動態(tài)高亮，提醒管理人員對其進(jìn)行保養(yǎng)。這些都可利用SVG的動態(tài)和交互功能實現(xiàn)。

本系統(tǒng)圖形交互策略如圖1所示。SVG圖元由用戶使用基于JS和DOM的SVG圖形編輯器生成并存儲在設(shè)備圖元庫中。在設(shè)備圖元庫中，使用SVG規(guī)范中的＜symbol＞標(biāo)識符定義標(biāo)準(zhǔn)的設(shè)備圖元形狀。在樣式表 （CSS）文件中定義設(shè)備流程圖的呈現(xiàn)規(guī)則。在實際應(yīng)用中，＜layer＞元素體現(xiàn)了設(shè)備圖元的層次關(guān)系，通過＜use＞元素將設(shè)備圖元實例化，并完成圖元與設(shè)備屬性的映射。＜use＞元素定義了設(shè)備圖元id屬性，通過此id引用設(shè)備業(yè)務(wù)屬性庫中的設(shè)備屬性。

圖1 設(shè)備流程圖圖形交互策略

2.2 基于SVG的設(shè)備圖元庫設(shè)計

SVG規(guī)范只對SVG的基本圖形功能進(jìn)行了定義，而沒有針對特定的行業(yè)應(yīng)用進(jìn)行定義。由于SVG格式基于XML，因此其具有較為方便的自定義功能和擴(kuò)展性。在基本的SVG文件結(jié)構(gòu)的基礎(chǔ)上進(jìn)行了擴(kuò)展，定義了可以滿足設(shè)備管理系統(tǒng)要求的圖形文件結(jié)構(gòu)。格式如下：

＜？xml－stylesheet href＝”設(shè)備狀態(tài)定義 .css”type＝”text/css”？＞ //引入樣式表

＜svg＞＜defs＞＜symbol id＝…＞……＜/symbol＞

＜/defs＞ //設(shè)備圖元定義

＜layer id＝…＞ //圖層定義

＜use xlink：href＝…id＝…/＞

//引用已定義的圖元

＜/layer＞＜/svg＞

用戶通過SVG圖形編輯器在線編輯設(shè)備圖元生成以上結(jié)構(gòu)的SVG文件，然后保存到設(shè)備圖元庫中，以備系統(tǒng)調(diào)用。

2.3 設(shè)備圖元與設(shè)備業(yè)務(wù)屬性的關(guān)聯(lián)策略

本系統(tǒng)將設(shè)備業(yè)務(wù)屬性數(shù)據(jù)存儲在設(shè)備業(yè)務(wù)屬性數(shù)據(jù)庫中，通過使用SVG文件中所描述對象的id屬性進(jìn)行關(guān)聯(lián)。圖形文件和屬性數(shù)據(jù)文件相分離，簡化了SVG編碼的復(fù)雜程度，對于同一對象圖形和屬性數(shù)據(jù)采用相同的標(biāo)記也不會發(fā)生沖突，并且使得SVG文件更為簡潔，重用性更好，特別是對于一些實時數(shù)據(jù)，用這種表示方法能夠更為方便的獲取業(yè)務(wù)數(shù)據(jù)庫中的數(shù)據(jù)信息。

3 基于SVG流程圖的設(shè)備管理系統(tǒng)的實現(xiàn)

3.1 總體架構(gòu)

不同企業(yè)對與設(shè)備管理的具體需求往往存在著較大的差異，因此一個通用的設(shè)備管理平臺首先需要滿足不同企業(yè)對設(shè)備管理功能共性的需求。分析了目前一些企業(yè)的設(shè)備管理需求，得出以下幾點普遍存在的基礎(chǔ)需求：①面向各管理層：應(yīng)適應(yīng)各管理層，多用戶的管理需要。②安全及權(quán)限機(jī)制：面向角色的權(quán)限管理，完善的功能授權(quán)。③消息引擎：應(yīng)具有較好的兼容性和擴(kuò)展性，可以適應(yīng)各種企業(yè)設(shè)備管理功能的擴(kuò)展。④數(shù)據(jù)字典：滿足企業(yè)對于設(shè)備數(shù)據(jù)的個性化要求，可由企業(yè)用戶自行添加相應(yīng)的字段。

針對以上需求，設(shè)計系統(tǒng)的總體架構(gòu)如圖2所示。

系統(tǒng)采用三層體系結(jié)構(gòu)，將數(shù)據(jù)處理過程分為3部分：表現(xiàn)層 （用戶界面）、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層。表現(xiàn)層主要負(fù)責(zé)為用戶提供良好的人機(jī)交互界面。業(yè)務(wù)邏輯層是三層結(jié)構(gòu)系統(tǒng)中的核心層面，負(fù)責(zé)表現(xiàn)層與服務(wù)器、服務(wù)器與服務(wù)器間的連接與通訊，并且實現(xiàn)與數(shù)據(jù)庫的高速連接。數(shù)據(jù)訪問層負(fù)責(zé)對數(shù)據(jù)信息進(jìn)行存儲、查詢、插入等操作。這3個層次在結(jié)構(gòu)上相互獨立，任何一層的改變不會影響其它兩層的功能。三層體系結(jié)構(gòu)將表示層、業(yè)務(wù)邏輯層與數(shù)據(jù)訪問層很好的分離，降低了三者之間的耦合性，符合軟件高內(nèi)聚、低耦合的原則，既能夠適應(yīng)企業(yè)級應(yīng)用日益增長的復(fù)雜度以及靈活性等要求，也提高了系統(tǒng)的易于擴(kuò)展性、可維護(hù)性和可重用性。

3.2 基于JS與DOM的SVG圖形編輯器

已有的矢量圖形編輯器往往采用C/S架構(gòu)，功能雖然較為強(qiáng)大，但是具有部署和維護(hù)成本較高等缺點。考慮到Web應(yīng)用程序能力逐漸增強(qiáng)，能否開發(fā)一個B/S架構(gòu)的SVG圖形編輯系統(tǒng)，是基于流程圖的設(shè)備管理信息系統(tǒng)的一個關(guān)鍵問題。本系統(tǒng)實現(xiàn)了一個B/S的SVG圖形編輯器。該編輯器基于JS與DOM，實現(xiàn)了設(shè)備圖元與流程圖SVG文件的繪制。

圖2 系統(tǒng)總體架構(gòu)

在HTML頁面中嵌入一個用戶可見的空白SVG文件，利用JavaScript對頁面中DOM樹中的SVG節(jié)點進(jìn)行相應(yīng)操作。這些操作包括了基本圖元的繪制、選擇、拖動、縮放等。繪圖員首先在繪圖工具欄選擇繪制工具，通過SVG－set＿draw＿mode（ele＿name）方法更改繪圖模式，參數(shù)有矩形、圓形、刪除、直線、手寫、清空等。然后通過fun＿mouseDOWN （evt）、fun ＿mouseMOVE （evt）、fun ＿mouseUP（evt）這3個方法分別對用戶鼠標(biāo)事件進(jìn)行監(jiān)聽，根據(jù)不同的繪圖模式，選擇進(jìn)行相應(yīng)的DOM操作，包括對SVG節(jié)點和屬性進(jìn)行添加、修改或者刪除，瀏覽器上的SVG圖像也會產(chǎn)生相應(yīng)的變化，從而實現(xiàn)所見即所得的圖形編輯功能。圖3顯示了該圖形編輯器的使用界面。

圖3 SVG圖形編輯器界面

3.3 基于流程圖進(jìn)行設(shè)備管理

對于石化企業(yè)這種流程型企業(yè)，設(shè)備種類較多，設(shè)備數(shù)據(jù)和報表不盡相同，各部門間的業(yè)務(wù)流程相互聯(lián)系，給系統(tǒng)信息集成與共享造成了很大困難。流程型企業(yè)迫切需要適應(yīng)流程企業(yè)發(fā)展的設(shè)備管理系統(tǒng)，用于輔助企業(yè)設(shè)備管理工作。在流程企業(yè)尤其是石化企業(yè)中，設(shè)備流程圖是其設(shè)備管理工作的重要組成部分?；诹鞒虉D進(jìn)行設(shè)備管理，不僅可以實現(xiàn)操作和信息分析的可視化，大大增加枯燥、單調(diào)的業(yè)務(wù)數(shù)據(jù)的可讀性，更重要的是它可以提供信息交互的平臺，提高信息資源的綜合利用率，達(dá)到信息處理的優(yōu)化。

設(shè)備流程圖是本系統(tǒng)中設(shè)備管理的核心。用戶可以在SVG圖形編輯器中繪制設(shè)備圖元，并存儲在設(shè)備圖元數(shù)據(jù)庫中。然后在繪制流程圖過程中，可以調(diào)用繪制好的設(shè)備圖元，這樣大大簡化了流程圖繪制的工作量，如圖4所示。

圖4 使用設(shè)備圖元庫界面

流程圖繪制好后，將存放在流程圖庫中。在設(shè)備管理系統(tǒng)中，該流程圖將被繪制在設(shè)備管理窗口中作為背景顯示，在該窗口中，設(shè)備與設(shè)備之間的流向關(guān)系簡潔明晰。點擊相應(yīng)的設(shè)備，就可以查看該設(shè)備的相關(guān)業(yè)務(wù)信息，包括了設(shè)備位號、設(shè)備編號、資產(chǎn)價格、折舊率，上次維護(hù)日期等。

該系統(tǒng)的各項功能模塊包括有設(shè)備臺賬管理、特種設(shè)備管理、設(shè)備使用管理、備件倉庫管理、流程圖繪制子系統(tǒng)、統(tǒng)計分析系統(tǒng)以及系統(tǒng)參數(shù)設(shè)置。

在特種設(shè)備的管理中，特種設(shè)備與普通設(shè)備最大的不同點是為保證人身、設(shè)備的安全運行，在這個模塊中，“特種設(shè)備列表”把特種設(shè)備單獨列出來，可以對特種設(shè)備進(jìn)行集中管理。設(shè)備使用管理主要有點檢管理、潤滑管理、保養(yǎng)管理、維修管理、故障管理等，該模塊涵蓋了設(shè)備管理工作中的大部分內(nèi)容，功能實用、操作簡單。同時，還應(yīng)實現(xiàn)潤滑報警、保養(yǎng)報警、維修報警功能，使設(shè)備能夠保持良好的保養(yǎng)和維護(hù)、延長設(shè)備的使用壽命、提高設(shè)備的使用效率、降低生產(chǎn)的成本。統(tǒng)計分析系統(tǒng)可以自動生成故障率趨勢圖、有關(guān)設(shè)備的狀態(tài)分析圖表，對重復(fù)頻次多、緊急程度高和影響大的問題，推薦技術(shù)改造方案。

系統(tǒng)參數(shù)設(shè)置模塊提供了完善的用戶管理、角色管理、單位管理、權(quán)限管理、事務(wù)管理、事件管理、日志管理的實現(xiàn)，提供了功能擴(kuò)展的接口，在事務(wù)類型管理和事件類型管理中設(shè)置好新開發(fā)功能的相關(guān)信息，即可將新功能集成到本系統(tǒng)中來。如圖5所示。

圖5 系統(tǒng)功能擴(kuò)展界面

該框架提供了完善的用戶權(quán)限控制。權(quán)限分配功能模塊可以為各角色進(jìn)行權(quán)限分配。為角色分配好權(quán)限后，可以為角色分配用戶，一個用戶可以有多種角色，對應(yīng)多種權(quán)限。用戶登錄系統(tǒng)時，根據(jù)用戶所屬角色的權(quán)限，自動提供相應(yīng)的功能和操作模塊，例如不同工段的設(shè)備管理人員，可以為其提供相應(yīng)工段的操作界面，而對于上級，可以單獨提供其設(shè)備管理的數(shù)據(jù)統(tǒng)計和分析情況，對于專門的制圖人員，只有繪圖權(quán)限，可以只顯示繪圖模塊，有助于企業(yè)設(shè)備管理過程中，系統(tǒng)使用的安全與用戶責(zé)任的明確。

此外，系統(tǒng)日志功能模塊詳細(xì)記錄了每個用戶的登錄時間和IP，錯誤日志記錄了用戶進(jìn)行數(shù)據(jù)庫查詢出錯時的查詢語句等。對于企業(yè)設(shè)備管理過程中出現(xiàn)的各種錯誤可以很好的進(jìn)行記錄，以便出現(xiàn)問題時進(jìn)行分析。

4 結(jié)束語

針對國內(nèi)設(shè)備管理信息系統(tǒng)圖形化軟件缺乏以及圖形格式多種多樣的現(xiàn)狀，提出了一種基于SVG流程圖進(jìn)行設(shè)備管理的實現(xiàn)方法和途徑，并給出了一種基于SVG（可擴(kuò)展矢量圖形）流程圖的設(shè)備管理系統(tǒng)的設(shè)計與實現(xiàn)。系統(tǒng)基于B/S的三層體系架構(gòu)，實現(xiàn)了一種基于WEB的SVG圖形編輯系統(tǒng)，創(chuàng)建了一個SVG圖元庫，支持復(fù)雜的圖形操作，提供了可解析與交互的設(shè)備圖形信息應(yīng)用平臺。針對流程企業(yè)尤其是石化企業(yè)，基于SVG流程圖實現(xiàn)了更加直觀、便捷、高效的設(shè)備管理功能。同時系統(tǒng)還提供了很好的通用性與功能擴(kuò)展性，具有一定的實用價值。

［1］WANG Weihua，WANG Weifu.Study and realization of SVG－based WebGIS ［J］.Computer Engineering and Design，2008，29 （22）：5706－5708 （in Chinese）. ［汪維華，汪維富.基于SVG的WebGIS的研究與實現(xiàn) ［J］.計算機(jī)工程與設(shè)計，2008，29 （22）：5706－5708.］

［2］W3C.Scalable vector graphics（SVG）1.1specification ［EB/OL］.［2010－06－22］.http：//www.w3.org/TR/SVG/.

［3］GAN Zaobin，LI Zhixin，PENG Bin.Data description model of vector graphics editing system based on SVG ［J］.Computer Engineering and Design，2005，26 （1）：270－273 （in Chinese）.［甘早斌，李志欣，彭彬.基于SVG的矢量圖形編輯系統(tǒng)的數(shù)據(jù)描述模型 ［J］.計算機(jī)工程與設(shè)計，2005，26（1）：270－273.］

［4］WAN Benting，CHEN Ming.SVG－based vector graphics library management model［J］.Computer Engineering，2006，32 （3）：65－67 （in Chinese）.［萬本庭，陳明.基于SVG的矢量圖 形 庫 管 理 模 型 ［J］.計 算 機(jī) 工 程，2006，32 （3）：65－67.］

［5］YANG Xiankun，CUI Weihong.Web cartographic generalization based on database generalization and SVG ［J］.Journal of Computer Applications，2009，29 （1）：201－204 （in Chinese）.［楊現(xiàn)坤，崔偉宏.基于數(shù)據(jù)庫綜合和SVG的網(wǎng)絡(luò)制圖 綜 合 系 統(tǒng) 研 究 ［J］. 計 算 機(jī) 應(yīng) 用，2009，29 （1）：201－204.］

［6］WANG Longhe，LI Lin，WANG Jianluan，et al.Exploitation of virtual villages information system based on SVG Ajax and Applet［J］.Journal of Computer Applications，2009，29（S2）：311－313 （in Chinese）. ［王龍鶴，李林，王建侖，等.基于SVG、Ajax和Applet的虛擬村莊系統(tǒng)開發(fā) ［J］.計算機(jī)應(yīng)用，2009，29 （S2）：311－313.］

［7］LIU Zunxiong，KUANG Zhijun，GAO Yuzhu.Realization of power graphics system based on SVG ［J］.Relay，2005，33（21）：69－78 （in Chinese）. ［劉遵雄，況志軍，高玉柱.基于SVG的電力圖形系統(tǒng)的實現(xiàn) ［J］.繼電器，2005，33（21）：69－78.］

［8］CHANG Qi，ZHONG Yong.Dynamic vector graphics architecture based on VML and SVG ［J］.Journal of Computer Applications，2009，29 （B06）：288－291 （in Chinese）. ［常齊，鐘勇.基于VML與SVG的矢量圖形構(gòu)架 ［J］.計算機(jī)應(yīng)用，2009，29 （B06）：288－291.］

［9］WANG Jian，CHEN Jianyun，QU Zhijian.Design and realization of power graphics elements library based on SVG ［J］.Relay，2008，36 （8）：79－82 （in Chinese）.［王健，陳劍云，屈志堅.基于SVG的電力圖元庫的設(shè)計與實現(xiàn) ［J］.繼電器，2008，36 （8）：79－82.］

［10］ZHANG Baojun.The study on management information system for equipment of substation based on B/S mode ［D］.Beijing：North China Electric Power University，2006 （in Chinese）.［張寶俊.B/S模式下的變電站設(shè)備管理信息系統(tǒng)研究 ［D］.北京：華北電力大學(xué)，2006.］

［11］YU Haihong.Study on equipment management decision support system of online based on B/S mode ［J］.Hangzhou：Zhejiang University，2006 （in Chinese）.［俞海紅.基于B/S模式的網(wǎng)絡(luò)化設(shè)備管理決策支持系統(tǒng)的研究 ［D］.杭州：浙江大學(xué)，2006.］

［12］LAI xun，WANG paul.An SVG based tool for plane geometry and mathematics education ［C］.IEEE Southeast Conference，2005.

［13］ZHANG Lijing，YANG Jijia，SHANG Libiao.Application of the SVG to real time information publishing system ［J］.Computer Simulation，2006，23 （1）：255－257 （in Chinese）.［張麗靜，楊繼家，商李彪.SVG技術(shù)在實時信息發(fā)布系統(tǒng)中的應(yīng)用 ［J］.計算機(jī)仿真，2006，23 （1）：255－257.］

［14］WANG Zhimei，TIAN Qiming，CAO Yueling.Graphics display of web monitoring and control software based on SVG［J］.Applications of the Computer Systems，2005，15 （12）：15－17（in Chinese）. ［王志梅，田啟明，曹月苓.用網(wǎng)絡(luò)矢量圖像SVG技術(shù)實現(xiàn)網(wǎng)絡(luò)監(jiān)控圖形的顯示 ［J］.計算機(jī)系統(tǒng)應(yīng)用，2005，15 （12）：15－17.］

［15］LI Qingquan，XIE Zhiying，ZUO Xiaoqing，et al.The spatial information description and visualization based on SVG［J］.Acta Geodaetica Et Cartographic Sinica，2005，34 （1）：58－63（in Chinese）. ［李清泉，謝智穎，左小清，等.基于SVG的空間信息描述與可視化表達(dá) ［J］.測繪學(xué)報，2005，34 （1）：58－63.］