CN103473068A - 基于svg的图形实时监控界面定制系统及其定制方法 - Google Patents

Abstract

本发明是有关于一种基于SVG的图形实时监控界面定制系统及其定制方法，该系统包括监控系统、SVG图形配置工具以及图形及信息存储系统：SVG图形配置工具包括文件管理、图形编辑管理、基础图形绘制、图元编辑管理、监控界面管理、配置项目管理、画布管理、视图界面管理以及帮助系统模块。该方法包括：新建项目及文件，配置环境参数；选择本地配置库中的图形，或者通过图元库选择或绘制图元并生成图形；编辑图形，关联数据点，布局界面；对SVG图形文件及配置信息进行校验；发布图形，与本地配置库交互，生成SVG图形文件及相应的配置信息；传送给监控系统。本发明可提高监控业务的灵活性、通用性、可扩展性及可适应性。

Description

基于SVG的图形实时监控界面定制系统及其定制方法

技术领域

本发明涉及一种界面定制系统和方法，特别是涉及一种基于SVG的图形实时监控界面定制系统及其定制方法。

背景技术

SVG（ScalableVectorGraphics，可缩放矢量图形）是由W3C组织制定的基于XML的可扩展二维矢量图形格式，其基于XML的语法和结构使得它具有先天的优势，与当前已有的和未来将有的其他XML应用之间存在着天然的交融，已经在能源、电力、矿山、铁路等实时监控领域得到了广泛的应用，具有广阔的应用前景。SVG图形格式具有的优点有：（1）基于XML；（2）采用文本来描述对象；（3）具有交互性和动态性；（4）完全支持DOM；（5）无级缩放，不失真。正因为此，信息中心的中央监控平台对风电场实时信息的监控界面也采用SVG图形格式。

以一现有的风电场中央监控平台为例来说，请参阅图1所示，其SVG图形监控界面定制系统包括多风电场监控（即图中所示“集控模式图形定制”）、单风电场风机监控、单风机（单设备）信息量监控（即图中所示“实时数据分类图形定制”）及升压站监控，四种监控界面的定制都被集成在平台的一个功能模块中，以下进一步以多风电场监控和单风电场风机监控为例，来具体说明在该系统中定制监控界面的过程。

（1）多风电场监控界面的定制

点击“集控模式图形定制”打开多风电场监控定制界面，主要功能都整合在顶部的工具栏和图形部分的右键菜单中，可以通过点击按钮和选择右键菜单项完成相应的操作。若之前未配置过多风场监控界面，首次打开该定制界面会自动生成配置库中定义的所有风场。

图2所示为已编辑过的多风场监控界面，图中中国地图背景需要手工绘制，风场图元符号及显示哪些文本事先已在一个图元模板文件中定义。首次生成该界面时，会根据登录用户的权限，自动生成该用户具有查询权限的所有风电场的风电场图元，并自动按顺序一个个从左到右排列，显示在界面上。添加背景图后，需要手工调整界面布局，最后点击右键菜单中的“图形发布”，便可将定制好的界面保存在相应的SVG文件夹下，文件取名为GoldWind_MutiWF.svg。

（2）单风机（单设备）信息量监控界面的定制

在绘制单风机或单设备实时监控界面前，需要对该风机或设备所用的协议下所有的IEC路径进行数据分类。由于风机所有信息量较多，难于在一个监控界面上显示，所以需要利用数据分类将各信息量对应的IEC路径进行归类显示。“数据分类定义”的具体步骤如下：

1.点击“开始”菜单“系统定制”下的“数据分类定义”，打开如图3所示的数据分类定义界面，左侧为自定义的数据分类，若之前未配置过该协议的数据，则此部分为空；右侧为系统已分类好的IEC路径分类信息。“目标库”有“本地库”和“中心库”二个选项，选中哪个库则后续的操作就对哪个库发生作用，一般情况下选择中心库，然后同步至本地库。

2.在“协议选择”下拉框中选择需要进行数据分类的风机协议，“目标库”选项中选择“中心库”。如果备选IEC路径分类合理，可以直接点击“部件自动分类”按钮自动进行分类。否则，就需要自己一个个新建分类，然后从备选IEC路径中勾选需要在此分类下添加的路径，再单击“添加到选中分类”按钮。

3.自定义完所有的分类后，将它们全部勾选，然后单击“保存”按钮，并关闭该界面。

数据分类定义完后，接下来就可以定制单风机（设备）的实时数据显示监控界面了，其步骤如下：

1.点击“开始”菜单中“系统定制”下的“实时数据分类图形定制”，打开如图4所示的实时数据分类图形界面，该界面可分为上下两部分：上面是条件选择区，其中左边第一个是协议选择下拉框，供用户选择所需生成图形的协议；第二个是设置自动生成图元时每行生成的图元数量，默认为一行显示6个图元；后面是几个功能按钮部分。下面是左右结构，左侧是利用“数据分类定义”功能为该风机协议定义的系统数据分类树，显示了当前选中协议下，数据分类和IEC路径的关系；右侧是SVG图形显示和定制区域，可以设计和定义当前选中的协议的单台风机（设备）的SVG图形。

2.在协议选择下拉框中选择要定制的风机协议（假定该协议的图形之前未定制），然后选择每行生成图元的个数，再在左侧的系统数据分类树中选择要生成的分类，最后单击“生成选中数据分类”按钮，于是选中分类下所有的IEC路径便以各种图元的形式平铺在右侧的图形绘制区。

3.利用绘图工具栏及右键菜单的功能对自动生成的界面进行布局、分类、整理，使界面美观整洁。为了对同类图元进行分类，有时需要在界面上绘制文本。在此需要注意的是，考虑到监控界面要支持多语言，所以不能使用绘图工具栏中的文本工具来绘制文本。正确的做法是，展开系统数据分类树下的“静态标签”，下面列出了绘图过程中常用的文本，通过双击操作便可在绘图区绘制相应的文本内容。如果该标签下没找到对应的文本，就需要在中心库的staticLab表中添加，然后同步至本地库。

4.全选该分类下所有的图元（Ctrl+A），右键单击这些选中的图元，在菜单中点击“图层”下的“1.生成图层”（Ctrl+G）；然后接着点击“2.图层ID关联”（Ctrl+N），将该SVG图层与左侧选中的数据分类进行关联；最后点击“3.隐藏选中图层”（Ctrl+H）使该图层不可见。若图层与数据分类关联成功，则选中该分类，然后如图5所示右键单击“显示选中数据分类”，右侧绘图区便会显示该分类对应的图层。

5.重复上述操作，直到把所有的数据分类对应的监控界面都绘制完成，最后，单击“发布”按钮将该协议的风机信息监控界面发布至应用程序。其SVG图形文件命名格式为GoldWind_SingleWT+风机协议编号.svg，如GoldWind_SingleWT1161.svg。

在使用上述中控平台定制监控界面的过程中，逐渐暴露出不少缺点，归纳起来，大致有以下几点：

（1）不利于监控业务的扩展。随着风电技术的发展，信息中心的监控系统已经从最初的单独对风电场的监控发展到对箱变、升压站、微网、电厂群、光伏等应用的监控，在这些不同的项目应用中，对监控界面的要求都有所不同，这就需要重新编写应用程序，用于定制其他应用的SVG监控界面及相应的图形解析。

（2）在目前的中央监控平台中，监控界面的定制被集成在该平台下的一个功能模块中，而非作为一种独立的配置工具，独立性差，配置步骤繁琐、复杂。由于大多界面都是自动生成，所以在定制监控界面之前，就需要对相关的配置库数据表进行设置，包括风电场信息表、风机信息表、用户表、用户权限表、监控机信息表、监控机权限表、角色信息表、角色授权表、线路信息表、线路风机表等等，在定制单风机或单设备的实时数据监控界面前，还需要进行数据分类定义，且当某个分类下的IEC路径发生变化时，又需要对该路径重新进行分类。

（3）SVG监控图元单一，且不利于扩展。由于所有的风机图元都预先定义在一个图元模板文件中，然后通过程序按照相应的id自动生成相应的图元，显示在监控界面中，所以，要想添加新的图元，必须修改图元模板及相应的图元自动生成程序。

（4）SVG图形文件偏大，加载文件及实时刷新效率较低。目前，单风机实时信息监控界面中对各个数据分类的显示是通过SVG图层的隐藏或显示来实现的，实际上，所有的信息量还是定制在一个SVG图形文件上，当风机监控信息量过多时，该图形文件大小也会随之增大，导致加载文件及刷新效率降低。

（5）不利于工程人员与开发人员间的分工明确。监控界面的定制工作本应由工程人员来完成，然而由于监控界面的定制过程繁琐复杂，一般的工程人员在定制界面时往往要寻求开发人员的协助，或是完全由开发人员来定制。从而，使得员工间的分工不明确，降低了工作效率，增加了沟通成本。

由此可见，上述现有的SVG监控界面的定制过程在系统组成和使用上存在不便与不足，而亟待加以进一步改进。如何能创建一种适应各种电场业务的发展需要，与中央监控平台相对独立运行，界面定制步骤简洁明了、操作简单，利于工程人员独立操作，使工程人员与开发人员分工明确，提高监控业务的灵活性、通用性、可扩展性及可适应性的基于SVG的图形实时监控界面定制系统及其定制方法，便成了当前该领域的重要研发课题之一。

发明内容

本发明要解决的技术问题是提供一种基于SVG的图形实时监控界面定制系统及其定制方法，使其适应各种电场业务的发展需要，与中央监控平台相对独立运行，界面定制步骤简洁明了、操作简单，利于工程人员独立操作，使工程人员与开发人员分工明确，提高监控业务的灵活性、通用性、可扩展性及可适应性，克服现有的监控界面定制系统及其定制方法的不足。

为解决上述技术问题，本发明提供了一种基于SVG的图形实时监控界面定制系统，包括监控系统、SVG图形配置工具以及图形及信息存储系统，其中：SVG图形配置工具包括文件管理模块、图形编辑管理模块、基础图形绘制模块、图元编辑管理模块、监控界面管理模块、配置项目管理模块、画布管理模块、视图界面管理模块以及帮助系统模块；图形及信息存储系统用于存储图元库、本地配置库以及SVG图形配置工具生成的SVG文件。

作为本发明的一种改进，所述的图元编辑管理模块用于特殊图元的绘制、图元的分组、图元的管理、图元组的管理、图元库图元的导入导出、图元与数据点原型的关联。

所述的本地配置库包括风电场、光伏、箱变以及微网配置库。

所述的图元库存储为一个XML文件。

所述的图元库中的图元符号分类存储、标签。

所述的图元库中，可重用的图元符号采用<defs></defs>标签定义，已定义的图元符号采用<use/>标签引用。

所述的SVG图形文件采用图元分层显示结构。

此外，本发明还提供了一种基于SVG的图形实时监控界面定制方法，包括以下步骤：A.新建项目及文件，配置环境参数；B.选择本地配置库中存储的图形，或者通过图元库选择或绘制图元并生成图形；C.编辑图形，关联数据点，布局界面；D.对SVG图形文件及配置信息进行校验，校验若有误则返回步骤C；E.校验成功后发布图形，并与本地配置库进行数据交互，生成SVG图形文件及相应的配置信息；F.将生成的SVG图形文件及相应的配置信息传送给监控系统。

采用这样的设计后，本发明提供了一种脱离信息中心中控平台的独立图形配置系统，其至少具有以下优点：

（1）采用c/s结构模式，系统分析设计采用面向对象的技术，应用RationalRose、Visio等工具进行辅助设计，采用第三方控件VectorControl实现SVG基础图形编辑功能，提高了开发效率，节省了开发成本。

（2）采用本地配置库的方式支持各种业务监控界面的定制，可提供常用系统的配置库，如风电场、光伏、箱变、微网等，需要定制哪种系统的监控界面时，便将配置库设置为相应的配置库，适应风电企业业务发展的需要，利于监控业务向多领域扩展；

（3）采用图元库的方式提供各种应用领域丰富的图元符号，并支持图元的增加、修改及删除功能，通过XML文件来定义各种图元符号，适应业务发展的需要；

（4）在定制监控界面时，可通过拖拽的方式将相应的图元添加在界面上，使界面定制简单、明了、易操作，做到所见即所得；

（5）优化图元，采用SVG文档<defs></defs>标签定义可重用的图元符号，然后通过<use/>标签引用已定义的图元符号，从而减小SVG图形文件的大小，使得文档结构清晰、易读、易维护，提高文件加载速度；

（6）采用SVG图层技术，将监控界面中同一类型的图元置于<g></g>容器标签中，通过唯一id标识，在图形实时解析时可达到逐层刷新的目的，从而提高实时数据刷新效率；

（7）图形配置工具与中央监控平台分离，并将原本监控信息量较多的界面分隔成若干个图元较少的界面，通过热点图元在不同界面间的切换、导航，解决现有中控平台中采用数据分类及分屏方法带来的配置繁琐的问题，界面定制过程简捷、易操作，利于工程人员独立完成，将开发人员从界面定制的工作中分离出来，利于明确分工和提高效率。

附图说明

上述仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，以下结合附图与具体实施方式对本发明作进一步的详细说明。

图1是现有监控界面定制系统的界面示意图。

图2是采用图1所示系统编辑的多风场监控界面示意图。

图3是采用图1所示系统进行数据分类定义的界面示意图。

图4是采用图1所示系统进行实时数据分类图形定制的界面示意图。

图5是采用图1所示系统进行图层与数据分类关联后的界面示意图。

图6是本发明基于SVG的图形实时监控界面定制系统的界面示意图。

图7是本发明基于SVG的图形实时监控界面定制系统的组成示意图。

图8是本发明基于SVG的图形实时监控界面定制系统的体系结构图。

图9是本发明基于SVG的图形实时监控界面定制方法的流程示意图。

具体实施方式

请参阅图6、图7所示，本发明基于SVG的图形实时监控界面定制系统包括文件管理模块、图形编辑管理模块、基础图形绘制模块、图元编辑管理模块、监控界面管理模块、配置项目管理模块、画布管理模块、视图界面管理模块以及帮助系统模块。

文件管理模块为用户提供文件管理方面的操作，包括新建、打开、打开最近文件、保存、另存为、导出图像、导出图元、导出SVG文件以及关闭文件等操作功能，同时还提供了打印、退出系统方面的功能。

图形编辑管理模块主要提供图形编辑方面的功能，包括复制、粘贴、剪切、删除、撤销、重做、全选、取消全选、图形锁定及解锁、图形成组及解组、图形层操作（置于顶层，置于底层，上移一层，下移一层等），图形旋转（左、右旋转，水平、垂直旋转等式）以及多个图形的对齐（左、右对齐，顶部、底部对齐等）、分布（左、右分布，顶部、底部分布，水平居中、垂直居中分布等式）等图形编辑的基本操作。

基础图形绘制模块是图形编辑软件的最基础的部分，它提供了直线、矩形、圆、椭圆、多边形、折线、文本、图片、填充色、背景色、字体、字体大小等基本图形的绘制功能，用户可以快速方便的绘制基本图形。

图元编辑管理模块体现了图形编辑软件在风电监控领域应用的特殊性，主要包括风电厂监控中特殊图元的绘制、图元的分组、图元（组）的管理以及图元的导入导出、图元与数据点原型关联等功能。在本模块，为用户提供了风电厂图形监控界面绘制中用到的大部分常用图元设备，用户还可以根据需要定制和保存图元以扩充图元库。

监控界面管理模块用来绘制和管理风电厂实时监控界面。主要包括自动生成默认的界面、图元属性的定义(通过属性面板对图元的颜色,大小,字体,字体大小及与ID等属性进行定义)、图元间的连接(通过在图元上定制特定的连接点,方便图形界面中图元与图元之间的连接,并做到在移动图元时,连接线也跟着图元移动,不断开)、图形的校验（对图形界面中图元的有效性进行判断,包括关联了配置库中未定义数据点的无效图元，同一数据点被多个相同图元关联的重复图元以及在配置库中定义了的数据点而在界面上没有关联的未绘制图元等等）以及监控界面实时态的展示(提供图形界面的运行环境,对绘制的图形界面进行实时数据展示,可用来判断图形界面定制的有效性)等。

配置项目管理模块用来对当前风电厂监控所有涉及的图形文件及相应的配置信息进行项目化管理，以达到在不同项目间信息重用的目标。包括新建项目、打开历史项目、项目另存为、项目信息编辑、项目图元库管理、项目数据库的配置以及项目发布等功能。

画布管理模块主要提供绘图窗口的按比例缩放、不同窗口间的切换、调整画布大小，画布背景设置以及画布中的网格、标尺等辅助绘图功能。

视图界面管理模块主要用来对编辑界面中的视图窗口进行管理，包括属性栏、工具栏、导航栏、图元库列表、图元连接点、图元选择边框的显示及隐藏等。

帮助系统模块主要提供系统的帮助文档以及软件的版本及版权信息等。

请配合参阅图8所示，本发明系统的体系结构中，图形及信息存储层包括图元库、本地配置库以及利用本发明定制的SVG图形文件；图形编辑层包括利用本发明的方法、模块以及图元库中定义的图元及配置库中的配制信息手动或自动生成各种SVG监控图形界面的过程；图形发布及访问层包括将定制好的图形文件及必要的配置文件传输给监控系统，利用监控系统的解析引擎对定制的监控图形文件进行解析，从而完成各种动态信息点的实时监控。

由于不同的专业领域都有各自不同的监控信息图元，为了达到图元重用，不至于每次都重新绘制特殊图元的目的，具备丰富的图元库必不可少。在图形监控中，大多数设备图元都是由基础图元组合而成的，我们可以把这些常用的组合图元在画布上绘制好后，保存在图元库中，下次需要使用的时候就可以从图元库中直接拖进画布便可完成该设备图元的绘制。

图元库可以设计成一个XML文件，也可以直接存储到数据库，考虑到图元库在实际应用中不会特别大，直接存储到XML文件更具有优势。本发明在设计时将所有图元存储到指定的XML文件symbol.xml。在symbol.xml文件中自定义三个标签:<symbols>、<group>和<symbol>。

其中<symbols>标签代表整个图元库，整个文件中有且只有一个symbols标签；<group>标签是<symbols>标签的子标签，代表图元的分类，每个<symbols>标签可以含有一个或多个<group>标签；<symbol>标签是<group>标签的子标签，<symbol>标签下存储每个图元的具体定义，每个<group>标签可以含有一个或多个<symbol>标签。需要说明的是，图元的分类没有特定的规则,可根据用户习惯来定.一般地,可将同一类别的图元归为一类,比如,可将风电场相关图元放在一个group,光伏电场图元放在一个group,升压站相关图元放在一个group等。

SVG提供了<g></g>元素，作为多个图元置于其中的容器，该容器可以用来标识元素和提供图元属性。本发明采用图元分层显示技术来定义SVG图形文件的结构，文件中的图元分层实质是将若干个相同类别的图元(比如,把所有风机图元看成一组,所有断路器或刀闸图元看成一组,所有光伏逆变器看成一组等等)分为一组,置于一个g标签下。针对风电场监控而设计的SVG图形文件结构，依赖于本地配置库的配置信息，比如某个电场有多少台风机、风机设备编号、设备有哪些要采集的信息点之类的信息，这些关键信息最终都会在SVG文件中体现，其中设备或信息点的ID即作为图元层的某个属性。采用分层显示的SVG图形文档结构，具有结构清晰、层次合理、定义规范、便于扩展的SVG图形文档结构的优点，不仅可以提高图形解析的效率，还可以为日后的维护工作带来便利。

本发明基于SVG的图形实时监控界面定制系统通过该图形配置工具绘制符合要求的图形监控界面，生成相应的SVG图形文件及配置信息，然后把它们作为应用系统的图形输入源，再通过图形解析引擎在界面上展现实时监控信息，提供各应用领域图形监控界面的编辑环境和图形的解析，是满足图形监控需求的系统，既有图形编辑软件的共性，又要具有监控应用系统各类应用领域信息的特殊性。

请配合参阅图9所示，基于上述系统，本发明基于SVG的图形实时监控界面定制方法包括以下流程：

A.在数据库服务器上根据电场的信息配置数据库，利用本发明系统的同步本地数据库功能将配置好的数据库的电场配置信息同步至本地计算机，形成sqlite格式的本地配置库。

B.定制界面有两种方式:自动生成和手动绘制.自动生成是将配置库中配置的信息一次全部绘制在当前界面上,比如要生成某电场的风机监控界面,自动生成功能便会把数据库中配置的当前电场所有风机按一定的编排格式显示在编辑界面上;手动绘制是将图元库中的图元一个个拖到编辑界面,然后利用属性编辑窗口设置相关属性(如将配置库中风机信息点与图形的ID属性关联等)。

C.不管是自动生成还是手动绘制监控界面,最后都需要通过图形编辑管理模块和基础图形绘制模块提供的各种功能来调整图形界面的布局，使其美观，易理解。

D.利用监控界面管理模块的图形检验功能,对图形中的无效图元,未定义图元,重复图元等进行校验,还可利用实时态展示功能将定制好的界面通过现场实时数据进行解析,观察所有实时动态点图元状态是否正常。

E.校验无误后,发布定制好的图形界面，该图形界面文件便以SVG文件的格式及一些配置信息传送至监控系统,同时在本地系统中保存备份。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，本领域技术人员利用上述揭示的技术内容做出些许简单修改、等同变化或修饰，均落在本发明的保护范围内。

Claims (8)

1.一种基于SVG的图形实时监控界面定制系统，其特征在于包括监控系统、SVG图形配置工具以及图形及信息存储系统，其中：

SVG图形配置工具包括文件管理模块、图形编辑管理模块、基础图形绘制模块、图元编辑管理模块、监控界面管理模块、配置项目管理模块、画布管理模块、视图界面管理模块以及帮助系统模块；

图形及信息存储系统用于存储图元库、本地配置库以及SVG图形配置工具生成的SVG文件。

2.根据权利要求1所述的基于SVG的图形实时监控界面定制系统，其特征在于所述的图元编辑管理模块用于特殊图元的绘制、图元的分组、图元的管理、图元组的管理、图元库图元的导入导出、图元与数据点原型的关联。

3.根据权利要求1所述的基于SVG的图形实时监控界面定制系统，其特征在于所述的本地配置库包括风电场、光伏、箱变以及微网配置库。

4.根据权利要求1所述的基于SVG的图形实时监控界面定制系统，其特征在于所述的图元库存储为一个XML文件。

5.根据权利要求4所述的基于SVG的图形实时监控界面定制系统，其特征在于所述的图元库中的图元符号分类存储、标签。

6.根据权利要求1所述的基于SVG的图形实时监控界面定制系统，其特征在于所述的图元库中，可重用的图元符号采用<defs></defs>标签定义，已定义的图元符号采用<use/>标签引用。

7.根据权利要求1所述的基于SVG的图形实时监控界面定制系统，其特征在于所述的SVG图形文件采用图元分层显示结构。

8.一种基于权利要求1-7中任一项所述系统的SVG的图形实时监控界面定制方法，其特征在于包括以下步骤：

A.新建项目及文件，配置环境参数；

B.选择本地配置库中存储的图形，或者通过图元库选择或绘制图元并生成图形；

C.编辑图形，关联数据点，布局界面；

D.对SVG图形文件及配置信息进行校验，校验若有误则返回步骤C；

E.校验成功后发布图形，并与本地配置库进行数据交互，生成SVG图形文件及相应的配置信息；

F.将生成的SVG图形文件及相应的配置信息传送给监控系统。

Images