自动化设备运行状态监控显示的可编辑系统

技术领域

本发明属于自动化技术领域，具体涉及自动化设备运行状态监控显示的可编辑系统。

背景技术

随着全球数字经济的发展，计算机技术已经逐渐渗透到其他各个领域，其中也包括传统的工业自动化领域。在工业自动控制系统中，机械、流体、自动化仪表起着决定性作用。随着数字技术的发展，自动化仪表所测量的信号由以前的模拟信号转换为数字信号，自动化设备也接受数字信号的控制。工业自动化与计算机技术的融合势不可挡。

对设备的运行状态监控是自动化生产过程中的一个基本需求。监控包括监视和控制，在自动化设备的运行过程中，运行维护人员需要实时监视各个设备的运行状态、传感器的参数值等，有时候也需要下发具体的控制参数给设备。因此，将计算机技术和工业自动化融合时，首先要考虑的就是如何实现监控功能。

实际使用时，为了方便，往往需要在一个界面中显示多个设备的运转状态。在现有的技术中，有两种解决方式：一种是将图片与对应的状态显示控件分开显示，通过设备编号来对照；另一种是根据图纸编写程序，用代码来描述界面，可以直接将文字显示控件显示在设备附近。

上述两种方式都有其缺点：第一种方式的缺点是不够直观，用户需要自行将文字和图片信息结合，用户在使用时会比较费力，而且容易出错。第二种方式的缺点是不够灵活，由于界面是以硬编码的方式实现的，当图或控件很多时，编码量也会很大，并且在图纸发生变动时，也需要重新调整代码、更改控件的位置。

发明内容

基于现有技术中存在的上述不足，本发明提供自动化设备运行状态监控显示的可编辑系统。

为了达到上述发明目的，本发明采用以下技术方案：

自动化设备运行状态监控显示的可编辑系统，包括：

构建模块，用于基于监控显示界面中的自动化设备，构建自动化设备与其状态属性的关联关系库；

编辑模块，用于根据自动化设备及其状态属性编辑所需的目标控件并显示于监控显示界面；

调整模块，用于根据鼠标的拖拽动作调整目标控件至其对应的自动化设备在监控显示界面的位置或其附近的状态属性显示位置；

绑定模块，用于对目标控件与其对应的自动化设备或状态属性进行绑定，得到目标界面布局；

显示模块，用于根据目标界面布局在监控显示界面显示设备状态信息。

作为优选方案，每一自动化设备包括设备名称、设备编号、设备类型；

每一状态属性包括属性名称、属性用途、属性值。

作为优选方案，所述属性值的数据类型包括整形、浮点型和布尔型。

作为优选方案，所述目标控件的类型包括文本框控件、动态图控件和可点击区域控件，其中，可点击区域控件与自动化设备一一对应。

作为优选方案，所述可点击区域控件覆盖于监控显示界面中的自动化设备上。

作为优选方案，所述可点击区域控件透明不可见。

作为优选方案，可编辑系统，还包括：

动作响应模块，用于根据鼠标点击激活可点击区域控件。

作为优选方案，所述调整模块还用于调整监控显示界面的尺寸、显示比例以及目标控件的尺寸。

作为优选方案，可编辑系统，还包括：

存储模块，用于将目标界面布局以JSON格式存储。

作为优选方案，所述设备状态信息的显示通过Vue子组件实现。

本发明与现有技术相比，有益效果是：

本发明的自动化设备运行状态监控显示的可编辑系统，能够方便地创建和调整界面布局，也能够以直观的方式表示自动化设备的运行状态；同时，支持在线创建、编辑，方便快捷；另外，无需编码确定控件的位置，控件位置更改方便，非硬编码的方式适配能力强，可以减少人力负担，提高工作效率。

附图说明

图1是自动化设备运行状态监控显示的可编辑系统的模块构架图；

图2是设备-属性模型的类图；

图3是“设备-属性”模型的一个样例，以风机为例；

图4是“图层”覆盖生成最终界面的一个原理示意图；

图5是整个编辑器的布局结构；

图6是界面描述文件的样例格式；

图7是详细信息设定模态框的示例图；

图8是设备模态框的示例图。

具体实施方式

为了更清楚地说明本发明实施例，下面将对照附图说明本发明的具体实施方式。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图，并获得其他的实施方式。

如图1所示，本发明实施例的自动化设备运行状态监控显示的可编辑系统，包括构建模块、编辑模块、调整模块、绑定模块、显示模块、动作响应模块和存储模块。

本实施例的构建模块用于基于监控显示界面中的自动化设备，构建自动化设备与其状态属性的关联关系库(即设备-属性模型)。

为了适配各种设备的特点，需要先对设备和状态点进行抽象。本发明中将设备的状态称作设备的“属性”，一个设备可能会有多个属性，如空调的开关状态、运行频率、送风量等等。因此，本发明将设备和状态点分别抽象为Equipment类和Property类。每一个设备对应一个Equipment类的实例，每一个状态点对应一个Property类的实例，一个设备可以拥有多个属性，即一个Equipment可以包含多个Property。

在Equipment类的结构中存储有设备的唯一标识符、类型、编号等信息。在Property类型中存储有属性的唯一标识符、名字、含义、数据类型、值等信息。这些信息对于界面的展示编辑功能非常重要。

建立“设备-属性”模型，适用于多种自动化设备，可以应用、融合进各种电子设备或系统。界面显示、交互方法可在多种UI技术中应用。本发明的具体实现基于Web平台，使用Vue.js框架进行开发。

具体地，在实现自动化设备监控功能之前，系统中必须要存储有设备和属性的信息。

通常，自动化设备的状态属性在传输、存储时可以用以下几种数据类型表示：整形，具体有Integer、Byte、Short、Long等；浮点型，具体有Double、Float；布尔型，即Boolean。其中，离散数据可以用整形或布尔型表示，比如，灯的开关状态可以用布尔型表示，风机的模式可以用整形表示。这种数据通常可以枚举，每个枚举值都有其对应的含义。连续性数据可以用整形或浮点型表示，如风机的运行频率、传感器收到的温度数据等；这种数据往往表示的就是实际的数值大小，可直接显示。

如图2所示，本发明实施例的设备-属性模型，用于描述设备和状态属性的信息：一个设备就是一个Equipment类的实例，会有自己的id(唯一标识符)、name(名称)、code(编号)、type(类型)和properties(任意个属性)等。其中，名字、编号和类型都是纯文本，仅用于显示。

设备的一个属性就是一个Property类的实例，会有自己的id(唯一标识符)、name(名称)、description(属性用途)、unit(单位)等基本信息，以及以下几个比较特殊的字段：

(1)value，属性值，统一将值用字符串的形式存储，配合dataType字段进行解析；

(2)dataType，如Integer、Double、Boolean，表明属性的数据类型；

(3)type，如ReadOnly、WriteOnly，表示可以进行的操作；

(4)valueDescripton，以JSON字符串形式存储的复合信息。

其中，value字段是以字符串形式存储的属性值，如'1'、'true'、'32.47'。其它字段都是用于描述属性本身的元信息。

对于可枚举的数据，通常无法显示value字段的内容。如灯的亮灭可以用true/false表示，但在文本控件中不应该显示“true”或“false”，而是显示“开”和“关”。风机的档位可以用整形来表示，但在文本控件中不应该直接显示“1”、“2”、“3”，而是应该显示“小风”、“中风”、“大风”

因此，统一给所有数据一个isEnum标记，表示数据是否可枚举——是否具有特殊含义。如果isEnum的值为true，则还会有一个enumMap标记。enumMap是个JSON对象，其键是可能出现的value，其值是具体的含义——出现对应value时应该显示的文本内容。isEnum和enumMap标记都在valueDescription字段中。

如图3所示，是一个风机的示例，其中风机的频率就是普通的数值，所以文本框的内容就是value和unit。而风机的模式以整形表示，具有枚举含义，在得到当前的value后，还要根据valueDescription进行映射处理。

在本发明实施例中，前台浏览器进程在页面加载时就会向后台服务器发出请求，获取所有的设备和属性信息后放入内存中，减少查询的请求次数。为了将这些数据在多个组件中共享且能让Vue.js能监听到数据的变化，需要将获取的数据存入Vuex内，提供相应的查询、修改方法。

在进一步描述具体实现方式前，需要先介绍一下“在图片上显示实时状态”的基本原理：使用多个“图层”。

在网页中，如果同一位置出现了需要显示的多个DOM元素，那么其最终渲染效果取决于DOM元素的堆叠顺序。可以通过更改z-index属性等方法，调整各个DOM元素的堆叠顺序。也可以通过更改DOM元素的display属性，来控制某个元素是否显示。这样，就可以实现类似图像处理软件中“图层”的效果。

本发明中将原始的图片或设计图纸作为整个界面的背景(称为“底图”)，用绝对定位的方式将HTML元素形成的控件覆盖于背景之上。在视觉上，背景和上方的控件就结合成了一个“动态图片”。如图4所示，是“图层“覆盖生成最终界面的一个原理示意图。

使用“Image”来指代这个“动态图片”，即在线编辑器生成的界面成品。使用“Widget”来指代Image的子控件，Widget包含于Image中。具体地，建立“设备-属性”模型，导入设备和属性信息。

本实施例的编辑模块，用于根据自动化设备及其状态属性编辑所需的目标控件并显示于监控显示界面。

具体地，创建了一个Editor.vue组件代表整个编辑器，如图5所示，是整个编辑器的布局结构。

一、创建编辑器

在Editor.vue内建立了两个div容器：div.header和div.content，呈现上下结构。上方的div.header用作工具栏，固定高度，放置按钮、输入框等交互组件，用于显示和调整Image或Widget的具体状态参数。下方的div.content用于预览显示Image，同时也要处理对Widget的点击、拖拽事件。

二、构建Image显示容器。

对于一个Image，需要定义其数据结构，再考虑将此数据结构描述的界面渲染到Web页面上。Image的数据结构中包含渲染此“动态图片”时所有需要的信息，也包括其子控件Widget的信息。

首先，在编辑器(假设为Editor.vue)的data对象中，新增一个imageObj字段，里面存储的就是Image的所有状态信息。具体来说，imageObj对象中有fontSize、width、height、imgSrc和widgets共5个字段。这些状态信息会与相关的Vue组件进行双向绑定，确保状态信息和预览效果的同步。

然后，在div.content容器中再创建一个div.image元素，div.image元素便是Image对应的最外层HTML元素。使用style属性设置其样式：将div.image的字体大小绑定imageObj.fontSize，宽高绑定imageObj的width和height。具体地说，就是将样式设置为{fontSize:imageObj.fontSize+'px',width:imageObj.width+'em',height:imageObj.height+'em'}。

div.image的字体大小是实际的px像素数，而宽高则是以em计量，字体大小变成了一个衡量“单位”。在显示时，浏览器会将Image整体的宽高会由width、height结合fontSize转换成具体的像素数再进行渲染。与直接使用px像素数相比，这种方式可以轻松地对整个Image进行等比例变换：只要调整imageObj.fontSize便可以。

除了Image本身外，Widget的位置和尺寸也会采用em来表示。由于div.image的所有子元素会继承其字体大小，因此Widget的位置、大小也会随imageObj.fontSize变化，相对与Image整体的位置、尺寸保持不变，即一起进行等比变换。

最后，在工具栏div.header中创建滑动条、input输入框，将其与imageObj.fontSize、imageObj.width、imageObj.height双向绑定，此后便可以通过工具栏来调整Image的大小了。

此时，Image整体的大小、尺寸、衡量单位便可以通过编辑器进行在线调整。

如图6所示，是imageObj这种界面描述格式的一个样例，其中包含了后续对Widget的描述信息示例。

三、构建Image背景

具体的，在div.image中创建一个div.background子元素，div.background中设置一张图片，并将其src属性与imageObj.imgSrc字段绑定。另外，div.background的宽高都设置为100％。div.image、div.background元素的尺寸会完全一致，imageObj.imgSrc指向的链接图片在视觉效果上会覆盖整个Image，变成整个Image的背景。

在工具栏中提供“图片上传”按钮，上传成功后，将imageObj.imgSrc替换为新图片的URL。用户将设计图上传后，设计图就会变成整个Image的背景底图。

此时，Image的背景图便可以在线变更。

四、创建子控件

如前所述，将子控件称为Widget。每一个子控件都是imageObj.widgets数组中的一个数组项，其对应的HTML显示元素也在div.image中。

每一个Widget都有type、detailObj、serialNubmer、top、left、width、height共7个字段。其中，type字段表明了Widget的类型。detailObj中记录了Widget显示时需要用到的详细信息，具体内容和格式会依Widget类型而有所不同。serialNumber是组件的唯一标识。top、left是相对于其容器元素(div.image)的上边界和左边界的距离，width、height则是Wiget自身的宽高，位置、尺寸都是以em为单位。

在本发明实施例中有三种Widget：

文本框控件，type＝＝＝'input'。detailObj中记录了其对应设备属性的id。文本框控件用于直接显示文本信息。在显示时，文本框控件会根据设备属性的id，在Vuex找到其对应设备属性的完整信息。如果属性值没有枚举含义，即isEnum:false，那么直接将value和unit字段的内容放在文本框中。如果属性值具有枚举含义，即isEnum:true，则显示时需要将value的内容结合enumMap的键找到其对应的含义，再显示在文本框内。设备属性的description的字段，会作为文本框对应HTML元素的title属性，用于在鼠标移上去时显示详细描述。

动态图控件，type＝＝＝'gif'。detailObj中记录了其对应设备属性的id，可能出现的属性值和该属性值下应该使用的动图。动态图控件以图片的形式显示设备的状态，作为文本框的补充，只能应用于可枚举(isEnum:true)的变量。其原理是在指定状态显示指定的GIF图片，结合底图让界面“动起来”。例如，风扇的转速属性可枚举，分为4档：大、中、小、关，value用3、2、1、0表示。在关模式下，我们不显示任何图片，直接显示底图。在“大中小”模式下，我们可以分别显示3张不同的GIF动图，覆盖底图。在视觉效果上，界面上的风扇便可以转动起来了。因此，绑定的信息要有属性property的id，特定状态(value值)以及该状态对应图片的URL。

可点击区域控件，type＝＝＝'clickArea'。detailObj中记录了其对应设备的id。可点击区域控件的作用并不是显示，而是交互。覆盖在底图中的设备上，透明不可见，其cursor属性被设置为pointer，鼠标移上去时指针会发生变化，示意用户可进行点击。当用户点击Image上的设备时，其实是点击了此种控件。

这三种控件，对应三个Vue组件：Input.vue、Gif.vue、ClickArea.vue。其中，ClickArea.vue内部只有一个div元素，但需要调整其样式，设置其背景色为半透明的蓝色，提醒用户此处包含一个可点击区域控件。

在编辑器Editor.vue中，遍历imageObj.widgets选项，根据Widget的type信息，选用对应的Vue组件进行显示，创建的Vue组件元素位于div.image容器内。

与Image类似，通过更改style属性来调整其样式。需要将Widget的尺寸与widget.width、widget.height绑定，将位置与widget.left和widget.top绑定，具体来说就是将style设为{left:widget.left+'em',top:widget.top+'em',width:widget.width+'em',height:widget.height+'em'}。

组件使用absolute绝对定位，div.image使用相对定位，创建定位上下文。Widget相对于整个Image的位置便确定下来。

在遍历时，将具体的widget信息通过props传入对应Vue子组件内部，由子组件负责具体的渲染。

本实施例的调整模块，用于根据鼠标的拖拽动作调整目标控件至其对应的自动化设备在监控显示界面的位置或其附近的状态属性显示位置。

具体地，在工具栏中添加“增加子控件”选项。当用户选择增加某种子控件时，创建一个新的JavaScript Widget对象，并加入至imageObj.widgets中。创建Widget时需要设置默认的位置和尺寸，同时还要指定其类型type和序号serialNumber。序号可以用哈希字符串或自增数字表示，但不能与imageObj.widgets里其它Widget的序号重复。

由于Widget的数量较多，因此在工具栏中，提供的输入框和微调按钮都是针对当前被激活的Widget的。在Editor.vue里data对象中新增一个selectedWidgetSerialNumber字段，记录当前被激活Widget的序号。被激活的Widget周围使用黄色轮廓高亮以提示用户。

在每一个Widget对应的Vue组件上增加对拖拽事件(dragstart、dragend、dragover)和点击事件(click)的处理函数。并在Editor.vue的data对象中增加draggingInfo存储拖拽信息。

当拖拽元素或点击事件在某一个组件上发生时，此组件就会被激活，selectedWidgetSerialNumber被设置为此Widget的序号。另外，对于拖拽操作，程序需要在拖拽开始时(dragstart事件发生时)存储拖拽信息，包括元素的真实DOM元素和鼠标的初始坐标。在拖拽过程中(dragover)，根据当前鼠标所在坐标、鼠标原始坐标、imageObj.fontSize，计算出偏移量，对应改变当前控件的left、top属性。这样，就实现了元素被拖拽的效果。

与Image类似，在工具栏中创建Widget的宽高、位置输入框，以便进行微调。

此时，Image中Widget的位置、尺寸可以便通过鼠标拖动或工具栏输入框进行在线调整。

本实施例的绑定模块，用于对目标控件与其对应的自动化设备或状态属性进行绑定，得到目标界面布局。

具体地，目前，Image界面的尺寸、比例、背景图都可以在线调节，Widget的尺寸、位置也可以在线调节。用户可以将控件拖动至底图上对应设备或状态点处。下一步是将Widget和具体的设备或属性进行绑定。

在本发明的具体实现例中，使用隐藏的模态框组件来解决此问题。对应于Widget的类型，有InputModal.vue、GifModal.vue、ClickAreaModal.vue三种模态框组件。Editor.vue的data对象中，每种模态框都有自己的visible属性，默认为false，表示不可见，对应CSS属性display:none。

在工具栏提供一个“详细设置”按钮，点击后，程序会根据当前被激活的Widget的类型，找到对应的模态框，将其visible设为true，对应CSS属性display:block。此时模态框就会出现在界面上。供用户设置Widget的具体信息。

InputModal.vue中包含一个设备属性的列表(数据来自于Vuex)，提供搜索功能。用户确定最终绑定的设备属性后，触发ok事件，同时将设备属性的id传递给父组件Editor.vue。

GifModal.vue中包含一个设备属性的列表(数据来自于Vuex)和图片上传按钮。如前所述，设备属性列表中只会显示isEnum为true的设备属性。在确定对应的设备属性后，程序遍历enumMap的key，确定所有可能出现的值，并分别提供图片上传按钮。在所有设置完成后，触发ok事件，将设备属性id和值-图片对应关系传递给父组件Editor.vue。

ClickArea.vue中包含一个设备列表(数据来自于Vuex)，提供搜索功能。用户确定最终绑定的设备后，触发ok事件，同时将设备的id传递给父组件Editor.vue。

父组件在监听到模态框组件的ok事件后，根据selectedWidgetSerialNumber在imageObj.widgets中找到对应的Widget，更改其detailObj属性。同时重新将模态框的visible属性设为false，即重新进行隐藏。

此时，控件Widget所对应的具体设备或属性信息也可以通过编辑器进行在线调整。在线编辑器的所有功能已实现。若用户选择“保存”当前设计，只需将imageObj对象使用JSON.stringify序列化后通过http存储入后端数据库就行。如图7所示，是详细信息设定模态框的示例图。

本实施例的显示模块，用于根据目标界面布局在监控显示界面显示设备状态信息。

具体地，在另一个页面中显示最终的Image。在显示Image时，需要先向后台请求对应的imageObj，在显示时仅需对原来编辑器Editor.vue中的功能进行一定的筛检。

在实现显示功能时，同样需要构建div.image容器、创建并显示div.background背景图层、遍历并显示Widget。但不需要上方工具栏、也不需要创建隐藏的模态框、不需要实现点击、拖拽功能。具体状态的显示仍然交由Widget对应的Vue子组件来实现。

本发明具体实施例中，前台浏览器使用WebSocket协议与后台进行通信，后台在发现自动化设备状态值变更后，会向前端进程发送通知。前端进程在接收到后，更新Vuex对应Property的value字段。Vue.js会处理好后续的渲染操作。因此，文本框控件和动图控件的内容都会实时变化。

对“可点击区域”控件的处理则有所不同，首先，此种控件并不负责状态的显示，而是响应用户的点击事件，因此需要在这种控件对应的Vue组件上增加对click事件的监听和处理函数。即本实施例的动作响应模块用于根据鼠标点击激活可点击区域控件。

其次，需要更改其显示样式。其对应DOM元素的样式中应该没有背景色，视觉上是完全透明的，但cursor属性设置为pointer。用户在移动到对应设备上方时，可以看到鼠标指针的变化，表明此处可以点击。

创建一个EquipmentModal.vue组件作为弹出的模态框组件，其负责显示整个设备的详细信息，包括设备名、代号以及设备的所有属性，也提供控制功能。此模态框默认为隐藏状态，当用户点击可点击区域时，通过props将对应设备的id传给EquipmentModal.vue模态框。EquipmentModal.vue根据设备id在Vuex中找到对应的设备和其下的所有设备属性，遍历所有设备属性并将当前值显示出来。

对于只读的设备属性(type＝＝＝'ReadOnly')，EquipmentModal.vue只进行文本显示。对于可写的设备属性(type＝＝＝'WriteOnly')，EquipmentModal.vue还支持写操作。具体地说，对于数值型属性，如设定温度，EquipmentModal.vue会提供一个文本输入框。对于值可枚举的属性，EquipmentModal.vue会提供一个包含所有可能值的下拉菜单(针对整形属性)或切换按钮(针对布尔型属性)。在用户填入值并确定后，EquipmentModal.vue会请求后台服务器，下发指令。在成功后更新Vuex中的属性值，确保显示状态是最新的。

如图8所示，是EquipmentModal.vue模态框的示例。

由此，所有设备的状态可以做到实时显示，用户可以通过浏览器下发具体的控制参数，完整实现了监控功能。更重要的是，其显示界面是由本发明的在线编辑器生成的，适配性强、编辑修改方便。

本实施例的存储模块，利用JSON对象格式存储、描述一个整体显示界面，包括整个界面的大小，原始缩放比例，各种控件的类型、大小、位置以及控件与自动化设备的关联信息等。后续可根据JSON对象格式文件的内容，通过程序在Web页面上生成实际DOM元素，绘制出界面和控件。同时，在设备的状态发生变化后，及时对控件的显示内容进行调整，确保用户可以看见实时的设备状态。

以上所述仅是对本发明的优选实施例及原理进行了详细说明，对本领域的普通技术人员而言，依据本发明提供的思想，在具体实施方式上会有改变之处，而这些改变也应视为本发明的保护范围。