[发明专利]一种自适应终端的可视化大屏动态容器组件

说明书

本发明属于可视化大屏技术领域，具体涉及一种自适应终端的可视化大屏容器组件，包括输入组件和动态容器组件，输入组件作为输入端，动态容器组件作为全局公共组件，在需要时可直接引用到大屏页面，大屏页面以子模板的形式作为@input输入属性传进容器组件的scale‑box内部，开发人员无需进行额外的尺寸转换，可直接使用px作为长度单位进行开发，在面对需求不确定的情况下，既能保证页面的自适应，同时也极大的提高了开发效率。

技术领域

本发明属于可视化大屏技术领域，具体涉及一种自适应终端的可视化大屏动态容器组件。

背景技术

近些年数据可视化成为了热词，数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息，数据可视化大屏投放的需求也随之变得越来越多。

但是数据可视化大屏制作周期长、人力成本高，在面对客户需求不确定的情况下，很难保证开发的大屏页面在面对不同窗口分辨率时展现UI效果的全部内容。

为了适应窗口的分辨率，在窗口分辨率确定的情况下，制作大屏页面通常使用百分比、vw、rem等方案虽然可以保证分辨率在宽高比一致的的情况下自适应终端，但需要通过大量人力进行转换开发，效率低下，灵活度低。在窗口分辨率不定的情况下，开发的大屏页面不能全屏展现UI效果，从而需要浪费大量人力进行页面的调整重构，给人们带来了困扰，因此研究一种自适应终端的可视化大屏动态容器组件是必要的。

发明内容

针对现有设备存在的缺陷和问题，本发明提供一种自适应终端的可视化大屏动态容器组件，有效的解决了现有设备中存在的在开发大屏页面时，针对不同窗口分辨率难以展现UI效果的全部内容的问题，适应性差和调整重构困难的问题。

本发明解决其技术问题所采用的方案是：一种自适应终端的可视化大屏动态容器组件，包括输入组件和动态容器组件；其中输入组件通过定义@Input输入属性动态的接受用户传入的各种数据和html模板内容；并由@Input输入属性提取页面的属性；动态容器组件的html结构包括两层div，即作为父级div标签的container-box层和作为子级div标签的scale-box层；其中Scale-box层用于接收并承载输入组件接收的页面内容和属性，同时能获取到浏览器窗口的尺寸，且在scale-box层初始化ngOninit生命周期函数时调用封装好的用于控制缩放的函数setScale()；setScale函数为：

ww＝窗口分辨率宽度/原始分辨率宽度；

wh＝窗口分辨率高度/原始分辨率高度；

比较ww和wh的大小，以较小的值作为scale-box层要等比缩放的比例值；从而能保证scale-box层内容能完整显示到container-box内；

Container-box层的作用主要是承载scale-box层，且container-box大小始终等于窗口的大小，当用户编写的html内容不能等比例显示在浏览器窗口时，container-box层和scale-box层之间会产生留白，用户通过选定自定义背景样式的css对象，然后该选定的css对象传入动态容器组件的输入属性background，并由container-box接受background对象，然后作用在自身的css背景样式上，从而使留白能自定义背景，使留白与页面的交汇处匹配。

进一步的，页面元素的html、body及容器组件container-box层的css对象属性需要设置成width:100％，height:100％，在引用动态容器组件后，container-box就成为了页面元素body的直接子元素，因此container-box就能保证与窗口分辨率的大小始终保持一致，即container-box大小始终等于窗口的大小。

进一步的，在获取页面属性时，还能获取页面的边界信息，根据边界信息为用户自定义合适的留白背景样式。