一种监控页面生成方法和装置与流程

本发明涉及通信技术，尤指一种监控页面生成方法和装置。

背景技术：

现有的工业监控或测控系统中，web工业信息实时监控页面呈现一般采用两种模式，一种是客户端/服务器(client/server，简称c/s)模式，一种是浏览器/服务器(browser/server，简称b/s)模式。

前一种模式需要将客户端软件安装在特定的符合条件的设备上，并且只能在该设备查看，不能满足用户想要随时随地即时访问的需求。后一种模式一般采用类似activex或svg技术实现，该模式的现有实现技术存在如下缺陷：

1.activex控件嵌入存在代码重复编写，浏览器不兼容，系统不安全等缺陷：activex插件以前也叫ole控件或ocx控件，它是一个软件组件或对象，可以将其插入到web网页或其他应用程序中。这个方式的优点是在语言方面，只要采用原有c++即可编辑完成，不用采用其他脚本语言来实现交互，但由于浏览器的兼容问题，不同浏览器对控件的支持不一，实用性不容乐观，而且在安全性方面诟病诸多，某种程度上成为各种非法代码的温床，随着工控安全意识的不断深入，越来越不能为用户所接受。

2.svg绘图技术的优势在于支持鼠标事件操作，适用于矢量图，低数据量低绘制频率的场景，如图形，图表等。但是工业信息实时监控页面一般都比较复杂，单页面中一般包括较多的图元和线条，而且一个较复杂的系统一般包括上百张主图或窗口图，页面跳转频繁，用svg绘制较复杂的工业信息实时监控页面时效率不高。

目前，现有技术中通过canvas绘制web工业信息实时监控页面，以克服上述问题。然而，现有的通过canvas绘制web工业信息实时监控页面的技术中，存在下述缺陷：在canvas中图元发生变化时，整个canvas画布上的图元都需重绘，例如，如果某一图元位置发生变化，那么整个场景也需要重新绘制。

技术实现要素：

为了解决上述技术问题，本发明提供了一种监控页面生成方法和装置，可以为每个图元建立一个单独的canvas进行绘制，使得对图元进行修改时，只需要对该图元进行重绘，无需所有图元都重绘。

为了达到本发明目的，第一方面，本发明提供了一种监控页面生成方法，包括：

获取监控画面中待打开的图的组态源文件；其中，所述组态源文件对应所述待打开的图的图元信息；所述图包括主图或窗口图；

解析所述组态源文件，获取绘制所述待打开的图的所有图元；

为所述待打开的图的每个图元分别建立一个单独的canvas进行绘制，生成所述待打开的图的监控页面。

第二方面，本发明提供了一种监控页面生成装置，包括：

获取模块，用于获取监控画面中待打开的图的组态源文件；其中，所述组态源文件对应所述待打开的图的图元信息；所述图包括主图或窗口图；

解析模块，用于解析所述组态源文件，获取绘制所述待打开的图的所有图元；

绘制模块，用于为所述待打开的图的每个图元分别建立一个单独的canvas进行绘制，生成所述待打开的图的监控页面。

第三方面，本发明提供了一种监控页面生成装置，包括存储器和处理器，存储器用于存储执行指令；处理器调用所述执行指令，用于执行如第一方面实施例所述的监控页面生成方法。

第四方面，本发明提供了一种计算机可读存储介质，其上存储有计算机指令，所述指令被处理器执行时实现第一方面实施例所述的方法的步骤。

本发明至少一个实施例提供的监控页面生成方法和装置，具有以下有益效果：为每个图元新建一个单独的canvas进行绘制的方式，使得对图元进行修改时，只需要对该图元进行重绘。解决了canvas在绘制图元时，即使只有单个或几个图元修改，所有图元都需要重绘的问题。

本发明实施例的一些实施方式中，还可以达到以下效果：1.对监控画面组态源文件的格式和绘制方式没有要求，可以支持xml、json和txt等多种格式。在绘制组态源文件时，组态源文件并不需要用canvas绘制，这样相对于必须用canvas绘制并用canvas绘制的系统而言，提高了向下兼容低版本的系统的能力。2.可以直接解析组态源文件，无需像svg技术需对组态源文件进行转化才能绘制，可以省去将组态源文件转化为其他格式文件的过程，进一步提高了监控页面绘制的效率。3.各种监控画面是动态的、可操作的，其动态的、可操作的性能不仅仅表现为对每个图元实时数据的读取和修改，还表现为对每个图元所代表的设备的监控和对设备发送指令等，例如在供电领域，给水泵设备发送打开、关闭、挂起和解挂等指令。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

附图说明

附图用来提供对本发明技术方案的进一步理解，并且构成说明书的一部分，与本申请的实施例一起用于解释本发明的技术方案，并不构成对本发明技术方案的限制。

图1为本发明实施例一提供的监控页面生成方法的流程图；

图2为本发明实施例二提供的监控页面生成方法的流程图；

图3为本发明实施例一提供的监控页面生成装置的结构示意图；

图4为本发明实施例二提供的监控页面生成装置的结构示意图；

图5为本发明实施例提供的监控页面生成系统的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下文中将结合附图对本发明的实施例进行详细说明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互任意组合。

在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

现有的通过canvas绘制web工业信息实时监控页面的技术中，存在以下缺陷：

1.不能解决在canvas中图元发生变化时，整个canvas画布上的图元都需重绘的问题。一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

2.现有的canvas系统，在组态时，其组态页面也需要用canvas绘制，这样，对于之前用其他方式绘制的组态源文件将不能被解析和监控，向下兼容的能力低。但是现有的工控领域，大部分的组态源文件都不是canvas绘制的，而且可以绘制的方式和最终保存的文件格式都不尽相同。

为了避免上述缺陷，1.本申请通过对多种格式的组态源文件的解析，并在canvas绘制每个图元时，为每个图元建立一个独立的canvas，这样当图元发生变化时，只需要更新该图元对应的canvas即可。2.对画面源文件的格式和绘制方式没有要求，可以支持xml、json和txt等多种格式。在绘制源文件的方式方面，组态源文件并不需要用canvas绘制，这样相对于必须用canvas绘制并用canvas绘制的系统而言，提高了向下兼容低版本的系统的能力。

图1为本发明实施例一提供的监控页面生成方法的流程图，如图1所示，本发明实施例提供的监控页面生成方法，可以应用于工业监控系统，如分散控制系统(distributedcontrolsystem，简称dcs)中，该方法包括：

s101：获取监控画面中待打开的图的组态源文件。

其中，组态源文件对应待打开的图的图元信息；图包括主图或窗口图。

可选的，组态源文件可以为xml、json或txt文本格式。

需要说明的是，本发明实施例主要应用于电厂的dcs系统，以该系统的组态源文件是xml文件为例，但并不仅限于此，其余工业监控系统，以及系统的组态源文件是json或txt的实现原理与之类似，本实施例在此不进行赘述。监控画面是dcs系统中人机交互功能实现的重要组成部分，通过监控画面可以直观地查看各监控节点的实时数据，了解各设备的运行状态。

本实施例中，可以在dcs系统上安装httpserver，以获取dcs系统的组态源文件。当浏览器想要打开dcs系统的主图或窗口图时，可以发送http请求获取该系统主图或窗口图的xml源文件。

其中，待打开的图可以包括一个或多个主图或窗口图，本实施例主要以待打开的图包括一个主图或窗口图为例进行阐述，当待打开的图包括多个主图或窗口图时，每一个待打开的主图或窗口图都可以按照本发明实施例方法的步骤来生成监控页面。

s102：解析组态源文件，获取用于绘制待打开的图的所有图元。

本实施例中，解析dcs监控画面的原始xml文件并转化为js对象技术，用js对象生成图元对象。在dcs系统中，每张主图或窗口图都对应一个独立的xml文件，本实施例中可以将每张主图或窗口图的文件名作为主键，将xml中包括的所有图元及图元相关事件的算法逻辑都解析出来，以方便后续对每个图元进行绘制和在图元被点击时对其添加事件。待打开的图的xml文件中包括的所有的属性信息都将被解析并保存，比如图元在画面中的位置，颜色，大小，文本信息，条件表达式等。

s103：为待打开的图的每个图元分别建立一个单独的canvas进行绘制，生成待打开的图的监控页面。

本实施例中，为每个图元新建一个canvas，并在该canvas上绘制该图元。将上述步骤中解析出来的图元染到指定位置上，对于每一个图元，可以通过用户的鼠标点击事件，生成待打开的图的监控页面，完成人机交互。

具体的，在用户的鼠标点击监控画面上的任意图元时，可以根据鼠标在该图元canvas画布上点击的位置，锁定该图元的类型，并分析该图元是否有被点击的事件；在该图元有被点击的事件时，可以根据鼠标在canvas画布上点击的位置，触发该位置的图元的鼠标点击事件，完成人机交互。

需要说明的是，生成的监控页面可以为监控万维网(worldwideweb，简称web)页面，其中，web页面(也可称为网页)是万维网上的一个按照超文本标记语言(hypertextmarkuplanguage，简称html)格式组织起来的文件，在通过万维网进行信息查询时，以信息页面的形式出现，其可以包括图形、文字、声音和视像等信息。

本发明至少一个实施例提供的监控页面生成方法，具有以下有益效果：为每个图元新建一个单独的canvas进行绘制的方式，使得每个图元进行修改时，只需要对该图元进行重绘。解决了canvas在绘制图元时，即使只有单个或几个图元修改，所有图元都需要重绘的问题。

本发明实施例还具有以下有益效果：1.对监控画面组态源文件的格式和绘制方式没有要求，可以支持xml、json和txt等多种格式。在绘制组态源文件时，组态源文件并不需要用canvas绘制，这样相对于必须用canvas绘制并用canvas绘制的系统而言，提高了向下兼容低版本的系统的能力。2.通过canvas绘制web工业信息实时监控页面，不仅解决了activex控件嵌入存在代码重复编写，浏览器不兼容等问题，还解决了svg绘制较复杂的工业信息实时监控页面时效率不高的问题。在绘制多图元、多线条和多画面的web工业信息实时监控页面时，canvas的绘图性能明显优于svg，通过canvas绘图，绘制效率不低于c/s模式中监控页面的绘制效率。3.通过canvas绘图技术完全仿真原c/s模式的监控画面，可以1:1还原dcs系统画面，以画面的方式取代表格的方式展示数据。

进一步地，在上述实施例中，解析组态源文件，获取用于绘制待打开的图的所有图元，可以包括：

步骤a：将组态源文件解析为js对象树，js对象树的存储节点用于存储待打开的图的所有图元的名称。

本实施例中，可以遍历解析xml文件，将xml文档对象解析成js对象树，该对象树包括tagname属性来存储节点名，subs属性来存储该节点包含的所有的属性名和属性值。

步骤b：根据js对象树生成图元对象树，图元对象树的存储节点用于存储js对象树中绘制待打开的图的图元的名称。

本实施例中，可以通过面向对象的设计思路，根据js对象树生成对应的图元对象树。在上述步骤中解析出来了所有的图元及图元包含的属性后，通过遍历js对象树的图元名，新建可以绘制的图元对象，生成用于存储绘制的图元的图元名和对应属性的图元对象树。

其中，js对象树和图元对象树中一个存储节点存储一个图元的名称，每一个存储节点中包括一个图元的属性名和属性值。

步骤c：遍历图元对象树，获取用于绘制待打开的图的所有图元。

本实施例中，遍历图元对象树的各个节点，即图元对象树中的图元名，以获取绘制待打开的图的所有图元。

本发明实施例提供的监控页面生成方法，可以直接解析组态源文件，无需像svg技术需对组态源文件进行转化才能绘制，可以省去将组态源文件转化为其他格式文件的过程，进一步提高了监控页面绘制的效率。

进一步地，在上述实施例中，为待打开的图的每个图元分别建立一个单独的canvas进行绘制之前，本发明实施例提供的监控页面生成方法，还可以包括：

根据待打开的图中每个图元具有的属性，分别为每个图元添加调用接口；其中，调用接口包括绘制接口。

本实施例中，还可以创建图元组件类库，为每类图元组件构建对应的图元类，并为每个图元添加绘制接口、实时值的更新接口、画面渲染接口、画面操作接口以及指令发送接口等调用接口。

为待打开的图的每个图元分别建立一个单独的canvas进行绘制包括：调用待打开的图的每个图元的绘制接口，为每个图元分别建立一个单独的canvas进行绘制。

本实施例中，调用每个图元的绘制接口，为每个图元分别建立一个单独的canvas进行绘制。

进一步地，在上述实施例中，在待打开的图中存在包含变量的图元时，调用接口还可以包括更新接口。

本实施例中，可以根据每个图元具有的属性，为每个图元对象添加属性和方法(接口)。例如分析图元是否有command_属性，该属性表示点击时发送命令，如果有该属性，则会继续获取到该属性所包含的命令类型和命令内容属性。这样在该图元被点击时，就可以触发该命令。接口方面，如果是需要绘制的图元，则对外提供绘制该图元的接口，如果该图元包含变量，则对外提供更新变量实时值的更新接口。

本发明实施例提供的监控页面生成方法，还可以包括：遍历图元对象树时，调用包含变量的图元的更新接口，更新相应图元包含的变量的实时值。

本实施例中，可以通过自动调用实时值的更新接口，以完成画面图元的实时更新。

可选的，本实施例可以通过鼠标、键盘事件调用指令发送接口完成打开窗口、切换画面、指令发送等功能，实现人机交互。需要说明的是，本实施例各种监控画面是动态的、可操作的，其动态的、可操作的性能不仅仅表现为对每个图元实时数据的读取和修改，还表现为对每个图元所代表的设备的监控和对设备发送指令等，例如在供电领域，给水泵设备发送打开、关闭、挂起和解挂等指令。

图2为本发明实施例二提供的监控页面生成方法的流程图，如图2所示，本发明实施例提供的监控页面生成方法，包括：

s201：获取监控画面中待打开的图的组态源文件。

s202：将组态源文件解析为js对象树。

s203：根据js对象树生成图元对象树。

s204：为每个图元添加绘制接口和更新接口等调用接口。

s205：遍历图元对象树，为待打开的图的每个图元分别建立一个单独的canvas进行绘制，以及更新相应图元包含的变量的实时值。

s206：通过用户的鼠标点击事件，完成人机交互。

图3为本发明实施例一提供的监控页面生成装置的结构示意图，如图3所示，本发明实施例提供的监控页面生成装置，包括：获取模块31、解析模块32和绘制模块33。

获取模块31，用于获取监控画面中待打开的图的组态源文件；其中，所述组态源文件对应所述待打开的图的图元信息；所述图包括主图或窗口图；

解析模块32，用于解析所述组态源文件，获取用于绘制所述待打开的图的所有图元；

绘制模块33，用于为所述待打开的图的每个图元分别建立一个单独的canvas进行绘制，生成所述待打开的图的监控页面。

本发明实施例提供的监控页面生成装置用于执行图1所示方法实施例的技术方案，其实现原理和实现效果类似，此处不再赘述。

进一步地，在上述实施例中，解析模块32解析所述组态源文件，获取用于绘制所述待打开的图的所有图元，可以包括：

将所述组态源文件解析为js对象树，所述js对象树的存储节点用于存储所述待打开的图的所有图元的名称；

根据所述js对象树生成图元对象树，所述图元对象树的存储节点用于存储js对象树中绘制所述待打开的图的图元的名称；

其中，所述js对象树和所述图元对象树中一个存储节点存储一个图元的名称，每一个存储节点中包括一个图元的属性名和属性值；

遍历所述图元对象树，获取用于绘制待打开的图的所有图元。

进一步地，在上述实施例中，本发明实施例提供的监控页面生成装置，还可以包括：添加模块34，用于根据所述待打开的图中每个图元具有的属性，分别为每个图元添加调用接口；其中，所述调用接口包括绘制接口。

绘制模块33为所述待打开的图的每个图元分别建立一个单独的canvas进行绘制，包括：调用所述待打开的图的每个图元的绘制接口，为所述每个图元分别建立一个单独的canvas进行绘制。

进一步地，在上述实施例中，在所述待打开的图中存在包含变量的图元时，所述调用接口还可以包括更新接口；绘制模块33还用于：在获取模块31遍历所述图元对象树时，调用包含变量的图元的更新接口，更新相应图元包含的变量的实时值。

进一步地，在上述实施例中，组态源文件可以为xml、json或txt文本格式。

图4为本发明实施例二提供的监控页面生成装置的结构示意图，如图4所示，本发明实施例提供的监控页面生成装置，包括：存储器41和处理器42。

存储器41用于存储执行指令，处理器42可以是一个中央处理器(centralprocessingunit，简称cpu)，或者是特定集成电路(applicationspecificintegratedcircuit，简称asic)，或者完成实施本发明实施例的一个或多个集成电路。当监控页面生成装置运行时，处理器42与存储器41之间通信，处理器42调用执行指令，用于执行以下操作：

获取监控画面中待打开的图的组态源文件；其中，所述组态源文件对应所述待打开的图的图元信息；所述图包括主图或窗口图；

解析所述组态源文件，获取用于绘制所述待打开的图的所有图元；

为所述待打开的图的每个图元分别建立一个单独的canvas进行绘制，生成所述待打开的图的监控页面。

进一步地，处理器42解析所述组态源文件，获取用于绘制所述待打开的图的所有图元，可以包括：

将所述组态源文件解析为js对象树，所述js对象树的存储节点用于存储所述待打开的图的所有图元的名称；

根据所述js对象树生成图元对象树，所述图元对象树的存储节点用于存储js对象树中绘制所述待打开的图的图元的名称；

其中，所述js对象树和所述图元对象树中一个存储节点存储一个图元的名称，每一个存储节点中包括一个图元的属性名和属性值；

遍历所述图元对象树，获取用于绘制待打开的图的所有图元。

进一步地，处理器42还可以用于：

为所述待打开的图的每个图元分别建立一个单独的canvas进行绘制之前，根据所述待打开的图中每个图元具有的属性，分别为每个图元添加调用接口；其中，所述调用接口包括绘制接口；

处理器42为所述待打开的图的每个图元分别建立一个单独的canvas进行绘制包括：调用所述待打开的图的每个图元的绘制接口，为所述每个图元分别建立一个单独的canvas进行绘制。

进一步地，在所述待打开的图中存在包含变量的图元时，所述调用接口还包括更新接口；

处理器42还可以用于：

遍历所述图元对象树时，调用包含变量的图元的更新接口，更新相应图元包含的变量的实时值。

进一步地，所述组态源文件为xml、json或txt文本格式。

本发明实施例还提供一种计算机可读存储介质，其上存储有计算机指令，所述指令被处理器执行时实现上述任一实施例所述的监控数据的获取方法的步骤。

图5为本发明实施例提供的监控页面生成系统的结构示意图，如图5所示，本发明实施例提供的监控页面生成系统，包括：web工业监控信息实时信息系统用于监控系统中各设备的运行状态，并将监控的设备的运行状态生成监控画面。数据模块用于从web工业监控信息实时信息系统中获取实时数据或向设备发送指令。从web工业监控信息实时信息系统中获取页面，生成传统组态界面。将传统组态界面中的页面数据转化为js对象并通过canvas绘制，生成web页面。浏览器点击页面图元，完成人机交互。数据模块还用于更新web页面中页面实时值或发送指令给web页面。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些组件或所有组件可以被实施为由处理器，如数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于ram、rom、eeprom、闪存或其他存储器技术、cd-rom、数字多功能盘(dvd)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。