浏览代码

Merge branch 'master' of http://121.42.8.157:13000/zengminguo/D-MAP

57862207 11 月之前
父节点
当前提交
01d349973f
共有 3 个文件被更改,包括 145 次插入31 次删除
  1. 7 2
      src/components/MyLayout/index.vue
  2. 64 0
      src/components/homeProgress/index.vue
  3. 74 29
      src/views/ordinaryPage/index.less

+ 7 - 2
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");

+ 64 - 0
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>

+ 74 - 29
src/views/ordinaryPage/index.less

@@ -1,43 +1,51 @@
 .ordinary-container {
   display: flex;
+
   .ordinary-left {
     display: flex;
     width: 63.48vw;
     flex-direction: column;
     align-items: center;
+
     .search-container {
       width: 44.9vw;
       height: 7.4vh;
       margin-top: 11.29vh;
       margin-bottom: 2.13vh;
     }
+
     .ordinary-map-container {
       overflow: hidden;
       position: relative;
-      background-color:#33373c;
+      background-color: #33373c;
       width: 63.34vw;
       height: 67.79vh;
       border-radius: 40px;
+
       // margin-top: -11vh;
       img {
         width: 100%;
         height: 100%;
       }
+
       .ordinary-map-blocker {
         width: 100%;
         height: 100%;
         border-radius: 40px;
+
         // margin-left: -35vw;
         // margin-top: -31vh;
         img {
           width: 100%;
           height: 100%;
         }
+
         .bmMap {
           width: 100%;
           height: 100%;
         }
       }
+
       .square-count {
         align-items: center;
         zoom: 0.6;
@@ -56,7 +64,8 @@
         font-size: 16px;
         display: flex;
         flex-direction: column;
-      }  
+      }
+
       .bench-list {
         align-items: center;
         zoom: 0.6;
@@ -71,7 +80,8 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-      }   
+      }
+
       .ordinary-map {
         position: absolute;
         opacity: 0;
@@ -81,6 +91,7 @@
         border-radius: 40px;
         margin-left: -35vw;
         margin-top: -31vh;
+
         img {
           width: 100%;
           height: 100%;
@@ -88,22 +99,26 @@
       }
     }
   }
+
   .ordinary-list {
     width: 26.36vw;
     height: 100%;
   }
+
   .ordinary-list {
     .item-image {
       width: 7.29vw;
       height: 7.29vw;
       border-radius: 15px;
       border: 2px solid #dfdfdf;
+
       img {
         width: 100%;
         height: 100%;
         border-radius: 15px;
       }
     }
+
     .item-box {
       width: 100%;
       padding: 1.04vw 1.66vh 1.04vw;
@@ -112,8 +127,10 @@
       opacity: 1;
       display: flex;
       align-items: center;
+
       .item-text {
         margin-left: 1.2vw;
+
         .item-title {
           height: 4.17vh;
           font-size: 28px;
@@ -122,6 +139,7 @@
           color: #fbfbfb;
           line-height: 4.17vh;
         }
+
         .item-description {
           margin-top: 0.37vh;
           height: 2.31vh;
@@ -131,6 +149,7 @@
           color: #dfdfdf;
           line-height: 2.31vh;
         }
+
         .item-tag {
           display: flex;
           margin-top: 0vh;
@@ -138,6 +157,7 @@
           // width: max-content;
           overflow: auto;
           flex-wrap: wrap;
+
           .tag {
             margin-bottom: 0.2vh;
             //width: 3.13vw;
@@ -158,12 +178,14 @@
         }
       }
     }
-    
+
   }
+
   .vr-bg-container {
     width: 0;
     height: 0;
   }
+
   .bench-list-buttons {
     width: 100%;
     height: 5.4vh;
@@ -175,7 +197,7 @@
     margin-bottom: 0vh;
     margin-left: 4.13vh;
     margin-right: 4.13vh;
-    background: linear-gradient(179deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0) 100%);
+    background: linear-gradient(179deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 100%);
     background-image: url(../../images/tab-buttons.png);
     background-size: 100% 100%;
     border-radius: 79px 79px 79px 79px;
@@ -184,17 +206,19 @@
     justify-content: space-between;
     align-items: center;
     align-content: center;
-}
-.ordinary-map-ex {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 9999;
-}
-.ordinary-map-hidden {
-  width: 100%;
-  height: 100%;
-}
+  }
+
+  .ordinary-map-ex {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 9999;
+  }
+
+  .ordinary-map-hidden {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 // .task-right-panel {
@@ -212,6 +236,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+
     .item-title {
       height: 4.17vh;
       font-size: 18px;
@@ -221,6 +246,7 @@
       line-height: 4.17vh;
       // width: 150px;
     }
+
     .item-description {
       margin-top: 0.37vh;
       height: 2.31vh;
@@ -230,11 +256,13 @@
       color: #dfdfdf;
       line-height: 2.31vh;
     }
+
     .item-tag {
       display: flex;
       margin-top: 0.92vh;
-          flex-wrap: wrap;
-          .tag {
+      flex-wrap: wrap;
+
+      .tag {
         margin-bottom: 0.2vh;
         //width: 3.13vw;
         height: 1.96vh;
@@ -253,10 +281,12 @@
       }
     }
   }
+
   .item-tag {
     display: flex;
     margin-top: 0.92vh;
     flex-wrap: wrap;
+
     .tag {
       // width: 3.13vw;
       padding: 0 1vw;
@@ -296,15 +326,17 @@
     border-radius: 20px 20px 20px 20px;
     opacity: 1;
     margin-bottom: 1.85vh;
+
     .item-title {
       height: 4.17vh;
-      font-size: 24px;
+      // font-size: 16px;
       font-family: PingFang SC-Bold, PingFang SC;
       font-weight: 400;
       color: #fbfbfb;
       line-height: 4.17vh;
       display: inline-block;
     }
+
     .item-description {
       margin-top: 0.37vh;
       height: 2.31vh;
@@ -314,27 +346,40 @@
       color: #dfdfdf;
       line-height: 2.31vh;
     }
+
     .item-tag {
       display: flex;
       margin-top: 0.92vh;
+      flex-wrap: wrap;
+
       .tag {
-        padding: 0 1vw;
-        height: 2.96vh;
-        line-height: 2.96vh;
+        margin-bottom: 0.2vh;
+        //width: 3.13vw;
+        height: 1.96vh;
+        font-size: xx-small;
+        line-height: 1.96vh;
         text-align: center;
         background-color: #5d9a6d;
         border-radius: 10px;
         color: #f2f2f2;
-        margin-right: 1vw;
+        margin-right: 0.2vw;
+        padding: 0px 10px;
+        width: max-content;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
+
     .status1 {
       width: 14px;
       height: 14px;
       background: #68C068;
       border-radius: 100%;
-      margin-left: 10px;;
+      margin-left: 10px;
+      ;
     }
+
     .status0 {
       width: 14px;
       height: 14px;
@@ -343,9 +388,11 @@
       margin-left: 10px;
     }
   }
+
   .item-tag {
     display: flex;
     margin-top: 0.92vh;
+
     .tag {
       // width: 3.13vw;
       padding: 0 1vw;
@@ -358,13 +405,13 @@
       margin-right: 1vw;
     }
   }
-  
+
 }
 
 .uncheck {
   width: 16px;
   height: 16px;
-  background: rgba(0,0,0,0.14);
+  background: rgba(0, 0, 0, 0.14);
   border-radius: 53px 53px 53px 53px;
   opacity: 1;
   border: 1px solid #DFDFDF;
@@ -378,9 +425,7 @@
 //   height: 60vh;
 //   overflow: auto;
 // }
-.panel-bottom {
-
-}
+.panel-bottom {}
 
 .task-auto {
   width: 50px;