基于Widget的統(tǒng)一展現(xiàn)框架的設(shè)計(jì)與實(shí)現(xiàn)

陸海應(yīng)，樓 楠，李林輝，辛 闊，梁彥杰，張 坤，黎值源

(1. 中國(guó)南方電網(wǎng)電力調(diào)度控制中心，廣東 廣州 510663；2. 南瑞集團(tuán)公司(國(guó)網(wǎng)電力科學(xué)研究院)，江蘇 南京 210003)

基于Widget的統(tǒng)一展現(xiàn)框架的設(shè)計(jì)與實(shí)現(xiàn)

陸海應(yīng)1，樓 楠1，李林輝2，辛 闊1，梁彥杰1，張 坤1，黎值源1

(1. 中國(guó)南方電網(wǎng)電力調(diào)度控制中心，廣東 廣州 510663；2. 南瑞集團(tuán)公司(國(guó)網(wǎng)電力科學(xué)研究院)，江蘇 南京 210003)

隨著智能電網(wǎng)的逐步建設(shè)，為了滿足調(diào)度業(yè)務(wù)精細(xì)化管理的要求，快速高效的可視展現(xiàn)技術(shù)是提高電網(wǎng)運(yùn)行決策水平的有效手段之一。文章實(shí)現(xiàn)的框架以Widget技術(shù)為思路，討論了模型管理、公式編輯器、布局設(shè)計(jì)的可視化方案，同時(shí)框架具備Flash、SVG、HTML等多種技術(shù)展現(xiàn)手段。除此之外，統(tǒng)一展現(xiàn)框架的最終目標(biāo)是面向用戶層面，展現(xiàn)框架采用向?qū)剑瑥哪Ｐ徒ⅰ⒖梢暬O(shè)計(jì)、數(shù)據(jù)綁定等步驟建立統(tǒng)計(jì)分析頁(yè)面的雛形，在運(yùn)行過(guò)程中動(dòng)態(tài)實(shí)現(xiàn)統(tǒng)計(jì)分析功能。

統(tǒng)一展現(xiàn)；Widget；可視化設(shè)計(jì)；多態(tài)展現(xiàn)

0 引言

隨著南方電網(wǎng)公司逐步加快信息化建設(shè)的步驟，以及智能終端的廣泛應(yīng)用，電網(wǎng)的數(shù)據(jù)信息量呈幾何級(jí)增長(zhǎng)趨勢(shì)。在數(shù)據(jù)激增的背景下，目前電網(wǎng)運(yùn)行系統(tǒng)在日常監(jiān)視運(yùn)行、決策分析上，缺少靈活有效的可視化手段，缺少簡(jiǎn)單易用的信息挖掘與分析手段，為了解決傳統(tǒng)電網(wǎng)在信息表達(dá)上的滯后性和局限性，直觀展現(xiàn)電網(wǎng)數(shù)據(jù)背后隱藏的信息，方便用戶從可視化圖形中及時(shí)發(fā)現(xiàn)電網(wǎng)存在的問(wèn)題和變化趨勢(shì)[1-5]，本文提出一種基于Widget的統(tǒng)一展現(xiàn)框架的實(shí)現(xiàn)思路，框架具備下述特點(diǎn)：

(1)輕量級(jí)：可視化展現(xiàn)功能在大多數(shù)場(chǎng)景下不依賴程序開(kāi)發(fā)，通過(guò)后臺(tái)向?qū)脚渲玫姆绞?，?shí)現(xiàn)統(tǒng)計(jì)分析頁(yè)面的展現(xiàn)。

(2)插件化：實(shí)現(xiàn)展現(xiàn)模塊的插件化管理，框架對(duì)于展現(xiàn)插件提供統(tǒng)一的接口標(biāo)準(zhǔn)，具備良好的動(dòng)態(tài)擴(kuò)展能力。

(3)模型與展現(xiàn)的無(wú)縫對(duì)接：通過(guò)向?qū)娇梢暬O(shè)計(jì)，實(shí)現(xiàn)展現(xiàn)插件與業(yè)務(wù)模型的自動(dòng)關(guān)聯(lián)，做到兩者的無(wú)縫對(duì)接。

(4)多態(tài)展現(xiàn)：展現(xiàn)插件以Widget引擎接入功能頁(yè)面，與具體技術(shù)實(shí)現(xiàn)方式無(wú)關(guān)，豐富框架實(shí)例頁(yè)面的展現(xiàn)方式。

基于Widget的統(tǒng)一展現(xiàn)框架由UI展現(xiàn)、邏輯控制、模型管理三部分組成，框架整體采用MVC架構(gòu)的設(shè)計(jì)方案，實(shí)現(xiàn)數(shù)據(jù)模型與可視化展現(xiàn)的松耦合特征，有利于系統(tǒng)模型的擴(kuò)展與復(fù)用。

1 平臺(tái)架構(gòu)設(shè)計(jì)

在統(tǒng)一展現(xiàn)框架中，MVC架構(gòu)通過(guò)相對(duì)獨(dú)立的模型、控制器、視圖協(xié)同工作，采用分治的思想實(shí)現(xiàn)展現(xiàn)與數(shù)據(jù)的相對(duì)分離。業(yè)務(wù)對(duì)象、指標(biāo)模型、Widget插件對(duì)象等扮演模型的角色，插件管理、可視化布局、向?qū)皆O(shè)計(jì)、Widget統(tǒng)一展現(xiàn)引擎扮演控制器的角色，對(duì)于視圖部分，在統(tǒng)一展現(xiàn)引擎的基礎(chǔ)上，系統(tǒng)能夠?qū)崿F(xiàn)Flash、SVG、HTML5、3D HTML等多種技術(shù)方式的動(dòng)態(tài)展現(xiàn)?；赪idget的統(tǒng)一展現(xiàn)框架的架構(gòu)設(shè)計(jì)如圖1所示。

圖1 統(tǒng)一展現(xiàn)框架的架構(gòu)設(shè)計(jì)

從架構(gòu)設(shè)計(jì)來(lái)看，框架首先以可視化方式描述相關(guān)對(duì)象模型，其中業(yè)務(wù)模型描述平臺(tái)應(yīng)用的業(yè)務(wù)對(duì)象，評(píng)價(jià)模型描述在業(yè)務(wù)模型基礎(chǔ)上的統(tǒng)計(jì)對(duì)象，平臺(tái)具備指標(biāo)公式的可視化編輯功能，除此之外，本文介紹平臺(tái)的核心目標(biāo)是以插件方式動(dòng)態(tài)展示可視化頁(yè)面，因此平臺(tái)必須具備展現(xiàn)插件的管理功能。其次平臺(tái)通過(guò)可視化布局、向?qū)皆O(shè)計(jì)等功能實(shí)現(xiàn)展現(xiàn)頁(yè)面的描述，結(jié)合統(tǒng)計(jì)對(duì)象數(shù)據(jù)源的動(dòng)態(tài)定義，實(shí)現(xiàn)統(tǒng)一展現(xiàn)頁(yè)面的動(dòng)態(tài)生成。由于統(tǒng)一展現(xiàn)框架是基于瀏覽器實(shí)現(xiàn)的，與具體技術(shù)實(shí)現(xiàn)無(wú)關(guān)，通過(guò)展現(xiàn)引擎獲取插件配置信息，動(dòng)態(tài)展現(xiàn)Flash、SVG、HTML等技術(shù)實(shí)現(xiàn)的可視化頁(yè)面。

2 核心功能實(shí)現(xiàn)

從框架使用目標(biāo)來(lái)看，系統(tǒng)核心價(jià)值體現(xiàn)在模型可視化管理、可視化插件管理、界面可視化設(shè)計(jì)等功能上，通過(guò)這些核心功能，提升統(tǒng)一展現(xiàn)框架的易用性，解決用戶與開(kāi)發(fā)人員的時(shí)間沖突問(wèn)題，避免功能研發(fā)滯后問(wèn)題延遲電力運(yùn)行的決策分析。

2.1 模型管理與公式編輯器

統(tǒng)一展現(xiàn)框架主要包括業(yè)務(wù)模型和評(píng)價(jià)模型，業(yè)務(wù)模型對(duì)應(yīng)數(shù)據(jù)庫(kù)的物理表，評(píng)價(jià)模型是業(yè)務(wù)對(duì)象的量化過(guò)程。平臺(tái)采用可視化方式管理業(yè)務(wù)模型、評(píng)價(jià)模型[6-7]。業(yè)務(wù)模型主要采用類圖、ER圖方式進(jìn)行展示，平臺(tái)支持Oracle、Sql server、MySQL等多種主流數(shù)據(jù)庫(kù)，具備直接從數(shù)據(jù)庫(kù)提取業(yè)務(wù)對(duì)象物理表抽象為業(yè)務(wù)模型的功能。評(píng)價(jià)模型通過(guò)樹(shù)形結(jié)構(gòu)可視化表示指標(biāo)計(jì)算公式的層次，且評(píng)價(jià)模型具備復(fù)用特征，同時(shí)具備公式編輯器功能，其基于MathML實(shí)現(xiàn)，在設(shè)計(jì)過(guò)程中，計(jì)算原子項(xiàng)與業(yè)務(wù)對(duì)象的關(guān)聯(lián)功能。

下面以供電電壓綜合合格率為例，說(shuō)明MathML在評(píng)價(jià)模型與業(yè)務(wù)模型的對(duì)應(yīng)關(guān)系，根據(jù)《國(guó)家電網(wǎng)公司電力系統(tǒng)電壓質(zhì)量和無(wú)功管理規(guī)定》，供電電壓合格率按照A類、B類、C類和D類電壓監(jiān)測(cè)點(diǎn)分別統(tǒng)計(jì)，綜合電壓合格率是在這四類電壓合格率基礎(chǔ)上，加權(quán)平均計(jì)算。假設(shè)某地市公司的四類電壓監(jiān)測(cè)點(diǎn)均覆蓋，其計(jì)算公式如下：

上述計(jì)算公式用MathML語(yǔ)法描述如下：

從上述MathML的表現(xiàn)形式來(lái)看，VA、VB、VC和VD通過(guò)前臺(tái)可視化的方式與電壓合格率統(tǒng)計(jì)模型綁定，在運(yùn)行時(shí)進(jìn)行實(shí)時(shí)計(jì)算。

2.2 插件管理

在傳統(tǒng)程序開(kāi)發(fā)過(guò)程中，系統(tǒng)開(kāi)發(fā)人員通過(guò)文本文件配置、腳本文件配置、功能配置等常規(guī)手段實(shí)現(xiàn)用戶的個(gè)性化需求。面對(duì)用戶的個(gè)性化需求，需要經(jīng)過(guò)系統(tǒng)開(kāi)發(fā)、功能測(cè)試、系統(tǒng)升級(jí)檢修等多個(gè)步驟，不能滿足功能使用的及時(shí)性要求。本文提出的框架主要服務(wù)于可視化統(tǒng)計(jì)分析展示的配置實(shí)現(xiàn)，核心功能之一體現(xiàn)在可視化插件的組件化，通過(guò)可視化插件的組合實(shí)現(xiàn)用戶統(tǒng)計(jì)分析功能，利用可視化設(shè)計(jì)功能，實(shí)現(xiàn)所見(jiàn)即所得的功能。

插件管理功能的基本思想是開(kāi)放統(tǒng)一展現(xiàn)公共接口，根據(jù)公共接口規(guī)范，開(kāi)發(fā)人員制作標(biāo)準(zhǔn)插件，通過(guò)配置管理設(shè)置插件的可視化長(zhǎng)寬值、實(shí)現(xiàn)技術(shù)、參數(shù)列表、版本信息等注冊(cè)信息，便于頁(yè)面運(yùn)行的動(dòng)態(tài)加載。插件管理框架由統(tǒng)一展現(xiàn)接口規(guī)范、插件模型管理、配置管理、服務(wù)發(fā)布管理、插件預(yù)覽、系統(tǒng)日志管理等部分構(gòu)成，插件管理功能如圖2所示。

圖2 插件管理功能

插件注冊(cè)管理是對(duì)插件模型的配置維護(hù)、定義可視化插件的啟動(dòng)參數(shù)信息，為了方便調(diào)試可視化插件，插件注冊(cè)管理要求具備版本管理功能，在注冊(cè)過(guò)程中，系統(tǒng)能夠提供預(yù)覽功能，方便用戶查看實(shí)際運(yùn)行效果。在可視化插件的動(dòng)態(tài)運(yùn)行過(guò)程中，可以根據(jù)版本配置加載不同的插件。對(duì)于已注冊(cè)的可視化插件，通過(guò)框架提供的發(fā)布功能，用戶不僅能夠直接引用可視化插件，而且框架將管理范圍內(nèi)的插件以SOA方式通過(guò)Web進(jìn)行發(fā)布，同時(shí)提供數(shù)據(jù)接入格式描述，對(duì)于外部系統(tǒng)相當(dāng)于采用可視化模板的方式動(dòng)態(tài)接入，有利于不同應(yīng)用系統(tǒng)在業(yè)務(wù)集成過(guò)程中對(duì)于相同功能的快速應(yīng)用。系統(tǒng)日志為可視化插件在動(dòng)態(tài)加載過(guò)程中的異常提供可查詢的調(diào)試信息，同時(shí)也為用戶提供異常的歸類信息，便于用戶處理不同的情況。

由于統(tǒng)一展現(xiàn)框架是基于瀏覽器實(shí)現(xiàn)的，可視化插件支持Flash、SVG、HTML5等可視化技術(shù)手段，統(tǒng)一展現(xiàn)引擎通過(guò)動(dòng)態(tài)獲取插件在網(wǎng)格的位置信息、參數(shù)信息、數(shù)據(jù)源配置信息[8]，在前臺(tái)展現(xiàn)給用戶，同時(shí)支持在移動(dòng)設(shè)備上的展現(xiàn)。

2.3 可視化設(shè)計(jì)

統(tǒng)一展現(xiàn)框架的目標(biāo)用戶是系統(tǒng)使用人員，針對(duì)目標(biāo)用戶不具備簡(jiǎn)單程序開(kāi)發(fā)與設(shè)計(jì)的實(shí)際情況，統(tǒng)一展現(xiàn)框架在統(tǒng)計(jì)分析頁(yè)面的設(shè)計(jì)上要求具備簡(jiǎn)單易用的特點(diǎn)。

統(tǒng)一展現(xiàn)框架的可視化設(shè)計(jì)采用所見(jiàn)即所得的方式，設(shè)計(jì)界面由容器和Widget組成，通過(guò)網(wǎng)格化的容器實(shí)現(xiàn)Widget的布局定位，框架具備M×N網(wǎng)格的定義功能，以及網(wǎng)格的合并與拆分功能。在頁(yè)面設(shè)計(jì)過(guò)程中通過(guò)網(wǎng)格與可視化插件的綁定，實(shí)現(xiàn)用戶期望的統(tǒng)計(jì)分析功能。

統(tǒng)一展現(xiàn)框架的核心目標(biāo)是為用戶以向?qū)Х绞脚渲脴I(yè)務(wù)統(tǒng)計(jì)分析頁(yè)面，以用戶供電可靠性為例，框架配置統(tǒng)計(jì)分析頁(yè)面的流程如圖3所示。

圖3 統(tǒng)一展現(xiàn)實(shí)現(xiàn)流程

從圖3的流程描述上來(lái)看，可視化設(shè)計(jì)模型與可視化插件模型的設(shè)計(jì)過(guò)程描述如下：

(1)用戶選擇業(yè)務(wù)模型、指標(biāo)模型，配置模型之間的關(guān)聯(lián)關(guān)系，如果指標(biāo)模型不存在，用戶能夠通過(guò)前臺(tái)的可視化公式編輯器自動(dòng)生成指標(biāo)模型。

(2)生成統(tǒng)計(jì)模型實(shí)例，模型采用“.”訪問(wèn)方式，比如A類電壓合格率的訪問(wèn)路徑=電壓合格率模型.綜合電壓合格率.A類電壓合格率，統(tǒng)計(jì)模型實(shí)例的目標(biāo)是通過(guò)頁(yè)面參數(shù)與字段對(duì)應(yīng)關(guān)系的綁定實(shí)現(xiàn)自動(dòng)生成SQL語(yǔ)句。

(3)選擇可視化布局工具，配置頁(yè)面參數(shù)，綁定模型字段與頁(yè)面參數(shù)的對(duì)應(yīng)關(guān)系，方便頁(yè)面展示在不同參數(shù)值的統(tǒng)計(jì)分析結(jié)果。

(4)選擇可視化插件，區(qū)域a選擇曲線圖插件，實(shí)現(xiàn)用戶供電可靠率RS-1歷史數(shù)據(jù)曲線的展示；區(qū)域b選擇柱狀圖插件，實(shí)現(xiàn)不同區(qū)域公司AIHC-1的同期對(duì)比展示；區(qū)域c選擇表格插件，實(shí)現(xiàn)用戶供電可靠率、不同區(qū)域公司所有供電可靠率指標(biāo)的詳細(xì)數(shù)據(jù)展示。

(5)簡(jiǎn)單查詢條件下的Widget插件，通過(guò)設(shè)置插件參數(shù)，以及參數(shù)與模型字段的對(duì)應(yīng)關(guān)系，采用向?qū)皆O(shè)計(jì)逐步綁定數(shù)據(jù)模型，實(shí)現(xiàn)統(tǒng)計(jì)分析功能。對(duì)于復(fù)雜查詢條件下的Widget插件，可以通過(guò)后臺(tái)設(shè)置SQL語(yǔ)句實(shí)現(xiàn)可視化插件與數(shù)據(jù)模型的綁定。

(6)生成菜單，與自定義設(shè)計(jì)頁(yè)面綁定，并設(shè)置頁(yè)面權(quán)限，完成自定義查詢統(tǒng)計(jì)分析功能的定制工作。

3 結(jié)論

基于Widget的統(tǒng)一展現(xiàn)框架目前應(yīng)用于南方電網(wǎng)調(diào)度數(shù)據(jù)綜合應(yīng)用挖掘與分析研究項(xiàng)目，針對(duì)用戶的個(gè)性化需求，在系統(tǒng)開(kāi)發(fā)人員不介入的情況下，通過(guò)向?qū)脚渲猛瓿赡Ｐ蜕伞⒐骄庉?、?yè)面設(shè)計(jì)、數(shù)據(jù)綁定、統(tǒng)計(jì)分析頁(yè)面展現(xiàn)的全過(guò)程管理，滿足電能質(zhì)量統(tǒng)計(jì)分析的大部分應(yīng)用場(chǎng)景。對(duì)于復(fù)雜的應(yīng)用場(chǎng)景，系統(tǒng)開(kāi)發(fā)人員按照統(tǒng)一展現(xiàn)公共接口設(shè)計(jì)Widget組件，并通過(guò)系統(tǒng)發(fā)布方便用戶進(jìn)一步使用。

根據(jù)南方電網(wǎng)調(diào)度數(shù)據(jù)綜合應(yīng)用挖掘與分析研究項(xiàng)目的使用場(chǎng)景，目前在指標(biāo)公式編輯器方面僅滿足簡(jiǎn)單的四則運(yùn)算、標(biāo)準(zhǔn)方差等簡(jiǎn)單運(yùn)算規(guī)則，不支持復(fù)雜計(jì)算公式的編輯；其次可視化布局采用網(wǎng)格方式設(shè)計(jì)，不規(guī)則統(tǒng)計(jì)分析頁(yè)面的支持程度比較弱，后期將逐步完善基于Widget的統(tǒng)一展現(xiàn)框架。

[1] 沈國(guó)輝，佘東香，孫湃，等．電力系統(tǒng)可視化技術(shù)研究及應(yīng)用[J]．電網(wǎng)技術(shù)，2009， 33(17)：31-36．

[2] 王彬，何光宇，董樹(shù)鋒，等．基于CIM的全圖形自生成及三維可視化[J]．電力系統(tǒng)自動(dòng)化，2010， 34(4)：55-60．

[3] 樊淑麗，王康元，邱家駒，等．基于 SVG 的電力信息可視化框架設(shè)計(jì)[J]．繼電器，2007，35(10)：48-51．

[4] 賴曉文，陳啟鑫，夏清，等．基于SVG技術(shù)的電力系統(tǒng)可視化平臺(tái)集成與方法庫(kù)開(kāi)發(fā)[J]．電力系統(tǒng)自動(dòng)化，2012，36(16)：76-81．[5] 劉俊勇，沈曉東，田立峰，等．智能電網(wǎng)下可視化技術(shù)的展望[J]．電力自動(dòng)化設(shè)備，2010，30(1)：7-13．

[6] 郭威，劉三女牙，楊宗凱,等．基于MathML的在線公式編輯器的實(shí)現(xiàn)與應(yīng)用[J]．計(jì)算機(jī)應(yīng)用研究,2008, 25(10)：3177-3180．

[7] 胡斌，張曉帆，孔震．基于PI3000平臺(tái)的電力企業(yè)模型可視化研究[J]．計(jì)算機(jī)應(yīng)用,2009, 29(12)：349-351．

[8] 丘志杰，羅蕾，俸志剛．移動(dòng)widget引擎設(shè)備能力動(dòng)態(tài)擴(kuò)展技術(shù)[J]．計(jì)算機(jī)應(yīng)用研究,2011,28(3)：991-994．

Design and implementation of a unified framework based on Widget

Lu Haiying1, Lou Nan1,Li Linhui2, Xin Kuo1, Liang Yanjie1, Zhang Kun1,Li Zhiyuan1

(1. Power Dispatching and Communication Center of CSG, Guangzhou 510663, China;2.NARI Group Corporation (State Grid Electric Power Research Institute), Nanjing 210003, China)

With the gradual construction of smart grid, in order to meet the requirements of fine management of dispatching business, fast and efficient visual technique is one of an effective means to improve the grid operation decision-making levels. The framework of this paper is based on Widget technology with discussion of management model, equation editor, visual management plan layout. Meanwhile, Widget platform with a variety of technical means such as Flash, SVG, HTML and so on. In addition, the ultimate goal of the unified platform is for the user level, the platform uses a wizard to build the model, and through the visual design, data binding and other steps to create a prototype statistical analysis page, to achieve statistical analysis functions in the course of the operation.

unified visualization; Widget; visual design; polymorphic show

TP311

A

10.19358/j.issn.1674- 7720.2017.07.024

陸海應(yīng)，樓楠，李林輝，等.基于Widget的統(tǒng)一展現(xiàn)框架的設(shè)計(jì)與實(shí)現(xiàn)[J].微型機(jī)與應(yīng)用，2017,36(7)：81-83，87.

2016-10-13)

陸海應(yīng)(1985-)，男，碩士，高級(jí)工程師，主要研究方向：電力系統(tǒng)控制運(yùn)行。

樓楠(1989-)，男，碩士，高級(jí)工程師，主要研究方向：電力系統(tǒng)控制運(yùn)行。

李林輝(1979-)，男，碩士，高級(jí)工程師，主要研究方向：電力信息化管理。