(19)中华人民共和国国家知识产权局
(12)发明专利申请
(10)申请公布号 (43)申请公布日 (21)申请号 201810923786.2
(22)申请日 2018.08.14
(71)申请人 广东雅达电子股份有限公司
地址 517000 广东省河源市高埔岗雅达工
业园
(72)发明人 刘华生 陈洁 蒋晓 颜盛官
李知良
(74)专利代理机构 广州粤高专利商标代理有限
公司 44102
代理人 罗晓林 李捷
(51)Int.Cl.
G06F 17/50(2006.01)
G06F 16/56(2019.01)
(54)发明名称
一种WEB前端绘制电气接线图的方法
(57)摘要
本发明公开了一种WEB前端绘制电气接线图
方法，其包括以下步骤：编辑画图，拖放图元，进
表；在模板画面中，使用结构类型，编辑模板变
型，定义结构变量，加入结构变量列表；针对模板
图元，使用结构的变量，替换模板变量，实现批量
实时库变量绑定；对于非模板图元，使用实时库
变量逐一绑定；构建SVG文件，使用程序语言转换
方法，将当前画面程序逻辑与数据转换为SVG文
件存档，供WEB页面加载使用，实现图形绘制。本
发明支持可视化设计方式，可有效提高开发效
率，节约开发成本，
并可实现良好图形绘制需求。权利要求书1页 说明书4页 附图4页CN 109190196 A 2019.01.11
C N 109190196
A
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所述的方法，其特征在于：所述模板变量，其数据类型为结构定义列表中一个结构类型，其命名相对模板画面必须唯一；所述编辑模板变量，使用结构类型，在模板画面编辑模板变量，并给图元动作属性分配模板变量中的成员变量。
权 利 要 求 书1/1页CN 109190196 A
一种WEB前端绘制电气接线图的方法
技术领域
[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、针对模板图元，使用结构的变量，替换模板变量，实现批量实时库变量绑定；对于
非模板图元，使用实时库变量逐一绑定；
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为本发明优选实施例所述模板变量配置的结构示意图。
[0021]图4为本发明优选实施例结构变量宏替换的流程示意图。
[0022]图5为本发明实施例中所述针对模板图元实现批量实时库变量绑定的 流程示意图。
[0023]图6为本发明实施例中所述SVG文件构建的流程示意图。
具体实施方式
[0024]为了便于本领域技术人员的理解，以下结合附图和具体实施例对本发明作进一步详细描述。
[0025]如附图1所示，所述电气接线图绘制步骤为：
S100、编辑画图，拖放图元，进行画面排版，配置画面与图元属性等；
S200、根据设备与回路电量参数，定义结构类型，加入结构定义列表；
S300、在模板画面中，使用结构类型，编辑模板变量，并分配模板变量下的成员变量；
S400、使用结构类型，定义结构变量，加入结构变量列表；
S500、针对模板图元，使用结构的变量，替换模板变量，实现批量实时库变量绑定；对于非模板图元，使用实时库变量逐一绑定；
S600、构建SVG文件，使用程序语言转换方法，将当前画面程序逻辑与数据转换为SVG文件存档，供WEB页面加载使用。
[0026]本实施例中，步骤S100中所述画面编辑，使用可视化设计方式，实现画面排版，配置画面与图元属性。如附图2所示，附图2为本发明优选实施例的画图编辑结构示意图。在本实施例中，根据项目特点，抽象出模板画面，作为模板图元在项目中复用，实现画面批量排版。在本实施例中，所述图元编辑提供图元选定、平移、无损缩放、旋转、左对齐、右对齐、上对齐、下对齐、水平均匀排列、垂直均匀排列、组合、解散、图元后移以及图元前移等功能。作为优选的实施例，所述图元编辑还提供子图存入子图库、从库中提取子图、子图旋转、子图水平镜像、子图垂直镜像、打成子图、打散子图。所述图元分为基本图元、电气专业图元、图库图元以及模板图元。所述画面，根据画面类型，分为全局画面和模板画面；所述画面通过系列化存储在本地文件；打开当前工程项目时，所述画面数据通过系列化从本地文件中加载。所述全局画面用于绘制电气接线图（包括一次图纸，二次图纸等）。所述模板画面，其本质也是一个画面，只不过画面类型不同而已；根据项目特点，抽象出模板画面，像其他图元一样添加进全局画面，作为模板图元在项目中复用，实现画面批量排版，提高编辑效率。所述画面属性包括：画面名称、画面类型、背景颜、画面位置与画面大小等属性。所述图元属性包括图元类型、对象名称、描述、颜、线型、线宽、填充模式、填充颜。所述图元动作包括颜、填充颜、显示隐藏、旋转、移动、百分比填充、鼠标动作、鼠标左键、按下弹起。所述基本图元包括线段、箭头、弧线、折线、椭
圆、弦月、饼、矩形、圆角矩形、多边形、圆形、矩形以及圆矩形等；所述电气专业图元包括管道、断路器、多种隔离开关、热点、图片以及文本等图元。
[0027]本实施例中，步骤S200中，所述定义结构类型，编辑结构名称与结构成员，使用可视化设计方式，实现结构类型定义。所述编辑结构名称与结构成员提供结构成员选定、添加、修改、删除，以及结构定义取消与确认等功能。如附图3所示，附图3为本发明优选实施例的定义结构类型流程示意图。所述定义结构类型，根据设备与回路电量参数，定义结构类型
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议