基于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-)，男，硕士，高级工程师，主要研究方向：电力信息化管理。