基于SVG流程圖的設備管理系統的設計與實現

翟廣鵬，朱群雄

（北京化工大學 信息科學與技術學院，北京100029）

0 引 言

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

針對上述現狀，如何采用SVG這一標準的矢量圖形格式對企業設備及其流程圖進行圖形建模，建立一個可擴展的設備矢量圖元庫，構建一個基于WEB的設備管理信息交互的平臺，將設備管理的業務屬性通過SVG流程圖的圖形化界面展示給用戶，具有很高的研究以及應用價值。

1 SVG技術簡介

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

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

2 系統分析與設計

2.1 基于SVG的設備流程圖圖形交互策略

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

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

圖1 設備流程圖圖形交互策略

2.2 基于SVG的設備圖元庫設計

SVG規范只對SVG的基本圖形功能進行了定義，而沒有針對特定的行業應用進行定義。由于SVG格式基于XML，因此其具有較為方便的自定義功能和擴展性。在基本的SVG文件結構的基礎上進行了擴展，定義了可以滿足設備管理系統要求的圖形文件結構。格式如下：

＜？xml－stylesheet href＝”設備狀態定義 .css”type＝”text/css”？＞ //引入樣式表

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

＜/defs＞ //設備圖元定義

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

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

//引用已定義的圖元

＜/layer＞＜/svg＞

用戶通過SVG圖形編輯器在線編輯設備圖元生成以上結構的SVG文件，然后保存到設備圖元庫中，以備系統調用。

2.3 設備圖元與設備業務屬性的關聯策略

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

3 基于SVG流程圖的設備管理系統的實現

3.1 總體架構

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

針對以上需求，設計系統的總體架構如圖2所示。

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

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

已有的矢量圖形編輯器往往采用C/S架構，功能雖然較為強大，但是具有部署和維護成本較高等缺點。考慮到Web應用程序能力逐漸增強，能否開發一個B/S架構的SVG圖形編輯系統，是基于流程圖的設備管理信息系統的一個關鍵問題。本系統實現了一個B/S的SVG圖形編輯器。該編輯器基于JS與DOM，實現了設備圖元與流程圖SVG文件的繪制。

圖2 系統總體架構

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

圖3 SVG圖形編輯器界面

3.3 基于流程圖進行設備管理

對于石化企業這種流程型企業，設備種類較多，設備數據和報表不盡相同，各部門間的業務流程相互聯系，給系統信息集成與共享造成了很大困難。流程型企業迫切需要適應流程企業發展的設備管理系統，用于輔助企業設備管理工作。在流程企業尤其是石化企業中，設備流程圖是其設備管理工作的重要組成部分。基于流程圖進行設備管理，不僅可以實現操作和信息分析的可視化，大大增加枯燥、單調的業務數據的可讀性，更重要的是它可以提供信息交互的平臺，提高信息資源的綜合利用率，達到信息處理的優化。

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

圖4 使用設備圖元庫界面

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

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

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

系統參數設置模塊提供了完善的用戶管理、角色管理、單位管理、權限管理、事務管理、事件管理、日志管理的實現，提供了功能擴展的接口，在事務類型管理和事件類型管理中設置好新開發功能的相關信息，即可將新功能集成到本系統中來。如圖5所示。

圖5 系統功能擴展界面

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

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

4 結束語

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

［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的研究與實現 ［J］.計算機工程與設計，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的矢量圖形編輯系統的數據描述模型 ［J］.計算機工程與設計，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］.計 算 機 工 程，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）.［楊現坤，崔偉宏.基于數據庫綜合和SVG的網絡制圖 綜 合 系 統 研 究 ［J］. 計 算 機 應 用，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的虛擬村莊系統開發 ［J］.計算機應用，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的電力圖形系統的實現 ［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的矢量圖形構架 ［J］.計算機應用，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的電力圖元庫的設計與實現 ［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模式下的變電站設備管理信息系統研究 ［D］.北京：華北電力大學，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模式的網絡化設備管理決策支持系統的研究 ［D］.杭州：浙江大學，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技術在實時信息發布系統中的應用 ［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）. ［王志梅，田啟明，曹月苓.用網絡矢量圖像SVG技術實現網絡監控圖形的顯示 ［J］.計算機系統應用，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的空間信息描述與可視化表達 ［J］.測繪學報，2005，34 （1）：58－63.］