添加3d页进度条

src/components/MyLayout/index.vue

@@ -17,6 +17,7 @@
       <router-view></router-view>
     </el-main>
     <audiLogoComp></audiLogoComp>
+    <homeProgressComp></homeProgressComp>
   </el-container>
 </template>
 <script>
@@ -24,13 +25,14 @@ import "./reset.less";
 import "./index.less";
 import NavMenu from "./NavMenu";
 import audiLogoComp from "../audiLogoAnimation/index.vue";
+import homeProgressComp from "../homeProgress/index.vue";
 export default {
   data() {
     return {
       mode: "floorplan",
     };
   },
-  components: { NavMenu, audiLogoComp },
+  components: { NavMenu, audiLogoComp, homeProgressComp },
   methods: {
     modeChange() {
       // window.sdkInstance.changeMode("panorama");
@@ -42,7 +44,10 @@ export default {
       }
     },
     goMantis() {
-      window.open("http://139.196.158.57:8080/mantis_test/#/dashboard", "_blank");
+      window.open(
+        "http://139.196.158.57:8080/mantis_test/#/dashboard",
+        "_blank"
+      );
     },
     goKpm() {
       window.open("http://106.14.237.165/kpm/#/list/kpm-list", "_blank");

src/components/homeProgress/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="homeProgressBox" v-if="progressVisible">
+    <el-progress
+      class="homeProgress"
+      :percentage="Math.round(percentage)"
+    ></el-progress>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      progressVisible: false,
+      percentage: 0,
+      duration: 5000,
+    };
+  },
+  methods: {},
+  mounted() {
+    console.log("window.location.pathname", window.location.pathname);
+    if (window.location.pathname.indexOf("home") > -1) {
+      this.progressVisible = true;
+    }
+
+    let randomInterval = setInterval(() => {
+      let randomValue = Math.round(Math.random() * 10) / 20 + 1.5;
+      if (this.percentage < 90) {
+        this.percentage = this.percentage + randomValue;
+      }
+    }, 200);
+    setTimeout(() => {
+      clearInterval(randomInterval);
+      this.percentage = 100;
+      setTimeout(() => {
+        this.progressVisible = false;
+      }, 1000);
+    }, this.duration);
+  },
+};
+</script>
+<style scoped>
+.homeProgressBox {
+  position: fixed;
+  z-index: 5;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+  background-color: #b4b4b4b0;
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.homeProgress {
+  width: 300px;
+}
+
+:deep() .homeProgress > .el-progress__text {
+  color: #fff !important;
+}
+</style>