CN109460232B - 一种组态页面的制作和监控方法 - Google Patents

Abstract

本发明公开了一种组态页面的制作和监控方法，使用HTML5技术标准,采用B/S架构，组态应用编辑程序和组态应用监控程序部署在云端服务器；用户通过组态应用编辑程序制作组态工程文件，组态工程文件存储在云端服务器，用户可下载到本地电脑中；用户通过组态应用编辑程序自动或手动上传组态工程文件到组态应用监控程序中，通过浏览器查看实时组态监控数据。本发明采用云端服务器的部署方式，无需用户安装独立软件或插件，只需要一台能访问互联网的电脑，打开浏览器进入组态应用页面即可工作。

Description

一种组态页面的制作和监控方法

[技术领域]

本发明涉及监控系统，尤其涉及一种组态页面的制作和监控方法。

[背景技术]

“组态(Configure)”的含义是“配置”、“设定”、“设置”等意思，是指用户通过类似“搭积木”的简单方式来完成自己所需要的软件功能，而不需要编写计算机程序，也就是所谓的“组态”。它有时候也称为“二次开发”，组态软件就称为“二次开发平台”。

“监控(Supervisory Control)”，即“监视和控制”，是指通过计算机信号对自动化设备或过程进行监视、控制和管理。

简单地说，组态监控软件能够实现对自动化过程和装备的监视和控制。它能从自动化过程和装备中采集各种信息，并将信息以图形化等更易于理解的方式进行显示，将重要的信息以各种手段传送到相关人员，对信息执行必要分析处理和存储，发出控制指令等等。

在组态概念出现之前，要实现某一任务，都是通过编写定制程序(如使用BASIC,C等)来实现的。编写特定程序不但工作量大、周期长，而且容易犯错误，不能保证工期。组态软件的出现，解决了这个问题。对于过去需要几个月的工作，通过组态几天就可以完成。

组态监控应用由两部分组成。

组态页面制作程序：编辑，制作组态页面程序，多以C/S架构方式开发。

组态页面监控程序：呈现制作完成的组态页面，多以B/S架构方式呈现。

申请号为CN201210131899.1的发明公开了一种运行监控系统中组态监控页面的生成方法，用于远程监控的自动化控制工程。为了解决采用现有生成方法获得的运行监控系统中组态监控页面不能适应工业控制系统的硬件变化的问题。具体过程为：建立监控页面，定义页面参数；判断建立的监控页面是否为策略控制页面，如果是执行步骤3，如果否返回步骤2；将策略控制页面中加入控制算法模块；进行数据配置；判断是否需要新控件，如果是执行步骤6，如果否执行步骤7；对新控件的属性进行设置；判断是否完成组态监控页面，如果是保存完成的组态监控页面，如果否返回步骤1。

申请号为CN201210087933.X的发明公开了一种组态监控对象的生成方法，为了解决目前厂家提供给用户绘制监控软件系统中的监控对象的工具较为简单，不能生动表现出被控对象的效果，且效率低下的问题。它包括：用于调用数据库中图元、绘制图元、设置图元属性、设置动态图元的参数、设置动态图元的输出参数与外部监控对象产生相应的事件关联和设置动态图元的输出参数与外部监控对象产生相应的事件关联的步骤，还包括根据动态图元的输入参数调整动态图元中相应的属性，并重新绘制动态图元的步骤，和用于判定鼠标点击位置是否位于动态图元所在区域的步骤，当判断为是时，执行修改动态图元的输出参数的步骤。它用于生成监控系统中的组态监控对象。

现有的组态应用实现方案包含：

基于IE浏览器支持的ActiveX控件,开发组态监控应用，组态编辑程序多为C/S架构，需要安装客户端程序，组态呈现页面只能在微软IE浏览器下正常运行。

基于SVG(可缩放矢量图形)开发组态应用，SVG是由万维网联盟制定，是一个开放标准。可在多种浏览器下运行，但由于SVG代码本质是一种XML格式数据，需要大量的代码标记数据信息，使得网页文件体积庞大，页面呈现速度缓慢，且不是所有浏览器都能完美支持。

基于HTML4(标准通用标记语言)常规网页标记开发组态工具，该类组态工具可在多种浏览器下运行，组态控件动态效果通过脚本文件和样式文件编写实现，这类组态工具虽然解决了跨浏览器兼容问题和页面加载速度问题，但存在页面代码编写复杂，多个样式文件容易冲突，集成难度较大等问题。

现有技术的组态页面的制作和监控方法存在以下缺点：

1)组态页面制作程序为C/S架构，需要安装客户端软件，一旦用户更换电脑设备，需要重新安装软件，无法做到云端使用，给用户带来了额外的工作。

2)组态页面监控程序只能在单一浏览器(微软IE浏览器)中运行，无法在其他浏览器中运行。

3)现有组态应用运行性能差，需要有强大的客户端硬件支持才能流畅运行页面，而中低端硬件配置的客户端运行组态页面有卡顿现象发生。

4)现有组态应用通信方式存在使用轮询方式监听数据，而轮询方式无法做到实时通信，通常会有延时情况发生，导致一些数据无法保证时效性。

5)现有组态应用无法在移动设备的浏览器上运行，而如今移动设备非常普及，不能在平板电脑和智能手机上使用组态应用，无法满足用户需求。

[发明内容]

本发明要解决的技术问题是提供一种不需要用户安装客户端软件，只需打开浏览器进入组态应用页面即可工作的组态页面的制作和监控方法。

为了解决上述技术问题，本发明采用的技术方案是，一种组态页面的制作和监控方法，使用HTML5技术标准,采用B/S架构方式，组态应用编辑程序和组态应用监控程序部署在云端服务器；用户通过组态应用编辑程序制作组态工程文件，组态工程文件存储在云端服务器，用户可下载到本地电脑中；用户通过组态应用编辑程序自动或手动上传组态工程文件到组态应用监控程序中，通过浏览器查看实时组态监控数据。

以上所述的组态页面的制作和监控方法，用户通过组态应用编辑程序制作的组态页面，以组态工程文件的方式存储在云端服务器，用户下载组态工程总文件，解压工程文件并放置在项目服务器中，查看组态监控页面；用户可以查看工程文件中包含的任何子文件，通过组态编辑程序或直接对文件进行手动编辑操作；手动编辑后的工程文件，如需要继续使用组态应用编辑程序处理，把工程文件压缩成后，上传到组态应用编辑程序中；组态工程数据全部存储在云端服务器中，用户通过任何浏览器访问并登录组态应用编辑程序对其进行编辑、删除或下载。

以上所述的组态页面的制作和监控方法，通信组件基于WebSocket API进行封装，实现用户端和云端服务器间的双工通信；通信组件的作用包括：在组态应用编辑程序中获取监控设备点位信息数据，把需要监控的设备点信息绑定到组态页面中的控件内，实现数据监控；在组态应用监控程序中实时显示监控设备上传的点位数据；在组态应用监控程序中，控制设备下发参数信息；通过通信组件，即时下发通信消息到项目服务器，实现设备参数控制功能。

以上所述的组态页面的制作和监控方法，组态应用编辑程序用于：创建组态工程文件，创建监控系统目录和目录下的监控页面；在监控页面中配置基本信息；在监控页面中拖入组态控件，配置组态控件的属性；绑定监控设备的点信息到组态控件中；预览配置好的组态页面效果。

以上所述的组态页面的制作和监控方法，组态应用监控程序用于：通过监控系统目录结构，显示组态页面信息；通过点击组态只读控件，查看监控设备点的实时数据信息；通过点击组态读写控件，执行设备参数的下发操作。

本发明采用云端服务器的部署方式，无需用户安装独立软件或插件，只需要一台能访问互联网的电脑，打开浏览器进入组态应用页面即可工作。

[附图说明]

下面结合附图和具体实施方式对本发明作进一步详细的说明。

图1是本发明实施例的网络架构图。

图2是本发明实施例的组态应用组件模块架构图。

图3是本发明实施例的工程文件数据结构图。

图4是本发明实施例的通信组件库架构图。

图5是本发明实施例的组态编辑程序主页面图。

[具体实施方式]

本发明实施例的组态页面的制作和监控方法如图1至图5所示，包括以下内容：

1.整体应用架构

1)本发明组态监控应用采用B/S架构方式，组态应用编辑程序和组态应用监控程序都部署在云端服务器。

2)用户通过组态应用编辑程序制作组态工程文件，组态工程文件存储在云端服务器，用户可下载到本地电脑中。

3)用户通过编辑程序自动或手动上传组态工程文件到组态应用监控程序中，通过浏览器查看实时组态监控数据。

2.软件架构

本发明采用低耦合组件库开发方式，各功能组件库可独立扩展和升级，不会影响整体功能使用，提高了组态监控应用的稳定性。

3.数据存储

1)用户通过组态应用编辑程序制作的组态页面，最终以组态工程文件的方式存储在云端服务器，用户可以下载组态工程总文件(ZIP格式，可解压数据)，解压工程文件并放置在项目服务器中，即可查看组态监控页面。

2)用户可以查看工程文件中包含的任何子文件，可以不通过组态编辑程序直接对文件进行手动编辑操作，手动编辑后的工程文件，如果需要继续使用组态应用编辑程序处理，只需把工程文件压缩成ZIP格式，并上传到组态应用编辑程序中即可。

3)组态工程数据全部存储在云端服务器中，用户通过任何浏览器访问并登录组态应用编辑程序即可对其进行编辑、删除、下载等操作。

4.数据通信

1)本发明中的通信组件基于WebSocket API进行封装，实现用户端和云端服务器间的双工通信，通信组件中含有断开重连机制、函数处理调用模块、事件监听处理模块等，为组态监控应用提供了稳定，即时高效的通信服务。

2)通信组件在本发明中的具体用途如下：

A.在组态应用编辑程序中获取监控设备点位信息数据，包含设备系统目录树、设备信息、设备监控点信息等。可把需要监控的设备点信息绑定到组态页面中的控件内，实现数据监控。

B.在组态应用监控程序中实时显示监控设备上传的点位数据。

C.在组态应用监控程序中，控制设备下发参数信息。通过通信组件，可即时下发通信消息到项目服务器，实现设备参数控制功能。

5.组态监控应用主要操作流程

1)组态应用编辑程序：

A.通过编辑程序创建组态工程文件，并配置文件名称、通信地址等信息。

B.通过编辑程序创建监控系统目录和目录下的监控页面。

C.在监控页面中配置基本信息(背景图片，页面尺寸等)。

D.在监控页面中拖入组态控件，配置组态控件属性，设置只读或读写控件模式。

E.绑定监控设备点信息到组态控件中。

F.预览配置好的组态页面效果。

2)组态应用监控程序：

A.通过监控系统目录结构，显示组态页面信息。

B.通过鼠标点击组态只读控件，查看监控设备点的实时数据信息

C.通过鼠标点击组态读写控件，执行设备参数下发操作。

6.实际使用场景举例：

1)云端服务器操作和多浏览器切换使用场景：

A.实施人员甲在公司期间，使用公司电脑中的微软IE浏览器打开组态应用工具，并制作组态页面。

B.实施人员甲回到家后,使用个人电脑中的谷歌浏览器打开组态应用工具继续完成组态页面制作。

2)使用组态移动端监控使用场景：

A.监控人员甲在数据中心室，通过台式机上的浏览器查看组态应用页面，实时监控各项采集信息数据，监控人员甲通过组态应用，控制并下发指令设置远程监控设备参数。

B.监控人员乙在办公室，通过平板电脑上的浏览器查看组态应用页面，实时监控各项采集信息数据，监控人员乙与甲看到的监控数据保持一致。

本发明实施例的组态页面的制作和监控方法具有以下优点：

1.使用HTML5技术标准，构建了B/S架构的云组态监控应用(含编辑程序和监控程序)，可通过任意一台能访问互联网的电脑，操作组态监控应用。

2.本发明组态监控应用采用低耦合组件库开发方式，功能扩展容易，无需大量更改主体代码，可以通过不同应用组件构建组态监控应用程序，实现了高扩展性。

3.本发明采用云端服务器部署方式，无需用户安装独立软件或插件，只需打开浏览器进入组态应用页面即可工作；组态监控应用部署在云端服务里，所有工程文件数据也存储在云端服务器中，是真正意义上的云组态监控应用。

4.本发明采用JavaScript脚本语言对Canvas画布进行开发，封装各种组件脚本库，可以高效执行页面图形渲染，页面加载速度比现有技术快。

5.本发明采用Html5标准技术，既可以在多种浏览器中运行，也可在如平板或手机等移动设备上运行。

Claims (1)

1.一种组态页面的制作和监控方法，其特征在于包括以下内容：

使用HTML5技术标准，构建B/S架构的云组态监控应用，云组态监控应用包含组态应用编辑程序和组态应用监控程序，组态应用编辑程序和组态应用监控程序部署在云端服务器；

通信组件基于WebSocket API进行封装，实现用户端和云端服务器间的双工通信，通信组件中含有断开重连机制、函数处理调用模块和事件监听处理模块，为组态监控应用提供了稳定、即时高效的通信服务；通信组件的作用包括：在组态应用编辑程序中获取监控设备点位信息数据，包含设备系统目录树、设备信息和设备监控点信息；在组态应用监控程序中实时显示监控设备上传的监控设备点位信息数据；在组态应用监控程序中，控制设备下发参数信息；通过通信组件，即时下发通信消息到项目服务器，实现设备参数控制功能；

S1：组态应用编辑程序的操作步骤包括：

A、用户通过组态应用编辑程序制作组态页面，采用JavaScript脚本语言对Canvas画布进行开发，以组态工程文件的方式存储，并配置文件名称、通信地址信息；

B、通过编辑程序创建监控系统目录和目录下的监控页面；

C、在监控页面中配置基本信息；

D、在监控页面中拖入组态控件，配置组态控件属性，设置只读或读写控件模式；

E、绑定监控设备点位信息数据到组态控件中；

F、预览配置好的组态页面效果；

S2：组态应用监控程序的操作步骤包括：

a、通过监控系统目录结构，显示组态页面信息；

b、通过鼠标点击组态只读控件，查看监控设备点的实时数据信息；

c、通过鼠标点击组态读写控件，执行设备参数下发操作；

用户下载ZIP格式组态工程文件，解压工程文件并放置在项目服务器中，查看组态监控页面；用户查看工程文件中包含的任何子文件，不通过组态应用编辑程序直接对文件进行手动编辑操作，手动编辑后的工程文件，如果需要继续使用组态应用编辑程序处理，只需把工程文件压缩成ZIP格式，并上传到组态应用编辑程序中；组态工程数据全部存储在云端服务器中，用户通过任何浏览器访问并登录组态应用编辑程序对其进行编辑、删除或下载。

Images