一种自适应终端的可视化大屏动态容器组件制造技术

本发明专利技术属于可视化大屏技术领域，具体涉及一种自适应终端的可视化大屏容器组件，包括输入组件和动态容器组件，输入组件作为输入端，动态容器组件作为全局公共组件，在需要时可直接引用到大屏页面，大屏页面以子模板的形式作为@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大小始终等于窗口的大小。进一步的，在获取页面属性时，还能获取页面的边界信息，根据边界信息为用户自定义合适的留白背景样式。本专利技术的有益效果：本专利技术基于Angular框架，提供了一种自适应终端的可视化大屏动态容器组件，包括输入组件和动态容器组件，输入组件作为输入端，动态容器组件作为全局公共组件，在需要时可直接引用到大屏页面，大屏页面以子模板的形式作为@input输入属性传进容器组件的scale-box内部。为实现容器组件的自适应性，增强容器组件的个性化配置，需要增加@input输入属性包括原始分辨率宽度width、原始分辨率高度height、背景css和样式backgroundStyle。在容器组件初始化ngOninit生命周期函数时调用封装的用于控制缩放的逻辑函数，控制缩放的逻辑函数通过获取窗口分辨率的宽度和高度，比较ww和wh的大小，以小的值作为容器要缩放的比例，同时利用css3的transform:scale(x)即可保证容器组件自适应窗口分辨率，进而保证全屏显示设计稿内容由此，本专利技术提供一种可自适应终端的动态容器组件方法，开发人员无需进行额外的尺寸转换，可直接使用px作为长度单位进行开发，在面对需求不确定的情况下，既能保证页面的自适应，同时也极大的提高了开发效率。附图说明图1为窗口分辨率宽高比与原始分辨率宽高比时相同时的示意图。图2为窗口分辨率宽高比小于原始分辨率宽高比时的示意图。图3为窗口分辨率宽高比大于原始分辨率宽高比时的示意图具体实施方式下面结合附图和实施例对本专利技术进一步说明。实施例1：本实施例旨在提供一种自适应终端的可视化大屏动态容器组件，主要用于将大屏页面在面对不同窗口分辨率时能展现UI效果的全部内容，针对现有的方式中一般需要通过大量人力进行转换开发，效率低下，灵活度低，为此本实施例提供了一种自适应终端的可视化大屏动态容器组件，在面对需求不确定的情况下，既能保证页面的自适应，同时也极大的提高了开发效率。本实施例基于Angular框架，在具体实施过程中，所述框架可以为Vue或React，进而提供了一种自适应终端的可视化大屏动态容器组件，包括输入组件和动态容器组件；其中输入组件通过定义@Input输入属性动态的接受用户传入的各种数据和html模板内容；并由@Input输入属性提取页面的属性；动态容器组件的html结构包括两层div，即作为父级div标签的container-box层和作为子级div标签的scale-box层。其中Scale-box层用于接收并承载输入组件接收的页面内容和属性，同时能获取到浏览器窗口的尺寸，且在scale-box层初始化ngOninit生命周期函数时调用封装好的用于控制缩放的函数setScale()；setScale函数为：ww＝窗口分辨率宽度/原始分辨率宽度；wh＝窗口分辨率高度/原始分辨率高度；其中原始分辨率：指UI设计师提供的设计稿分辨率；窗口分辨率：指用于显示页面的浏览器窗口分辨率；宽高比：指分辨率的宽度/高度，包括原始宽高比和窗口宽高比；比较ww和wh的大小，以较小的值作为scale-box层要等比缩放的比例值；从而能保证scale-box层内容能完整显示到container-box内；setScale函数具体实现如下：this.width：原始分辨率宽度；this.height：原始分辨率高度；window.innerWidth：窗口分辨率宽度；window.innerHeight：窗口分辨率高度；setScale通过获取窗口分辨率的宽度和高度，比较ww和wh的大小，以较小的值作为scale本文档来自技高网...

【技术保护点】
1.一种自适应终端的可视化大屏动态容器组件，其特征在于：包括输入组件和大屏容器组件；其中输入组件通过定义@Input输入属性动态的接受用户传入的各种数据和html模板内容；并由@Input输入属性提取页面的属性；大屏容器组件的html结构包括两层div，即作为父级div标签的container-box层和作为子级div标签的scale-box层；其中Scale-box层用于接收并承载输入组件接收的页面内容和属性，同时能获取到浏览器窗口的尺寸，且在scale-box层初始化ngOninit生命周期函数时调用封装好的用于控制缩放的函数setScale；setScale函数为：/nww =窗口分辨率宽度/原始分辨率宽度；/nwh=窗口分辨率高度/原始分辨率高度；/n比较ww和wh的大小，以较小的值作为scale-box层要等比缩放的比例值；从而能保证scale-box层内容能完整显示到container-box内；/nContainer-box层的作用主要是承载scale-box层，且container-box大小始终等于窗口的大小，当用户编写的html内容不能等比例显示在浏览器窗口时，container-box层和scale-box层之间会产生留白，用户通过选定自定义背景样式的css对象，然后该选定的css对象传入大屏容器组件的输入属性background，并由container-box接受background对象，然后作用在自身的css背景样式上，从而使留白能自定义背景，使留白与页面的交汇处匹配。/n...

【技术特征摘要】
1.一种自适应终端的可视化大屏动态容器组件，其特征在于：包括输入组件和大屏容器组件；其中输入组件通过定义@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...

【专利技术属性】
技术研发人员：刘新刚，冯凯，王元卓，
申请(专利权)人：中科院计算技术研究所大数据研究院，
类型：发明
国别省市：河南;41