一种WEB前端绘制电气接线图的方法[发明专利]

2024年2月6日发(作者：)

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号

CN 109190196 A(43)申请公布日

2019.01.11(21)申请号 2.2(22)申请日 2018.08.14(71)申请人 广东雅达电子股份有限公司地址 517000 广东省河源市高埔岗雅达工业园(72)发明人 刘华生　陈洁　蒋晓　颜盛官　李知良　(74)专利代理机构 广州粤高专利商标代理有限公司 44102代理人 罗晓林　李捷(51).G06F

17/50(2006.01)G06F

16/56(2019.01)

权利要求书1页 说明书4页 附图4页(54)发明名称一种WEB前端绘制电气接线图的方法(57)摘要本发明公开了一种WEB前端绘制电气接线图方法，其包括以下步骤：编辑画图，拖放图元，进行画面排版，配置画面与图元属性；根据设备与回路电量参数，定义结构类型，加入结构定义列表；在模板画面中，使用结构类型，编辑模板变量，并分配模板变量下的成员变量；使用结构类型，定义结构变量，加入结构变量列表；针对模板图元，使用结构的变量，替换模板变量，实现批量实时库变量绑定；对于非模板图元，使用实时库变量逐一绑定；构建SVG文件，使用程序语言转换方法，将当前画面程序逻辑与数据转换为SVG文件存档，供WEB页面加载使用，实现图形绘制。本发明支持可视化设计方式，可有效提高开发效率，节约开发成本，并可实现良好图形绘制需求。CN

109190196

A

CN 109190196 A权　利　要　求　书1/1页1.一种WEB前端绘制电气接线图方法，其特征在于，所述方法包括以下步骤：S100、编辑画图，拖放图元，进行画面排版，配置画面与图元属性；S200、根据设备与回路电量参数，定义结构类型，加入结构定义列表；S300、在模板画面中，使用结构类型，编辑模板变量，并分配模板变量下的成员变量；S400、使用结构类型，定义结构变量，加入结构变量列表；S500、针对模板图元，使用结构的变量，替换模板变量，实现批量实时库变量绑定；对于非模板图元，使用实时库变量逐一绑定；S600、构建SVG文件，使用程序语言转换方法，将当前画面程序逻辑与数据转换为SVG文件存档，供WEB页面加载使用，实现图形绘制。2.根据权利要求1所述的方法，其特征在于：所述图元包括基本图元、电气专业图元、图库图元以及模板图元。3.根据权利要求2所述的方法，其特征在于：所述基本图元包括线段、箭头、弧线、折线、椭圆、弦月、饼、矩形、圆角矩形、多边形、圆形、矩形以及圆矩形；所述电气专业图元包括管道、断路器、多种隔离开关、热点、图片以及文本。4.根据权利要求1所述的方法，其特征在于：所述编辑画图中提供的编辑功能包括图元选定、平移、无损缩放、旋转、左对齐、右对齐、上对齐、下对齐、水平均匀排列、垂直均匀排列、组合、解散、图元后移、图元前移、子图存入子图库、从库中提取子图、子图旋转、子图水平镜像、子图垂直镜像、打成子图以及打散子图中的任意一种或任意多种编辑功能。5.根据权利要求1所述的方法，其特征在于：在所述模板画面中，根据项目特点，抽象出模板画面，并将其添加进全局画面，作为模板图元在项目中复用，以实现画面批量排版，提高编辑效率。6.根据权利要求1所述的方法，其特征在于：所述实时库变量由设备编码、回路编码以及电量参数三部分点分构成；所述实时库变量通过网络通信，从实时库获取，或者通过手动编辑excel表格实时库变量，拷贝excel文件到本地，最后导入实时库变量到程序中；根据权利要求1所述的方法，其特征在于：所述实时库变量绑定，根据是否为模板图元，分为普通变量绑定与结构变量绑定两种方式；模板图元通过结构变量字符替换模板变量，实现实时库变量批量绑定，其他图元根据需要选择实时库变量逐一绑定。7.根据权利要求6所述的方法，其特征在于：所述结构变量绑定，在全局画面中，选择模板图元中一模板变量，使用字符替换方法，使用一结构变量，替换选定模板变量；用于替换的结构变量与模板变量的结构类型相同。8.根据权利要求1所述的方法，其特征在于：所述构建SVG文件，使用程序语言转换的方法将当前画面程序逻辑与数据转换为SVG代码文本并存档，供WEB页面加载并渲染，从而实现图形绘制。9.根据权利要求1所述的方法，其特征在于：所述结构类型，根据设备与回路电量参数，定义结构类型的成员变量数据类型与名称。10.根据权利要求1所述的方法，其特征在于：所述模板变量，其数据类型为结构定义列表中一个结构类型，其命名相对模板画面必须唯一；所述编辑模板变量，使用结构类型，在模板画面编辑模板变量，并给图元动作属性分配模板变量中的成员变量。2

CN 109190196 A说　明　书一种WEB前端绘制电气接线图的方法1/4页技术领域[0001]本发明涉及图形绘制技术领域，尤其涉及一种WEB前端绘制电气接线图的方法。背景技术[0002]电力设备的远程监控应用WEB技术实现使得以往的许多工作可以通过WEB浏览器中实现，既简化日常工作，又拓展电力调度自动化系统的管理范围，同时大大减少软件的升级维护费用。电力系统通过模拟图形表示与电量数据的图形化展示是电力监控系统输出显示的重要内容。按照国家颁布的有关电气技术标准，使用电气接线图形符号和文字符号表示电气装置中的各元件及其相互联系的工程图，称为电气接线图，又叫电气线路图。电气线路图分为一次接线图和二次接线图。一次接线是电气设备的主接线图，连接电源和负载；二次接线图是电气设备的控制接线图，用来实现对电气设备的各种控制功能。[0003]现有电力监控系统WEB开发中，应用SVG技术绘制电气线路图，一般通过SVG开发工具（如SVGDeveloper）编辑图元，生成SVG文件，然后在WEB页面中加载，实现电气线路图WEB中绘制。为了在电气线路图中显示电量数据以及电气设备开关状态，需要针对SVG图元绑定ID，来控制图元状态。此方法简化了电气线路图绘制中部分工作，但面对上十万的标签变量，使用SVG开发工具一个一个的绑定，既费力，又容易出错，出错又不容易查找。[0004]在传统的电力监控系统WEB开发中，由于电气线路图的复杂性，前端电气线路图绘制工作量巨大，并且当电气线路一旦有变动，就必须修改电力监控系统软件的源程序，导致其开发周期长，同样后期维护工作也较困难；已开发成功的电力监控系统软件又由于每个监控项目的不同而使其重复使用率很低，导致它的价格非常昂贵。[0005]由此可知，现有技术中的WEB前端电气接线图绘制的方法中存在开发周期长，复用率低，导致成本高，效率低等突出问题，因此难以适应激烈的市场竞争环境。发明内容[0006]为克服现有技术的不足及存在的问题，本发明提供一种WEB前端绘制电气接线图的方法，其支持的可视化设计方式，图元与子图库专业丰富，使用模板画面、结构类型定义与结构变量绑定技术，画面编辑方便快捷，提高开发效率，节约开发成本；SVG支持图形无损缩放，抗锯齿，支持滤镜等特殊效果，图形绘制美观；图元绑定变量后，SVG支持脚本控制图元属性，根据读取的数据，实现良好图形绘制需求。[0007]本发明是通过以下技术方案实现的：一种WEB前端绘制电气接线图方法，所述方法包括以下步骤：S100、编辑画图，拖放图元，进行画面排版，配置画面与图元属性；S200、根据设备与回路电量参数，定义结构类型，加入结构定义列表；S300、在模板画面中，使用结构类型，编辑模板变量，并分配模板变量下的成员变量；S400、使用结构类型，定义结构变量，加入结构变量列表；S500、针对模板图元，使用结构的变量，替换模板变量，实现批量实时库变量绑定；对于3

CN 109190196 A说　明　书2/4页非模板图元，使用实时库变量逐一绑定；S600、构建SVG文件，使用程序语言转换方法，将当前画面程序逻辑与数据转换为SVG文件存档，供WEB页面加载使用，实现图形绘制。[0008]优选地，所述图元包括基本图元、电气专业图元、图库图元以及模板图元。[0009]优选地，所述基本图元包括线段、箭头、弧线、折线、椭圆、弦月、饼、矩形、圆角矩形、多边形、圆形、矩形以及圆矩形；所述电气专业图元包括管道、断路器、多种隔离开关、热点、图片以及文本。[0010]优选地，所述编辑画图中提供的编辑功能包括图元选定、平移、无损缩放、旋转、左对齐、右对齐、上对齐、下对齐、水平均匀排列、垂直均匀排列、组合、解散、图元后移、图元前移、子图存入子图库、从库中提取子图、子图旋转、子图水平镜像、子图垂直镜像、打成子图以及打散子图中的任意一种或任意多种编辑功能。[0011]优选地，在所述模板画面中，根据项目特点，抽象出模板画面，并将其添加进全局画面，作为模板图元在项目中复用，以实现画面批量排版，提高编辑效率。[0012]优选地，所述实时库变量由设备编码、回路编码以及电量参数三部分点分构成；所述实时库变量通过网络通信，从实时库获取，或者通过手动编辑excel表格实时库变量，拷贝excel文件到本地，最后导入实时库变量到程序中；优选地，所述实时库变量绑定，根据是否为模板图元，分为普通变量绑定与结构变量绑定两种方式；模板图元通过结构变量字符替换模板变量，实现实时库变量批量绑定，其他图元根据需要选择实时库变量逐一绑定。[0013]优选地，所述结构变量绑定，在全局画面中，选择模板图元中一模板变量，使用字符替换方法，使用一结构变量，替换选定模板变量；用于替换的结构变量与模板变量的结构类型相同。[0014]优选地，所述构建SVG文件，使用程序语言转换的方法将当前画面程序逻辑与数据转换为SVG代码文本并存档，供WEB页面加载并渲染，从而实现图形绘制。[0015]优选地，所述结构类型，根据设备与回路电量参数，定义结构类型的成员变量数据类型与名称。[0016]优选地，所述模板变量，其数据类型为结构定义列表中一个结构类型，其命名相对模板画面必须唯一；所述编辑模板变量，使用结构类型，在模板画面编辑模板变量，并给图元动作属性分配模板变量中的成员变量。[0017]本发明提供的WEB前端绘制电气接线图的方法，其支持的可视化设计方式，图元与子图库专业丰富，使用模板画面、结构类型定义与结构变量绑定技术，画面编辑方便快捷，提高开发效率，节约开发成本；SVG支持图形无损缩放，抗锯齿，支持滤镜等特殊效果，图形绘制美观；图元绑定变量后，SVG支持脚本控制图元属性，根据读取的数据，实现良好图形绘制需求。附图说明[0018]图1为本发明实施例所述方法的流程示意图。[0019]图2为本发明优选实施例的编辑画图流程示意图。[0020]图3为本发明优选实施例所述模板变量配置的结构示意图。4

CN 109190196 A[0021][0022]说　明　书3/4页图4为本发明优选实施例结构变量宏替换的流程示意图。图5为本发明实施例中所述针对模板图元实现批量实时库变量绑定的 流程示意图6为本发明实施例中所述SVG文件构建的流程示意图。图。[0023]具体实施方式[0024]为了便于本领域技术人员的理解，以下结合附图和具体实施例对本发明作进一步详细描述。[0025]如附图1所示，所述电气接线图绘制步骤为：S100、编辑画图，拖放图元，进行画面排版，配置画面与图元属性等；S200、根据设备与回路电量参数，定义结构类型，加入结构定义列表；S300、在模板画面中，使用结构类型，编辑模板变量，并分配模板变量下的成员变量；S400、使用结构类型，定义结构变量，加入结构变量列表；S500、针对模板图元，使用结构的变量，替换模板变量，实现批量实时库变量绑定；对于非模板图元，使用实时库变量逐一绑定；S600、构建SVG文件，使用程序语言转换方法，将当前画面程序逻辑与数据转换为SVG文件存档，供WEB页面加载使用。[0026]本实施例中，步骤S100中所述画面编辑，使用可视化设计方式，实现画面排版，配置画面与图元属性。如附图2所示，附图2为本发明优选实施例的画图编辑结构示意图。在本实施例中，根据项目特点，抽象出模板画面，作为模板图元在项目中复用，实现画面批量排版。在本实施例中，所述图元编辑提供图元选定、平移、无损缩放、旋转、左对齐、右对齐、上对齐、下对齐、水平均匀排列、垂直均匀排列、组合、解散、图元后移以及图元前移等功能。作为优选的实施例，所述图元编辑还提供子图存入子图库、从库中提取子图、子图旋转、子图水平镜像、子图垂直镜像、打成子图、打散子图。所述图元分为基本图元、电气专业图元、图库图元以及模板图元。所述画面，根据画面类型，分为全局画面和模板画面；所述画面通过系列化存储在本地文件；打开当前工程项目时，所述画面数据通过系列化从本地文件中加载。所述全局画面用于绘制电气接线图（包括一次图纸，二次图纸等）。所述模板画面，其本质也是一个画面，只不过画面类型不同而已；根据项目特点，抽象出模板画面，像其他图元一样添加进全局画面，作为模板图元在项目中复用，实现画面批量排版，提高编辑效率。所述画面属性包括：画面名称、画面类型、背景颜色、画面位置与画面大小等属性。所述图元属性包括图元类型、对象名称、描述、颜色、线型、线宽、填充模式、填充颜色。所述图元动作包括颜色、填充颜色、显示隐藏、旋转、移动、百分比填充、鼠标动作、鼠标左键、按下弹起。所述基本图元包括线段、箭头、弧线、折线、椭圆、弦月、饼、矩形、圆角矩形、多边形、圆形、矩形以及圆矩形等；所述电气专业图元包括管道、断路器、多种隔离开关、热点、图片以及文本等图元。[0027]本实施例中，步骤S200中，所述定义结构类型，编辑结构名称与结构成员，使用可视化设计方式，实现结构类型定义。所述编辑结构名称与结构成员提供结构成员选定、添加、修改、删除，以及结构定义取消与确认等功能。如附图3所示，附图3为本发明优选实施例的定义结构类型流程示意图。所述定义结构类型，根据设备与回路电量参数，定义结构类型5

CN 109190196 A说　明　书4/4页成员变量，结构类型名称相对结构定义列表必须唯一。所述结构类型，加入结构定义列表，通过系列化存储在本地文件；打开当前工程项目时，所述结构类型通过系列化从本地文件中加载到结构定义列表。[0028]本实施例中，步骤S300中所述在模板画面中，使用结构类型，编辑模板变量，并分配模板变量下的成员变量，使用可视化设计方式，实现模板画面中模板变量配置。所述编辑模板变量提供模板变量添加、修改、删除，以及取消与确认等功能。如附图4所示，附图4为本发明优选实施例模板变量配置的结构示意图。所述模板变量命名相对模板画面，不同结构类型的模板变量必须不同，一个模板画面可以配置多种结构类型的模板变量；模板画面下的图元动作属性绑定变量，通过选定模板变量下的成员变量逐一绑定。[0029]本实施例中，步骤S400中所述使用结构类型，定义结构变量，加入结构变量列表，使用可视化设计方式，实现结构变量定义。所述定义结构变量提供结构类型选择、结构变量定义取消、以及结构变量定义确认等功能。所述结构变量通过系列化存储在本地文件；打开当前工程项目时，所述结构变量通过系列化从本地文件中加载文件到结构变量列表。[0030]本实施例中，步骤S500中所述针对模板图元，使用结构的变量，替换模板变量，实现批量实时库变量绑定，使用可视化设计方式，实现批量实时库变量绑定。对于非模板图元，使用实时库变量进行逐一绑定。所述使用结构的变量，替换模板变量提供模板变量替换记录选定、结构变量选择与确认，以及模板变量替换取消与确认等功能。如附图5所示，附图5为本发明实施例中所述结构变量宏替换的流程示意图。所述实时库变量由设备编码、回路编码以及电量参数三部分点分构成；所述实时库变量可以通过网络通信，从实时库获取，也可以手动编辑excel表格实时库变量，拷贝excel文件到本地，而后导入实时库变量到程序中。[0031]本实施例中，步骤S600中所述构建SVG文件，使用程序语言转换方法，将当前画面程序逻辑与数据转换为SVG文件存档，供WEB页面加载并渲染。如附图6所示，附图6为本发明实施例中所述SVG文件构建的流程示意图。所述WEB前端电气接线图绘制,通过加载SVG文件供WEB页面进行渲染。所述SVG文件通过使用程序语言转换的方法将当前画面程序逻辑与数据转换为SVG文本文件存档。所述SVG文件构建通过几大步骤完成：创建SVG文件使用的XML声明方式；创建文档引用外部DTD；创建SVG结构头；扫描画面中图层；扫描图层中的图元；如果是普通图元，解读图元普通属性，解读图元动作（限单行文本图元，显示输出动作，直接连接方式），解读图元绑定画面属性；构建普通图元源码；如果是模板图元，扫描模板画面中图层，扫描图层中的图元，解读图元普通属性，解读图元动作（限单行文本图元，显示输出动作，直接连接方式），解读图元绑定画面属性；构建模板图元源码（一个简单画面源码）；创建脚本，加载JS文件；创建SVG结构尾；当前画面构建SVG文件，并保存到SVG文件夹存档。[0032]与现有技术相比，本发明实施例提供的绘制电气接线图方法具有以下优点：其支持的可视化设计方式，图元与子图库专业丰富，使用模板画面、结构类型定义与结构变量绑定技术，画面编辑方便快捷，提高开发效率，节约开发成本；SVG支持图形无损缩放，抗锯齿，支持滤镜等特殊效果，图形绘制美观；图元绑定变量后，SVG支持脚本控制图元属性，根据读取的数据，实现良好图形绘制需求。[0033]上述实施例为本发明的较佳的实现方式，并非是对本发明的限定，在不脱离本发明的发明构思的前提下，任何显而易见的替换均在本发明的保护范围之内。6

CN 109190196 A说　明　书　附　图1/4页图17

CN 109190196 A说　明　书　附　图2/4页8图2

CN 109190196 A说　明　书　附　图3/4页图3图49

CN 109190196 A说　明　书　附　图4/4页图5图610