technique_admin/src/views/hatch/dataV/myMain.vue

<template>
  <div id="dv-full-screen-container" :ref="ref">
    <template v-if="ready">
      <slot></slot>
    </template>
  </div>
</template>

<script>
import autoResize from './mixin/autoResize.js'

export default {
  name: 'DvFullScreenContainer',
  mixins: [autoResize],
  data() {
    return {
      ref: 'full-screen-container',
      allWidth: 0,
      allHeight: 0,
      scale: 0,
      datavRoot: '',
      ready: false
    }
  },
  methods: {
    afterAutoResizeMixinInit() {
      const { initConfig, setAppScale } = this

      initConfig()

      setAppScale()

      this.ready = true
    },
    initConfig() {
      const { dom } = this
      // const { width } = screen
      let width = window.innerWidth
      let height = window.innerHeight
      this.allWidth = width
      this.allHeight = height

      dom.style.width = `${width}px`
      dom.style.height = `${height}px`
    },
    setAppScale() {
      const { allWidth, allHeight, dom } = this
      const currentWidth = window.outerWidth
      const currentHeight = window.innerHeight
      // dom.style.transform = `scale(${currentWidth / allWidth})`
      dom.style.transform = `scaleY(${currentHeight / allHeight}) scaleX(${currentWidth / allWidth})`
    },
    onResize() {
      const { setAppScale } = this

      setAppScale()
    }
  }
}
</script>