一种基于web端的楼宇组态系统的制作方法

1.本发明涉及楼宇设备观测控制领域，特别是一种基于web端的楼宇组态系统。


背景技术：

2.随着中国楼宇行业的发展，特别是大型楼宇建筑群如：办公楼、科技园、大型商场等建筑群数量随着底层经济的发展数量在急剧增加，仅仅从2011年到2020年，中国的大型商场的数量由816家增加到了5415家。对于楼宇上千台设备包括但不限于：照明、空调、电梯设备，需要有一种监视控制系统统一观测控制设备。
3.scada(supervisorycontrolanddataacquisition)系统，即数据采集与监视控制系统，常用于楼宇行业监控楼宇内的设备，常用的scada软件通常采用c/s架构的窗口应用的模式使用，c/s架构下存在着一定的缺陷，如：工程的实施阶段，前期点位的采集与解析过程很难多人同步进行，从落地效率上来说较低；应用落地后在操作上有一定的门槛；监控软件需要安装在操作者的电脑中，无法保证操作者对软件没有任何破坏性操作。
4.为了方便操作，研发人员研发出基于web端的楼宇组态软件；如专利名称为一种基于web的scada系统，专利号：cn202211039807.7的现有技术，其公开了一种基于web的scada系统，涉及生产采集和监控技术领域，包括车间scada系统，sp1：通过终端建立模拟仿真，sp2：建立监控界面；sp3：在采集层中的每个单独设备接入对应的设备接入分管理系统；sp4：建立设备接入总管理系统；sp5：通过云模型分析相同设备的属性点；sp6：根据云模型分析设备中属性点故障率；sp7：搭配模拟仿真技术，对模拟仿真数据进行存储搭配云端和本地数据库形成监控层，将监控层连接应用层,可以优化传输路径。通过设备接入分管理系统连接设备接入总管理系统和设备本体可以直观的监控到运行过程中的设备故障情况，节省数据传输的路径和数据处理步骤。该方案存在以下缺点：1)对于实际操作的用户来说，使用门槛较高，这大大增加了操作人员的使用成本；2)对于不同的场景(如车间、园区、商场)需要定制化不同的平面图场景，这对于开发人员来说无疑是加大了返工成本：3)未对设备真实的属性点做一个统一的分析管理，对于现场的工程人员与实施人员的操作不太友好。因此，亟需研发一款对用户操作友好、对于不同场景中的实际展示都具有较强的适配性的基于web端的楼宇组态系统。


技术实现要素：

5.本发明的目的在于，提供一种基于web端的楼宇组态系统。本发明不仅对用户操作友好，而且对于不同场景中的实际展示都具有较强的适配性。
6.本发明的技术方案：一种基于web端的楼宇组态系统，包括楼宇可视化平面图展示模块，楼宇可视化平面图展示模块连接有楼宇可视化平面图配置数据模块，楼宇可视化平面图配置数据模块连接有楼宇可视化平面图编辑模块。
7.前述的一种基于web端的楼宇组态系统中，所述楼宇可视化平面图编辑模块包括组件库、组件编辑单元、组件拖拽单元和平面图底图配置单元。
8.前述的一种基于web端的楼宇组态系统中，所述组件库，用于储存不同的组件，并将不同组件分别映射到不同的真实设备当中；
9.组件编辑单元，用于配置与组件相关的基础属性、动效属性和事件属性；
10.平面图底图配置单元用于导入外部已生成好的楼宇平面图；
11.组件拖拽单元用于将组件拖拽至已配置好的平面图上。
12.前述的一种基于web端的楼宇组态系统中，所述基础属性包含常规属性和数据属性；所述常规属性包括组件的尺寸、位置、角度，组件名称；数据属性用于对应不同的设备上的点位数据的展示与下发；
13.所述动效属性用于控制组件执行的动画效果：上下左右跳动、颜色变化、闪烁隐藏；
14.所述事件属性用于为组件定制单机、双击事件，用于跳转链接、弹窗打开新的楼宇平面图、跳转至新的楼宇平面图、执行js脚本。
15.前述的一种基于web端的楼宇组态系统中，所述楼宇可视化平面图配置数据模块包括楼宇可视化平面图配置单元和楼宇可视化平面图数据单元，楼宇可视化平面图数据单元将基于楼宇可视化平面图配置单元所生成的数据保存为json数据，数据包括：楼宇可视化平面图的名称、组件数据、平面图数据、平面图唯一标识。
16.前述的一种基于web端的楼宇组态系统中，将json数据存储到mongodb数据库当中，通过对json数据的解析映射到楼宇可视化平面图编辑模块中，对平面图进行二次开发。
17.前述的一种基于web端的楼宇组态系统中，所述楼宇可视化平面图展示模块中设有自定义配置菜单单元；
18.自定义配置菜单单元，通过建立菜单数据，并将菜单数据保存到mongodb数据库中；所述菜单数据包括：父菜单标识、子菜单标识、菜单名称、映射的楼宇平面图。
19.前述的一种基于web端的楼宇组态系统中，楼宇可视化平面图展示模块，在解析自定义配置菜单单元中所有菜单数据后，根据每条数据的父、子菜单建立一个树级结构，将该树级结构数据映射到模块中，创建一个左侧菜单栏；通过点击选择不同名称的菜单栏，显示该菜单栏下所配置的楼宇平面图。
20.前述的一种基于web端的楼宇组态系统中，使用操作方法：打开楼宇可视化平面图配置单元页面中的画布，通过组件拖拽单元拖拽组件库中的组件到画布当中，利用组件编辑单元对于不同组件所对应的不同设备的真实点位映射进行配置组件属性，然后进行绑点配置，再通过平面图底图配置单元将楼宇的3d/2d展示平面图导入到画布的背景当中，利用楼宇可视化平面图数据单元保存当前画布；随后将已保存内容通过自定义配置菜单配置到楼宇平面图展示模块，最后前往楼宇可视化平面图展示模块即可查看配置结果。
21.前述的一种基于web端的楼宇组态系统中，绑点配置即点位绑定，是基于物模型的分类管理，映射到真实设备的对应点位；不同的组件分别映射了不同设备下的点位；
22.所述物模型，通过对不同设备下的点位以产品、设备、属性的模型进行分类，组件通过解析物模型，从而能够精确定位真实设备，达到与设备之间的实时通讯。
23.与现有技术相比，本发明基于react搭建了由楼宇可视化平面图展示模块、楼宇可视化平面图编辑模块和楼宇可视化平面图配置数据模块所组成的框架，利用web端丰富的ui生态，建立了一个美观便捷，对用户操作来说友好的系统；同时，react框架开发了低代码
化的楼宇平面图的自定义功能，对于不同场景中的实际展示都具有较强的适配性，也能够极大减少由后期返工所带来的人力成本与时间成本。本发明具有方便工程人员与实施人员多人参与部署配置设备点位的采集与监控的优点；同时其还支持同一网关下的网段访问，对于硬件配置要求低，仅需要一台32g内存的服务器即可。
24.本技术采用的web端b/s架构适用于工程人员与实施人员对大型楼宇设施的多人同时开发，其缩短了项目实施到落地的时间、减少了因项目实施落地而产生的人工成本；同时在web端下丰富的ui生态下，大大提高了用户的满意度，减少了工程人员和实施人员在项目部署落地后期的返工概率；其简单操作的拖拽式低代码化的楼宇可视化平面图编辑模块，极大减少由后期返工所带来的人力成本与时间成本。
25.楼宇可视化平面图编辑模块内置丰富的组件库，其组件库是基于大量的真实设备分析得出，再通过拖出组件库中的组件并配置属性，以达到快速定位到真实设备属性的目的。
26.本技术还创建了物模型，用于对采集点位进行统一管理分析，映射到真实点位中。
27.综上所述，本发明不仅对用户操作友好，而且对于不同场景中的实际展示都具有较强的适配性。
附图说明
28.图1是本技术的功能框图。
29.附图中的标记说明：1-楼宇可视化平面图展示模块，2-楼宇可视化平面图编辑模块，3-楼宇可视化平面图配置数据模块，4-自定义配置菜单单元，201-组件库，202-组件编辑单元，203-组件拖拽单元，204-平面图底图配置单元，301-楼宇可视化平面图配置单元，302-楼宇可视化平面图数据单元。
具体实施方式
30.下面结合附图和实施例对本发明作进一步的说明，但并不作为对本发明限制的依据。
31.实施例。一种基于web端的楼宇组态系统，如图1所示，基于react框架架构建立，利用react脚手架搭建项目，其中包括低代码化的楼宇可视化平面图编辑模块2、实现了读取存储的楼宇可视化平面图配置数据模块3、实现了自定义配置菜单栏4的楼宇可视化平面图展示模块1。
32.所述的楼宇可视化平面图编辑模块2涵盖了组件库201、组件编辑单元202、组件拖拽单元203、平面图底图配置单元204。
33.组件库201基于真实设备的配置，不同组件之间分别能映射到不同的真实设备当中，帮助在实际部署当中能够快速定位到真实点位。
34.所述平面图底图配置单元204(2d/3d平面图配置)，用于导入外部已生成好的楼宇平面图。
35.所述组件拖拽单元203，用于将组件拖拽至已配置好的平面图上，根据现场设备的真实位置进行调整。
36.所述组件编辑单元202，用于配置组件相关的基础属性、动效属性、事件属性。所述
基础属性包含组件的尺寸、位置、角度，组件名称等常规属性，还包括不同组件下的数据属性，数据属性用于对应不同的设备上的点位数据的展示与下发。动效属性则用于控制组件执行的动画效果：上下左右跳动、颜色变化、闪烁隐藏。事件属性用于为组件定制单机、双击事件，用于跳转链接、弹窗打开新的楼宇平面图、跳转至新的楼宇平面图、执行js脚本。
37.楼宇可视化平面图配置数据模块，包括楼宇可视化平面图配置单元301和楼宇可视化平面图数据单元302，楼宇可视化平面图数据单元302将基于楼宇可视化平面图配置单元301所生成的数据保存为json数据，数据包括：楼宇可视化平面图的名称、组件数据、平面图数据、平面图唯一标识。数据存储到mongodb数据库当中，通过对数据的解析映射到楼宇可视化平面图编辑中，可对平面图进行二次开发。
38.楼宇可视化平面图展示模块中的自定义配置菜单单元，则是通过在建立数十条菜单数据，其菜单数据包括但不限于：父菜单标识、子菜单标识、菜单名称、映射的楼宇平面图，并将菜单数据保存到mongodb数据库中。
39.楼宇可视化平面图展示模块，在解析所有菜单数据，根据每条数据的父、子菜单建立一个树级结构，将该树级结构数据映射到模块中，创建一个左侧菜单栏。通过点击选择不同名称的菜单栏，显示该菜单栏下所配置的楼宇平面图展示模块。
40.实施人员与工程人员在真实操作中，首先前往楼宇可视化平面图配置单元的页面(即画布页面)，通过拖拽组件库中的组件到画布当中，对于不同组件所对应的不同设备的真实点位映射进行配置组件属性，然后进行绑点配置，再通过将楼宇的3d/2d展示平面图导入到画布的背景当中，将当前画布配置好的数据利用楼宇可视化平面图数据单元进行保存，进而将已保存内容通过上述的自定义配置菜单功能配置到展示页面，最后前往楼宇可视化平面图展示页面即可查看配置结果。
41.其保存功能是通过将画布下的组件数据、背景图片数据转为json格式保存到mongodb数据库中。
42.点位绑定功能则是基于物模型的分类管理，映射到真实设备的对应点位，而不同的组件分别映射了不同设备下的点位，基本涵盖了实际设备。不同的组件将物模型的点位映射到自身：如报警点、故障点和状态点，进行可视化的展示。其通用的可视化展示逻辑为：报警则组件显示为黄色、故障则组件显示为红色、状态离线则显示为灰色、一切正常则显示为绿色。
43.所谓物模型是一种点位的管理模式，通过对不同设备下的点位以产品、设备、属性的模型进行分类，组件通过解析物模型，从而能够精确定位真实设备，达到与设备之间的实时通讯。
44.本发明具有支持多人同时部署、ui生态丰富、用户层面操作便捷页面美观、所创建的楼宇可视化平面图复用性高、所创建的物模型复用率高等优点，是一个适用于快速落地的楼宇组态软件。
45.react:react是用于构建用户界面的javascript库，起源于facebook的内部项目，该公司对市场上所有javascriptmvc框架都不满意，决定自行开发一套，用于架设instagram的网站。于2013年5月开源。
46.mongodb:mongodb是一个基于分布式文件存储的数据库。由c++语言编写。旨在为web应用提供可扩展的高性能数据存储解决方案。

技术特征：
1.一种基于web端的楼宇组态系统，其特征在于：包括楼宇可视化平面图展示模块(1)，楼宇可视化平面图展示模块(1)连接有楼宇可视化平面图配置数据模块(3)，楼宇可视化平面图配置数据模块(3)连接有楼宇可视化平面图编辑模块(2)。2.根据权利要求1所述的一种基于web端的楼宇组态系统，其特征在于：所述楼宇可视化平面图编辑模块(2)包括组件库(201)、组件编辑单元(202)、组件拖拽单元(203)和平面图底图配置单元(204)。3.根据权利要求2所述的一种基于web端的楼宇组态系统，其特征在于：所述组件库(201)，用于储存不同的组件，并将不同组件分别映射到不同的真实设备当中；组件编辑单元(202)，用于配置与组件相关的基础属性、动效属性和事件属性；平面图底图配置单元(203)用于导入外部已生成好的楼宇平面图；组件拖拽单元(204)用于将组件拖拽至已配置好的平面图上。4.根据权利要求3所述的一种基于web端的楼宇组态系统，其特征在于：所述基础属性包含常规属性和数据属性；所述常规属性包括组件的尺寸、位置、角度，组件名称；数据属性用于对应不同的设备上的点位数据的展示与下发；所述动效属性用于控制组件执行的动画效果：上下左右跳动、颜色变化、闪烁隐藏；所述事件属性用于为组件定制单机、双击事件，用于跳转链接、弹窗打开新的楼宇平面图、跳转至新的楼宇平面图、执行js脚本。5.根据权利要求1所述的一种基于web端的楼宇组态系统，其特征在于：所述楼宇可视化平面图配置数据模块(3)包括楼宇可视化平面图配置单元(301)和楼宇可视化平面图数据单元(302)，楼宇可视化平面图数据单元(302)将基于楼宇可视化平面图配置单元(301)所生成的数据保存为json数据，数据包括：楼宇可视化平面图的名称、组件数据、平面图数据、平面图唯一标识。6.根据权利要求5所述的一种基于web端的楼宇组态系统，其特征在于：将json数据存储到mongodb数据库当中，通过对json数据的解析映射到楼宇可视化平面图编辑模块中，对平面图进行二次开发。7.根据权利要求1所述的一种基于web端的楼宇组态系统，其特征在于：所述楼宇可视化平面图展示模块(1)中设有自定义配置菜单单元(4)；自定义配置菜单单元(4)，通过建立菜单数据，并将菜单数据保存到mongodb数据库中；所述菜单数据包括：父菜单标识、子菜单标识、菜单名称、映射的楼宇平面图。8.根据权利要求7所述的一种基于web端的楼宇组态系统，其特征在于：楼宇可视化平面图展示模块(1)，在解析自定义配置菜单单元中所有菜单数据后，根据每条数据的父、子菜单建立一个树级结构，将该树级结构数据映射到模块中，创建一个左侧菜单栏；通过点击选择不同名称的菜单栏，显示该菜单栏下所配置的楼宇平面图。9.根据权利要求1-8中任一项所述的一种基于web端的楼宇组态系统，其特征在于，使用操作方法：打开楼宇可视化平面图配置单元页面中的画布，通过组件拖拽单元拖拽组件库中的组件到画布当中，利用组件编辑单元对于不同组件所对应的不同设备的真实点位映射进行配置组件属性，然后进行绑点配置，再通过平面图底图配置单元将楼宇的3d/2d展示平面图导入到画布的背景当中，利用楼宇可视化平面图数据单元保存当前画布；随后将已保存内容通过自定义配置菜单配置到楼宇平面图展示模块，最后前往楼宇可视化平面图展
示模块即可查看配置结果。10.根据权利要求9所述的一种基于web端的楼宇组态系统，其特征在于：绑点配置即点位绑定，是基于物模型的分类管理，映射到真实设备的对应点位；不同的组件分别映射了不同设备下的点位；所述物模型，通过对不同设备下的点位以产品、设备、属性的模型进行分类，组件通过解析物模型，从而能够精确定位真实设备，达到与设备之间的实时通讯。

技术总结
本发明公开了一种基于web端的楼宇组态系统,包括楼宇可视化平面图展示模块，楼宇可视化平面图展示模块连接有楼宇可视化平面图配置数据模块，楼宇可视化平面图配置数据模块连接有楼宇可视化平面图编辑模块。本发明基于react搭建了由楼宇可视化平面图展示模块、楼宇可视化平面图编辑模块和楼宇可视化平面图配置数据模块所组成的框架，利用web端丰富的UI生态，建立了一个美观便捷，对用户操作来说友好的系统；同时，react框架开发了低代码化的楼宇平面图的自定义功能，对于不同场景中的实际展示都具有较强的适配性，也能够极大减少由后期返工所带来的人力成本与时间成本。后期返工所带来的人力成本与时间成本。后期返工所带来的人力成本与时间成本。


技术研发人员：虞龙飞 吴孝朝 汪红亮 史文斌 李沁贇
受保护的技术使用者：浙江源创智控技术有限公司
技术研发日：2023.06.08
技术公布日：2023/9/12