大屏可视化

适配大屏

• 使用缩放：手动实现

<template>
  <template v-if="showPage">
    <div
      class="app-main-container"
      :style="{ width: `${baseWidth}px`, height: `${baseHeight}px` }"
      ref="appRef"
    >
      <router-view />
    </div>
  </template>
</template>
<script>
export default {
  data() {
    return {
      drawTiming: null,
      baseWidth: 1920, // 设计稿基准宽度
      baseHeight: 1080, // 设计稿基准高度
    };
  },
  methods: {
    calcRate() {
      const appRef = this.$refs.appRef;
      if (!appRef) return;
      const currentRate = window.innerWidth / window.innerHeight;
      const baseProportion = this.baseWidth / this.baseHeight;
      const scale = { x: 1, y: 1 };

      if (currentRate > baseProportion) {
        // 屏幕更宽
        scale.x = (window.innerHeight * baseProportion) / this.baseWidth;
        scale.y = window.innerHeight / this.baseHeight;
      } else {
        // 屏幕更高
        scale.x = window.innerWidth / this.baseWidth;
        scale.y = window.innerWidth / baseProportion / this.baseHeight;
      }

      appRef.style.transform = `scale(${scale.x}, ${scale.y}) translate(-50%, -50%)`;
    },
    resize: debounce(
      function () {
        clearTimeout(this.drawTiming);
        this.drawTiming = setTimeout(this.calcRate, 200);
      },
      200,
      true
    ),
  },
  mounted() {
    this.calcRate();
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>

<style lang="scss" scoped>
.app-main-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
}
</style>

• 使用插件：v-scale-screen 插件地址：v-scale-screenvue2 演示地址vue3 演示地址

<template>
  <div id="app">
    <template v-if="showPage">
      <router-view v-if="!adaptive" />
      <VScaleScreen
        v-else
        :width="designedWidth"
        :height="designedHeight"
        :boxStyle="{ backgroundColor: '#010823' }"
      >
        <router-view />
      </VScaleScreen>
    </template>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import VScaleScreen from "v-scale-screen";

export default {
  name: "App",
  components: { VScaleScreen },
  data() {
    return {
      designedWidth: 1920,
      designedHeight: 1080,
    };
  },
  computed: {
    ...mapState("realData", ["hospitalData"]),
    showPage() {
      return this.hospitalData.CodeAlias || this.hospitalData.Name;
    },
    adaptive() {
      // 当前路由是否开启自适应
      // 路由元信息中设置 adaptive: false 则关闭自适应
      return this.$route.meta.adaptive !== false;
    },
  },
  watch: {
    "$route.meta.adaptive": {
      immediate: true,
      handler(nv) {
        if (nv === false) {
          document.body.style.overflow = "";
        } else {
          document.body.style.overflow = "hidden";
        }
      },
    },
  },
  methods: {
    ...mapActions("realData", {
      dispatchGetHospital: "GetHospital",
    }),
  },
  created() {
    if (!this.hospitalData.CodeAlias) {
      this.dispatchGetHospital();
    }
  },
};
</script>

缩放产生的问题

• 解决大屏适配高德地图 MassMarks（海量点）事件失效 解决方案