CN112464119A - 一种基于web端的SCADA在线组态编辑方法 - Google Patents

Abstract

本发明公开了一种基于web端的SCADA在线组态编辑方法。为了克服现有技术在线组态编辑过程操作复杂，效率低下的问题；本发明包括以下步骤：S1：产品图元配置；添加产品属性和产品不同状态下的图元，并配置对应需要满足的表达式；S2：通用图元配置；选择通用图元类型，设置通用图元的基本属性，配置对应的表达式；S3：监控图绘制；在编辑区域添加图元，图元自动绑定对应的交互事件，完成监控图的绘制编辑；S4：监控图信息配置；修改图元绑定信息，生成新的html文件；S5：配置监控***，生成监控******，用户根据访问权限查看不同的设备运行状态。本方案功能操作方法简洁明了，降低学习成本，提高效率。

Description

一种基于web端的SCADA在线组态编辑方法

技术领域

本发明涉及一种组态编辑方法领域，尤其涉及一种基于web端的SCADA在线组态编辑方法。

背景技术

传统工业SCADA***中，很大部分都是CS的模式，组态、图元的绘制以及监控图的绘制流程交杂在一起，安装以及学***台中，监控图的绘制需要借助第三方开源的CS绘图工具，在进行设备组态的过程中需要对图元和监控图循环导入导出，操作流程十分繁琐，并且绘制和点位绑定功能操作分工不明确，降低了工作效率。

例如，一种在中国专利文献上公开的“一种基于SVG的Web组态画面存储与展示***和方法及介质”，其公告号CN111459501A，通过拖拽配置的方式搭建监控画面，将监控画面对应的画面元素内容生成XML格式文件，生成画面脚本，将XML格式文件、画面脚本保存并发送至后台服务；后台服务接收XML格式文件、画面脚本，将XML格式文件、画面脚本转换为能够在浏览器中运行的HTML页面；画面运行态加载监控画面，在浏览器中渲染画面元素，向后台服务进行监控画面的注册、监控画面的数据刷新，响应用户交互事件，对画面元素进行刷新。但是上述方案并没有说明图元是如何绑定属性、事件等参数，图元限制于一些通用的控件，并且传送至后台是XML文件和画面脚本，后台处理复杂容易出错。

发明内容

本发明主要解决现有技术在线组态编辑过程操作复杂，效率低下的问题；提供一种基于web端的SCADA在线组态编辑方法，工程人员能够对产品图元、通用组件图元的编辑和配置，监控界面的绘制和图元对应点位及相关事件的绑定，监控***的配置，浏览器内实时监测现场设备各点位的运行状态，功能操作方法简洁明了，降低学习成本，提高效率。

本发明的上述技术问题主要是通过下述技术方案得以解决的：

一种基于web端的SCADA在线组态编辑方法包括以下步骤：

S1：产品图元配置；添加产品属性和产品不同状态下的图元，并配置对应需要满足的表达式；

S2：通用图元配置；选择通用图元类型，设置通用图元的基本属性，配置对应的表达式；

S3：监控图绘制；在编辑区域添加图元，图元自动绑定对应的交互事件，完成监控图的绘制编辑；

S4：监控图信息配置；修改图元绑定信息，生成新的html文件；

S5：配置监控***，生成监控******，用户根据访问权限查看不同的设备运行状态。

本方案通过在产品图元配置模块和通用组件配置模块配置不同的图元组件，后端根据配置生成相应的svg组件库，在监控图编辑***内将自动导入配置完成的组件库。将图元拖入编辑域即完成图元的添加，将在图元上自动绑定已知的属性，如所属产品，设备名称，属性等信息。同时在编辑界面也可以配置图元对应的事件，例如点击图元打开某个界面等，将编辑完成的svg文件格式的监控图和json格式的事件参数传送至后台，后台根据svg文件，图元库以及事件参数直接生成可预览的html文件。可以选择在线预览，查看设备的实时运行状态。流程监控图配置完成后，可以配置对应的监控***，配置参数，即可一键访问监控***，掌握设备的实时运行状态。工程人员仅需关注图元的参数配置，且图元配置操作简单，降低了学习成本，提高了工作效率；在绘制监控图时图元信息自动绑定，节省操作，提高效率；编辑的参数自定义，后台自动生成***，灵活便捷。本方案集监控的组态和编辑与一体，优化企业监控项目的流程，节省成本。

作为优选，所述的步骤S1包括以下步骤：

S11：在产品列表中新建产品，添加对应的状态属性；

S12：对于新建产品上传定位图以及产品不同状态下的图元；

S13：对产品不同状态下的图元配置状态属性需要满足的表达式。

图元的各种形态图由美工人员绘制，工程人员进行上传并配置表达式即完成了产品图元的配置。图元配置操作简单，降低了学习成本，提高了工作效率。

作为优选，所述的通用图元类型包括文本、多行文本框、输入框和自定义图形；通用图元的基本属性包括打包不限于字体颜色、字体类型和默认文本。通用图元只需要输入参数，无需绘制，后台将生成对应的图元，操作方便。

作为优选，所述的图元包括但不限于svg、png、gif或jpg格式。支持多种格式，适配性强。

作为优选，在完成产品图元配置和通用图元配置后，自动生成图元组件库，图元组件库中包括基础图元、产品图元、设备图元和通用图元；基础图元包括未配置属性的文本、多行文本框和输入框；产品图元和设备图元根据产品分组展示。图元组件库由后台自动生成，图元的选择有基础图元、产品图元、设备图元和通用图元多种形式，操作简单，形式丰富。

作为优选，所述的步骤S3包括以下步骤：

S31：从图元组件库中选择图元拖曳至编辑区域，以svg标签形式添加图元；

S32：图元绑定交互事件，展示图元绑定的信息，包括图元ID、所述产品、设备名称；

S33：提交编辑后的svg文件至后台保存，后台根据svg文件、产品图元表达式配置以及事件配置信息生成对应的html文件。

工程人员在完成图元配置工作后，即可进行监控界面的绘制。编辑界面的主体部分是中间编辑区域，在左侧图元组件库中选择图元拖拽至编辑区域，以svg标签的形式添加图元，就完成图元的添加。工程人员可对图元进行拖拽，缩放，删除等操作。编辑界面同样支持整个监控界面的拖动以及缩放功能。在完成图元添加后，点击图元，在右侧菜单栏将展示图元绑定的信息，图元ID、所属产品和设备名称等，并且可绑定对应的交互事件，例如点击图元出现控制下发弹窗等。其中通用组件无法自动绑定具体的位号，需要工程人员手动配置具***号和事件。完成监控图的编辑后提交svg文件至后台保存，后台将根据svg文件，产品的图元表达式配置及事件配置等信息，生成对应的html，实时查询设备运行信息，界面将根据设备的运行状态显示对应的图元。

作为优选，在完成监控图绘制后修改图元绑定信息，修改完成后提交后台，后台重新生成svg文件和html文件，在监控界面监测到最新的设备运行状态。

工程人员在完成并提交监控图的绘制后，在监控图列表查看所有已上传的监控图，能够看到绘制完成的监控图以及各图元的配置信息。此时只是静态展示状态，不可编辑也看不到实时信息。工程人员可点击图元，在信息栏修改该图元的绑定信息，例如绑定的位号或事件等，编辑完成后提交，将配置信息传至后台，后台将重新生成svg文件和html文件，在监控界面将可以看到最新的设备运行状态。在此界面也能够进行监控界面的预览和下载。

作为优选，所述的步骤S5包括以下步骤：

S51：配置监控***参数；监控***参数包括监控图及其分组情况、监控***的权限分配和监控***的外观风格；

S52：生成监控***的访问连接，用户根据访问权限在浏览器访问对应的地址，查看不同监控***中各设备的运行状态。

工程人员在完成对监控图的绘制以及配置之后，就可以配置不同的监控***，能够便捷地对监控图进行管理以及展示。编辑参数自定义，后台自动生成***，灵活便捷。

本发明的有益效果是：

1. 图元配置功能操作方法简洁明了，降低学习成本，提高效率。

2. 图元组件库由后台生成，绘制监控图，图元信息将自动绑定，节省操作。

3. 图元的选择有基础图元，产品图元，设备图元，通用图元多形式，且支持多格式，兼容性强。

4. 编辑参数自定义，后台自动生成***，灵活便捷。

5. 集监控的组态和编辑于一体，优化企业监控项目的流程，节省成本。

附图说明

图1是本发明的一种在线组态编辑方法流程图。

具体实施方式

下面通过实施例，并结合附图，对本发明的技术方案作进一步具体的说明。

实施例：

本实施例的一种基于web端的SCADA在线组态编辑方法，如图1所示，包括以下步骤：

S1：产品图元配置；添加产品属性和产品不同状态下的图元，并配置对应需要满足的表达式。

图元的各种形态图由美工人员绘制，工程人员进行上传并配置表达式即完成了产品图元的配置。操作简单，减少工程人员学习成本。

本实施例以现要实时监测一台直行电梯A的运行状态为例，其中有属性点door(轿门状态)，ST(运行方向)，FLOOR(楼层显示)，FL(故障状态)。工程人员需要能监测到直梯的运行状态，以及是否出现故障等信息。

S11：在产品列表中新建产品，添加对应的状态属性。

工程人员在产品列表中新建产品，并在详情的属性页添加对应的属性，包括door(轿门状态)、ST(运行方向)、FLOOR(楼层显示)和FL(故障状态)。

S12：对于新建产品上传定位图以及产品不同状态下的图元。

在产品详情的图形列表上传定位图以及具体直梯设备在不同状态下的图元。定位图是在绘制监控图时表示某个产品或者通用组件的占位图。图元包括但不限于svg、png、gif或jpg格式。

S13：对产品不同状态下的图元配置状态属性需要满足的表达式。

配置需要满足的表达式，考虑到产品的展示状态可能不止一种，故支持产品的多套图元设置，同理在后续绘制监控界面时针对一个产品或设备有多种展示方式可选。

例如上传的VerticalLadder_up.svg展示的是直梯上升时的svg动画，则为该svg图配置表达式“TAG.ST==1&&TAG.DOOR==2”，那么在监控图中，监测到具体直梯设备的属性ST（运行方向）为1即向上，并且DOOR（轿门状态）为2即轿门关闭，该电梯设备展示VerticalLadder_up.svg。

在不满足任何表达式时展示默认的图元。

S2：通用图元配置；选择通用图元类型，设置通用图元的基本属性，配置对应的表达式。

通用图元类型包括文本、多行文本框、输入框和自定义图形。

对图元进行基本属性的设置，例如文本和输入框，能够绑定字体颜色、字体类型和默认文本等通用配置。

自定义图形的配置跟产品图元的配置流程一致，但是因为是通用图元不涉及具体产品，在实际运行时展示的是配置的属性点的值，故配置表达式时以“value”指向属性，例如：“value>0”，并且不支持多套图元。

例如，在上述直梯A的运行过程中，当直梯关门时警示灯亮红。工程人员新建自定义图形组件Light表示警示灯，并参照产品图元上传图片并配置表达式，例如red.svg配置“value==2”，green.svg配置“value==1”。在具体监控图中放置一个Light组件，在该组件上绑定直梯A的属性DOOR，此时表达式中的value指向DOOR的值，当直梯A轿门打开即DOOR==2即value==2时，显示红色的按钮图red.svg，表示轿门为打开状态。

工程人员在配置完成产品图元后，自动生成图元组件库，在编辑界面的图元组件库中将展示现有的基础图元、产品图元、设备图元和通用图元。

基础图元包括未配置属性的文本，多行文本框，输入框；将图元拖拽入编辑域后可以进行字体颜色等属性的配置。

产品图元以产品分组展示多套图元的定位图，将图元拖拽入编辑域后将在信息面板内展示该图元的信息，绑定的产品只读不可更改。

设备图元将以产品分组，以产品下包含的设备名为单元组件列表展示将图元拖拽入编辑域中时，若产品存在多套图元，将出现图元选择弹框，选择完成后信息面板内会展示该图元已经绑定的相关信息，例如图元设备名称/所属产品名称，此时的产品不可改但是设备依旧可改。

S3：监控图绘制；在编辑区域添加图元，图元自动绑定对应的交互事件，完成监控图的绘制编辑。

S31：从图元组件库中选择图元拖曳至编辑区域，以svg标签形式添加图元。

工程人员在完成图元配置工作后，即可进行监控界面的绘制。编辑界面的主体部分是编辑区域，在图元组件库中选择图元拖拽至编辑区域，以svg标签的形式添加图元，就完成图元的添加。工程人员能够对图元进行拖拽，缩放，删除等操作。编辑界面同样支持整个监控界面的拖动以及缩放功能。

S32：图元绑定交互事件，展示图元绑定的信息，包括图元ID、所述产品、设备名称。

在完成图元添加后，点击图元，在菜单栏将展示图元绑定的信息，包括图元ID、所属产品和设备名称等，并且可绑定对应的交互事件，例如点击图元出现控制下发弹窗等。其中通用图元无法自动绑定具体的位号，需要工程人员手动配置具***号和事件。

交互事件分为“控制”和“打开面板”两类。“控制”一般完成语句下发，例如，点击自定义图形A，会将在输入框组件B中编辑的值下发到直梯设备A的属性DOOR上。“打开面板”即打开某个界面，这个界面可以是已有的监控图或者工程人员指定的链接地址，例如点击自定义图形A，打开百度界面。其中基础图元和通用图元无法自动绑定具体的位号，需要工程人员手动配置具***号和事件。

S33：提交编辑后的svg文件至后台保存，后台根据svg文件、产品图元表达式配置以及事件配置信息生成对应的html文件。

完成监控图的编辑后提交svg文件至后台保存，后台将根据svg文件，产品的图元表达式配置及事件配置等信息，生成对应的html，实时查询设备运行信息，界面将根据设备的运行状态显示对应的图元，如直梯A运行期间，指示灯组件Light绑定了该直梯属性DOOR，文本组件textA也绑定到该直梯属性DOOR，当直梯A轿门打开即DOOR==2即value==2时，显示红色的按钮图，textA的文本将对应变成2，表示轿门为打开状态。此时一键预览就可以在浏览器内实时监测到现场设备各点位的运行状态。

S4：监控图信息配置；修改图元绑定信息，生成新的html文件。在完成监控图绘制后修改图元绑定信息，修改完成后提交后台，后台重新生成svg文件和html文件，在监控界面监测到最新的设备运行状态。

工程人员在完成并提交监控图的绘制后，可以在监控图列表查看所有已上传的监控图，点击查看详情，就可以看到绘制完成的监控图以及各图元的配置信息。此时只是静态展示状态，不可编辑也看不到实时信息。工程人员可点击图元，在信息栏修改该图元的绑定信息，例如绑定的位号、事件等，编辑完成后提交，将配置信息传至后台，后台将重新生成svg文件和html文件，在监控界面将可以看到最新的设备运行状态。在此界面也能够进行监控界面的预览和下载。

S5：配置监控***，生成监控******，用户根据访问权限查看不同的设备运行状态。

S51：配置监控***参数；监控***参数包括监控图及其分组情况、监控***的权限分配和监控***的外观风格。

为了便捷监控图的管理以及展示，工程人员在完成对监控图的绘制以及配置之后，就能够配置不同的监控***。新建监控***后，对监控***的参数进行配置；包括该监控***包含的监控图以及分组情况、监控***的权限分配和监控***的风格（侧/顶部导航，导航背景图，监控展示区域的背景色，以及其他需要展示的功能，例如报警，3D，报表，趋势，日志等）。

S52：生成监控***的访问连接，用户根据访问权限在浏览器访问对应的地址，查看不同监控***中各设备的运行状态。

完成参数配置后，将生成监控***的访问连接，有访问权限的用户就能够直接在浏览器访问对应的地址查看不同监控图中设备的运行状态。

本实施例的方案通过在产品图元配置模块和通用组件配置模块配置不同的图元组件，后端根据配置生成相应的svg组件库，在监控图编辑***内将自动导入配置完成的组件库。将图元拖入编辑域即完成图元的添加，将在图元上自动绑定已知的属性，如所属产品、设备名称、属性等信息。同时在编辑界面也可以配置图元对应的事件，例如点击图元打开某个界面等，将编辑完成的svg文件格式的监控图和json格式的事件参数传送至后台，后台根据svg文件，图元库以及事件参数直接生成可预览的html文件。可以选择在线预览，查看设备的实时运行状态。流程监控图配置完成后，可以配置对应的监控***，配置参数，即可一键访问监控***，掌握设备的实时运行状态。

本方案中的图元配置功能操作方法简洁明了，降低学习成本；图元组件库由后台生成，绘制监控图，图元信息将自动绑定，节省操作；编辑参数自定义，后台自动生成***，灵活便捷；集监控的组态和编辑于一体，优化企业监控项目的流程，节省成本。

应理解，实施例仅用于说明本发明而不用于限制本发明的范围。此外应理解，在阅读了本发明讲授的内容之后，本领域技术人员可以对本发明作各种改动或修改，这些等价形式同样落于本申请所附权利要求书所限定的范围。

Claims (8)

1.一种基于web端的SCADA在线组态编辑方法，其特征在于，包括以下步骤：

S1：产品图元配置；添加产品属性和产品不同状态下的图元，并配置对应需要满足的表达式；

S2：通用图元配置；选择通用图元类型，设置通用图元的基本属性，配置对应的表达式；

S3：监控图绘制；在编辑区域添加图元，图元自动绑定对应的交互事件，完成监控图的绘制编辑；

S4：监控图信息配置；修改图元绑定信息，生成新的html文件；

S5：配置监控***，生成监控******，用户根据访问权限查看不同的设备运行状态。

2.根据权利要求1所述的一种基于web端的SCADA在线组态编辑方法，其特征在于，所述的步骤S1包括以下步骤：

S11：在产品列表中新建产品，添加对应的状态属性；

S12：对于新建产品上传定位图以及产品不同状态下的图元；

S13：对产品不同状态下的图元配置状态属性需要满足的表达式。

3.根据权利要求1所述的一种基于web端的SCADA在线组态编辑方法，其特征在于，所述的通用图元类型包括文本、多行文本框、输入框和自定义图形；通用图元的基本属性包括打包不限于字体颜色、字体类型和默认文本。

4.根据权利要求1或2或3所述的一种基于web端的SCADA在线组态编辑方法，其特征在于，所述的图元包括但不限于svg、png、gif或jpg格式。

5.根据权利要求1或2或3所述的一种基于web端的SCADA在线组态编辑方法，其特征在于，在完成产品图元配置和通用图元配置后，自动生成图元组件库，图元组件库中包括基础图元、产品图元、设备图元和通用图元；基础图元包括未配置属性的文本、多行文本框和输入框；产品图元和设备图元根据产品分组展示。

6.根据权利要求5所述的一种基于web端的SCADA在线组态编辑方法，其特征在于，所述的步骤S3包括以下步骤：

S31：从图元组件库中选择图元拖曳至编辑区域，以svg标签形式添加图元；

S32：图元绑定交互事件，展示图元绑定的信息，包括图元ID、所述产品、设备名称；

S33：提交编辑后的svg文件至后台保存，后台根据svg文件、产品图元表达式配置以及事件配置信息生成对应的html文件。

7.根据权利要求1或6所述的一种基于web端的SCADA在线组态编辑方法，其特征在于，在完成监控图绘制后修改图元绑定信息，修改完成后提交后台，后台重新生成svg文件和html文件，在监控界面监测到最新的设备运行状态。

8.根据权利要求1所述的一种基于web端的SCADA在线组态编辑方法，其特征在于，所述的步骤S5包括以下步骤：

S51：配置监控***参数；监控***参数包括监控图及其分组情况、监控***的权限分配和监控***的外观风格；

S52：生成监控***的访问连接，用户根据访问权限在浏览器访问对应的地址，查看不同监控***中各设备的运行状态。

Images