在线监测的图形组态方法及系统的制作方法
【专利摘要】本发明提供一种在线监测的图形组态方法及系统，系统包括：图元构建模块，用于基于SVG的基本图元构建出复杂图元；图元行为构建模块，用于构建基本图元与行为之间的关联，并根据根据构建出的图元与行为的关联，根据接收到的行为数据生成SVG图，并根据实时行为数据对SVG图进行实时更新；其中基本图元包括以下的至少一种：直线、矩形、圆、椭圆、文本、路径、折线、多边形；其中所述行为包括以下的至少一种：用于获取实时数据的图形元件属性、通用事件接口、数据展示、边框颜色、填充、透明度、虚线、旋转、缩放、平移、路径、柱状图、趋势图。
【专利说明】
在线监测的图形组态方法及系统
技术领域
[0001] 本发明属于数据处理技术领域，尤其涉及一种在线监测的图形组态方法及系统。
【背景技术】
[0002] 电力系统是现代生活中最重要的部分之一，因此现有的电力系统需要对系统进行 实时在线监测，以确保电力系统的稳定运行。现有技术中广泛采用图形组态工具，根据接收 到的数据实时生成监控图形。现有的很多图形组态工具是基于Flash开发的，但是由于 Flash是一种未开源的私有技术，且其与某些浏览器存在兼容性问题，同时在布局、交互、内 存占用等方面存在缺陷，因此不能很好地满足图像处理的要求，特别是对于电力系统这样 的重要部门来说无法满足使用要求。
【发明内容】
[0003] 针对现有技术中存在图形组态工具多是基于Flash开发的导致性能无法满足的问 题，提出了一种在线监测的图形组态方法及系统，能够广泛的应用于电力系统等领域，提高 系统的兼容性和整体性能。
[0004] 为了解决上述问题，本发明实施例提出了一种在线监测的图形组态系统，包括：
[0005] 图元构建模块，用于基于可缩放矢量图形即SVG的基本图元构建出复杂图元；
[0006] 图元行为构建模块，用于构建基本图元与行为之间的关联，并根据构建出的图元 与行为的关联，根据接收到的行为数据生成SVG图，并根据实时行为数据对SVG图进行实时 更新；
[0007] 其中所述SVG的基本图元包括以下的至少一种:直线、矩形、圆、椭圆、文本、路径、 折线、多边形；
[0008] 其中所述行为包括以下的至少一种：用于获取实时数据的图形元件属性、通用事 件接口、数据展示、边框颜色、填充、透明度、虚线、旋转、缩放、平移、路径、柱状图、趋势图； 其中所述图形元件属性包括:设备名称、测试点名称、数据类型；其中所述通用事件接口包 括:鼠标的点击、移人、移出、按下、弹起、移动。
[0009] 其中，所述图元行为构建模块包括：
[0010] 图形元件属性构建单元，用于从实时数据中获取图形元件属性中的设备名称、测 试点名称、数据类型；
[0011] 通用事件接口构建单元，用于对通用事件接口包括的点击、移入、移出、按下、弹 起、移动动作，分别绑定对应的处理步骤；
[0012] 数据展示构建单元，用于将图形元件属性映射为预设字段;具体包括：
[0013] 将图形元件属性的原始数据映射为预设字段，或
[0014] 将图形元件属性的原始数据进行预设处理后得到的数据映射为预设字段，或
[0015] 将图形元件属性的原始数据通过匿名函数根据预设条件对原始数据进行判断以 映射为预设字段；
[0016]图元CSS属性构建单元，用于对边框颜色、填充、透明度、虚线，通过图元CSS属性进 行解析以映射为预设字段；
[0017] 图元transform矩阵构建单元，用于对旋转、缩放、平移通过设置图元transform矩 阵进行解析以映射为预设字段；
[0018] 柱状图和趋势图构建单元，用于根据柱状图和趋势图的主题、标题、图例、数据，将 图元\生成柱图和曲线图。
[0019] 其中，所述图元行为构建模块还包括：
[0020] 解除单元，用于针对复杂图元进行解除组合以将所述复杂图元分解为多个基本图 J L· 〇
[0021] 其中，还包括行为解析模块，所述行为机械模块通过行为解析函数来解析每一个 基本图元上绑定的行为，并生成解析后的预览图。
[0022] 其中，所述行为解析模执行以下操作：
[0023] 获取需要预览的SVG图并添加到页面中；
[0024]根据接收到的控制指令以控制对所述SVG图进行相应操作，具体包括：
[0025] 根据接收到的鼠标按下、移动、弹起事件，对所述SVG图进行相应的拖动操作；
[0026] 根据接收到的鼠标滚动事件，对所述SVG图进行缩放；
[0027] 根据接收到的放大、缩小、原图、适应屏幕控制指令，对所述SVG图进行相应的缩 放、原图展不、适应屏蒂；
[0028]根据接收到的SVG元素及其绑定的行为，遍历实时接口并绑定tool tip，以移入图 元展示绑定信息；
[0029] 遍历实时接口以获取设备名称、测点名称、数据类型，并发送数据；
[0030] 在成功返回数据后，遍历实时接口，以获取每一实时接口的行为，然后对行为进行 解析；
[0031] 遍历柱状图趋势图接口，发送数据，数据成功返回后，解析柱图和曲线。
[0032] 其中，所述在成功返回数据后，遍历实时接口，以获取每一实时接口的行为，然后 对行为进行解析，具体包括：
[0033] 在获取到数据后，判断该行为是否为图形元件属性或通用事件接口；如果是图形 元件属性则将该数据还原为原始实时数据;如果是通用事件接口则根据预设的该图元事件 绑定相应的处理方法;如果是其他行为，则根据原始实时数据及该行为数据处理接口内容， 对原始实时数据进行处理，并将处理结果即数据映射结果对基本图元进行相应操作，实现 行为解析；
[0034] 其中所述操作包括但不限于:设置图元的CSS属性、设置图元的transform矩阵。 [0035]同时，本发明实施例还提出了一种利用如前任一项所述的在线监测的图形组态系 统进行图形组态的方法，包括：
[0036]利用SVG的基本图元构建出复杂图元;其中所述SVG的基本图元包括以下的至少一 种:直线、矩形、圆、椭圆、文本、路径、折线、多边形；
[0037]构建基本图元与行为之间的关联，其中所述行为包括以下的至少一种：用于获取 实时数据的图形元件属性、通用事件接口、数据展示、边框颜色、填充、透明度、虚线、旋转、 缩放、平移、路径、柱状图、趋势图；其中所述图形元件属性包括:设备名称、测试点名称、数 据类型;其中所述通用事件接口包括:点击、移入、移出、按下、弹起、移动；
[0038] 根据构建出的图元与行为的关联，根据接收到的行为数据生成SVG图，并根据实时 行为数据对SVG图进行实时更新。
[0039] 本发明的上述技术方案的有益效果如下:本发明实施例提出了一种在线监测的图 形组态方法及系统，灵活的运用了 SVG的各种特性直观的实时显示出各个部件的工作状态， 且具有很好的兼容性并能够降低系统负荷。
【附图说明】
[0040] 图1为本发明实施例的控制隔离开关闭合的图元行为绑定的示意图；
[0041] 图2为本发明实施例的绑定行为接口-图形元件属性原理示意图；
[0042]图3为本发明实施例的绑定行为接口-通用事件接口的原理示意图；
[0043]图4为本发明实施例的绑定行为接口-数据展示单元的原理示意图；
[0044] 图5为本发明实施例的绑定行为接口-数据展示单元的原理示意图；
[0045] 图6为本发明实施例的绑定行为接口-柱状图的原理示意图；
[0046] 图7为本发明实施例的绑定行为接口-趋势图的原理示意图；
[0047]图8为本发明实施例的SVG解析过程的流程图；
[0048] 图9为水库图；
[0049] 图10为图9的水库图的解析图。
【具体实施方式】
[0050] 为使本发明要解决的技术问题、技术方案和优点更加清楚，下面将结合附图及具 体实施例进行详细描述。
[0051] 本发明实施例提出了一种在线监测的图形组态系统，包括：
[0052] 图元构建模块，用于基于可缩放矢量图形即SVG的基本图元构建出复杂图元；
[0053] 图元行为构建模块，用于构建基本图元与行为之间的关联，并根据构建出的图元 与行为的关联，根据接收到的行为数据生成SVG图，并根据实时行为数据对SVG图进行实时 更新；
[0054] 其中所述SVG的基本图元包括以下的至少一种:直线、矩形、圆、椭圆、文本、路径、 折线、多边形；
[0055] 其中所述行为包括以下的至少一种：用于获取实时数据的图形元件属性、通用事 件接口、数据展示、边框颜色、填充、透明度、虚线、旋转、缩放、平移、路径、柱状图、趋势图； 其中所述图形元件属性包括:设备名称、测试点名称、数据类型；其中所述通用事件接口包 括:鼠标的点击、移人、移出、按下、弹起、移动。
[0056] 具体的，上述的图元行为构建模块，能够对13种行为构建出与图元之间的关联，这 13种行为包括：
[0057]图形元件属性(设备名称、测试点名称、数据类型）、通用事件接口（鼠标的点击、移 入、移出、按下、弹起、移动）、数据展示、边框颜色、填充、透明度、虚线、旋转、缩放、平移、路 径、柱状图、趋势图。
[0058]具体的，如图2所示的为图形元件属性的一个具体例子，其包括设备名称device_ name、测点名称tag、数据类型typ，以获取实时数据。如图3所示的为通用事件接口的一个具 体例子，包含以下五个事件：点击、移入、移出、按下、弹起、移动;该通用事件接口用于对图 元事件绑定相应的处理方法。
[0059] 具体的，如图3所示的为通用事件接□包含:点击、移入、移出、按下、弹起、移动，用 于对图元事件绑定相应方法。
[0060] 其中所述数据展示包括:将图形元件属性的原始数据映射为预设字段，或是对原 始数据进行处理后得到的处理后数据并将处理后数据映射为预设字段，或通过匿名函数根 据预设条件对原始数据进行判断以映射为预设字段。如图4、图5所示的为数据展示的一个 具体例子，图4所示的数据值#value#是表示能够直接获取图形元件属性对应的原始数据； 举例来说，如果数据值#value#为0则文本映射为"发电"、如果数据值#value#为1则文本映 射为"抽水"。而如图5所示的则为绑定接口，通过匿名函数根据预设条件对原始数据进行判 断；如果原始数据在[20,40]范围内则映射为1，否则映射为2;而映射值又可以对应不同的 文本，例如映射值为0则文本映射为发电，如果映射值为1则文本映射为抽水，如果映射值为 2则文本映射为检修。
[0061] 具体的，边框颜色、填充、透明度、虚线(一次行为)这几个行为通过设置图元CSS属 性进行解析。具体包括;边框颜色及填充数据映射将数据处理中可能的所有结果映射为颜 色，如green、#000000、reb( 100，200，90);透明度数据映射将数据处理中可能的所有结果映 射为[0，1]之间的数字;虚线(一次行为)数据映射将数据处理中可能的所有结果映射为数 字，表示虚线段长度。
[0062]具体的，旋转、缩放、平移（一次行为)这几个行为通过设置图元transform矩阵进 行解析。与边框颜色、填充、透明度、虚线(一次行为)这几个行为这几个行为相同的，也将这 些行为相应的映射为数字，其中旋转数据映射将数据处理中可能的所有结果映射为[-180， 180]之间的数字，表示旋转角度;缩放数据映射将数据处理中可能的所有结果映射为数字， 表示缩放倍数;平移（一次行为）将数据处理中可能的所有结果映射为(x，y)坐标形式；如 (100，100)，表示向下移动ΙΟΟρχ、向右移动ΙΟΟρχ。这几个行为通过设置图元transform矩阵 进行解析。
[0063] 其中，如图6、图7所示的，柱状图、趋势图都各自包括主题、标题、图例、数据，用于 将图元根据绑定信息生成柱图和曲线图。
[0064] 其中，所述图元行为构建模块是针对基本图元进行行为绑定。如果对象为复杂图 元，则可以通过解除组合的方式将其分解为多个基本图元，然后再进行行为绑定;或是人工 选取每一基本图元并进行行为绑定。如图1所示的为控制隔离开关闭合的图元行为绑定，隔 离开关是一个由多个基本图元组合而成的复杂图元，可以通过解除组合的方式形成多个基 本图元，或是通过人工方式逐一选择基本图元;然后针对每一基本图元分别绑定行为。这样 绑定的行为是在每一个基本图元上而不是在整个隔离开关上。
[0065] 行为解析模块，通过行为解析函数来解析每一个基本图元上绑定的行为，并生成 解析后的预览图。具体的，如图8所示，执行以下操作：
[0066] 1、获取需要预览的SVG内容，添加到页面中；
[0067] 2、监听鼠标按下、移动、弹起事件，实现鼠标拖动SVG图；
[0068] 3、监听鼠标滚动事件，滚动鼠标实现SVG缩放；
[0069] 4、页面添加放大、缩小、原图、适应屏蒂按钮，实现SVG缩放、原图展不、适应屏蒂；
[0070] 5、获取SVG元素及其绑定的行为(实时接口及柱状图趋势图接口）；
[0071] 6、遍历实时接口，绑定tooltip，实现鼠标移入图元展示绑定信息；
[0072] 7、遍历实时接口，获取设备名称、测点名称、数据类型，发送数据；
[0073] 8、成功返回数据后，遍历实时接口，以获取每一实时接口的行为，然后对行为进行 解析；
[0074] 9、遍历柱状图趋势图接口，发送数据，数据成功返回后，解析柱图和曲线。
[0075] 其中前述的8中对行为进行解析具体包括:在获取到数据后，判断该行为是否为图 形元件属性或通用事件接口；如果是图形元件属性则将该数据还原为原始实时数据;如果 是通用事件接口则根据预设的该图元事件绑定相应的处理方法;如果是其他行为，则根据 原始实时数据及该行为数据处理接口内容，对原始实时数据进行处理，并将处理结果即数 据映射结果对基本图元进行设置CSS属性、transform矩阵等操作，实现行为解析。
[0076] -下通过一个具体的例子对本发明实施例的系统和方法进行详细说明。
[0077] 本实施例用于实时在线显示水库水位变化、电机状态、水流状态、阀门状态等参数 以进行实时在线监测，其实时数据来自后台服务产生的模拟数据，且需要显示的包括： [0078] 1、显示机组上下库水位的值；
[0079] 2、显示球阀开度、阀门状态、电机状态、电机转速；
[0080] 3、显示阀门颜色及移动，具体包括：当阀门状态为全开时，图中的阀门图标显示绿 色，向上移动至全开位置；当状态为半开时，图中的阀门图标显示黄色，并显示为向上移动 至半开位置;当状态为关闭时，图中的阀门图标显示红色，并显示为不进行移动；
[0081] 4、显示上下库水位动态变化，具体包括：当水位上升时，用于表示水位的图标（例 如显示为液面线)上移;水位下降时，用于表示水位的图标下移；
[0082] 5、根据电机状态显示电机颜色及转动方向变化，具体包括：当电机停运时，用于表 示电机的图标显示为绿色且不转动；当电机检修时，用于表示电机的图标显示为灰色且不 转；当电机发电时，用于表示电机的图标显示为红色且向右转；当电机抽水时，用于表示电 机的图标显示为蓝色且向左转
[0083] 6、根据电机状态显示管道水流，具体包括：当电机停运或检修时，用于表示管道内 水流的图标静止；当电机发电时，用于表示管道内水流的图标显示水向上流；当电机抽水 时，用于表示管道内水流的图标显示水向下流。
[0084]为了实现上述的实时在线监测的图形显示，本发明实施例的工作流程为：
[0085]步骤S1:绘制出水库图，如图9所示的即为一种水库图；
[0086] 步骤S2:对图元进行绑定，具体包括：
[0087]上下库水位、球阀开度、阀门状态、电机状态、电机转速绑定数据展示单元，例如1、 2号机组上库水位绑定方法：
[0089]阀门颜色绑定填充，例如1、2号机组上库阀门：
[0091 ]阀门移动绑定平移一次动作，例如1、2号机组上库阀门：
[0092]
[0094] 上下库水位动态变化通过绑定路径连续动作实现，例如：[0095]
[0096]电机颜色绑定填充，例如：[0097]
[0098]电机转动绑定平移连续动作
[0100] 管道水流绑定虚线连续动作
[0101]
[0102] S4预览，在浏览器输入预览地址，查看解析后的SVG文件，该SVG文件如图10所示 的。该页面能够监听鼠标滚动事件，鼠标向上滚动实现SVG放大，鼠标向下滚动实现SVG缩 小；同时在加载SVG的界面中设有放大、缩小、原始大小、适应屏幕四个按钮以控制SVG缩放。 同时，当鼠标移动到半丁的图元时，能够显示出该图元对应的信息。例如当鼠标停留在用于 表示电机状态的图标上时，通过对话窗口显示出电机的参数;如图1 〇所示，当鼠标放在最右 侧的用于表示电机的图标上时，以浮动窗口的形式将电机的参数数值都显示出来。这样既 可以通过SVG图的方式直观显示出各个部件的工作参数，又能具体显示每个部件的工作参 数。同时SVG图具有
[0103] 1、显示机组上下库水位的值；
[0104] 2、显示球阀开度、阀门状态、电机状态、电机转速；
[0105] 3、显示阀门颜色及移动，具体包括：当阀门状态为全开时，图中的阀门图标显示绿 色，向上移动至全开位置；当状态为半开时，图中的阀门图标显示黄色，并显示为向上移动 至半开位置;当状态为关闭时，图中的阀门图标显示红色，并显示为不进行移动；
[0106] 4、显示上下库水位动态变化，具体包括：当水位上升时，用于表示水位的图标（例 如显示为液面线)上移;水位下降时，用于表示水位的图标下移；
[0107] 5、根据电机状态显示电机颜色及转动方向变化，具体包括：当电机停运时，用于表 示电机的图标显示为绿色且不转动；当电机检修时，用于表示电机的图标显示为灰色且不 转；当电机发电时，用于表示电机的图标显示为红色且向右转；当电机抽水时，用于表示电 机的图标显示为蓝色且向左转
[0108] 6、根据电机状态显示管道水流，具体包括：当电机停运或检修时，用于表示管道内 水流的图标静止；当电机发电时，用于表示管道内水流的图标显示水向上流；当电机抽水 时，用于表示管道内水流的图标显示水向下流。
[0109]以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员 来说，在不脱离本发明所述原理的前提下，还可以作出若干改进和润饰，这些改进和润饰 也应视为本发明的保护范围。
【主权项】
1. 一种在线监测的图形组态系统，其特征在于，包括： 图元构建模块，用于基于可缩放矢量图形即SVG的基本图元构建出复杂图元； 图元行为构建模块，用于构建基本图元与行为之间的关联，并根据根据构建出的图元 与行为的关联，根据接收到的行为数据生成SVG图，并根据实时行为数据对SVG图进行实时 更新； 其中所述SVG的基本图元包括以下的至少一种:直线、矩形、圆、椭圆、文本、路径、折线、 多边形； 其中所述行为包括以下的至少一种：用于获取实时数据的图形元件属性、通用事件接 口、数据展示、边框颜色、填充、透明度、虚线、旋转、缩放、平移、路径、柱状图、趋势图；其中 所述图形元件属性包括:设备名称、测试点名称、数据类型;其中所述通用事件接口包括：鼠 标的点击、移入、移出、按下、弹起、移动。2. 根据权利要求1所述的在线监测的图形组态系统，其特征在于，所述图元行为构建模 块包括： 图形元件属性构建单元，用于从实时数据中获取图形元件属性中的设备名称、测试点 名称、数据类型； 通用事件接口构建单元，用于对通用事件接口包括的点击、移入、移出、按下、弹起、移 动动作，分别绑定对应的处理步骤； 数据展示构建单元，用于将图形元件属性映射为预设字段;具体包括： 将图形元件属性的原始数据映射为预设字段，或 将图形元件属性的原始数据进行预设处理后得到的数据映射为预设字段，或 将图形元件属性的原始数据通过匿名函数根据预设条件对原始数据进行判断以映射 为预设字段； 图元CSS属性构建单元，用于对边框颜色、填充、透明度、虚线，通过图元CSS属性进行解 析以映射为预设字段； 图元transform矩阵构建单元，用于对旋转、缩放、平移通过设置图元transform矩阵进 行解析以映射为预设字段； 柱状图和趋势图构建单元，用于根据柱状图和趋势图的主题、标题、图例、数据，将图 元\生成柱图和曲线图。3. 根据权利要求2所述的在线监测的图形组态系统，其特征在于，所述图元行为构建模 块还包括： 解除单元，用于针对复杂图元进行解除组合以将所述复杂图元分解为多个基本图元。4. 根据权利要求1所述的在线监测的图形组态系统，其特征在于，还包括行为解析模 块，所述行为机械模块通过行为解析函数来解析每一个基本图元上绑定的行为，并生成解 析后的预览图。5. 根据权利要求4所述的在线监测的图形组态系统，其特征在于，所述行为解析模执行 以下操作： 获取需要预览的SVG图并添加到页面中； 根据接收到的控制指令以控制对所述SVG图进行相应操作，具体包括： 根据接收到的鼠标按下、移动、弹起事件，对所述SVG图进行相应的拖动操作； 根据接收到的鼠标滚动事件，对所述SVG图进行缩放； 根据接收到的放大、缩小、原图、适应屏幕控制指令，对所述SVG图进行相应的缩放、原 图展不、适应屏蒂； 根据接收到的SVG元素及其绑定的行为，遍历实时接口并绑定tool tip，以移入图元展 示绑定信息； 遍历实时接口以获取设备名称、测点名称、数据类型，并发送数据； 在成功返回数据后，遍历实时接口，以获取每一实时接口的行为，然后对行为进行解 析； 遍历柱状图趋势图接口，发送数据，数据成功返回后，解析柱图和曲线。6. 根据权利要求5所述的在线监测的图形组态系统，其特征在于，所述在成功返回数据 后，遍历实时接口，以获取每一实时接口的行为，然后对行为进行解析，具体包括： 在获取到数据后，判断该行为是否为图形元件属性或通用事件接口；如果是图形元件 属性则将该数据还原为原始实时数据;如果是通用事件接口则根据预设的该图元事件绑定 相应的处理方法;如果是其他行为，则根据原始实时数据及该行为数据处理接口内容，对原 始实时数据进行处理，并将处理结果即数据映射结果对基本图元进行相应操作，实现行为 解析； 其中所述操作包括但不限于:设置图元的CSS属性、设置图元的transform矩阵。7. -种利用如权利要求1-6任一项所述的在线监测的图形组态系统进行图形组态的方 法，其特征在于，包括： 利用SVG的基本图元构建出复杂图元；其中所述SVG的基本图元包括以下的至少一种： 直线、矩形、圆、椭圆、文本、路径、折线、多边形； 构建基本图元与行为之间的关联，其中所述行为包括以下的至少一种：用于获取实时 数据的图形元件属性、通用事件接口、数据展示、边框颜色、填充、透明度、虚线、旋转、缩放、 平移、路径、柱状图、趋势图；其中所述图形元件属性包括:设备名称、测试点名称、数据类 型;其中所述通用事件接口包括:点击、移入、移出、按下、弹起、移动。
【文档编号】G06F9/44GK106095471SQ201610702852
【公开日】2016年11月9日
【申请日】2016年8月22日
【发明人】张志学, 潘玥, 姜雪菲, 李喆, 郭凡, 郭少川
【申请人】国家电网公司, 北京许继电气有限公司