CN104317595A - 基于svg的后台推送的组件化图形监控装置及其运行方法 - Google Patents

Abstract

本发明公开了一种基于SVG的后台推送的组件化图形监控装置及其运行方法，该装置包括：Utilities工具模块，Utilities工具模块包括组件库和PCT设计器；客户端用户接口模块，客户端用户接口模块用于在客户端显示屏上显示Dashboard页面；服务器，服务器通过键值对方式进行实时数据存储和数据推送；EDB事件引擎，EDB事件引擎通过底层事件触发客户端上的Dashboard图形的显示。本发明的装置能实时反映消息的变化，减少服务器资源的占用，且具有更广的适用性，能够实时快速便捷的显示生产环节的信息并进行反馈。

Description

基于SVG的后台推送的组件化图形监控装置及其运行方法

技术领域

本发明涉及一种基于SVG的后台推送的组件化图形监控装置及其运行方法。

背景技术

目前，对于页面定制化的开发，组件不能重用，并且前端页面会定时刷新，对***资源消耗很大，且无法实现页面的局部刷新。另外，查询的数据项目(如sql等)不能进行动态修改，无法实时显示后台数据发生的变化。

发明内容

本发明旨在至少在一定程度上解决上述相关技术中的技术问题之一。

为此，本发明的一个目的在于提出一种基于SVG的后台推送的组件化图形监控装置，该装置能实时反映消息的变化，减少服务器资源的占用，且具有更广的适用性，能够实时快速便捷的显示生产环节的信息并进行反馈。

本发明的另一个目的在于提出一种基于SVG的后台推送的组件化图形监控装置的运行方法。

为达到上述目的，本发明第一方面的实施例提出了一种基于SVG的后台推送的组件化图形监控装置，包括：Utilities工具模块，所述Utilities工具模块包括组件库和PCT设计器；客户端用户接口模块，所述客户端用户接口模块用于在客户端显示屏上显示Dashboard页面；服务器，所述服务器通过键值对方式进行实时数据存储和数据推送；EDB事件引擎，所述EDB事件引擎通过底层事件触发客户端上的Dashboard图形的显示。

根据本发明实施例的基于SVG的后台推送的组件化图形监控装置，使用SVG(ScalableVector Graphics，可缩放矢量图形)、Groovy(一种脚本语言)、JMS(JAVA消息服务的异步消息)等技术，将图形、报表等有机的结合到一起，形成统一维护，统一管理，统一存储。图形可以采用组件化的方式进行维护，每一个组件代表一个具体的业务场景或节点，多个组件可以组合在一起使用，对组件可以进行属性的编辑；该装置提供了基于JMS通过后台推送数据的方式，实时反映消息的变化，减少服务器资源的占用；组件的可配置也使该装置具有更广的适用性；该装置可以解决工厂环境、布局，设备，能够实时快速便捷的显示生产环节的信息，及时反馈设备的生产状态接收工厂现场的MES(Manufacturing Execution System，制造执行***)数据。另外，该装置还具有：简化开发流程，前后端业务分离；组件化开发，模板化开发资源公用；基于推送的方式快速响应数据更新；查询相同数据时，直接从服务端缓存中提取数据，减轻服务器压力；以及脚本化开发，可运行时更改数据来源的优点。

另外，根据本发明上述实施例的基于SVG的后台推送的组件化图形监控装置还可以具有如下附加的技术特征：

在一些示例中，所述PCT设计器包括：组件区、工作区和编辑区，其中，所述组件区存储了EDB的各个基本SVG组件，所述SVG组件可以拖曳到所述工作区，以便用户对所述SVG组件进行编辑、组合；所述工作区是EDB用于对所述SVG组件进行操作的区域，用户可以在工作区对在其内的组件进行组合、连接、复制、剪切，所述工作区可以切换视图，包括：SVG编辑视图、SVG代码视图和SVG预览视图编辑区；所述编辑区提供编辑页面以便用户编辑选定的SVG组件的属性，并在属性数值编辑完成后，所述工作区中的SVG组件将根据所编辑的数值即时刷新。

在一些示例中，所述客户端显示屏为运行浏览器的设备，并且在所述浏览器中可以直接通过访问URL来查看Dashboard页面。

在一些示例中，所述服务器包括维护界面，所述维护界面用于维护数据与模板之间的关系。

在一些示例中，所述EDB事件引擎包括：事件监听模块，所述事件监听模块用于监听数据变化情况，并发送消息事件至所述服务器以便所述服务器做出相应操作；缓存模块，所述缓存模块用于缓存所述客户端与所述服务器之间传输的数据；线程池，所述线程池用于缓冲所述事件监听模块和脚本引擎之间的压力，以使所述服务器发送的请求并发的执行；脚本引擎，所述脚本引擎用于获取数据信息和显示内容信息；数据库，所述数据库包括Component、Component组、Component-Component组、Component组-数据源信息和Component组-相应脚本路径。

本发明第二方面的实施例还提出了一种基于SVG的后台推送的组件化图形监控装置的运行方法，其中，该装置即为本发明第一方面实施例提供的基于SVG的后台推送的组件化图形监控装置，该方法包括以下步骤：

建立关系映射，具体包括：设置Component组件；设置Component组件对应的组；设置组对应的数据源信息；设置组对应的数据源转换groovy脚本；绑定组件与组之间的关联；更新脚本并上传；设置脚本路径；

进行数据改变事件的触发，具体包括：通过底层***触发发生数据改变的事件；当事件监听模块监听到发生数据改变的事件后，调用callThreadPool，在线程池中完成过滤该事件的操作；获得与当前Component相关的组，根据组加载执行脚本，将查出的Component组的结果集与cache对比，如果发生变化则更新cache，并通过Event Engine发送消息事件给Client。

进行数据首次加载，具体包括：客户端用户接口模块传入ComponentId到服务器，通过调用方法，服务器执行相应的操作，最终将数据返回给客户端显示。

进行数据推送，具体包括：客户端用户接口模块监听并接收Event Engine发送的数据信息；根据Component组编号过滤，接收相关的信息；根据接收的数据信息调用组件对应的显示方法，重绘SVG组件。

根据本发明实施例的基于SVG的后台推送的组件化图形监控装置的运行方法，使用SVG(Scalable Vector Graphics，可缩放矢量图形)、Groovy(一种脚本语言)、JMS(JAVA消息服务的异步消息)等技术，将图形、报表等有机的结合到一起，形成统一维护，统一管理，统一存储。图形可以采用组件化的方式进行维护，每一个组件代表一个具体的业务场景或节点，多个组件可以组合在一起使用，对组件可以进行属性的编辑；该方法还提供了基于JMS通过后台推送数据的方式，实时反映消息的变化，减少服务器资源的占用；组件的可配置也使该方法具有更广的适用性；该方法可以解决工厂环境、布局，设备，能够实时快速便捷的显示生产环节的信息，及时反馈设备的生产状态接收工厂现场的MES(制造执行***)数据。另外，该方法还具有：简化开发流程，前后端业务分离；组件化开发，模板化开发资源公用；基于推送的方式快速响应数据更新；查询相同数据时，直接从服务端缓存中提取数据，减轻服务器压力；以及脚本化开发，可运行时更改数据来源的优点。

本发明附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1为根据本发明一个实施例的基于SVG的后台推送的组件化图形监控装置的结构示意图；

图2为根据本发明一个实施例的PCT设计器的界面示意图；

图3为根据本发明一个实施例的模板与组件的制作方式流程图；

图4为根据本发明一个实施例的EDB事件引擎的结构示意图；以及

图5为根据本发明一个实施例的基于SVG的后台推送的组件化图形监控装置的运行方法的流程图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本发明，而不能理解为对本发明的限制。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

在本发明中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”、“固定”等术语应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

在本发明中，除非另有明确的规定和限定，第一特征在第二特征之“上”或之“下”可以包括第一和第二特征直接接触，也可以包括第一和第二特征不是直接接触而是通过它们之间的另外的特征接触。而且，第一特征在第二特征“之上”、“上方”和“上面”包括第一特征在第二特征正上方和斜上方，或仅仅表示第一特征水平高度高于第二特征。第一特征在第二特征“之下”、“下方”和“下面”包括第一特征在第二特征正上方和斜上方，或仅仅表示第一特征水平高度小于第二特征。

下面参照附图描述根据本发明实施例的基于SVG的后台推送的组件化图形监控装置及其运行方法。

图1为根据本发明一个实施例的基于SVG的后台推送的组件化图形监控装置的结构示意图。如图1所示，该装置包括Utilities工具模块(实用工具模块)、客户端用户接口模块、服务器和EDB事件引擎。

其中，Utilities工具模块包括组件库和PCT(Production Control Tower，产品控制台)设计器。组件库(Library)包括一组通用组件。PCT设计器(Designer)为一个Dashboard(仪表盘)实例设计工具。

其中，PCT设计器的界面如图2所示，在该界面上该工具界面分为3个部分：组件区、工作区和编辑区。其中，组件区存储了EDB的各个基本SVG组件，这些组件可以拖曳到工作区，以便用户对它们进行编辑，组合等操作。工作区是EDB用于对组件进行操作的区域，用户可以在工作区对在其内的组件进行组合，连接，复制，剪切等基础操作，工作区可以切换视图，分别是SVG编辑视图、SVG代码视图和SVG预览视图。编辑区提供编辑页面供用户编辑所选定SVG组件的属性，属性数值编辑完成后，工作区中的组件将根据所编辑的数值即时刷新。

作为具体示例，如图3所示，PCT客户端装置模板设计器，基于Java Swing的画图工具，负责绘制SVG图形和后台推送数据的绑定。具体包括以下步骤：

步骤1：编辑器启动时通过webService读取服务器接口，得到后台数据。

步骤2：用户通过拖拽组件到绘图面板进行组件的编辑。

步骤3：维护组件与后台数据的关联。

步骤4：预览SVG模板。

步骤5：导出SVG模板(Scalable Vector Graphics)。

客户端用户接口(Client User Interface)用于在客户端显示屏上显示Dashboard页面。在一些示例中，客户端显示屏为运行浏览器的设备，并且在浏览器中可以直接通过访问URL来查看展示的Dashboard页面。

服务器通过键值对方式进行实时数据存储和数据推送。在一些示例中，服务器包括维护界面，维护界面用语维护数据与模板之间的关系，进一步地，数据的推送由EDB部分触发。

EDB事件引擎通过底层事件触发客户端上的Dashboard图形的显示。

具体而言，EDB事件引擎主要通过获取外部***提供给MES数据库的数据来展示信息。首先EDB***提供监控接口给外部***，一旦外部***跟踪到最新的数据，并且经过确认之后更新到MES数据库，EDB***就能够通过监听即时得到通知，并获取外部***提供的最新数据，每个组件对应一个脚本引擎，通过脚本引擎查询数据库即可得到关心的数据，然后抽取车间、部门等各个层级所关心的数据进行组合，处理之后，通过消息引擎主动的推送到电子显示屏幕上进行展示最新的信息，同时更新缓存数据。上述的处理是在线程池中完成，每一个操作都是相对独立的。前端管理者任何时候也可以通过手动的方式从EDB***中拉出最新的信息展示在电子显示屏幕上。

在一些示例中，如图4所示，EDB事件引擎包括以下五个部分，分别是：事件监听模块(DBEventListener)，缓存模块(Cache)，线程池(Thread Pool)，脚本引擎(Script Engine)，数据库(Database)。

事件监听模块用于监听数据变化情况，并发送消息事件至服务器以便所述服务器做出相应操作。具体地说，首先事件监听模块需要和外部***或者数据库建立良好的触发关系，一旦***数据库发生改变，就会发出一个DBChangeEvent()事件。而当这些发生改变的数据如果正是需要显示在电子看板上的内容时，则继续获取相关信息将这些数据显示出来。

缓存模块用于缓存所户端与服务器之间传输的数据。具体地说，缓存模块是服务端和客户端之间实现高效率获取信息的渠道。服务器的每一次操作都会去判断缓存数据是否存在，如果存在，则不做操作，如果不存在，则更新缓存数据。客户端所需要的数据，都会从缓存中直接获取，避免了服务器和客户端直接交互引发的***漏洞。而***中对于每个Component显示数据都以其相应组为维度保存，键值对格式:(groupId,json)。

线程池用于缓冲所述事件监听模块(DBEvent Listener)和脚本引擎(Script Engine)之间的压力，可以让服务器端的请求并发的在***中执行。一般，需要耗时的工作，都会在线程池中独立完成。

脚本引擎用于获取数据信息和显示内容信息。具体地说，当监控到DBChangeEvent()事件之后，脚本引擎就会获取Component组相关数据源信息，根据数据源信息过滤Event，然后获取Component组相关脚本路径，从相关路径中加载并执行获取数据的操作。

数据库即外部***中提供的基表，以及EDB***中cache模块中需要用到的键值对格式的cache表。包括Component、Component组、Component-Component组、Component组-数据源信息以及Component组-相应脚本路径。

在具体示例中，在使用上述的基于SVG的后台推送的组件化图形监控装置时需要经历以下3个阶段：

1、部署阶段(Deploy Phase)，包括：

a.PCT实施工程师使用Dashboard设计器，通过拖放方式定制Dashboard实例。

b.设计完成后，Dashboard实例将被提交至服务器端并注册。

c.Event Engine.注册后的Dashboard实例将被Dashboard服务器端的Monitor解析，并在服务器端创建一组键值对。键值对将在Event Engine中订阅。

2、***启动阶段(System Boot-up Phase)，包括：

a.根据订阅情况，从内部数据库获取相关数据并初始化键值对。

3、运行阶段(Runtime Phase)，包括：

a.所有由MES或其他的软件***业务事务产生的数据，将被动态更新到键值对。

b.一旦键值对发生变化，数据将被推送至Dashboard组件，并重绘。

综上，本发明上述实施例的基于SVG的后台推送的组件化图形监控装置的工作原理可概述为：将生成的图形化界面提供监控接口给外部***，一旦外部***跟踪到最新的数据，并且经过确认之后更新到***数据库，图形化界面就能够通过监听即时得到通知，并获取外部***提供的最新数据，每个组件对应一个脚本引擎，通过脚本引擎查询数据库即可得到关心的数据，然后抽取车间，部门等各个层级所关心的数据进行组合，处理之后，通过消息引擎主动的推送到电子显示屏幕上进行展示最新的信息，同时更新缓存数据。上述的处理是在线程池中完成，每一个操作都是相对独立的。前端管理者任何时候也可以通过手动的方式从EDB***中拉出最新的信息展示在电子显示屏幕上。

根据本发明实施例的基于SVG的后台推送的组件化图形监控装置，使用SVG(ScalableVector Graphics，可缩放矢量图形)、Groovy(一种脚本语言)、JMS(JAVA消息服务的异步消息)等技术，将图形、报表等有机的结合到一起，形成统一维护，统一管理，统一存储。图形可以采用组件化的方式进行维护，每一个组件代表一个具体的业务场景或节点，多个组件可以组合在一起使用，对组件可以进行属性的编辑；该装置提供了基于JMS通过后台推送数据的方式，实时反映消息的变化，减少服务器资源的占用；组件的可配置也使该装置具有更广的适用性；该装置可以解决工厂环境、布局，设备，能够实时快速便捷的显示生产环节的信息，及时反馈设备的生产状态接收工厂现场的MES(制造执行***)数据。另外，该装置还具有：简化开发流程，前后端业务分离；组件化开发，模板化开发资源公用；基于推送的方式快速响应数据更新；查询相同数据时，直接从服务端缓存中提取数据，减轻服务器压力；以及脚本化开发,可运行时更改数据来源的优点。

本发明的进一步实施例还提供了一种基于SVG的后台推送的组件化图形监控装置的运行方法。

图5为根据本发明一个实施例的基于SVG的后台推送的组件化图形监控装置的运行方法的流程图。其中，该基于SVG的后台推送的组件化图形监控装置即为本发明第一方面实施例提供的基于SVG的后台推送的组件化图形监控装置，该方法包括以下步骤：

步骤A：建立映射关系。首先，服务端的每一个操作都会关联到cache的更新操作。对应于不同的服务端操作，都会在cache中放入一个键值对格式的数据信息。如图5(a)所示，具体包括：

步骤01，设置Component组件。

步骤02，设置Component组件对应的组。

步骤03，设置组对应的数据源信息。

步骤04，设置组对应的数据源转换groovy脚本。

步骤05，绑定组件与组之间的关联。

步骤06，更新脚本并上传。

步骤07，设置脚本路径。

步骤B：进行数据改变事件的触发。如图5(b)所示，具体包括：

步骤08，数据改变的触发方式，即由底层***触发(例如通过DBChangeEvent传递发生变化的表名、字段名)，但也需要其他***触发DBChangeEvent事件。

步骤09，当DBEventListener(监听模块)监听到DBChangeEvent(发生数据改变的事件)后，调用callThreadPool，在线程池中完成过滤该事件的操作(这些表、字段的改变是否会影响Component的变化)。

步骤10，获得与当前Component相关的组(已过滤)，根据组加载执行脚本(查询数据库)，将查出的Component组的结果集(json格式)与cache对比，如果发生变化则更新cache，并通过Event Engine发送消息事件给Client该事件包含Component组ID)。

步骤C：客户端用户接口模块传入ComponentId到服务器，通过调用方法，服务器执行相应的操作，最终将数据返回给客户端显示。如图5(c)所示，具体地说，服务器端要做的事情，首先通过传入的参数ComponentId获取Component组的编号，根据ComponentId查询cache缓存中是否有对应记录。如果没有记录，根据Component组就可以获取Component组对应数据库中的显示信息(包含要查询的数据，以及显示的数据集合)。同时可以获取Component组相关的脚本路径，通过传递信息到脚本引擎就可以加载了相关的显示数据信息，调用服务端相关代码将数据推送到客户端。返回给客户端的同时同样会更新cache。

步骤D：进行数据推送。如图5(d)所示，具体包括：

步骤11，客户端用户接口模块监听并接收Event Engine发送的数据信息。

步骤12，根据Component组编号过滤，接收相关的信息(例如以Component为单元的json格式数据)。

步骤13，根据接收的数据信息调用组件对应的显示方法，重绘SVG组件。

根据本发明实施例的基于SVG的后台推送的组件化图形监控装置的运行方法，使用SVG(Scalable Vector Graphics，可缩放矢量图形)、Groovy(一种脚本语言)、JMS(JAVA消息服务的异步消息)等技术，将图形、报表等有机的结合到一起，形成统一维护，统一管理，统一存储。图形可以采用组件化的方式进行维护，每一个组件代表一个具体的业务场景或节点，多个组件可以组合在一起使用，对组件可以进行属性的编辑；该方法还提供了基于JMS通过后台推送数据的方式，实时反映消息的变化，减少服务器资源的占用；组件的可配置也使该方法具有更广的适用性；该方法可以解决工厂环境、布局，设备，能够实时快速便捷的显示生产环节的信息，及时反馈设备的生产状态接收工厂现场的MES(制造执行***)数据。另外，该方法还具有：简化开发流程，前后端业务分离；组件化开发，模板化开发资源公用；基于推送的方式快速响应数据更新；查询相同数据时，直接从服务端缓存中提取数据，减轻服务器压力；以及脚本化开发，可运行时更改数据来源的优点。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在不脱离本发明的原理和宗旨的情况下在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (6)

1.一种基于SVG的后台推送的组件化图形监控装置，其特征在于，包括：

Utilities工具模块，所述Utilities工具模块包括组件库和PCT设计器；

客户端用户接口模块，所述客户端用户接口模块用于在客户端显示屏上显示Dashboard页面；

服务器，所述服务器通过键值对方式进行实时数据存储和数据推送；

EDB事件引擎，所述EDB事件引擎通过底层事件触发客户端上的Dashboard图形的显示。

2.根据权利要求1所述的基于SVG的后台推送的组件化图形监控装置，其特征在于，所述PCT设计器包括：组件区、工作区和编辑区，其中，

所述组件区存储了EDB的各个基本SVG组件，所述SVG组件可以拖曳到所述工作区，以便用户对所述SVG组件进行编辑、组合；

所述工作区是EDB用于对所述SVG组件进行操作的区域，用户可以在工作区对在其内的组件进行组合、连接、复制、剪切，所述工作区可以切换视图，包括：SVG编辑视图、SVG代码视图和SVG预览视图编辑区；

所述编辑区提供编辑页面以便用户编辑选定的SVG组件的属性，并在属性数值编辑完成后，所述工作区中的SVG组件将根据所编辑的数值即时刷新。

3.根据权利要求1所述的基于SVG的后台推送的组件化图形监控装置，其特征在于，所述客户端显示屏为运行浏览器的设备，并且在所述浏览器中可以直接通过访问URL来查看Dashboard页面。

4.根据权利要求1所述的基于SVG的后台推送的组件化图形监控装置，其特征在于，所述服务器包括维护界面，所述维护界面用于维护数据与模板之间的关系。

5.根据权利要求1所述的基于SVG的后台推送的组件化图形监控装置，其特征在于，所述EDB事件引擎包括：

事件监听模块，所述事件监听模块用于监听数据变化情况，并发送消息事件至所述服务器以便所述服务器做出相应操作；

缓存模块，所述缓存模块用于缓存所述客户端与所述服务器之间传输的数据；

线程池，所述线程池用于缓冲所述事件监听模块和脚本引擎之间的压力，以使所述服务器发送的请求并发的执行；

脚本引擎，所述脚本引擎用于获取数据信息和显示内容信息；

数据库，所述数据库包括Component、Component组、Component-Component组、Component组-数据源信息和Component组-相应脚本路径。

6.一种基于SVG的后台推送的组件化图形监控装置的运行方法，其特征在于，所述基于SVG的后台推送的组件化图形监控装置为如权利要求1-5任一项所述的基于SVG的后台推送的组件化图形监控装置，所述方法包括以下步骤：

建立关系映射，具体包括：

设置Component组件；

设置Component组件对应的组；

设置组对应的数据源信息；

设置组对应的数据源转换groovy脚本；

绑定组件与组之间的关联；

更新脚本并上传；

设置脚本路径；

进行数据改变事件的触发，具体包括：

通过底层***触发发生数据改变的事件；

当事件监听模块监听到发生数据改变的事件后，调用callThreadPool，在线程池中完成过滤该事件的操作；

获得与当前Component相关的组，根据组加载执行脚本，将查出的Component组的结果集与cache对比，如果发生变化则更新cache，并通过Event Engine发送消息事件给Client。

进行数据首次加载，具体包括：

客户端用户接口模块传入ComponentId到服务器，通过调用方法，服务器执行相应的操作，最终将数据返回给客户端显示。

进行数据推送，具体包括：

客户端用户接口模块监听并接收Event Engine发送的数据信息；

根据Component组编号过滤，接收相关的信息；

根据接收的数据信息调用组件对应的显示方法，重绘SVG组件。