基于transform的scale属性，实现数据可视化大屏自适应缩放，保持比例不变，轻松应对不同分辨率

export default {
    data() {
        return {
            width: 1920,
            height: 1080,
        }
    },
    mounted() {
        this.autoResizeScreen();
        window.addEventListener('resize', this.autoResizeScreen);
    },
    methods: {
        autoResizeScreen() {
            let rect = this.$refs.AutoScalContainerRef.getBoundingClientRect()
            let DomRef = this.$refs.DomRef
            let clientWidth = rect.width
            let clientHeight = rect.height
            var width = this.width
            var height = this.height
            let left = 0
            let top = 0
            let scale = 0
            let ratio = width / height;
            if ((clientWidth / clientHeight) > ratio) {
                scale = clientHeight / height;
                top = 0;
                left = (clientWidth - width * scale) / 2;
            } else {
                scale = clientWidth / width;
                left = 0;
                top = (clientHeight - height * scale) / 2;
            }
            Object.assign(DomRef.style, {
                transform: `scale(${scale})`,
                left: `${left}px`,
                top: `${top}px`,
            });
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.autoResizeScreen);
    },
}

<template>
  <div id="app">
    <div class="auto-scal-container" ref="AutoScalContainerRef">
      <div ref="DomRef" class="auto-scal-container-inner">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import autoResizeScreenMixin from '@/utils/autoResizeScreenMixin ';
export default {
  mixins: [autoResizeScreenMixin]
}
</script>

<template>
  <div class="custom-big-box">
    <div class="top">头部</div>
    <div class="bot">
      <div class="left">左侧</div>
      <div class="mid">
        <div class="midtop">卡片</div>
        <div class="midbot">地图</div>
      </div>
      <div class="right">右侧</div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.custom-big-box {
  width: 1920px;
  height: 1080px;
  font-size: 26px;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

.top {
  width: 100%;
  height: 100px;
  background-color: #409EFF;
}

.bot {
  padding: 20px;
  padding-top: 0;
  display: flex;
  height: 980px;
  background-color: #DCDFE6;
}

.left {
  width: 400px;
  height: 960px;
  background-color: #67C23A;
}

.mid {
  width: 1080px;
  height: 960px;
}

.right {
  width: 400px;
  height: 960px;
  background-color: #E6A23C;
}

.midtop {
  height: 100px;
  width: 100%;
  background-color: #F56C6C;
}

.midbot {
  width: 100%;
  height: 860px;
  background-color: #909399;
}
</style>