基于Widget的統一展現框架的設計與實現

陸海應，樓 楠，李林輝，辛 闊，梁彥杰，張 坤，黎值源

(1. 中國南方電網電力調度控制中心，廣東 廣州 510663；2. 南瑞集團公司(國網電力科學研究院)，江蘇 南京 210003)

基于Widget的統一展現框架的設計與實現

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

(1. 中國南方電網電力調度控制中心，廣東 廣州 510663；2. 南瑞集團公司(國網電力科學研究院)，江蘇 南京 210003)

隨著智能電網的逐步建設，為了滿足調度業務精細化管理的要求，快速高效的可視展現技術是提高電網運行決策水平的有效手段之一。文章實現的框架以Widget技術為思路，討論了模型管理、公式編輯器、布局設計的可視化方案，同時框架具備Flash、SVG、HTML等多種技術展現手段。除此之外，統一展現框架的最終目標是面向用戶層面，展現框架采用向導式，從模型建立、可視化設計、數據綁定等步驟建立統計分析頁面的雛形，在運行過程中動態實現統計分析功能。

統一展現；Widget；可視化設計；多態展現

0 引言

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

(1)輕量級：可視化展現功能在大多數場景下不依賴程序開發，通過后臺向導式配置的方式，實現統計分析頁面的展現。

(2)插件化：實現展現模塊的插件化管理，框架對于展現插件提供統一的接口標準，具備良好的動態擴展能力。

(3)模型與展現的無縫對接：通過向導式可視化設計，實現展現插件與業務模型的自動關聯，做到兩者的無縫對接。

(4)多態展現：展現插件以Widget引擎接入功能頁面，與具體技術實現方式無關，豐富框架實例頁面的展現方式。

基于Widget的統一展現框架由UI展現、邏輯控制、模型管理三部分組成，框架整體采用MVC架構的設計方案，實現數據模型與可視化展現的松耦合特征，有利于系統模型的擴展與復用。

1 平臺架構設計

在統一展現框架中，MVC架構通過相對獨立的模型、控制器、視圖協同工作，采用分治的思想實現展現與數據的相對分離。業務對象、指標模型、Widget插件對象等扮演模型的角色，插件管理、可視化布局、向導式設計、Widget統一展現引擎扮演控制器的角色，對于視圖部分，在統一展現引擎的基礎上，系統能夠實現Flash、SVG、HTML5、3D HTML等多種技術方式的動態展現。基于Widget的統一展現框架的架構設計如圖1所示。

圖1 統一展現框架的架構設計

從架構設計來看，框架首先以可視化方式描述相關對象模型，其中業務模型描述平臺應用的業務對象，評價模型描述在業務模型基礎上的統計對象，平臺具備指標公式的可視化編輯功能，除此之外，本文介紹平臺的核心目標是以插件方式動態展示可視化頁面，因此平臺必須具備展現插件的管理功能。其次平臺通過可視化布局、向導式設計等功能實現展現頁面的描述，結合統計對象數據源的動態定義，實現統一展現頁面的動態生成。由于統一展現框架是基于瀏覽器實現的，與具體技術實現無關，通過展現引擎獲取插件配置信息，動態展現Flash、SVG、HTML等技術實現的可視化頁面。

2 核心功能實現

從框架使用目標來看，系統核心價值體現在模型可視化管理、可視化插件管理、界面可視化設計等功能上，通過這些核心功能，提升統一展現框架的易用性，解決用戶與開發人員的時間沖突問題，避免功能研發滯后問題延遲電力運行的決策分析。

2.1 模型管理與公式編輯器

統一展現框架主要包括業務模型和評價模型，業務模型對應數據庫的物理表，評價模型是業務對象的量化過程。平臺采用可視化方式管理業務模型、評價模型[6-7]。業務模型主要采用類圖、ER圖方式進行展示，平臺支持Oracle、Sql server、MySQL等多種主流數據庫，具備直接從數據庫提取業務對象物理表抽象為業務模型的功能。評價模型通過樹形結構可視化表示指標計算公式的層次，且評價模型具備復用特征，同時具備公式編輯器功能，其基于MathML實現，在設計過程中，計算原子項與業務對象的關聯功能。

下面以供電電壓綜合合格率為例，說明MathML在評價模型與業務模型的對應關系，根據《國家電網公司電力系統電壓質量和無功管理規定》，供電電壓合格率按照A類、B類、C類和D類電壓監測點分別統計，綜合電壓合格率是在這四類電壓合格率基礎上，加權平均計算。假設某地市公司的四類電壓監測點均覆蓋，其計算公式如下：

上述計算公式用MathML語法描述如下：

從上述MathML的表現形式來看，VA、VB、VC和VD通過前臺可視化的方式與電壓合格率統計模型綁定，在運行時進行實時計算。

2.2 插件管理

在傳統程序開發過程中，系統開發人員通過文本文件配置、腳本文件配置、功能配置等常規手段實現用戶的個性化需求。面對用戶的個性化需求，需要經過系統開發、功能測試、系統升級檢修等多個步驟，不能滿足功能使用的及時性要求。本文提出的框架主要服務于可視化統計分析展示的配置實現，核心功能之一體現在可視化插件的組件化，通過可視化插件的組合實現用戶統計分析功能，利用可視化設計功能，實現所見即所得的功能。

插件管理功能的基本思想是開放統一展現公共接口，根據公共接口規范，開發人員制作標準插件，通過配置管理設置插件的可視化長寬值、實現技術、參數列表、版本信息等注冊信息，便于頁面運行的動態加載。插件管理框架由統一展現接口規范、插件模型管理、配置管理、服務發布管理、插件預覽、系統日志管理等部分構成，插件管理功能如圖2所示。

圖2 插件管理功能

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

由于統一展現框架是基于瀏覽器實現的，可視化插件支持Flash、SVG、HTML5等可視化技術手段，統一展現引擎通過動態獲取插件在網格的位置信息、參數信息、數據源配置信息[8]，在前臺展現給用戶，同時支持在移動設備上的展現。

2.3 可視化設計

統一展現框架的目標用戶是系統使用人員，針對目標用戶不具備簡單程序開發與設計的實際情況，統一展現框架在統計分析頁面的設計上要求具備簡單易用的特點。

統一展現框架的可視化設計采用所見即所得的方式，設計界面由容器和Widget組成，通過網格化的容器實現Widget的布局定位，框架具備M×N網格的定義功能，以及網格的合并與拆分功能。在頁面設計過程中通過網格與可視化插件的綁定，實現用戶期望的統計分析功能。

統一展現框架的核心目標是為用戶以向導方式配置業務統計分析頁面，以用戶供電可靠性為例，框架配置統計分析頁面的流程如圖3所示。

圖3 統一展現實現流程

從圖3的流程描述上來看，可視化設計模型與可視化插件模型的設計過程描述如下：

(1)用戶選擇業務模型、指標模型，配置模型之間的關聯關系，如果指標模型不存在，用戶能夠通過前臺的可視化公式編輯器自動生成指標模型。

(2)生成統計模型實例，模型采用“.”訪問方式，比如A類電壓合格率的訪問路徑=電壓合格率模型.綜合電壓合格率.A類電壓合格率，統計模型實例的目標是通過頁面參數與字段對應關系的綁定實現自動生成SQL語句。

(3)選擇可視化布局工具，配置頁面參數，綁定模型字段與頁面參數的對應關系，方便頁面展示在不同參數值的統計分析結果。

(4)選擇可視化插件，區域a選擇曲線圖插件，實現用戶供電可靠率RS-1歷史數據曲線的展示；區域b選擇柱狀圖插件，實現不同區域公司AIHC-1的同期對比展示；區域c選擇表格插件，實現用戶供電可靠率、不同區域公司所有供電可靠率指標的詳細數據展示。

(5)簡單查詢條件下的Widget插件，通過設置插件參數，以及參數與模型字段的對應關系，采用向導式設計逐步綁定數據模型，實現統計分析功能。對于復雜查詢條件下的Widget插件，可以通過后臺設置SQL語句實現可視化插件與數據模型的綁定。

(6)生成菜單，與自定義設計頁面綁定，并設置頁面權限，完成自定義查詢統計分析功能的定制工作。

3 結論

基于Widget的統一展現框架目前應用于南方電網調度數據綜合應用挖掘與分析研究項目，針對用戶的個性化需求，在系統開發人員不介入的情況下，通過向導式配置完成模型生成、公式編輯、頁面設計、數據綁定、統計分析頁面展現的全過程管理，滿足電能質量統計分析的大部分應用場景。對于復雜的應用場景，系統開發人員按照統一展現公共接口設計Widget組件，并通過系統發布方便用戶進一步使用。

根據南方電網調度數據綜合應用挖掘與分析研究項目的使用場景，目前在指標公式編輯器方面僅滿足簡單的四則運算、標準方差等簡單運算規則，不支持復雜計算公式的編輯；其次可視化布局采用網格方式設計，不規則統計分析頁面的支持程度比較弱，后期將逐步完善基于Widget的統一展現框架。

[1] 沈國輝，佘東香，孫湃，等．電力系統可視化技術研究及應用[J]．電網技術，2009， 33(17)：31-36．

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

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

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

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

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

[8] 丘志杰，羅蕾，俸志剛．移動widget引擎設備能力動態擴展技術[J]．計算機應用研究,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

陸海應，樓楠，李林輝，等.基于Widget的統一展現框架的設計與實現[J].微型機與應用，2017,36(7)：81-83，87.

2016-10-13)

陸海應(1985-)，男，碩士，高級工程師，主要研究方向：電力系統控制運行。

樓楠(1989-)，男，碩士，高級工程師，主要研究方向：電力系統控制運行。

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