一种平台基于浏览器的自定义监控组态的系统及方法与流程

本发明属于图形化界面编程领域，特别是涉及一种平台基于浏览器的自定义监控组态的系统及方法。

背景技术：

物联网是在互联网的基础上，将其用户端延伸和扩展到任何物品与物品之间，进行信息交换和通信的一种网络概念，被称为继计算机、互联网之后的第三次信息技术浪潮。随着物联网的不断发展，物联网时代正以前所未有的速度影响和改变着各行业的发展。可视化实时监控作为物联网系统中的一个重要技术，是与用户接触最频繁的功能，用户体验结果会直接影响物联系统的使用效率和功能。设计和开发出符合用户需求使用的实时监控组态界面功能是非常有必要的。

目前物联网系统的实时监控界面都是定制化集成在物联平台下的一个功能模块中，而非作为一种独立的配置工具模块，独立性差，配置步骤繁琐、复杂，要求具备专业技术的开发工程师耗时耗力去开发定制才能应用，使用门槛高，研发效率低、周期长、成本高并且客户不能自主变化应用的实时监控组态界面系统软件。

技术实现要素：

本发明目的在于提供一种平台基于浏览器的自定义监控组态的系统及方法。

为实现上述目的，本发明的技术方案如下：一平台基于浏览器的自定义监控组态的系统种，包括：初始化模块、菜单栏模块、工具栏模块、编辑区模块、控件栏模块、控件树模块、样式区模块、数据绑定控件模块和生成模块。

一种平台基于浏览器的自定义监控组态的方法，具体方法如下：

组态的初始化：

（1）当用户新建了一个组态，但还没进入编辑界面之前，系统是不会对组态进行初始化的；如果此时用户依然激活了组态且使用了这个组态，在显示界面是不会显示任何的东西的。要初始化组态，则需要至少进入一次编辑组态界面；

（2）当进入编辑组态界面时，系统会自动识别组态是否已经初始化，如果已经初始化了，则加载数据库的组态布局，并直接进入组态编辑界面；如果组态没有初始化，系统则会自动对组态进行初始；初始化时，系统会使用默认值来填充最基础的配置，然后生成一个默认的组态布局；最基础的配置包括：背景颜色、画布大小、缩放级别、显示的画布位置、控件的关系配置，待初始化完成后，自动进入组态编辑界面；

控件的显示原理：

（1）在组态界面中，每个控件的配置都是通过控件关系树来维护的；控件关系树记录了每个控件的配置信息。配置信息包括：控件的位置、控件的大小和控件自身的特有配置；

（2）本系统前端使用了vue.js作为渲染引擎；vue.js是以数据驱动的方式来渲染试图的，如果需要修改某个控件的显示方式，只需在控件关系树里找到这个控件的配置，然后修改这个控件配置，当控件配置被修改时，在界面中的控件显示方式就会随之改变；也就是说，如果要对界面中的控件进行编辑操作，只需修改控件关系树，当控件关系树的内容被修改时，界面的中控件也会随着控件关系树的改变而改变；

组态布局的保存和读取：

（1）当用户执行组态布局保存操作的时候，浏览器会把控件关系树转换成json字符串；然后发送给服务器，服务器会把这个json字符串保存到数据库，保存操作完成；

（2）当用户需要读取组态时，浏览器会从服务器获取之前保存的json字符串，然后把这个json字符串还原为控件关系树；然后把这个控件关系树直接赋值到vue.js的数据区域，组态界面就会随着控件关系树的赋值操作而被显示出来；

控件栏：控件栏是用于新增新控件的；在组态编辑界面中，当用户的光标移动到控件栏的某个控件上方，并且按下鼠标左键，按下但不释放，编辑界面会进入控件新增状态，并且生成一个相关的，且带默认值的控件在光标右下角；如果此时移动光标，浏览器会马上更新新控件的位置，让新控件能够跟随光标的移动而移动；当用户释放鼠标左键时，编辑界面会识别新控件的当前位置：如果新控件的当前位置不在画布内，表示用户取消了新控件的添加操作，浏览器会把新控件删除；如果新控件在画布内，则把新控件插入到控件关系树，让新控件新增到画布内；

控件的选择：

（1）当要修改某个控件的配置时，需要对控件进行选择。如果需要对控件进行选择，可以在画布直接点击要编辑的控件，也可以点击在控件树种的控件来选择控件；

（2）当用户选择了一个控件时，浏览器会在控件关系树中找到与这个控件对应的节点，然后会把这个控件节点放到公共选择区域，当这个控件节点放到公共选择区域后，可以被其他vue组件修改；

（3）当用户在其他vue组件修改了这个控件的配置时，会把修改的数据直接反馈到控件关系树，从而直接反馈到控件的显示中；

控件的自由拖放：

（1）当用户选择了一个控件时，会进入自由拖放模式。在显示画布中，被选择的控件四周有8个小白点；

（2）用户光标移动到某一个小白点上，按下鼠标左键，按下但不释放，系统会进入光标捕捉模式。此时当用户移动光标时，会触发控件大小的重新计算事件，当控件大小重新计算后，会把控件数据直接写入到控件关系树里，随后把计算后的控件大小如实的显示出来，这样就能实现控件的自由拖放了；

（3）当用户释放鼠标左键时，系统会退出自由拖放模式；

控件树：由于控件关系树仅仅是数据，为了让用户能够更直观地查看控件关系树，本系统提供了控件树；控件树是把控件关系树以树状图的方式显示出来的控件；该控件显示了当前组态有多少个控件，还会显示所有控件之间的关系；用户也可以通过点击里面的控件来对控件进行选择；

样式面板：样式面板用于编辑当前选定控件的样式；样式面板会根据公共选择区域里的控件节点，显示不同的内容；如果用户在样式面板对控件样式进行了修改，那么修改的数据会直接反馈到控件关系树，然后控件关系树又会直接反馈到界面；因此用户一旦在控件面板修改了样式，vue.js会把修改的内容直接反馈到界面上；

数据/行为面板：数据、行为面板用于控制控件绑定的数据；当进入组态界面时，浏览器会预先加载所有可以绑定的数据或行为；数据/行为面板会根据公共选择区域里的控件节点，显示可以绑定的数据或行为，该数据或行为仅对运行中的组态有影响；

控件显示的覆盖顺序：

（1）当有一些控件都在同一位置的时候，这时候就会出现控件显示的先后顺序的问题；在控件关系树中，每个控件都有一个属性：显示顺序；用户可以通过点击工具栏中的上移一层、下移一层、移至顶层或移至底层来调整控件的显示顺序；

（2）在本系统中，控件的显示顺序是使用css里的z-index属性来实现的；在显示控件之前，本系统会对所有控件的显示顺序进行排序，排好序后，从头到尾按顺序重新填充编号；然后把这个编号填充到对应控件元素里的z-index属性。随后浏览器会根据这个z-index属性，来确定控件的显示顺序

运行中的数据实时显示：

（1）组态数据的实时显示使用了浏览器的websocket技术，并且使用了stomp作为传输协议；当服务器采集到一个数据后，该数据会通过stomp协议来进行订阅信息的发布，而发布的内容就是采集到的这个数据；

（2）浏览器在运行组态的时候，会使用stomp协议对实时信息进行订阅，订阅后，会一直等待服务器。一旦服务器进行数据的发布，已订阅的浏览器就会收到服务器发来的新数据了；

（3）浏览器一旦收到新数据，会对新数据进行一系列的状态计算，最后写入到控件中进行显示；

实时数据连接状态：组态会把新采集数据的时间戳与当前时间戳进行对比，计算出时间戳差值，从而计算出数据是多久之前采集的；并且使用了定时器，每过一秒钟就会触发一次对比函数；如果时间戳差值超过一定时间，就会判断为断线，并显示到对应控件中；

组态的屏幕自适应技术：本系统里组态的自适应是使用浏览器响应式布局和css3来实现的。

本发明的有益效果是：本发明相对独立运行，操作简单、方便、实用，并提高监控业务的灵活性、通用性、可扩展性及可适应性，做到客户自主配置的基于浏览器自定义监控组态系统及其方法，提高了研发效率，缩短开发周期，减少开发成本，满足客户多样性、个性化和日益提高的管理应用需求，实现对“万物”的“高效、节能、安全、环保、智能”的“管、控、营”一体化。全部发明思想方法、设计方法和技术、软件编程技术及原创源程序全部属于原创发明。

附图说明

图1是物联应用平台基于浏览器的自定义监控组态功能模块示意图。

图2是基于浏览器的自定义监控组态的系统界面示意图。

具体实施方式

结合图1至图2所示：一种平台基于浏览器的自定义监控组态的系统，包括：初始化模块、菜单栏模块、工具栏模块、编辑区模块、控件栏模块、控件树模块、样式区模块、数据绑定控件模块和生成模块。

一种平台基于浏览器的自定义监控组态的方法，具体方法如下：

组态的初始化：

（1）当用户新建了一个组态，但还没进入编辑界面之前，系统是不会对组态进行初始化的；如果此时用户依然激活了组态且使用了这个组态，在显示界面是不会显示任何的东西的。要初始化组态，则需要至少进入一次编辑组态界面；

（2）当进入编辑组态界面时，系统会自动识别组态是否已经初始化，如果已经初始化了，则加载数据库的组态布局，并直接进入组态编辑界面；如果组态没有初始化，系统则会自动对组态进行初始；初始化时，系统会使用默认值来填充最基础的配置，然后生成一个默认的组态布局；最基础的配置包括：背景颜色、画布大小、缩放级别、显示的画布位置、控件的关系配置，待初始化完成后，自动进入组态编辑界面；

控件的显示原理：

（3）在组态界面中，每个控件的配置都是通过控件关系树来维护的；控件关系树记录了每个控件的配置信息。配置信息包括：控件的位置、控件的大小和控件自身的特有配置；

（4）本系统前端使用了vue.js作为渲染引擎；vue.js是以数据驱动的方式来渲染试图的，如果需要修改某个控件的显示方式，只需在控件关系树里找到这个控件的配置，然后修改这个控件配置，当控件配置被修改时，在界面中的控件显示方式就会随之改变；也就是说，如果要对界面中的控件进行编辑操作，只需修改控件关系树，当控件关系树的内容被修改时，界面的中控件也会随着控件关系树的改变而改变；

组态布局的保存和读取：

（3）当用户执行组态布局保存操作的时候，浏览器会把控件关系树转换成json字符串；然后发送给服务器，服务器会把这个json字符串保存到数据库，保存操作完成；

（4）当用户需要读取组态时，浏览器会从服务器获取之前保存的json字符串，然后把这个json字符串还原为控件关系树；然后把这个控件关系树直接赋值到vue.js的数据区域，组态界面就会随着控件关系树的赋值操作而被显示出来；

控件栏：控件栏是用于新增新控件的；在组态编辑界面中，当用户的光标移动到控件栏的某个控件上方，并且按下鼠标左键，按下但不释放，编辑界面会进入控件新增状态，并且生成一个相关的，且带默认值的控件在光标右下角；如果此时移动光标，浏览器会马上更新新控件的位置，让新控件能够跟随光标的移动而移动；当用户释放鼠标左键时，编辑界面会识别新控件的当前位置：如果新控件的当前位置不在画布内，表示用户取消了新控件的添加操作，浏览器会把新控件删除；如果新控件在画布内，则把新控件插入到控件关系树，让新控件新增到画布内；

控件的选择：

（4）当要修改某个控件的配置时，需要对控件进行选择。如果需要对控件进行选择，可以在画布直接点击要编辑的控件，也可以点击在控件树种的控件来选择控件；

（5）当用户选择了一个控件时，浏览器会在控件关系树中找到与这个控件对应的节点，然后会把这个控件节点放到公共选择区域，当这个控件节点放到公共选择区域后，可以被其他vue组件修改；

（6）当用户在其他vue组件修改了这个控件的配置时，会把修改的数据直接反馈到控件关系树，从而直接反馈到控件的显示中；

控件的自由拖放：

（4）当用户选择了一个控件时，会进入自由拖放模式。在显示画布中，被选择的控件四周有8个小白点；

（5）用户光标移动到某一个小白点上，按下鼠标左键，按下但不释放，系统会进入光标捕捉模式。此时当用户移动光标时，会触发控件大小的重新计算事件，当控件大小重新计算后，会把控件数据直接写入到控件关系树里，随后把计算后的控件大小如实的显示出来，这样就能实现控件的自由拖放了；

（6）当用户释放鼠标左键时，系统会退出自由拖放模式；

控件树：由于控件关系树仅仅是数据，为了让用户能够更直观地查看控件关系树，本系统提供了控件树；控件树是把控件关系树以树状图的方式显示出来的控件；该控件显示了当前组态有多少个控件，还会显示所有控件之间的关系；用户也可以通过点击里面的控件来对控件进行选择；

样式面板：样式面板用于编辑当前选定控件的样式；样式面板会根据公共选择区域里的控件节点，显示不同的内容；如果用户在样式面板对控件样式进行了修改，那么修改的数据会直接反馈到控件关系树，然后控件关系树又会直接反馈到界面；因此用户一旦在控件面板修改了样式，vue.js会把修改的内容直接反馈到界面上；

数据/行为面板：数据、行为面板用于控制控件绑定的数据；当进入组态界面时，浏览器会预先加载所有可以绑定的数据或行为；数据/行为面板会根据公共选择区域里的控件节点，显示可以绑定的数据或行为，该数据或行为仅对运行中的组态有影响；

控件显示的覆盖顺序：

（3）当有一些控件都在同一位置的时候，这时候就会出现控件显示的先后顺序的问题；在控件关系树中，每个控件都有一个属性：显示顺序；用户可以通过点击工具栏中的上移一层、下移一层、移至顶层或移至底层来调整控件的显示顺序；

（4）在本系统中，控件的显示顺序是使用css里的z-index属性来实现的；在显示控件之前，本系统会对所有控件的显示顺序进行排序，排好序后，从头到尾按顺序重新填充编号；然后把这个编号填充到对应控件元素里的z-index属性。随后浏览器会根据这个z-index属性，来确定控件的显示顺序

运行中的数据实时显示：

（4）组态数据的实时显示使用了浏览器的websocket技术，并且使用了stomp作为传输协议；当服务器采集到一个数据后，该数据会通过stomp协议来进行订阅信息的发布，而发布的内容就是采集到的这个数据；

（5）浏览器在运行组态的时候，会使用stomp协议对实时信息进行订阅，订阅后，会一直等待服务器。一旦服务器进行数据的发布，已订阅的浏览器就会收到服务器发来的新数据了；

（6）浏览器一旦收到新数据，会对新数据进行一系列的状态计算，最后写入到控件中进行显示；

实时数据连接状态：组态会把新采集数据的时间戳与当前时间戳进行对比，计算出时间戳差值，从而计算出数据是多久之前采集的；并且使用了定时器，每过一秒钟就会触发一次对比函数；如果时间戳差值超过一定时间，就会判断为断线，并显示到对应控件中；

组态的屏幕自适应技术：本系统里组态的自适应是使用浏览器响应式布局和css3来实现的。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。