大数据可视化页面适配解决方案（实用有效）

这里会说两种情况下的适配方式及应用：

1. 整系统所有页面都是大屏可视化系统
2. 部分页面是大屏页面，部分是后台管理页面，两者共存的整系统

第一种情况：

项目中public文件夹里的入口文件 index.html 里直接引入适配代码文件即可。
截图说明及代码如下所示：

public目录

index.html文件

flexable.js代码

// 数据大屏适配
(function (win) {
  var bodyStyle = document.createElement("style");
  // 这里根据具体的设计稿尺寸来定
  bodyStyle.innerHTML = `body{width:1920px; height:1080px; transform:scale(1);}`;
  document.documentElement.firstElementChild.appendChild(bodyStyle);

  function refreshScale() {
    let docWidth = document.documentElement.clientWidth;
    let docHeight = document.documentElement.clientHeight;
    var designWidth = 1920, // 这里根据具体的设计稿尺寸来定
      designHeight = 1080, // 这里根据具体的设计稿尺寸来定
      widthRatio = docWidth / designWidth,
      heightRatio = docHeight / designHeight;
    document.body.style = `transform:scale(${widthRatio});transform-origin:left top;overflow: hidden;`;

    // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
    setTimeout(function () {
      var lateWidth = document.documentElement.clientWidth,
        lateHeight = document.documentElement.clientHeight;
      if (lateWidth === docWidth) return;

      widthRatio = lateWidth / designWidth;
      heightRatio = lateHeight / designHeight;
      document.body.style =
        "transform:scale(" +
        widthRatio +
        ");transform-origin:left top;overflow: hidden;";
    }, 0);
  }

  refreshScale();

  // pageshow事件: 当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。
  // (这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)
  win.addEventListener(
    "pageshow",
    function (e) {
      if (e.persisted) {
        // 判断该页面是否被缓存，如果是，则调用方法
        // 浏览器后退的时候重新计算
        refreshScale();
      }
    },
    false
  );
  win.addEventListener("resize", refreshScale, false);
})(window);

第二种情况：

使用 mixin 混入方式仅在大屏页面引入使用即可。
截图说明及代码如下所示：

<template>
	<div id="data-view">
		<div id="full-screen-container">
			<div class="main-header">header</div>
			<div class="main-body">body</div>
		</div>
	</div>
</template>

import { autoResize } from "@/mixin/autoResize";

export default{
	mixins: [autoResize],
}

autoResize.js代码

export const autoResize = {
  mounted() {
    var bodyStyle = document.createElement("style");
    // 这里根据具体的设计稿尺寸来定
    bodyStyle.innerHTML = `#full-screen-container{width:1920px; height:1080px; transform:scale(1);}`;
    document.documentElement.firstElementChild.appendChild(bodyStyle);

    this.refreshScale();

    window.addEventListener("pageshow", this.pageshowFunc, false);
    window.addEventListener("resize", this.refreshScale, false);
  },

  methods: {
    refreshScale() {
      let docWidth = document.documentElement.clientWidth;
      let docHeight = document.documentElement.clientHeight;
      var designWidth = 1920, // 这里根据具体的设计稿尺寸来定
        designHeight = 1080, // 这里根据具体的设计稿尺寸来定
        widthRatio = docWidth / designWidth,
        heightRatio = docHeight / designHeight;

      // 获取大屏页面容器 DOM
      var fullScreenDom = document.getElementById("full-screen-container");

      fullScreenDom.style = `transform:scale(${widthRatio});transform-origin:left top;overflow: hidden;`;
      // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
      setTimeout(function () {
        var lateWidth = document.documentElement.clientWidth,
          lateHeight = document.documentElement.clientHeight;
        if (lateWidth === docWidth) return;

        widthRatio = lateWidth / designWidth;
        heightRatio = lateHeight / designHeight;

        fullScreenDom.style =
          "transform:scale(" +
          widthRatio +
          ");transform-origin:left top;overflow: hidden;";
      }, 0);
    },
    // pageshow事件: 当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。
    // (这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)
    pageshowFunc(e) {
      if (e.persisted) {
        // 判断该页面是否被缓存，如果是，则调用方法
        // 浏览器后退的时候重新计算
        this.refreshScale();
      }
    },
  },

  beforeDestroy() {
    window.removeEventListener("pageshow", this.pageshowFunc);
    window.removeEventListener("resize", this.refreshScale);
  },
};