随着物盛行业的快速发展，用户对付快递投递韶光的哀求越来越高。于是，时效就成为了各家快递公司相互竞争的主要指标。影响快递时效的成分有很多，如自动扮装备分拣效率，运输路由等，个中，现场管理也是影响时效的一个很主要成分。随着数字化的推广，现场管理由之前的实地管理，现场不雅观察，逐步发展为现场可视扮装备的实时监控、实时预警、实时干预、实时办理问题。那么如何把繁芜的运营数据和现场实时场景呈现给现场管理者？如何在各种不同分辨率可视化投放工具上完美地展示数据，已经成为前端开拓职员急需办理的问题。
1、页面布局如何兼容各种不同分辨率设备
2、针对不同分辨率设备字体如何呈现
3、视频播放如何在不同分辨率设备上展示
4、如何实时监控屏幕分辨率的变革而自适应页面展示
目前大多数的大屏适配办理方案多集中在以下3种办法：
1、vw/vh方案
事理：通过打算得出每个元素在屏幕中所占的百分比，1vw即为窗口的宽度的1%。
优缺陷：优点是当屏幕比例和设计稿比例不同时，不会涌现留白的情形，缺陷是每个元素都需单独根据设计图尺寸做打算和适配，比较麻烦，效率低。
2、rem方案
事理：根据设计稿大小，设置一个 rem 的基准值 作为html根节点的font-size，所有元素的大小设置都因此rem为单位，且rem会根据屏幕的分辨率不同而变革。
优缺陷：优点是适配大略，打算方便，缺陷是适用于全新的项目，当对已有项目中的几个新页面做适配时，所有适配的页面都需做单独处理，否则会影响已有的页面，移动端项目大多数采取的是这种自适应方法。
3、scale属性等比缩放方案
事理：通过scale属性，按照比例自动缩放页面里面所有元素。
优缺陷：优点是适配大略，不会改变原有的dom布局，不须要对单个元素做适配，背景图片和字体大均可以实现等比例缩放，缺陷是当屏幕比例和设计稿比例不同时会涌现留白区域。
上述3种办法可以实现不同分辨率的屏幕展示，但每种办法都有瑕疵，对付追求完美的前端来说，显然不是我们想要的效果。
终极办理方案为：结合grid布局和scale属性，监听窗口大小发生变革，根据窗口大小比例打算宽高分别需缩放的比例，补充留白区域，通过grid布局固定每个模块在大屏中所占的区域的比例，担保整体布局不发生变革。
grid布局：按照设计稿，将页面平分为3x2 共6个模块（可根据实际情形自行调度），每个业务板块根据自身的需求，可按照坐标抽办法设置该板块在大屏中所占的比例，例如横轴占一个模块，纵轴占两个模块可配置为{x:1,y:1,width:1,height:2}。
详细实现核心代码：
// dom 部分<div class="modules-list"><template v-for="component in options"><component:is="component.componentName":key="component.componentName"class="component-item":style="getPositionStyle(component)"></component></template></div>...// js部分// 业务板块配置const options=[// 起始坐标以及宽度和高度占比{ x: 1, y: 1, width: 1, height: 2, componentName: 'module1',},...]// 根据options配置动态修正每个业务板块的占比const getPositionStyle = (module) => { return { 'grid-column-start': module.x, 'grid-column-end': Number(module.x + module.width), 'grid-row-start': module.y, 'grid-row-end': Number(module.y + module.height), }}...// css部分.modules-list { display: grid; // 3:2大屏 grid-gap: 20px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); height: 100%; width: 100%;}
scale属性缩放：根据设计图尺寸和实际屏幕尺寸打算出需缩放的比例，对须要缩放的区域通过scale属性进行整体缩放。
详细实现核心代码：
// dom部分<div id="centerBigScreenParent" class="outer"> <div id="centerBigScreen" class="page-bg container"> <Header title="中央大屏" /> <div class="modules-container"> <div class="modules-list"> <template v-for="component in options"> <component :is="component.componentName" :key="component.componentName" class="component-item" :style="getPositionStyle(component)" ></component> </template> </div> </div> </div> </div>... // js部分keepFit() { const UIWidth = 1920 // 设计稿的宽度 const UIHeight = 1080 // 设计稿的高度 const scaleDom = document.getElementById('centerBigScreen') // 须要缩放的区域 const scaleDomParent = document.getElementById('centerBigScreenParent') // 须要缩放的区域父级元素 const scaleDomParentWidth = scaleDomParent.getBoundingClientRect().width // 父级元素的宽 const scaleDomParentHeight = scaleDomParent.getBoundingClientRect().height // 父级元素的高 let scale = 1 // 缩放比例 // 父级元素的宽高比例大于设计稿的宽高比例 则根据比例重新设置缩放区域的高度，反之则设置缩放区域的宽度 if (scaleDomParentWidth / scaleDomParentHeight < UIWidth / UIHeight) { scale = scaleDomParentWidth / UIWidth scaleDom.style.height = `${scaleDomParentHeight / scale}px` } else { scale = scaleDomParentHeight / UIHeight scaleDom.style.width = `${scaleDomParentWidth / scale}px` } scaleDom.style.transform = `scale(${scale})` scaleDom.style.transformOrigin = `0 0` // 指定缩放基准点，默认以中央点为基准点会导致缩放区域偏移}....// css部分// 父级元素根据实际情形调度.outer { width: 100%; height: 100%;}// 设计稿尺寸#centerBigScreen { width: 1920px; height: 1080px;}
把稳事变：需监听父级元素的宽高变革，担保在父级元素大小发生变革时，缩放区域也可以实时变革。
实际效果：
未来我们还会有更多场景的接入，如装卸车现场的实时监控、超时的实时预警、各分拣线实时监测等，加强数字化培植，落地数字化工具，通过数字化手段来提升整体运单时效。转运中央和分拣园地也可以充分利用可视化大屏进行数字化管理，为现场管理者供应实时监测工具，及时有效地办理问题，提升运转效率，不断推动物盛行业高质量发展，更好地实现货畅其流。
作者:营运产研部
来源:微信"大众年夜众号:科技中通
出处:https://mp.weixin.qq.com/s/weWxR5NgHVGv-OMndAqI1Q
