qp_onemap_ui/src/App.vue

<template>
  <router-view />
</template>
<script>
import api from "@/api/common";
import encrypt‌ from "@/utils/encrypt‌";
export default {
  name: "App",
  data() {
    return {
      loadedScripts: [],
    };
  },
  mounted() {
    window.loadScripts = this.loadScripts;
    // document.querySelector("#app").style.transform = `scale(${this.getScale()}) translate(-50%, 0%)`
    // document.querySelector("#app").style.height = window.innerHeight / this.getScale() + "px"
    // window.onresize = () => {
    //   document.querySelector("#app").style.transform = `scale(${this.getScale()}) translate(-50%, 0%)`
    //   document.querySelector("#app").style.height = window.innerHeight / this.getScale() + "px"
    // }
    // this.$nextTick(() => {
    //   this.scrollUpdate();
    // });
    let that = this;
    // 默认登录
    encrypt‌().then(() => {
      // 登录成功之后要批量加载一下DMS的字典，后续全局可调用
      that.$store.state.DMSTypes.forEach((item) => {
        api
          .getDmsTypes({
            cName: item,
            type: 0,
          })
          .then((result2) => {
            if (result2.code == 200) {
              // 遍历result2.content，将每个元素的index作为key，name作为value，存储到DmsTypesMap中
              let dmsTypesMap = {};
              result2.content.forEach((element) => {
                dmsTypesMap[element.index] = element.name;
              });
              that.$store.commit("setDmsTypesMap", {
                name: item,
                list: dmsTypesMap,
              });
            } else {
              that.$message({
                type: "error",
                message: result2.content,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            that.$message({
              type: "error",
              message: "服务器忙碌，请稍后重试！",
            });
          });
      });
    }).catch((err) => {
      that.$message({
        type: "error",
        message: err,
      });
    });
  },
  methods: {
    // scrollUpdate() {
    //   let that = this;
    //   setTimeout(() => {
    //     that.$refs.pagescrollbar.update();
    //   }, 1000);
    // },
    getScale() {
      const ww = window.innerWidth / 1920;
      // const wh = window.innerHeight / 945
      // return ww < wh ? ww : wh;
      return ww;
    },

    initScript() {
      let that = this;
      window.SkySceneryConfig = {
        authUrl: systemConfig.oauthServiceUrlOrigin,
        token: localStorage.getItem("token"),
      };
      return new Promise((resolve, reject) => {
        const str = systemConfig.scriptMain;
        let strArr = str.split("/");
        if (that.loadedScripts.indexOf(strArr[strArr.length - 1]) == -1) {
          // SkyScenery.js
          that.loadedScripts.push(strArr[strArr.length - 1]);
          that.addScripts(systemConfig.scriptMain).then(function () {
            resolve();
          });
        } else {
          resolve();
        }
      });
    },
    loadScripts(scriptArr) {
      // 初始化 SkyScenery.js
      let that = this;
      return new Promise((resolve, reject) => {
        that.initScript().then(function () {
          let arr = [];
          for (let i = 0; i < scriptArr.length; i++) {
            const str = scriptArr[i];
            let strArr = str.split("/");
            if (that.loadedScripts.indexOf(strArr[strArr.length - 1]) == -1) {
              let pro = that.addScripts(str);
              that.loadedScripts.push(strArr[strArr.length - 1]);
              arr.push(pro);
            }
          }
          Promise.all(arr).then(function () {
            resolve();
          });
        });
      });
    },
    addScripts(src) {
      return new Promise((resolve, reject) => {
        // 创建一个新的script标签
        var script = document.createElement("script");
        // 设置script标签的src属性为要引入的JavaScript文件的URL
        script.src = src;
        // 将script标签添加到页面的head部分或者其他合适的位置
        document.head.appendChild(script);
        if (script.readyState) {
          // IE
          script.onreadystatechange = function () {
            if (script.readyState === "loaded" || script.readyState === "complete") {
              script.onreadystatechange = null;
              resolve();
            }
          };
        } else {
          // 其他浏览器
          script.onload = function () {
            resolve();
          };
        }
      });
    },
  },
};
</script>
<style lang="less">
body,
html {
  width: 100vw;
  height: 100vh;
  margin: 0 0;
  padding: 0 0;
  overflow: hidden;
}

#app {
  width: 100%;
  min-width: 1440px;
  height: 100%;
  position: fixed;
  left: 50%;
  top: 0%;
  transform-origin: left top;
  transform: translate(-50%, 0%);
}
</style>