【技术实现步骤摘要】
一种平台基于浏览器的自定义监控组态的系统及方法
本专利技术属于图形化界面编程领域，特别是涉及一种平台基于浏览器的自定义监控组态的系统及方法。
技术介绍
物联网是在互联网的基础上，将其用户端延伸和扩展到任何物品与物品之间，进行信息交换和通信的一种网络概念，被称为继计算机、互联网之后的第三次信息技术浪潮。随着物联网的不断发展，物联网时代正以前所未有的速度影响和改变着各行业的发展。可视化实时监控作为物联网系统中的一个重要技术，是与用户接触最频繁的功能，用户体验结果会直接影响物联系统的使用效率和功能。设计和开发出符合用户需求使用的实时监控组态界面功能是非常有必要的。目前物联网系统的实时监控界面都是定制化集成在物联平台下的一个功能模块中，而非作为一种独立的配置工具模块，独立性差，配置步骤繁琐、复杂，要求具备专业技术的开发工程师耗时耗力去开发定制才能应用，使用门槛高，研发效率低、周期长、成本高并且客户不能自主变化应用的实时监控组态界面系统软件。
技术实现思路
本专利技术目的在于提供一种平台基于浏览器的自定义监控组态的系统及方法。为实现上述目的，本专利技术的技术方案如下：一平台基于...
【技术保护点】
1.一种平台基于浏览器的自定义监控组态的系统，其特征在于，包括：初始化模块、菜单栏模块、工具栏模块、编辑区模块、控件栏模块、控件树模块、样式区模块、数据绑定控件模块和生成模块。
【技术特征摘要】
1.一种平台基于浏览器的自定义监控组态的系统，其特征在于，包括：初始化模块、菜单栏模块、工具栏模块、编辑区模块、控件栏模块、控件树模块、样式区模块、数据绑定控件模块和生成模块。2.一种平台基于浏览器的自定义监控组态的方法，其特征在于，具体方法如下：组态的初始化：（1）当用户新建了一个组态，但还没进入编辑界面之前，系统是不会对组态进行初始化的；如果此时用户依然激活了组态且使用了这个组态，在显示界面是不会显示任何的东西的；要初始化组态，则需要至少进入一次编辑组态界面；（2）当进入编辑组态界面时，系统会自动识别组态是否已经初始化，如果已经初始化了，则加载数据库的组态布局，并直接进入组态编辑界面；如果组态没有初始化，系统则会自动对组态进行初始；初始化时，系统会使用默认值来填充最基础的配置，然后生成一个默认的组态布局；最基础的配置包括：背景颜色、画布大小、缩放级别、显示的画布位置、控件的关系配置，待初始化完成后，自动进入组态编辑界面；控件的显示原理：在组态界面中，每个控件的配置都是通过控件关系树来维护的；控件关系树记录了每个控件的配置信息，配置信息包括：控件的位置、控件的大小和控件自身的特有配置；本系统前端使用了Vue.js作为渲染引擎；Vue.js是以数据驱动的方式来渲染试图的，如果需要修改某个控件的显示方式，只需在控件关系树里找到这个控件的配置，然后修改这个控件配置，当控件配置被修改时，在界面中的控件显示方式就会随之改变；也就是说，如果要对界面中的控件进行编辑操作，只需修改控件关系树，当控件关系树的内容被修改时，界面的中控件也会随着控件关系树的改变而改变；组态布局的保存和读取：当用户执行组态布局保存操作的时候，浏览器会把控件关系树转换成JSON字符串；然后发送给服务器，服务器会把这个JSON字符串保存到数据库，保存操作完成；当用户需要读取组态时，浏览器会从服务器获取之前保存的JSON字符串，然后把这个JSON字符串还原为控件关系树；然后把这个控件关系树直接赋值到Vue.js的数据区域，组态界面就会随着控件关系树的赋值操作而被显示出来；控件栏：控件栏是用于新增新控件的；在组态编辑界面中，当用户的光标移动到控件栏的某个控件上方，并且按下鼠标左键，按下但不释放，编辑界面会进入控件新增状态，并且生成一个相关的，且带默认值的控件在光标右下角；如果此时移动光标，浏览器会马上更新新控件的位置，让新控件能够跟随光标的移动而移动；当用户释放鼠标左键时，编辑界面会识别新控件的当前位置：如果新控件的当前位置不在画布内，表示用户取消了新控件的添加操作，浏览器会把新控件删除；如果新控件在画布内，则把新控件插入到控件关系树，让新控件新增到画布内；控件的选择：当要修改某个控件的配置时，需要对控件进行选择，如果需要对控件进行选择，可以在画布直接点击要编辑的控件，也可以点击在控件树种的控件来选择控件；当用户选择了一个控件时，浏览器会在控件关系树中找到与这个控件对应的节点，然后会把这个控件节点放到公共选择区域，当这个控件节点放到公共选择区域后，可以被其他Vue组件...
【专利技术属性】
技术研发人员：李火伟，梁健沛，
申请(专利权)人：佛山点度物联科技有限公司，
类型：发明
国别省市：广东,44
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。