qp_onemap_ui/src/App.vue

<template>
  <div class="main">
    <!-- <Header @scroll-update="scrollUpdate"></Header> -->
    <el-scrollbar ref="pagescrollbar" view-style="height:100%">
      <router-view />
      <!-- <Footer></Footer> -->
    </el-scrollbar>
  </div>
</template>
<script>
import { defineAsyncComponent } from "vue";
import api from "@/api/common";
export default {
  name: "App",
  data() {
    return {
      loadedScripts: [],
    }
  },
  components: {
    Header: defineAsyncComponent(() =>
      import("@/components/AppVue/Header.vue")
    ),
    Footer: defineAsyncComponent(() => import("@/components/AppVue/Footer.vue"))
  },
  mounted() {
    let that = this;
    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();
    // });
    // 默认登录
    api.login({
      userName: systemConfig.defaultAccount.userName,
      password: systemConfig.defaultAccount.password,
      clientId: "1",
      serviceId: "0",
    }).then((result) => {
      if (result.code == 200) {
        that.$store.commit("setUserInfo", result.content);
        that.$store.commit("setToken", result.message);
        that.$store.commit("setUserState", true);
      } else {
        that.$message({
          type: "error",
          message: result.content,
        });
      }
    }).catch((err) => {
      that.$message({
        type: "error",
        message: "服务器忙碌，请稍后重试！",
      });
    });
  },
  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: 100vw;
  // height: 100vw;
  width: 1920px;
  height: 100%;
  position: fixed;
  left: 50%;
  top: 0%;
  transform-origin: left top;
  transform: translate(-50%, 0%);
}

.main {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;

  .el-scrollbar {
    width: 100%;
    // height: calc(100% - 90px);
    box-sizing: border-box;
    overflow: hidden;
  }
}
</style>