CN109284105A - 一种基于可编程脚本的svg组态显示方法及系统 - Google Patents

Abstract

本公开提供了一种基于可编程脚本的SVG组态显示方法，包括：组态脚本绘制，定义组态脚本格式，定义图标、线条、数据标签的位置、大小、颜色等属性；组态动态加载，将已经绘制完成的组态脚本上传到服务器，前端页面能够根据服务器中新增的脚本动态显示组态页面；实时监控，组态页面能够根据组态脚本中的数据标签，向服务器订阅相关实时数据，接收实时数据推送并动态显示；报警预警，根据组态脚本定义的数据标签接收服务端报警推送，提示报警消息并动态的改变组态图标颜色大小等；以及参数控制，根据组态脚本的设定，能够对组态中的特定参数提供设定控制功能。本公开还提供了一种基于可编程脚本的SVG组态显示系统。

Description

一种基于可编程脚本的SVG组态显示方法及系统

技术领域

本公开涉及一种基于可编程脚本的SVG组态显示方法及系统。

背景技术

作为工业生产使用的SCADA（Supervisory Control and Data Acquisition，数据采集与监视控制）系统的一部分，组态能够以图形化、数字化的表现方式向用户直观的展现工业设备的运行状态。在不同的生产监控现场，设备和监控数据都不相同，用户对于组态界面的表现需求也多种多样，如何快速的开发组态并能够即时发布应用是组态应用的重点和难点，是制约SCADA系统推广应用的重要因素。

当前对于组态界面的开发主要使用定制化的Winform组态绘制软件进行开发绘制，使用位图完成界面图形展现，开发完成后以工程文件的方式导出，将文件发布给每个用户。用户需自行完成组态的导入、重启等操作完成新组态的应用。

上述组态开发技术在当监控用户数量很少时能够基本满足需求，但随着工业生产领域的信息化程度不断提高，有越来越多的设备需要接入SCADA系统，越来越多的用户需要对组态进行查看监控，该技术方案已经无法满足应用需要：一是开发组态需要用到专业的开发软件，使用繁琐复杂，开发成本高；二是位图在大屏幕中放大显示时，会失真，用户体验差；三是组态发布过程繁琐，需要每个用户自行导入组态工程文件，并需要进行组态启停。

发明内容

为了解决上述技术问题中的至少之一，本公开提供了一种基于可编程脚本的SVG组态显示方法及系统。

根据本公开的一个方面，一种基于可编程脚本的SVG组态显示方法，包括：

组态脚本绘制，定义组态脚本格式，定义图标、线条、数据标签的位置、大小、颜色等属性；

组态动态加载，将已经绘制完成的组态脚本上传到服务器，前端页面能够根据服务器中新增的脚本动态显示组态页面；

实时监控，组态页面能够根据组态脚本中的数据标签，向服务器订阅相关实时数据，接收实时数据推送并动态显示；

报警预警，根据组态脚本定义的数据标签接收服务端报警推送，提示报警消息并动态的改变组态图标颜色大小等；以及

参数控制，根据组态脚本的设定，能够对组态中的特定参数提供设定控制功能。

根据本公开的至少一个实施方式，通过脚本化的语言，定义组态图中图标、线条的颜色、大小、位置，以及数据标签的对应名称、单位、初始值等信息，使脚本能够全面描述组态图的特征，并能通过解析获取这些特征。

根据本公开的至少一个实施方式，服务器提供组态上传的方法将编写好的组态脚本上传，并在前端页面动态加载所有上传的脚本，完成组态图的绘制与显示。

根据本公开的至少一个实施方式，根据组态脚本中的数据定义，组态图向服务器进行实时数据的订阅，当接收到实时数据推送时，动态改变相应数据标签中的数值。

根据本公开的至少一个实施方式，根据组态脚本的数据定义，组态图向服务器订阅相关数据的报警预警信息，当收到服务器报警信息推送时，能够显示报警预警提示，并能够改变组态图中对应数据标签、图标的颜色、大小等。

根据本公开的至少一个实施方式，组态图收到报警消息后，对报警消息进行处理操作，对应的改变服务器中该报警消息的状态。

根据本公开的至少一个实施方式，组态图提供修改对应数据报警范围配置的功能，对应改变服务器中对该数据的报警判断范围。

根据本公开的至少一个实施方式，组态图根据组态脚本的描述，对特定数据提供参数设定功能。当用户点击某一图标时，可以通过服务器向设备发送命令，将该参数修改成对应数值。

根据本公开的另一方面，一种基于可编程脚本的SVG组态显示系统

包括：

组态脚本绘制，定义组态脚本格式，定义图标、线条、数据标签的位置、大小、颜色等属性；

组态动态加载，将已经绘制完成的组态脚本上传到服务器，前端页面能够根据服务器中新增的脚本动态显示组态页面；

实时监控，组态页面能够根据组态脚本中的数据标签，向服务器订阅相关实时数据，接收实时数据推送并动态显示；

报警预警，根据组态脚本定义的数据标签接收服务端报警推送，提示报警消息并动态的改变组态图标颜色大小等；以及

参数控制，根据组态脚本的设定，能够对组态中的特定参数提供设定控制功能。

根据本公开的至少一个实施方式，用脚本化的语言定义组态图标、线条、数据标签等，并能上传至服务器。组态页面能够动态加载服务器中的脚本，完成组态图的绘制显示。组态页面能够根据脚本向服务器订阅实时数据、报警信息，动态的改变数据标签的数值，提示报警信息等，同时能够对组态中的特定参数提供控制功能。

附图说明

附图示出了本公开的示例性实施方式，并与其说明一起用于解释本公开的原理，其中包括了这些附图以提供对本公开的进一步理解，并且附图包括在本说明书中并构成本说明书的一部分。

图1示出了根据本公开的一个实施方式的基于可编程脚本的SVG组态显示方法的示意图。

图2示出了根据本公开一个实施方式的组态脚本绘制的示意图。

图3示出了根据本公开一个实施方式的组态动态加载的示意图。

图4示出了根据本公开一个实施方式的实时监控的示意图。

图5示出了根据本公开一个实施方式的报警预警的示意图。

图6示出了根据本公开一个实施方式的参数控制的示意图。

具体实施方式

下面结合附图和实施方式对本公开作进一步的详细说明。可以理解的是，此处所描述的具体实施方式仅用于解释相关内容，而非对本公开的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本公开相关的部分。

需要说明的是，在不冲突的情况下，本公开中的实施方式及实施方式中的特征可以相互组合。下面将参考附图并结合实施方式来详细说明本公开。

本公开提供了一种基于可编程脚本的SVG组态显示方法。下面将对本方法的步骤进行详细的描述，本领域的技术人员应当理解，并不是所有的步骤均是必须的，本领域的技术人员可以根据实际情况选择其中的某些步骤来实现本公开的基于可编程脚本的SVG组态显示方法。

图1示出了本公开的基于可编程脚本的SVG组态显示方法的示意图。

在步骤S1中，绘制组态脚本。在该步骤中，通过JavaScript脚本语言，建立组态图中的图标、线条、数据标签的数据对象，并对其颜色、大小和位置等属性进行赋值。

在步骤S2中，实现组态脚本的动态加载。在该步骤中，将步骤S1绘制的组态脚本上传至服务器，通过组态脚本管理服务，实现组态脚本的管理。在该步骤中，前端页面通过访问服务器，获取所有的组态脚本，生成组态菜单。当用户点击菜单中的某一组态时，前端能够利用组态脚本完成组态SVG画面的绘制并显示。

在步骤S3中，进行实时监控。在该步骤中，组态前端页面通过WebSocket接收服务端的实时数据推送。当收到实时数据时，前端页面能够通过组态脚本中的定义，找到对应的数据标签，并更新数据标签的数值。同时，前端页面会触发数值更新事件，如果组态脚本中定义了事件处理器，则可以完成额外的操作，例如改变图标高度、颜色等。

在步骤S4中，进行报警预警。在该步骤中，组态前端页面通过WebSocket接收服务端的报警预警推送。当收到报警消息时，前端页面能够根据组态脚本的定义，找到对应的设备图标以及报警参数标签，将该设备图标上显示报警状态。同时，前端页面将触发报警事件，如果组态脚本中对该设备定义了报警处理，则可以完成额外的操作，例如将报警设备颜色变红、闪烁、播放报警铃声等等。

在步骤S5中，完成参数控制。在该步骤中，前端页面接收组态脚本对设备图标定义的点击事件。当用户点击该设备图标时，前端页面能够弹出对应参数控制对话框，允许用户修改该设备参数的数值，前端页面需要提示用户输入用户名、密码进行权限验证。如果服务器验证通过，将会向该设备发送命令，完成参数修改。

图2示出了步骤S1的组态脚本绘制的示意图。

在步骤S11中，定义图标的名称、大小、位置、颜色。在步骤S12中，通过起点、方向、位移三个属性，完成对所有线条的定义，以及完成线条颜色、线宽、箭头等等的定义。在步骤S13中，定义数据标签的名称、标题、位置、单位等。在步骤S14中，对当前图标的点击事件、报警事件、数据更新事件定义处理，当事件触发时，能够完成相应操作。

图3示出了步骤S3的组态脚本动态加载的示意图。

将步骤S1绘制好的组态脚本上传至SCADA服务端，由脚本服务统一管理，对外提供脚本名称、查询接口。Web前端启动时会访问SCADA服务器，查询所有的组态脚本，并获取对应的名称。前端的组态路模块会动态生成组态路由，以及组态列表。当用户点击查看某一组态时，脚本解析模块能够加载脚本，完成组态SVG图的绘制并显示。Web前端通过WebSocket完成实时数据、报警消息的接收，并通过预警处理、参数控制模块，完成预警提示、参数控制功能。

图4示出了步骤S3的实时监控的示意图。

在步骤S31中，Web前端页面通过WebSocket与服务端建立通讯通道，接收服务端推送的实时数据。在步骤S32中，根据步骤S31接收的实时数据名称，查找对应的数据标签。在步骤S33中，将数据标签中的数值修改成最新的实时数据。在步骤S34中，前端页面触发数据更新事件，如果组态脚本中定义了该数据标签的数据更新事件处理，将会收到该事件。在步骤S35中，组态脚本中定义的数据更新处理将会对图标做出相应修改。

图5示出了步骤S4的报警预警的示意图。

在步骤S41中，Web前端页面通过WebSocket与服务端建立通讯通道，接收服务端推送的报警消息。在步骤S42中，根据步骤S42中接收的报警消息，找到对应的数据标签。在步骤S43中，根据组态脚本中定义的报警级别对应的颜色，更新数据标签的颜色。在步骤S44中，前端页面触发报警事件，如果组态脚本中定义了该数据标签的报警事件处理，将会收到该事件。在步骤S45中，前端页面显示报警消息提示，提醒用户有参数数值触发了报警。

图6示出了步骤S5的参数控制的示意图。

在步骤S51中，当用户点击组态图标时，如果组态脚本定义了该设备的参数控制事件，Web前端页面能够接收到该事件。在步骤S52中，前端页面根据步骤S51中接收的点击事件，向服务端查询该设备的控制状态、可控制选项等。在步骤S53中，前端页面根据步骤S53中查询到的控制选项信息生成控制界面，弹出对应参数控制对话框。在步骤S54中，当用户点击确定修改并输入用户名密码后，前端页面通过服务端向设备发送控制指令，改变设备状态。在步骤S55中，参数修改操作触发服务端设备的控制状态改变。

本公开还提供了一种基于可编程脚本的SVG组态显示系统，包括：组态脚本绘制模块、组态动态加载模块、实时监控模块、报警预警模块、参数控制模块。需要注意的是，本领域的技术人员可以根据实际情况选择其中的某些步骤来实现本公开的基于可编程脚本的SVG组态显示系统。

上述模块可以实现上述方法中的相应功能，来实现基于可编程脚本的SVG组态显示的功能。

下面结合具体实施例对本公开进一步地说明。

在第一实施例中，以新增输油联合站工艺流程监控组态为例。

根据输油联合站的工艺流程图，编写组态脚本。根据工艺流程图，分别在组态脚本中实例化3个储液罐，1个冷却塔，6个增压泵的对象，对其图标大小、颜色、位置等属性赋值，并定义储液罐液位高度、冷却塔温度、增压泵出入口压力等数据标签。根据流程图，通过起点、方向、位移等属性定义线条代表管线。在脚本中为储液罐添加数据更新事件处理，当液位高度数值改变时，更新图标上的液位高度指示。在脚本中为冷却塔添加温度报警事件处理，当温度发生报警时，将冷却塔颜色变为红色。在脚本中为增压泵添加点击事件，使用户能够控制泵的启停。将编写完成的组态脚本上传至SCADA服务器，并在组态脚本管理服务中将其名称修改为“输油联合站工艺流程图”。用户在浏览器中打开或刷新SCADA监控Web页面，将会在组态菜单中看到该组态图的名称。用户点击该组态菜单，即可看到该联合站的监控组态，数据标签中的数据实时变化，储液罐中的液位高度随数值变化而变化。当冷却塔的温度发生报警时，用户将会看到冷却塔颜色变为红色。当用户点击增压泵时，会弹出对话框，在其中可以控制泵的启停。

在第二实施例中，以修改输油联合站工艺流程图，增加一个储液罐为例进行简略说明。

通过SCADA服务端的组态脚本管理服务，下载对应组态脚本。在组态脚本中新增一个储液罐实例，并对其图标大小、颜色、位置等属性进行赋值，并添加对应的线条。完成组态修改后将该脚本重新上传至SCADA组态服务器，覆盖原组态脚本。用户只需刷新Web监控界面即可查看最新的组态图。

在上述实施例中，通过编写上传组态脚本，并使Web前端能够动态加载组态脚本、绘制SVG组态图实现了组态图的动态加载显示。通过基于SVG组态图的动态加载显示，能够大大减轻组态图的开发、发布工作量，使用户在无感知的情况下新增、更新组态，实现实时数据监控、报警预警、参数控制等功能，并能够为大屏幕显示组态提供无损缩放，极大得提升了用户体验。

本领域的技术人员应当理解，上述实施方式仅仅是为了清楚地说明本公开，而并非是对本公开的范围进行限定。对于所属领域的技术人员而言，在上述公开的基础上还可以做出其它变化或变型，并且这些变化或变型仍处于本公开的范围内。

Claims (10)

1.一种基于可编程脚本的SVG组态显示方法，其特征在于，包括：

组态脚本绘制，定义组态脚本格式，定义图标、线条、数据标签的位置、大小、颜色等属性；

组态动态加载，将已经绘制完成的组态脚本上传到服务器，前端页面能够根据服务器中新增的脚本动态显示组态页面；

实时监控，组态页面能够根据组态脚本中的数据标签，向服务器订阅相关实时数据，接收实时数据推送并动态显示；

报警预警，根据组态脚本定义的数据标签接收服务端报警推送，提示报警消息并动态的改变组态图标颜色大小等；以及

参数控制，根据组态脚本的设定，能够对组态中的特定参数提供设定控制功能。

2.如权利要求1所述的方法，其特征在于，通过脚本化的语言，定义组态图中图标、线条的颜色、大小、位置，以及数据标签的对应名称、单位、初始值等信息，使脚本能够全面描述组态图的特征，并能通过解析获取这些特征。

3.如权利要求1或2所述的方法，其特征在于，服务器提供组态上传的方法将编写好的组态脚本上传，并在前端页面动态加载所有上传的脚本，完成组态图的绘制与显示。

4.如权利要求1至3任一项所述的方法，其特征在于，根据组态脚本中的数据定义，组态图向服务器进行实时数据的订阅，当接收到实时数据推送时，动态改变相应数据标签中的数值。

5.如权利要求1至4任一项所述的方法，其特征在于，根据组态脚本的数据定义，组态图向服务器订阅相关数据的报警预警信息，当收到服务器报警信息推送时，能够显示报警预警提示，并能够改变组态图中对应数据标签、图标的颜色、大小等。

6.如权利要求5所述的方法，其特征在于，组态图收到报警消息后，对报警消息进行处理操作，对应的改变服务器中该报警消息的状态。

7.如权利要求6所述的方法，其特征在于，组态图提供修改对应数据报警范围配置的功能，对应改变服务器中对该数据的报警判断范围。

8.如权利要求1至7任一项所述的方法，其特征在于，组态图根据组态脚本的描述，对特定数据提供参数设定功能。当用户点击某一图标时，可以通过服务器向设备发送命令，将该参数修改成对应数值。

9.一种基于可编程脚本的SVG组态显示系统，其特征在于，包括：

组态脚本绘制，定义组态脚本格式，定义图标、线条、数据标签的位置、大小、颜色等属性；

组态动态加载，将已经绘制完成的组态脚本上传到服务器，前端页面能够根据服务器中新增的脚本动态显示组态页面；

实时监控，组态页面能够根据组态脚本中的数据标签，向服务器订阅相关实时数据，接收实时数据推送并动态显示；

报警预警，根据组态脚本定义的数据标签接收服务端报警推送，提示报警消息并动态的改变组态图标颜色大小等；以及

参数控制，根据组态脚本的设定，能够对组态中的特定参数提供设定控制功能。

10.如权利要求9所述的系统，其特征在于，用脚本化的语言定义组态图标、线条、数据标签等，并能上传至服务器。组态页面能够动态加载服务器中的脚本，完成组态图的绘制显示。组态页面能够根据脚本向服务器订阅实时数据、报警信息，动态的改变数据标签的数值，提示报警信息等，同时能够对组态中的特定参数提供控制功能。