基于SVG和Ajax的電網(wǎng)一次接線圖實現(xiàn)

曲 鋒

（電子科技大學 自動化工程學院電力系統(tǒng)廣域測量與控制重點實驗室，成都 611731）

0 引言

電網(wǎng)一次接線圖是電網(wǎng)能量管理系統(tǒng)中人機交互功能的重要組成部分之一，通過它可以直觀地查看各監(jiān)測節(jié)點的實時數(shù)據(jù)，了解電氣設備的運行狀態(tài)[1]。在B/S模式下實現(xiàn)電網(wǎng)一次接線圖，需要完成以下2項工作：圖形圖像的顯示和實時數(shù)據(jù)的傳輸。

目前基于WEB的圖形圖像顯示多采用位圖圖像或Java Applet的方式，但位圖圖像無論大小還是內(nèi)容一旦固定就無法編輯，無法滿足動態(tài)傳輸?shù)囊?；而Java Applet雖然可以較好解決以上問題，但其在反應速度、可編輯性、可重用性等方面依然存在很多障礙，影響了對用戶的交互性和友好性。SVG（Scalable Vector Graphics）作為新一代的矢量圖形語言，解決了以往在WEB端難以顯示動態(tài)圖形的問題，且具有交互性高、易編輯、跨平臺等特點，更適于實現(xiàn)電網(wǎng)一次接線圖的繪制。

而在實時數(shù)據(jù)傳輸與刷新方面，Ajax（Asynchronous JavaScript and XML）是一個很好的選擇。Ajax是一種新的WEB開發(fā)模型，綜合運用了JavaScript和XML等已經(jīng)成熟的技術(shù)，改變?yōu)g覽器客戶端和服務器端傳統(tǒng)的同步交互通信方式為異步通信交互方式，解決了瀏覽器頻繁刷新頁面等待數(shù)據(jù)傳輸?shù)膯栴}，改善了WEB應用程序的用戶體驗。SVG基于XML，通過Ajax技術(shù)可以方便地對其進行編輯和控制，因此，采用SVG結(jié)合Ajax技術(shù)來實現(xiàn)電網(wǎng)一次接線圖是一種更為有效的方案。

1 相關(guān)技術(shù)

1.1 SVG

SVG是基于XML語言的可伸縮矢量圖形語言描述規(guī)范。它提供了矢量圖形、圖像、漸變填充、文本和動畫等圖形對象，圖形對象還可以進行分組、添加樣式、變換、組合等操作[2]。SVG主要特點如下。

1）SVG動態(tài)交互功能強大，可利用DOM接口進行編輯，通過腳本定義來達到高亮顯示、聲音、動畫等效果，并能對用戶操作做出不同的響應；

2）SVG圖像中的文字獨立于圖像，文字標注也可被動態(tài)地移動和縮放，方便對內(nèi)容的編輯和修改；

3）SVG圖像的清晰度適合任何屏幕分辨率或打印分辨率，不會產(chǎn)生位圖圖像的馬賽克現(xiàn)象，用戶可以自由地縮放圖像，查看圖像中數(shù)字和文本等內(nèi)容；

4）SVG是基于XML來表達知識、傳遞數(shù)據(jù)的，這就意味著它繼承了XML的跨平臺性和可擴展性，從而在圖形可重用性上邁出了一大步。

1.2 Ajax

Ajax并不是一項新的技術(shù)，而是多種技術(shù)的綜合，其中包括JavaScript、DOM、XML和XMLHttpRequest等；利用DOM（文檔對象模型）進行動態(tài)顯示和交互，使用XML進行數(shù)據(jù)存儲和操作，使用XMLHttpRequest進行異步數(shù)據(jù)接收，使用JavaScript將以上各項技術(shù)綁定在一起。Ajax采用異步交互方式，在用戶和服務器之間引入了一個中間媒介，從而改變了同步交互過程中的“處理—等待—處理—等待”模式，用戶行為和服務器端數(shù)據(jù)處理過程可平行進行。瀏覽器不必等待用戶請求操作，也不必更新整個窗口就可以顯示新獲取的數(shù)據(jù)。只要來回傳送采用XML格式的數(shù)據(jù)，在瀏覽器里面運行的JavaScript代碼就可以與服務器進行聯(lián)系。執(zhí)行結(jié)果到達時，才會通知瀏覽器客戶端，使之能夠在合適的時間顯示執(zhí)行結(jié)果。Ajax異步交互過程如圖1所示。

圖1 Ajax的異步傳輸過程

2 實例應用

2.1 SVG電力圖元設計

SVG中提供了線段、矩形、圓、橢圓、折線和多邊形6種基本圖形元素和一個繪制復雜圖形的路徑元素（path），但在電網(wǎng)一次接線圖中則會有數(shù)以百計的形狀復雜的電力設備圖元，如電容、電阻、發(fā)電機、兩相變壓器、三相變壓器、開關(guān)、刀閘等，在圖形不同區(qū)域?qū)τ谕N設備圖元的圖形結(jié)構(gòu)是完全一樣的，只是圖形的位置、方向等不同。因此可以通過基本圖形對電力圖元進行設計，并將每種設備圖元定義為一個圖元類，在圖形的不同區(qū)域?qū)Ω鲌D元類進行引用。這樣既方便對圖元進行編輯管理，也減小了圖像文件的大小，有利于文件的傳輸。

SVG中提供了對圖形進行定義和引用的機制，提供了、、、4個元素。、和元素聯(lián)合起來可以定義一個圖元模板，同時對模板的樣式風格等屬性進行設置，再通過元素根據(jù)id以實例的方式引用該模板，進行實際的繪圖操作，完成接線圖的繪制。元素有4個屬性：x、y、height和width， 通過它們可以定義引用元素在矩形渲染區(qū)域的位置，再結(jié)合可以對圖形位置和形狀進行變換的Transform屬性，就可以對圖元進行平移、旋轉(zhuǎn)和伸縮等操作。例如，下面的語句就描述了一個發(fā)電機的幾何圖形。

上例代碼在瀏覽器中打開后的效果如圖2所示。

圖2 瀏覽器中顯示的發(fā)電機圖元

圖2 中上方的發(fā)電機是直接引用模板中定義的圖元進行繪制的圖形，下方的發(fā)電機是在引用時添加了Transform屬性進行平移變換后繪制的圖形，運用這種方法就可以實現(xiàn)相同設備圖元在不同區(qū)域的引用，有效減少重復代碼，加快圖形文件的展開速度。

2.2 SVG結(jié)合Ajax實現(xiàn)動態(tài)交互

SVG雖然能把數(shù)據(jù)以圖形的形式表現(xiàn)出來，但是單純的SVG卻不能做到數(shù)據(jù)的實時傳輸和頁面的自動更新。解決這一問題有多種實現(xiàn)方法，最簡單直接的方法是采用JSP方式生成SVG文件，通過在頁面頭部加入刷新HTML的元標記定時刷新頁面，從數(shù)據(jù)庫中獲得實時變化的數(shù)據(jù)。這種方法雖然簡單易用，但在電網(wǎng)接線圖這種數(shù)據(jù)量大、刷新時間間隔要求短、頁面復雜的情況下，則會產(chǎn)生頁面閃爍，交互性差等缺點，影響用戶對實時數(shù)據(jù)的監(jiān)測；文獻[3]則提出了一種頁面隱藏法，即在HTML中嵌入1個JSP頁面，JSP頁面負責讀取數(shù)據(jù)，通過頁面刷新實現(xiàn)數(shù)據(jù)的定時讀取，利用JavaScript改變元素的顯示屬性。這種方法是通過在服務器端輸出JavaScript語句到客戶端來實現(xiàn)的，這樣使得服務器端與客戶端不具有松耦合性，同時服務器端的實時數(shù)據(jù)不具有重用性。Ajax是解決上述問題的一種更為有效的方法。在SVG中使用Ajax進行數(shù)據(jù)的刷新十分方便，見圖3，其主要工作方式如下。

1）客戶端定時發(fā)起請求，通過調(diào)用getURL函數(shù)實現(xiàn)與服務器的通信，函數(shù)的參數(shù)就是需要請求的服務器端JSP頁面；

2）服務器端JSP頁面實現(xiàn)與數(shù)據(jù)庫的直接交互，通過執(zhí)行SQL語句或者存儲過程等方式獲得所需數(shù)據(jù)，并將數(shù)據(jù)簡單封裝后發(fā)回客戶端；

3）由于Ajax的異步性，只有當有數(shù)據(jù)傳回客戶端后，客戶端才會調(diào)用相應的回調(diào)函數(shù)進行數(shù)據(jù)的提取和處理；

4）數(shù)據(jù)處理完畢后，通過JavaScript控制DOM樹，使這些新的數(shù)據(jù)成為SVG文檔的一部分，從而改變SVG頁面上的現(xiàn)實。

圖3 SVG數(shù)據(jù)刷新系統(tǒng)原理圖

使用Ajax來完成SVG圖形中數(shù)據(jù)的傳輸較之傳統(tǒng)的頁面刷新法和隱藏頁面法的優(yōu)勢在于：

1）通過異步模式，在不刷新整個界面的情況下更新局部內(nèi)容，提高了數(shù)據(jù)傳輸速度，提升了用戶體驗；

2）優(yōu)化了瀏覽器和服務器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用；

3）Ajax引擎在客戶端運行，承擔了一部分本來由服務器承擔的工作，從而減少了大用戶量下服務器的負載。

2.3 一次接線圖的實現(xiàn)

圖4和圖5分別是一次接線圖局部靜態(tài)界面和數(shù)據(jù)刷新后的動態(tài)界面，不同的顏色用以表示不同等級的電壓，電網(wǎng)各項數(shù)據(jù)通過Ajax技術(shù)從數(shù)據(jù)庫系統(tǒng)獲得，實時顯示在相應設備和線路旁邊，方便對電網(wǎng)運行狀況進行監(jiān)測[4]；同時也可在接線圖中通過超鏈接功能實現(xiàn)到電壓棒圖、歷史數(shù)據(jù)等不同功能頁面的跳轉(zhuǎn)，從而達到各項資源的綜合利用。

圖4 一次接線圖局部靜態(tài)界面

圖5 一次接線圖數(shù)據(jù)動態(tài)刷新界面

SVG基于XML的特性使得圖形文件可以方便地進行編輯，進行電力圖元的更新只需添加、修改或刪除相應的文本語句就可輕松實現(xiàn)，但在編輯過程中要格外仔細，不正確的文本格式以及多余的標點符號（如逗號、空格等）都會導致SVG圖形渲染失??；同時，SVG文本中添加的JavaScript腳本應盡量采用外部引用的方式，這樣有利于減小圖形文件的大小，也方便腳本代碼的維護。

3 結(jié)語

將SVG和Ajax技術(shù)應用到電網(wǎng)一次接線圖的開發(fā)中，提出了一個基于B/S模式的電網(wǎng)一次接線圖開發(fā)方案，并對其中關(guān)鍵技術(shù)的應用進行了詳細介紹和剖析。實例證明，這種方法簡明有效，一次接線圖的效果清晰，數(shù)據(jù)響應迅速，用戶體驗性好。

[1] 劉海軍,韓民曉,吳俊勇.基于最小割集的牽引變電站主接線可靠性評估[J].電網(wǎng)與清潔能源,2008,24(7):24-29.

[2] 黃凱偉.SVG開發(fā)實踐[M].北京：電子工業(yè)出版社,2008：51-230.

[3] 陳傳波,王菁,鄧凱.基于SVG的實時數(shù)據(jù)動態(tài)發(fā)布技術(shù)的研究[J].小型微型計算機系統(tǒng),2008,23(5)：609-612.

[4] 張榮,郭立君,劉箴.基于SVG的實時監(jiān)控系統(tǒng)設計與實現(xiàn)[J].微電子學與計算機,2006,23(6)：223-226.