init

src/views/bigScreen/bigScreenLayout.vue

@@ -0,0 +1,9 @@
+<template>
+    <router-view />
+</template>
+
+<script>
+export default {
+  name: 'BigScreenLayout',
+}
+</script>

src/views/bigScreen/components/Screen.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="wrapper">
+    <div class="container">
+      <div class="dashboard-bg-image"></div>
+      <div :style="marginStyle">
+        <div style="position: relative;">
+          <div class="dashboard-container" style="width: 1920px;height: 1080px;" :style="transformStyle">
+            <div class="dashboard-bg-image2"></div>
+            <div class="dashboard-bg-image2-box"></div>
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {getComputedStyle} from "@/utils";
+import {debounce} from "lodash";
+
+/**
+ * Date: 7/7/20
+ */
+
+export default {
+  name: "Screen",
+  data() {
+    return {
+      scaleX: 1,
+      scaleY: 1,
+      marginXHorizontal: 0,
+      marginYHorizontal: 0,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  computed: {
+    transformStyle: function () {
+      return {
+        transform: `scale(${this.scaleX}, ${this.scaleY})`
+      };
+    },
+    marginStyle: function () {
+      return {
+        margin: `${this.marginYHorizontal}px ${this.marginXHorizontal}px`
+      };
+    }
+  },
+  methods: {
+    init() {
+      this.listenResize();
+    },
+    initData() {
+      this.scaleX = 1;
+      this.scaleY = 1;
+      this.marginXHorizontal = 0;
+      this.marginYHorizontal = 0;
+    },
+    initScale() {
+      this.initData();
+      let $container = document.querySelector('.container');
+      let containerWidth = getComputedStyle($container, 'width').replace("px", "");
+      let containerHeight = getComputedStyle($container, 'height').replace("px", "");
+      containerWidth = Number(containerWidth);
+      containerHeight = Number(containerHeight);
+      containerWidth = isNaN(containerWidth) ? 0 : containerWidth;
+      containerHeight = isNaN(containerHeight) ? 0 : containerHeight;
+
+      let defaultHeight = 1080;
+      let defaultWidth = 1920;
+      // sacle 缩放比例。
+      let scale = 1;
+      // 优先 height
+      if (containerHeight < defaultHeight) {
+        scale = containerHeight / defaultHeight;
+        this.scaleX = scale;
+        this.scaleY = scale;
+      }
+      // 然后 width
+      else if (containerWidth < defaultWidth) {
+        scale = containerWidth / defaultWidth;
+        this.scaleX = scale;
+        this.scaleY = scale;
+      }
+
+      let marginWidth = defaultWidth * scale;
+      if (containerWidth > marginWidth) {
+        marginWidth = (containerWidth - marginWidth) / 2;
+        this.marginXHorizontal = marginWidth;
+      }
+      let marginHeight = defaultHeight * scale;
+      if (containerHeight > marginHeight) {
+        marginHeight = (containerHeight - marginHeight) / 2;
+        this.marginYHorizontal = marginHeight;
+      }
+    },
+    listenResize() {
+      this.initScale();
+      window.addEventListener('resize', debounce(() => {
+        this.initScale();
+      }, 300));
+    }
+  },
+
+  destroyed() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.container {
+  background-color: rgb(3, 12, 59);
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+
+.dashboard-bg-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.dashboard-container {
+  position: relative;
+  user-select: none;
+  width: 100%;
+  height: 100%;
+  transform-origin: 0 0;
+  transition: all .3s linear;
+  overflow: hidden;
+}
+
+
+</style>

src/views/bigScreen/components/scaleBox.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="ScaleBox" ref="ScaleBox" :style="{
+      width: width + 'px',
+      height: height + 'px'
+    }">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScaleBox',
+  props: {},
+  data () {
+    return {
+      scale: 0,
+      width: 1920,
+      height: 1080
+    }
+  },
+  mounted () {
+    this.setScale()
+    window.addEventListener('resize', this.debounce(this.setScale))
+  },
+  methods: {
+    getScale () {
+      const { width, height } = this
+      const wh = window.innerHeight / height
+      const ww = window.innerWidth / width
+      console.log(ww < wh ? ww : wh)
+      return ww < wh ? ww : wh
+    },
+    setScale () {
+      // if (window.innerHeight == 1080) {
+      //   this.height = 1080
+      // } else {
+      //   this.height = 937
+      // }
+      this.scale = this.getScale()
+      if (this.$refs.ScaleBox) {
+        this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
+      }
+    },
+    debounce (fn, delay) {
+      const delays = delay || 500
+      let timer
+      return function () {
+        const th = this
+        const args = arguments
+        if (timer) {
+          clearTimeout(timer)
+        }
+        timer = setTimeout(function () {
+          timer = null
+          fn.apply(th, args)
+        }, delays)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#ScaleBox {
+  --scale: 1;
+}
+.ScaleBox {
+  position: absolute;
+  transform: scale(var(--scale)) translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  transform-origin: 0 0;
+  left: 50%;
+  top: 50%;
+  transition: 0.3s;
+  z-index: 999;
+  background: rgba(255, 0, 0, 0.3);
+}
+</style>

src/views/bigScreen/drivingCabin/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <scalseBox>
+        <div>111</div>
+
+    </scalseBox>
+
+</template>
+
+<script>
+import scalseBox from '../components/scaleBox.vue'
+import Screen from "../components/Screen";
+export default {
+  name: 'DrivingCabin',
+  components: {
+    scalseBox,
+    Screen
+  }
+}
+</script>