Vue 前端数据大屏 适配

逻辑分析：
采用了css3的缩放transform: scale(X)属性，我们不难发现本人改变分辨率时，scale的值是变化的。前端小伙们们看到这，想必也已经明白了大概。
我们只要监听浏览器窗口大的小，同时控制变化的比例就可以了

1. 封装一个全局组件

<template>
  <div
    class="ScreenAdapter"
    :style="style"
  >
    <slot />
  </div>
</template>
<script>
export default {
  name: '',
  //参数注入
  props: {
    width: {
      type: String,
      default: '1920'
    },
    height: {
      type: String,
      default: '1080'
    }
  },
  data() {
    return {
      style: {
        width: this.width + 'px',
        height: this.height + 'px',
        transform: 'scale(1) translate(-50%, -50%)'
      }
    }
  },
  mounted() {
    this.setScale()
    window.onresize = this.Debounce(this.setScale, 1000)
  },
  methods: {
    Debounce: (fn, t) => {
      const delay = t || 500
      let timer
      return function() {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    },
    // 获取放大缩小比例
    getScale() {
      // const dom = this.$refs.fitBox
      // const { width: allWidth, height } = screen
      // const currentWidth = document.body.clientWidth
      // const currentHeight = document.body.clientHeight
      // dom.style.width = allWidth + 'px'
      // dom.style.height = height + 'px'
      // console.log(allWidth, '--------****---------', height, '-----------')
      // console.log(currentHeight, '--------****---------', height, '-----------', currentHeight - height)
      // dom.style.transform = `scale(${currentWidth / allWidth})`
      // scatterMap.resize()
      // const { width, height } = this
      // const wh = window.innerHeight / height
      // const ww = window.innerWidth / width
      // if (this.$refs.fit_box) {
      //   this.$refs.fit_box.style.setProperty(
      //     'transform',
      //     'scale(' + ww + ',' + wh + ') translate(-50%, -50%)'
      //   )
      // }
      const w = window.innerWidth / this.width
      const h = window.innerHeight / this.height
      return w < h ? w : h
    },
    // 设置比例
    setScale() {
      this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, -50%)'
      console.log('任你千变万化,我都不会影响性能')
    }
  }
}
</script>
<style lang="scss" scoped>
.ScreenAdapter {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  background: red;
}
</style>

2. 将此组件作为外壳，包在我们搭建的页面上

<ScreenAdapter> <div>大家好，我是大屏展示页面</div> </ScreenAdapter>

3. 定义网页规范

• 根据美工给出的设计（主要获取美工给出的分辨率，如1920*1080）。
• Div布局多采用flex+百分比布局（当然也可以根据美工给出的设计，默认写px。）。
• 各类空间设计，根据美工给出的px进行定义即可

4. echarts 画图
5. table 中 tbody 内容的滚动，

<div class="remit">
    <table>
      <thead>
        <tr>
          <td>机构</td>
          <td>名称</td>
          <td>金额</td>
          <td>排名</td>
        </tr>
      </thead>
    </table>
    <div class="tab-wrapper">
      <table>
        <tbody>
          <tr v-for="item in tableData" :key="item.rank">
            <td>{{ item.orgName }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.amt }}</td>
            <td>{{ item.rank }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.remit {
  display: block;
  width: 100%;
  height: 100%;
  margin-top: 8px;
  .tab-wrapper {
    @include scrollBar;
    width: 100%;
    height: calc(100% - 30px);
    overflow-y: auto;
  }
	table {
    width: 100%;
    text-align: center;
    thead {
      background: rgba(26, 63, 131, 0.2);
      color: #61d2f7;
      font-size: 14px;
    }
    td {
      padding: 8px 0;
      width: 25%;
    }
    tbody {
      color: #ffffff;
      font-size: 14px;
      overflow-y: scroll;
    }
    tbody tr:nth-child(even) {
      background: rgba(26, 63, 131, 0.2);
    }
  }
}
</style>

参考大屏适配解决方案__Vue.js__前端