Browse Source

添加上一个 下一个事件

haojianlong 5 years ago
parent
commit
6de84c8634
1 changed files with 40 additions and 23 deletions
  1. 40 23
      src/views/ledger/rentlist/manageTenantZone.vue

+ 40 - 23
src/views/ledger/rentlist/manageTenantZone.vue

@@ -41,9 +41,9 @@
             </div>
           </div>
         </div>
-        <div class="canvas-container" ref="graphy" v-loading="canvasLoading" v-show="hasMap">
+        <div class="canvas-container" ref="graphy" v-loading="canvasLoading">
           <div class="floor-container">
-            <div class="before">
+            <div class="before" @click="toBefore">
               <div><i class="el-icon-caret-top"></i></div>
             </div>
             <div class="floor">
@@ -53,21 +53,19 @@
                   <span>9+</span>
                 </div>
               </div>
-              <div class="border"></div>
             </div>
-            <div class="after">
+            <div class="after" @click="toNext">
               <div><i class="el-icon-caret-bottom"></i></div>
             </div>
+            <div class="border"></div>
           </div>
-          <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
-          <div class="canvas-fun">
+          <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" v-show="hasMap"></canvas>
+          <div class="canvas-fun" v-show="hasMap">
             <canvasFun @scale="scale" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config"
               @groupSelect="groupSelect" ref="canvasFun">
             </canvasFun>
           </div>
-        </div>
-        <div class="canvas-container" v-show="!hasMap" style="display:flex;align-items:center;justify-content:center;">
-          <div class="center" style="flex:1;">
+          <div class="center" v-show="!hasMap">
             <i class="icon-wushuju iconfont"></i>
             暂无数据
           </div>
@@ -160,6 +158,20 @@ export default {
     groupSelect() {
       this.scene.isRectSelection = 2;
     },
+    // 上一个
+    toBefore() {
+      if (this.activeFloor > 0) {
+        let index = this.activeFloor - 1;
+        this.floorChange(index)
+      }
+    },
+    // 下一个
+    toNext() {
+      if (this.activeFloor < this.floorList.length - 1) {
+        let index = this.activeFloor + 1;
+        this.floorChange(index)
+      }
+    },
     // 获取列表
     getTenant() { },
     // 建筑修改
@@ -283,7 +295,6 @@ export default {
           this.scene.removeAllZone();
           this.scene.addZoneList(tempArr);
           this.scene.click(this, this.canvasClick);
-          this.zoneList = this.scene.zoneList;
           // 将已关联的高亮
           this.canvasLoading = false;
         })
@@ -295,10 +306,13 @@ export default {
         let floorMap = this.floorList[index].StructureInfo.FloorMap;
         this.clearGraphy();
         this.scene = new DivideFloorScene();
+        this.hasMap = true;
         this.canvasLoading = true;
         this.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${floorMap}`).then(res => {
           if (res == 'error') {
             this.$message.warning('数据解析异常');
+            this.hasMap = false;
+            this.canvasLoading = false;
             return;
           }
           this.view.scene = this.scene;
@@ -312,7 +326,7 @@ export default {
           }
         })
       } else {
-
+        this.hasMap = false;
       }
     },
     // 保存关系
@@ -396,10 +410,13 @@ export default {
     position: relative;
     width: 100%;
     height: calc(100% - 53px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     .floor-container {
       position: absolute;
       width: 60px;
-      height: 250px;
+      height: 260px;
       top: 20px;
       left: 20px;
       z-index: 2;
@@ -466,17 +483,17 @@ export default {
             }
           }
         }
-        div.border {
-          position: absolute;
-          width: 52px;
-          height: 100%;
-          left: 50%;
-          top: 0;
-          z-index: -1;
-          transform: translateX(-50%);
-          border-left: 1px solid @normal-border-color;
-          border-right: 1px solid @normal-border-color;
-        }
+      }
+      div.border {
+        position: absolute;
+        width: 52px;
+        height: 100%;
+        left: 50%;
+        top: 0;
+        z-index: -1;
+        transform: translateX(-50%);
+        border-left: 1px solid @normal-border-color;
+        border-right: 1px solid @normal-border-color;
       }
     }
     .canvas-fun {