一种自由组件呈现数据驾驶舱的方法技术

本发明专利技术公开了一种自由组件呈现数据驾驶舱的方法，包括：基于应用场景需求，选择对应的模板，其中不同的模板包含不同的组件数量及组件类型；将已选择的模板和组件以数组对象形式保存到终端，并通过拼凑组合生成预览文件；根据不同的组件类型，分别采用本地保存、MQTT通讯和接口获取更新的方式显示组件内容；在外层定义一个组件，将该组件作为外壳，在组件中对字体、间距跟随屏幕分辨率进行等比伸缩；通过Scss预编译语言呈现不同背景色下的数据；采用轮询和主动刷新对数据进行呈现和刷新；根据终端存储的数据进行动态模板组件匹配，然后根据插槽形式导入不同组件进行可视化展示；本方法具有满足多样化的数据显示需求的特点。具有满足多样化的数据显示需求的特点。具有满足多样化的数据显示需求的特点。

【技术实现步骤摘要】
一种自由组件呈现数据驾驶舱的方法


[0001]本专利技术涉及数据驾驶舱
，特别涉及一种自由组件呈现数据驾驶舱的方法。

技术介绍

[0002]目前，在智能建筑中，往往存在很多复杂的智能化子系统，比如楼宇自控系统、安防系统、办公系统、能耗系统、资产管理等，不同的管理者，不同的数据驾驶舱来快速查看所关注的数据情况，通过一个综合的数据驾驶舱，来显示核心的关键数据。现在应用的数据驾驶舱，在现实使用中，存在一些问题：（1）智能化系统类型和功能不同，需要展示内容和布局样式多样，则会导致数据驾驶舱的布局和组件越来越多，组件与配置页面的交互的复杂度，组件复用效果弱化。（2）不同的使用场景下，比如白天和黑夜，受到光照影响，单一固定的背景色，无法呈现出最佳的视觉观感。（3）实际应用中，需要在不同的显示大屏上展示数据驾驶舱数据，目前主流的vh、vw、rem组合方式仅能适配一些特定尺寸的展示，超出限定尺寸会出现显示错乱及加载时长问题。

技术实现思路

[0003]为实现上述目的，专利技术人提供了一种自由组件呈现数据驾驶舱的方法，包括以下步骤：S1：通过模板配置模块，基于应用场景需求，选择对应的模板，其中不同的模板包含不同的组件数量及组件类型；S2：将已选择的模板和组件以数组对象形式保存到终端，并通过拼凑组合生成预览文件；S3：根据不同的组件类型，分别采用本地保存、MQTT通讯和接口获取更新的方式显示组件内容；S4：在外层定义一个组件，将该组件作为外壳，在组件中使用transformscale对字体、间距跟随屏幕分辨率进行等比伸缩；S5：采用深色和浅色的处理方式，通过Scss预编译语言呈现不同背景色下的数据；S6：采用轮询和主动刷新对数据进行呈现和刷新；S7：根据终端存储的数据进行动态模板组件匹配，然后根据插槽形式导入不同组件进行可视化展示。
[0004]作为本专利技术的一种优选方式，所述组件根据功能进行划分，包括用于展示实时当前会议的会议信息组件、用于展示近期预约会议的会议列表组件、用于展示能耗数据统计图表的能耗组件。
[0005]作为本专利技术的一种优选方式，所述组件类型包括图片、物联网设备动态数据、告警动态信息、视频监控画面、会议系统动态数据、页面快捷跳转入口、能耗统计图表，并一键复制。
[0006]作为本专利技术的一种优选方式，所述S3包括步骤：若显示组件内容为图片，则将图片保存在本地文件中；若显示组件内容为互联网设备动态数据，则根据设备的标识字段，部署设备和变更信息到MQTT网关，然后MQTT协议与MQTT网关进行通信，采集数据，组件的操作项下发指令给MQTT网关，通过MQTT网关发送给设备，设备执行对应的功能；若显示组件内容为告警动态信息、视频监控画面、会议系统动态数据、能耗统计图表，则通过接口返回数据，进
行数据展示；若显示组件内容为页面快捷跳转入口，则通过配置页面路由，进行页面跳转。
[0007]作为本专利技术的一种优选方式，所述S4还包括步骤：根据窗口视图比例，进行transform: scale wh /ww 缩放，其中wh值表示浏览器窗口高度与UI图高度比例、ww值表示浏览器窗口宽度与UI图高度比例。
[0008]作为本专利技术的一种优选方式，所述S5还包括步骤：设置唯一可维护的Scss文件，定义代码约束，通过Scss预处理编译语言定义颜色变量，数据驾驶舱设定深色系与浅色系，设定index.scss文件进行维护，通过在window.document.documentElement定义data
‑
theme变量, 其中，深色系data
‑
theme设置为dark，浅色系data
‑
theme设置为light，根据操作DOM方式修改data
‑
theme变量来换肤；在靠近数据驾驶舱的显示屏位置设置光照传感器设备，通过MQTT协议实时监听光照传感器设备返回的光照强度数值；通过实时采集到的实时光照数值L，对比深色和浅色模式的光照值区间值，切换深色或浅色背景。
[0009]作为本专利技术的一种优选方式，所述S6包括步骤：通过MQTT协议请求数据，对数据进行存储或默认数据，在网络波动及MQTT协议断连下，先从缓存中取值，初始化从默认数据中取值；通过MQTT协议请求数据，当消息发送失败时，对错误消息进行监控，并写入本地文件，起定时任务进行重发或赋默认值。
[0010]区别于现有技术，上述技术方案所达到的有益效果有：方法中通过自由组件和模版搭配，可满足多样化的数据显示需求；自动调整数据驾驶舱背景，满足不同场所或不同空间内的因光照度不一样的最佳显示需求；自动兼容不同屏幕尺寸的分辨率，让页面在不同分辨率的屏幕下都保持正常的显示效果及比例；除此之外，提高了物联网设备实时数据的加载效率。
附图说明
[0011]图1为具体实施方式中大屏配置操作流程图。
[0012]图2为具体实施方式中MQTT数据补偿方案。
具体实施方式
[0013]为详细说明技术方案的
技术实现思路
、构造特征、所实现目的及效果，以下结合具体实施例并配合附图详予说明。
[0014]本实施例提出了一种自由组件呈现数据驾驶舱的方法，通过图形化自由组件组合、Scss编译语言、布局设计技术，解决了数据驾驶舱设计、数据驾驶舱主题、各不同的显示大屏的数据适配的问题，达到了自由组合可视化驾驶舱效果。
[0015]整体方法主要包括步骤：S1通过模板配置模块，基于应用场景需求，选择对应的模板，其中不同的模板包含不同的组件数量及组件类型；S2：将已选择的模板和组件以数组对象形式保存到终端，并通过拼凑组合生成预览文件；S3：根据不同的组件类型，分别采用本地保存、MQTT通讯和接口获取更新的方式显示组件内容；S4：在外层定义一个组件，将该组件作为外壳，在组件中使用transformscale对字体、间距跟随屏幕分辨率进行等比伸缩；S5：采用深色和浅色的处理方式，通过Scss预编译语言呈现不同背景色下的数据；S6：采用轮询和主动刷新对数据进行呈现和刷新；S7：根据终端存储的数据进行动态模板组件匹配，然后根据插槽形式导入不同组件进行可视化展示。
[0016]具体的，首先通过数据驾驶舱的模版配置模块，基于应用场景需求，选择对应的模版，不同的模板包含不同的组件数量及类型；模板配置模块用于选择模板，每个模板代表一种风格，通过form表单配置参数形式自定义模板（参数如下：模板名称、模板布局方式参数）；组件根据功能进行划分，比如会议信息组件负责展示实时当前会议，会议列表组件展示近期，即最近预约的会议，能耗组件展示能耗相关数据的统计图表。
[0017]组件的类型包括图片、物联网设备动态数据、告警动态信息、视频监控画面、会议系统动态数据、页面快捷跳转入口、能耗统计图表等，支持自定义拓展新组件。组件支持一键复制，一个组件对应一条数据，参数如下：{template：
’
模板数据
’
, componentName:
ꢀ‘
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种自由组件呈现数据驾驶舱的方法，其特征在于，包括以下步骤：S1：通过模板配置模块，基于应用场景需求，选择对应的模板，其中不同的模板包含不同的组件数量及组件类型；S2：将已选择的模板和组件以数组对象形式保存到终端，并通过拼凑组合生成预览文件；S3：根据不同的组件类型，分别采用本地保存、MQTT通讯和接口获取更新的方式显示组件内容；S4：在外层定义一个组件，将该组件作为外壳，在组件中使用transformscale对字体、间距跟随屏幕分辨率进行等比伸缩；S5：采用深色和浅色的处理方式，通过Scss预编译语言呈现不同背景色下的数据；S6：采用轮询和主动刷新对数据进行呈现和刷新；S7：根据终端存储的数据进行动态模板组件匹配，然后根据插槽形式导入不同组件进行可视化展示。2.根据权利要求1所述的自由组件呈现数据驾驶舱的方法，其特征在于：所述组件根据功能进行划分，包括用于展示实时当前会议的会议信息组件、用于展示近期预约会议的会议列表组件、用于展示能耗数据统计图表的能耗组件。3.根据权利要求1所述的自由组件呈现数据驾驶舱的方法，其特征在于：所述组件类型包括图片、物联网设备动态数据、告警动态信息、视频监控画面、会议系统动态数据、页面快捷跳转入口、能耗统计图表，并一键复制。4.根据权利要求1所述的自由组件呈现数据驾驶舱的方法，其特征在于，所述S3包括步骤：若显示组件内容为图片，则将图片保存在本地文件中；若显示组件内容为互联网设备动态数据，则根据设备的标识字段，部署设备和变更信息到MQTT网关，然后MQTT协议与MQTT网关进行通信，采集数据，组件的操作项下发指令给MQTT网关，通过MQTT网关发送给设备，设备执行对应的功能；若显示组件内容为告警动态信息、视频监控画面、会议系统动态数...

【专利技术属性】
技术研发人员：汪浩，姬利，夏丽鑫，业晓波，杨芃，
申请(专利权)人：江苏橙智云信息技术有限公司，
类型：发明
国别省市：