[发明专利]一种定制化页面的全屏显示方法及储存介质、系统

说明书

本发明公开了一种定制化页面的全屏显示方法及储存介质、系统,运行以下步骤：采集页面平面设计图，所述页面平面设计图上包括背景图像以及若干个设备图像；切割分离页面平面设计图，将若干个设备图像从背景图像上分离以形成若干个预留窗口；获取设备的位置信息；将与设备对应的设备状态元素按照位置信息设置于与设备对应的预留窗口上，并且调整设备状态元素的比例以适配于预留窗口以形成整合布局页面；监听外部可视窗口的变化，根据可视窗口的变化并且基于自适应屏幕算法调整整合布局页面以全屏渲染显示；本设计控制便捷，处理成整合布局页面后才自适应变化，实现灵活变化，处理程序简单，对硬件配置要求低。

技术领域

本发明涉及物联网可视化显示领域，特别是一种定制化页面的全屏显示方法及储存介质、系统。

背景技术

近年来社会不断进步，移动互联网快速发展，以及云计算、5G移动通信等技术日趋成熟，推动了物联网、智慧城市、智能家居等的迅速发展，智能设备在人们日常生活中无处不在。随着智能设备在人类生活中的普及，人们对智能设备状态的监测与控制就显得越来越重要，同时，越来越多的公共设施都装配了智能设备，为了更好的为管理人员提供对智能设备状态的查看与监控，并且能够更精确的定位故障源，就需要根据不同的现场环境以及不同的智能设备定制个性化的监控视图，并且通过显示屏幕进行显示；

一般来讲，显示屏幕上展示的监控视图中包括固定不动的背景图像以及根据设备的运行状态需要相应改变的设备状态元素，由于每个现场环境的格局不同，也就意味着每个现场环境都对应着不同的背景图像，同时，设备的安装位置的不同，也意味着设备在背景图像上的相对位置也不同，设计者一般只会提供对应该现场环境的页面平面设计图，页面平面设计图上包括背景图像以及若干个设备图像，能够从页面平面设计图上看出现场环境的格局以及设备的安放位置，但是页面平面设计图仅仅是以图片格式提供，系统无法通过对其上的设备图像进行简单的处理即可改变设备图像的呈现方式，从而反映设备的状态；同时，用于显示的屏幕规格也不尽相同，为了能够兼容不同的设备屏幕，就需要开发多套应用程序，那么自动化构建定制化页面与最大化自适应屏幕就愈发的重要。

目前，传统的全设备屏幕适应方法有以下几种：

一、Media Queries(媒体查询)方式进行适应，具体的在head(HTML文档的头部)中添加一段Media Queries(媒体查询)的style(样式)代码，判断不同的设备设置不同的布局和像素。该方式的本质是针对不同的屏幕尺寸写多套布局，这种方式可以做到像素比的判断，方法简单，当屏幕宽度发生变化时可响应式展示。但是其代码量比较重，维护起来也不方便，同时也会损失一些PC端和移动端各自特有的交互方式。

二、Flex弹性盒布局，通过固定viewport(可视区域)的高度，利用flex的栅格布局特性来自适应屏幕的宽度。这种方式的布局精简不需要额外引入第三方库来支持栅格布局，但是这种方式无法做到全屏自适应，并且兼容性上也没有那么好。

三、通过CSS3(第三代层叠样式表标准)中的rem(根元素的字体大小)单位配合全局的font-size(字体大小)属性进行各设备的屏幕适应，具体的通过屏幕的宽度来设定根元素的font-size，在需要适配的元素使用rem来设置宽高，这种方式只能模糊适配，同样无法做到全屏自适应。

四、通过第三代层叠样式表标准中的vw(可视区域的宽度百分比)与vh(可视区域的高度百分比)单位进行适配。本质就是相对可视窗口的大小来设置元素的大小，从而实现适配。此方式直观，利于维护，但是如果只考虑其中一个单位进行适配就无法做到全屏自适应，如果同时使用vw和vh进行设置容易导致页面图片的压缩变形，其次，兼容性上也不理想。

以上方式都不能很好的做到根据现场的环境定制化显示不同的页面，容易出现精度不够图像偏差等问题，并且也很难做到以最佳全屏适应方式进行适配不同的设备屏幕。

发明内容