Просмотр исходного кода

1.fix> 修复 bug6562, 在平面图上添加loading提示
2.refactor> 修改router路由引入, 优化打包后js文件,使其显示路由名称

yunxing 4 лет назад
Родитель
Сommit
3cceb3d19f
2 измененных файлов с 45 добавлено и 10 удалено
  1. 42 5
      src/components/editview/basePlanEditer.vue
  2. 3 5
      src/router/index.ts

+ 42 - 5
src/components/editview/basePlanEditer.vue

@@ -8,10 +8,12 @@
             :havItem="havItem"
             :contextMenuItem="contextMenuItem"
         ></planTooltip>
+        <!-- 加载中 -->
+        <div v-loading="planLoading" class="plan-loading" element-loading-text="平面图加载中"></div>
         <canvas style="border: none; outline: medium" id="persagy_plan" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
     </div>
 </template>
-<script>
+<script defer>
 import { SFloorParser, getJsonz } from "@persagy-web/big";
 import { SImageItem, SImageShowType } from "@persagy-web/graph";
 import { SPlanView, SPlanParser, SPlanScene, SPlanDecorator, SPlanEquipment, SPlanZone } from "@/lib";
@@ -50,6 +52,7 @@ export default {
             },
             changeScaleByClick: false, //区分滚轮,点击 事件改变的缩放比例
             initScale: 1,
+            planLoading: true, //平面图顶部loading提示
         };
     },
     computed: {
@@ -100,6 +103,11 @@ export default {
         this.autoSave = setInterval(() => {
             this.autoSavePlan();
         }, 120000);
+        // 页面销毁前,清除定时器
+        this.$once("hook:beforeDestroy", () => {
+            clearInterval(this.autoSave);
+        });
+
     },
     methods: {
         ...mapMutations([
@@ -220,8 +228,6 @@ export default {
 
             // 设置初始化缩放比例
             this.initScale = this.view.scale;
-            // this.view.maxScale = this.initScale * 10;
-            // this.view.minScale = this.initScale / 10;
             bus.$emit("initScale", this.view.scale);
         },
 
@@ -613,9 +619,9 @@ export default {
             if (this.view?.scene) this.view.fitSceneToView();
             // 设置初始化缩放比例
             this.initScale = this.view.scale;
-            // this.view.maxScale = this.initScale * 10;
-            // this.view.minScale = this.initScale / 10;
             bus.$emit("initScale", this.view.scale);
+            // 关闭顶部的loading提示
+            this.planLoading = false
         },
         // 生成快照并保存草稿
         savePlanDraft() {
@@ -788,5 +794,36 @@ export default {
         left: 0;
         top: 0;
     }
+    .plan-loading {
+        position: absolute !important;
+        top: 10px;
+        left: 50%;
+        width: 200px;
+        height: 50px;
+        z-index: 9;
+        transform: translateX(-50%);
+        /deep/ .el-loading-mask {
+            border-radius: 3px;
+            background-color: #edf2fc;
+            .el-loading-spinner {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-top: 0 !important;
+                transform: translateY(-50%) !important;
+                svg {
+                    width: 20px;
+                    height: 20px;
+                    margin-right: 10px;
+                    circle {
+                        stroke: #909399;
+                    }
+                }
+                .el-loading-text {
+                    color: #909399;
+                }
+            }
+        }
+    }
 }
 </style>

+ 3 - 5
src/router/index.ts

@@ -1,23 +1,21 @@
 import Vue from "vue";
 import VueRouter, { RouteConfig } from "vue-router";
-const Editer = () => import("../views/editer.vue");
-const Home = () => import("../views/home.vue");
 Vue.use(VueRouter);
 const routes: Array<RouteConfig> = [
     {
         path: "/",
         name: "index",
-        component: Home,
+        component: () => import(/* webpackChunkName: "home" */ "../views/home.vue"),
     },
     {
         path: "/editer",
         name: "Editer",
-        component: Editer,
+        component: () => import(/* webpackChunkName: "editer" */ "../views/editer.vue"),
     },
     {
         path: "/home",
         name: "Home",
-        component: Home,
+        component: () => import(/* webpackChunkName: "home" */ "../views/home.vue"),
     },
 ];