一种建筑自控系统组态页面的配置平台的制作方法

1.本发明属于控制系统技术领域，涉及一种建筑自控系统组态页面的配置平台。


背景技术：

2.组态指一些数据采集与过程控制的专用软件，是面向监控与数据采集的自动控制系统监控层一级的软件平台和开发环境，能以灵活多样的组态方式(而不是编程方式)提供良好的用户开发界面和简捷的使用方法。实际生产中，可以通过灵活的组态配置快速建立工业自动控制系统的监控功能。
3.目前，在智能建筑中，现在应用的自控系统组态存在如下问题：现有的组态制作一般为c/s架构，需要安装客户端，且不开源，需要缴纳一定会员费用，且更换电脑，需要重新安装；现有组态配置一般是工业化风格，风格单一，支持元件少，且无法做到定制化开发，如展示冷水机组拓扑图、展示制冷机房运行线路、数据统计图表和复杂的大屏页面等，不同的项目页面需要定制化开发，复杂、动态的页面无法实现；现阶段组态中支持元件过少，无法支持多种组合方式，无法生成多样化页面；现有组态配置多样化控制，根据不同的状态展示不同的效果，现有一般使用gif等动效图片进行动态切换。


技术实现要素：

4.为解决现有技术存在的难题，本发明提供了一种建筑自控系统组态页面的配置平台，包括元件模块、数据模型和视图区域模块；所述视图区域模块包括画布区域和预览图区域；元件模块的各个元件关联相应的组件，所有组件构成组件库；元件模块的元件被拖拽至画布区域后，生成相应的节点；数据模型用于存储节点所对应的图形的拓扑结构，包括父子关系、连接关系和层次关系，用于存储节点所对应的图形的属性，用于响应用户在画布区域中节点的操作，所述响应包括：对节点的图形中的元素进行增加、删除和修改；对配置完成的组态生成可视化页面；对节点的组件的属性进行设置；元件的节点与建筑自控系统的设备点位关联，数据模型接收设备点位的实时数据，根据设备点位的实时数据进行配置数据的动态切换，并实时更新组态展示效果。
5.进一步地，所述元件模块的元件分为基础元件、聚合元件、自定义元件及图库；每个元件都有唯一的元件标识，用type表示；每个节点都有一个唯一的id，以id属性来区分数据模型中的每个节点；根据节点所对应的元件的type值和节点的id在数据模型中查找和操作节点；通过修改节点的初始属性来配置节点的图形结构，通过id获取当前节点，并进行当前节点的单击、双击的事件处理。
6.进一步地，基础元件包括矩形rect、圆形circle和直线line，聚合元件包括立方体cube，自定义元件包括图表chart、地图map和3d模型，图库包括svg、png和gif格式的图片。
7.进一步地，所述聚合元件通过自定义形状和绘制方法来实现，具体包括以下步骤：
创建一个形状工厂，该形状工厂为shape类，该形状工厂中包含所有的基础元件的形状，还包括使用html5 canvas或html5 svg来绘制的形状；定义一个聚合元件的形状类，该形状类继承形状工厂的形状，用来描述聚合元件的属性和行为；使用唯一字符串标识符将新定义的聚合元件与其对应的类关联起来；通过扩展和使用形状工厂来生成多个聚合元件。
8.进一步地，所述自定义元件通过配置元件的type值及相对应的图形结构和初始属性的方法快速增加；当需要增加自定义元件时，设置自定义元件的type值，从外部导入此元件所对应的组件，并将导入的组件同步更新至组件库，并创建外层容器包裹此组件使之嵌入到基础元件所对应的图形中。
9.进一步地，所述数据模型包括图形结构、属性、数据序列化、事件处理四部分，数据模型通过其包含的各个类的继承和组合关系来实现上述存储、响应功能，具体包括：graph类：是组态编辑器的核心类，用于控制组态的创建、编辑、渲染行为；通过事件处理机制、封装事件管理和派发，响应用户操作；modal类：是组态编辑器的模型类，用于存储和管理图形的数据，包含了节点的层次结构和属性，用于对节点进行增、删、改、查操作；geometry类：是组态编辑器的几何属性类，包含了节点的位置坐标、宽度、高度信息；cell类：代表节点的结构，用于存储节点的图形元素之间的拓扑结构，所述拓扑结构包括父子关系、连接关系和层次关系；通过对节点的管理，创建、删除、移动和重排节点的图形元素，修改图形元素的大小、位置，实现图形的结构管理和布局；style类：是组态编辑器的样式类，用于定义和管理节点的图形元素的样式；decode类：是组态编辑器的序列化类，用于将多个节点序列化为json数据或者xml结构文件，将组态数据保存到服务器，适用于多种设备；也用于通过将数据还原为可编辑的图形对象，进行对节点的图形的再次编辑保存；render类：是组态编辑器的渲染器类，负责将图形元素的数据渲染到预览图上。
10.进一步地，所述建筑自控系统的设备包括关联冷水机组、冷却水泵和新风机组，通过设备点位远程监控和控制设备，实时监测设备的状态、温度、湿度、压力等参数及控制设备参数，对设备进行自动化控制和调节，以实现能效优化和舒适化管理。
11.与现有技术相比，本发明具备以下有益效果：使用html5技术标准，采用b/s架构，通过自由拖拽元件生成svg展示，支持多种聚合组件，支持嵌入式组件，支持大屏可视化、拓扑图、设备运行图等多种复杂页面，具有可缩放性、文件小、加载速度更快，支持自定义复杂页面配置，多样化控制动画效果，适用于绘制上位机软件、流程图配置、多样化大屏的配置等；通过元件的节点关联设备点位，进行设备的接入和控制设计，视图可视化展示实现自动化控制和智能化管理， 在建筑自控系统的组态中通过软件系统对建筑楼宇中的设备、系统、网络进行编程配置，使其可以实现自动化控制和智能化管理；通过组态技术，配置建筑楼宇中的各种设备可以自动配合、互相协作，达到最佳的运行状态，同时也能够提高设备的运行效率、降低运行成本和增强安全性。
附图说明
12.图1为本发明的实施例的元件和对应组件的示例图。
13.图2为本发明的实施例的整体结构示意图。
14.图3为本发明的实施例的数据模块的结构示意图。
15.图4为本发明的实施例的生成自定义元件的流程示意图。
16.图5为本发明的实施例的用户交互界面的示意图。
17.图6为本发明的实施例的应用之一的组态的具体展示图的左部分。
18.图7为本发明的实施例的应用之一的组态的具体展示图的右部分。
19.图8为本发明的实施例的应用之一的组态配置大屏的具体展示图的左部分。
20.图9为本发明的实施例的应用之一的组态配置大屏的具体展示图的右部分。
21.图10为本发明的实施例的应用之一的楼栋的各个房间的设备拓扑图的左部分。
22.图11为本发明的实施例的应用之一的楼栋的各个房间的设备拓扑图的右部分。
具体实施方式
23.下面结合说明书附图和具体的实施例，对本发明作详细描述。
24.针对上述技术问题，本发明提出通过一个综合的总览配置平台，使用html5技术标准，采用b/s架构，通过自由拖拽元件生成svg展示，支持多种聚合组件，支持嵌入式组件，支持大屏可视化、拓扑图、设备运行图等多种复杂页面，具有可缩放性、文件小、加载速度更快，支持自定义复杂页面配置，多样化控制动画效果，适用于绘制上位机软件、流程图配置、多样化大屏的配置等。
25.如图5所示，本实施例提供了一种建筑自控系统组态页面的配置平台，包括元件模块、数据模型和视图区域模块；所述视图区域模块包括画布区域和预览图区域；元件模块的各个元件关联相应的组件，所有组件构成组件库，如图1所示；元件模块的元件被拖拽至画布区域后，生成相应的节点；数据模型用于存储节点所对应的图形的拓扑结构，包括父子关系、连接关系和层次关系，用于存储节点所对应的图形的属性，用于响应用户在画布区域中节点的操作，所述响应包括：对节点的图形中的元素进行增加、删除和修改；对配置完成的组态生成可视化页面；对节点的组件的属性进行设置。元件的节点与建筑自控系统的设备点位关联，数据模型接收设备点位的实时数据，根据设备点位的实时数据进行配置数据的动态切换，并实时更新组态展示效果。所述建筑自控系统的设备包括关联冷水机组、冷却水泵和新风机组，通过设备点位远程监控和控制设备，实时监测设备的状态、温度、湿度、压力参数及控制设备参数，对设备进行自动化控制和调节，以实现能效优化和舒适化管理。
26.组态页面的配置平台是由元件区域、数据模型及视图区域模块组成，通过组态元件的灵活拓展方法，实现通用化，高度复用，画布的可视化控制及元件的多样化配置形成，通过元件的节点关联设备点位，进行设备的接入和控制设计，如图2所示。
27.元件区域包括若干元件，元件分为基础元件（矩形rect、圆形circle、直线line等）、聚合元件（立方体cube等组合型元件）、自定义元件（图表chart、地图map、3d模型嵌入等复杂交互元件）及图库（svg、png、gif等格式），支持多种图片上传应用到画布中。
28.数据模型包括图形结构、属性、数据序列化和事件处理。
29.通过拖拽元件至画布区域，生成相应的节点。每个节点都有一个唯一的id，以id属
性来区分数据模型中的每个节点，通过修改节点的初始属性来配置节点的图形结构，通过id获取当前节点，并进行当前节点的单击、双击等事件处理；每个元件都有唯一的元件标识，用type表示，根据节点所对应的元件的type值和节点的id在数据模型中查找和操作节点；例如，当基础元件为矩形时，其type值为rect，则匹配对应的节点的图形结构为“《rect》《/rect》”，并设置其初始属性，该初始属性包括横轴x、竖轴y、宽度width和高度height，具体如下：《rect x=“20
”ꢀ
y=“20”width=“100
”ꢀ
height=“100”》《/rect》。
30.基础元件所对应的组件为基础组件，基础组件通过json格式配置（如{ type: '', x: '', y: '', width: '', height: ''，... }）。
31.聚合元件通过自定义形状和绘制方法来实现，具体包括以下步骤：创建一个形状工厂（shape类），其中包含所有的基础元件的形状，还包括使用html5 canvas或html5 svg来绘制的形状；定义一个聚合元件的形状类，该形状类继承形状工厂的形状，用来描述元件的属性和行为；使用唯一字符串标识符（如立方体cubeshape、圆柱cylindershape）将新定义的与其对应的类关联起来；通过扩展和使用形状工厂来生成多个聚合元件。
32.自定义元件通过配置元件的type值及相对应的图形结构和初始属性的方法快速增加；当需要增加自定义元件时，设置自定义元件的type值，从外部导入此元件所对应的组件，并将导入的组件同步更新至组件库，并创建外层容器包裹此组件使之嵌入到元件所对应的图形中。如地图元件（map），首先配置type值为map，导入地图组件，更新到服务器，然后创建map容器，使之嵌入到map容器中；如图4所示。
33.如图3所示，所述数据模型包括图形结构、属性、数据序列化、事件处理四部分，数据模型用于存储节点所对应的图形的拓扑结构和属性，图形的拓扑结构，包括父子关系、连接关系和层次关系等。通过数据模型，可以轻松地创建、删除、移动和重排图形的元素，以实现图形的结构管理和布局。
34.使用事件处理机制响应用户交互和图形操作，通过封装事件管理和派发，响应用户操作。
35.1、对节点的图形中的元素进行增加、删除和修改；2、设置节点的组件的属性、事件处理的程序和样式；3、对配置完成的组态生成可视化页面。
36.数据模型通过其包含的各个类的继承和组合关系来实现上述存储、响应功能，具体包括：(1)graph类：是组态编辑器的核心类，负责图形模型、视图、事件处理，包含了各种操作方法和属性，用于控制组态的创建、编辑、渲染等行为；使用graph类实现，通过事件处理响应用户交互和对图形的操作，通过封装事件管理和派发，响应用户操作；(2)modal类：是组态编辑器的模型类，用于存储和管理图形的数据，它包含了元件的节点的层次结构和属性，可对元件的节点进行增、删、改、查等操作；(3)geometry类：是组态编辑器的几何属性类，用于描述节点的元素的位置和大
小，包含了元件节点的位置坐标、宽度、高度等信息；(4)cell类：代表节点的结构，用于存储节点的图形元素之间的拓扑结构，所述拓扑结构包括父子关系、连接关系和层次关系；通过对节点的管理，创建、删除、移动和重排节点的图形元素，修改图形元素的大小、位置，实现图形的结构管理和布局；(5)style类：是组态编辑器的样式类，用于定义和管理图形元素的样式，如边框颜色、填充颜色等；(6)decode类：是组态编辑器的序列化类，将数据序列化为图形对象，图形对象序列化为数据；通过将多个节点序列化为json数据或者xml结构文件，将组态数据保存到服务器，适用于多种设备；同时，通过将数据还原为可编辑的图形对象，进行对节点的图形的再次编辑保存；(7)render类：是组态编辑器的渲染器类，负责将图形模型的数据渲染到视图上。
37.graph是整个组态编辑器的控制中心，modal类来管理数据，使用decode类序列化、render类来渲染图形，而cell类与geometry类来描述和操作节点的图形元素的结构和属性，并使用style来定义和修改节点的样式。
38.所述组态页面的配置平台可通过元件节点关联设备的点位，根据节点id设置当前节点的点位信息（从显示输出、字符颜色、按钮输入、按钮动作等配置来设定），组态配置完成生成可视化页面。数据模型通过websocket请求设备的点位的实时数据，通过发送指令，接收点位的实时数据或状态，根据点位的实时数据进行配置数据的动态切换，并实时更新组态展示效果。所述设备包括关联冷水机组、冷却水泵和新风机组，通过关联这些设备的运行状态、运行参数、启停控制及故障告警，管理员通过设备点位远程监控和控制设备，可以实时监测设备的状态、温度、湿度、压力等参数及控制设备参数，这些数据用于建立建筑自控系统，对设备进行自动化控制和调节，以实现能效优化和舒适化管理。同时也可以获取机组的能耗数据，并将其与建筑的能源管理系统进行整合，可以进行能源消耗分析和评估，从而制定有效的能源管理策略，达到节能目的。通过设备点位配置实时告警和告警历史，可以帮助进行故障诊断和维护，通过监测设备的运行数据和性能指标，及时发现故障和异常问题，并进行预警（语音播报）和通知（短信推送），以确保可靠运行。
39.在请求中有如下处理机制：1、网络故障、服务器故障或其他原因导致连接中断，为了处理websocket异常断开，采用消息缓存，自动重连；2、并发处理，可以使用javascript的web worker来创建多个工作线程来处理websocket请求，将任务合理地划分成较小的子任务，并使用多个web workers并行处理这些子任务，充分利用多核处理器和并发性，提高整体处理速度；3、心跳机制 当长连接时，维护连接状态会增加服务器负担，并且过多连接会导致性能问题，客户端和服务器可以定期交换心跳消息以确保连接处于活动状态。如果服务器在一定时间内没有收到心跳消息，可以关闭连接并释放资源。
40.图6和图7是本实施例的应用之一的组态的具体展示图，分为元件区域、画布区域、工具栏及属性设置，元件区域包括基础元件、控制元件、自定义元件（图表组件、模板元件）及图库（svg、png、gif等多种格式图片），图库可通过上传图片的形式应用到画布中，通过拖拽元件至画布区域，生成预览图（预览图区域展示），工具栏提供一些撤销重做、组合取消组
合、锁定解锁、导入导出（通过序列化数据相互转换格式，进行导入导出操作）等一些快速配置操作，右侧属性设置分为页面设置及样式、文本、排列属性设置，可进行画布大小、背影颜色及节点（拖拽进来的元件如矩形、立方体等这些拖拽进画布就会生成一个节点）的背影、字体、排列等操作，点击保存，数据序列化后与后端交互，保存在服务器端。
41.图8和图9是本实施例的应用之一的组态配置大屏的例子，可进行复杂组件的展示，通过一些自定义组件，实现复杂图表、复杂配置。
42.图10和图11是本实施例的应用之一的楼栋的各个房间的设备拓扑图（在医院场景中），然后通过绑定设备点位，视图可视化展示实现自动化控制和智能化管理，例如通过控制空调参数及室内温度可以控制空气质量、温度、湿度等环境参数，确保患者在舒适、安全的环境中接受治疗。同时，建筑自控系统组态技术还可以控制医疗设备的使用，提高医疗设备的效率和安全性。
43.在建筑自控系统的组态中通过软件系统对建筑楼宇中的设备、系统、网络进行编程配置，使其可以实现自动化控制和智能化管理的技术。通过组态技术，配置建筑楼宇中的各种设备可以自动配合、互相协作，达到最佳的运行状态，同时也能够提高设备的运行效率、降低运行成本和增强安全性。
44.组态中提供配置性列表，支持增删改查、排序功能，提供云组态编辑器，绘制现场运行画面，实现对现场的可视化管理，组态客户端是展示现场运行画面，通过一系列操作实现对设备操作。用物联网技术对设备进行可视化管理，并通过绘制组态总览仿真模拟现实环境，实现快速对设备远程操作。
45.以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

技术特征：
1.一种建筑自控系统组态页面的配置平台，其特征在于，包括元件模块、数据模型和视图区域模块；所述视图区域模块包括画布区域和预览图区域；元件模块的各个元件关联相应的组件，所有组件构成组件库；元件模块的元件被拖拽至画布区域后，生成相应的节点；数据模型用于存储节点所对应的图形的拓扑结构，包括父子关系、连接关系和层次关系，用于存储节点所对应的图形的属性，用于响应用户在画布区域中节点的操作，所述响应包括：对节点的图形中的元素进行增加、删除和修改；对配置完成的组态生成可视化页面；对节点的组件的属性进行设置；元件的节点与建筑自控系统的设备点位关联，数据模型接收设备点位的实时数据，根据设备点位的实时数据进行配置数据的动态切换，并实时更新组态展示效果。2.根据权利要求1所述的建筑自控系统组态页面的配置平台，其特征在于，所述元件模块的元件分为基础元件、聚合元件、自定义元件及图库；每个元件都有唯一的元件标识，用type表示；每个节点都有一个唯一的id，以id属性来区分数据模型中的每个节点；根据节点所对应的元件的type值和节点的id在数据模型中查找和操作节点；通过修改节点的初始属性来配置节点的图形结构，通过id获取当前节点，并进行当前节点的单击、双击的事件处理。3.根据权利要求2所述的建筑自控系统组态页面的配置平台，其特征在于，基础元件包括矩形rect、圆形circle和直线line，聚合元件包括立方体cube，自定义元件包括图表chart、地图map和3d模型，图库包括svg、png和gif格式的图片。4.根据权利要求3所述的一种建筑自控系统组态页面的配置平台，其特征在于，所述聚合元件通过自定义形状和绘制方法来实现，具体包括以下步骤：创建一个形状工厂，该形状工厂为shape类，该形状工厂中包含所有的基础元件的形状，还包括使用html5 canvas或html5 svg来绘制的形状；定义一个聚合元件的形状类，该形状类继承形状工厂的形状，用来描述聚合元件的属性和行为；使用唯一字符串标识符将新定义的聚合元件与其对应的类关联起来；通过扩展和使用形状工厂来生成多个聚合元件。5.根据权利要求3所述的建筑自控系统组态页面的配置平台，其特征在于，所述自定义元件通过配置元件的type值及相对应的图形结构和初始属性的方法快速增加；当需要增加自定义元件时，设置自定义元件的type值，从外部导入此元件所对应的组件，并将导入的组件同步更新至组件库，并创建外层容器包裹此组件使之嵌入到基础元件所对应的图形中。6.根据权利要求1所述的建筑自控系统组态页面的配置平台，其特征在于，所述数据模型包括图形结构、属性、数据序列化、事件处理四部分，数据模型通过其包含的各个类的继承和组合关系来实现上述存储、响应功能，具体包括：graph类：是组态编辑器的核心类，用于控制组态的创建、编辑、渲染行为；通过事件处理机制、封装事件管理和派发，响应用户操作；modal类：是组态编辑器的模型类，用于存储和管理图形的数据，包含了节点的层次结构和属性，用于对节点进行增、删、改、查操作；geometry类：是组态编辑器的几何属性类，包含了节点的位置坐标、宽度、高度信息；cell类：代表节点的结构，用于存储节点的图形元素之间的拓扑结构，所述拓扑结构包
括父子关系、连接关系和层次关系；通过对节点的管理，创建、删除、移动和重排节点的图形元素，修改图形元素的大小、位置，实现图形的结构管理和布局；style类：是组态编辑器的样式类，用于定义和管理节点的图形元素的样式；decode类：是组态编辑器的序列化类，用于将多个节点序列化为json数据或者xml结构文件，将组态数据保存到服务器，适用于多种设备；也用于通过将数据还原为可编辑的图形对象，进行对节点的图形的再次编辑保存；render类：是组态编辑器的渲染器类，负责将图形元素的数据渲染到预览图上。7.根据权利要求1所述的建筑自控系统组态页面的配置平台，其特征在于，所述建筑自控系统的设备包括关联冷水机组、冷却水泵和新风机组，通过设备点位远程监控和控制设备，实时监测设备的状态、温度、湿度、压力参数及控制设备参数，对设备进行自动化控制和调节，以实现能效优化和舒适化管理。

技术总结
本发明提供了一种建筑自控系统组态页面的配置平台，包括元件模块、数据模型和视图区域模块；所述视图区域模块包括画布区域和预览图区域；元件模块的各个元件关联相应的组件，所有组件构成组件库；元件模块的元件被拖拽至画布区域后，生成相应的节点；数据模型用于存储节点所对应的图形的拓扑结构。本发明通过自由拖拽元件生成SVG展示，支持多种聚合组件，支持嵌入式组件，支持大屏可视化、拓扑图、设备运行图等多种复杂页面，具有可缩放性、文件小、加载速度更快，支持自定义复杂页面配置，多样化控制动画效果，适用于绘制上位机软件、流程图配置、多样化大屏的配置等。多样化大屏的配置等。多样化大屏的配置等。


技术研发人员：汪浩 姬利 业晓波
受保护的技术使用者：江苏橙智云信息技术有限公司
技术研发日：2023.07.21
技术公布日：2023/8/21