Browse Source

修改租户台账 平面图部分 逻辑

haojianlong 5 years ago
parent
commit
ec5e4bbbcf

+ 49 - 56
src/components/ledger/lib/cenoteGraphy.vue

@@ -9,7 +9,8 @@
     <div class="canvas-box" v-show="floorMap" v-loading="canvasLoading">
       <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
       <el-row class="canvas-actions-box">
-        <canvasFun @scale="scale" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun>
+        <canvasFun @scale="scale" @groupSelect="groupSelect" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config"
+          ref="canvasFun"></canvasFun>
       </el-row>
     </div>
   </div>
@@ -40,7 +41,8 @@ export default {
       selectAble: false,
       relatedSpaceIdList: [],//已关联的业务空间id
       config: {
-        isEdit: false
+        isEdit: false,
+        groupSelect: true
       },
     }
   },
@@ -68,7 +70,7 @@ export default {
           this.getGraphy();
         })
       }
-      else{
+      else {
         this.floorMap = '';
       }
     },
@@ -86,7 +88,6 @@ export default {
       let that = this;
       that.clearGraphy()
       that.scene = new DivideFloorScene();
-      that.scene.isSpaceSelectable = false;
       that.canvasLoading = true;
       that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.floorMap}`).then(res => {
         that.canvasLoading = false;
@@ -96,6 +97,7 @@ export default {
           return;
         }
         that.view.scene = that.scene;
+        that.scene.isSpaceSelectable = false;
         // 绘制业务空间
         that.getBusinessSpace();
         that.view.fitSceneToView();
@@ -108,7 +110,6 @@ export default {
     // 获取当前分区下的业务空间
     getBusinessSpace() {
       this.canvasLoading = true
-      this.clearZoneCanvas();
       let promise1 = new Promise((resolve, reject) => {
         let params = {
           data: {
@@ -155,59 +156,61 @@ export default {
         })
         // 绘制业务空间
         let tempArr = this.BSPRelaISPList.map((t, i) => {
-          let item = {
-            RoomLocalName: t.RoomLocalName,
-            OutLine: t.Outline,
-            RoomID: t.RoomID,
-            Color: colorArr[i % colorArr.length],
+          if (t.FloorId == this.buildingData[1] && t.ObjectType == this.space) {
+            return {
+              RoomLocalName: t.RoomLocalName,
+              OutLine: t.Outline,
+              RoomID: t.RoomID,
+              Color: colorArr[i % colorArr.length],
+              HighLightFlag: relatedZone.findIndex((item) => (item.RoomID == t.RoomID)) > -1,
+              Transparency: relatedZone.findIndex((item) => (item.RoomID == t.RoomID)) > -1 ? 20 : 1
+            }
+          } else {
+            return undefined
           }
-          return item;
-        })
-        this.scene.zoneList = [];
+        }).filter(item => item)
+        this.scene.removeAllZone();
         this.scene.addZoneList(tempArr);
         this.scene.click(this, this.canvasClick);
-        this.zoneList = this.scene.zoneList;
-        this.scene.zoneList.map(t => {
-          t.selected = false;
-          if (this.relatedSpaceIdList.indexOf(t.data.RoomID) != -1) {
-            // t.selected = true;
-            t.highLightFlag = true;
-          }
-        })
         this.canvasLoading = false;
       })
     },
     // canvas点击事件
     canvasClick(item, event) {
-      if (item.selectable) {
-        if (this.selectAble) {
-          if (this.relatedSpaceIdList.indexOf(item.data.RoomID) != -1) {
-            this.relatedSpaceIdList = this.relatedSpaceIdList.filter(t => { return t != item.data.RoomID });
-          }
-          else {
-            this.relatedSpaceIdList.push(item.data.RoomID);
-          }
-        }
-        else {
-          item.selected = !item.selected;
-        }
+      if (!this.config.isEdit) {
+        item.selected = false;
       }
     },
     //取消编辑
     cancelEdit() {
+      this.config.isEdit = false;
+      this.scene.clearZoneSelection();
       this.getBusinessSpace();
     },
+    //编辑
+    edit() {
+      this.config.isEdit = true;
+      this.scene.zoneList.map(t => {
+        t.selected = t.highLightFlag;
+        t.transparency = 20;
+        t.highLightFlag = false;
+      })
+    },
     //保存编辑
     saveEdit() {
+      let arr = this.scene.getSelectedZone();
       let param = {
         BuildingId: this.buildingData[0],
         FloorId: this.buildingData[1],
         Type: this.space,
         data: {
           ShaftId: this.$route.query.ShaftId,
-          SpaceIdList: this.relatedSpaceIdList
+          SpaceIdList: []
         }
       }
+      param.data.SpaceIdList = arr.map(t => {
+        return t.data.RoomID;
+      })
       shaftZoneLink(param, res => {
         if (res.Result == "success") {
           this.$message.success("保存成功");
@@ -215,21 +218,6 @@ export default {
         }
       })
     },
-    //是否可点
-    setSelectAble(val) {
-      if (this.scene) {
-        this.selectAble = val && !this.$route.query.onlyRead;
-        if (this.selectAble) {
-          this.scene.zoneList.map(t => {
-            t.highLightFlag = false;
-            t.selected = false;
-            if (this.relatedSpaceIdList.indexOf(t.data.RoomID) != -1) {
-              t.selected = true;
-            }
-          })
-        }
-      }
-    },
     // 清除canvas
     clearGraphy() {
       // debugger
@@ -240,12 +228,6 @@ export default {
       }
       this.view = new FloorView('floorCanvas')
     },
-    // 清空绘制业务空间
-    clearZoneCanvas() {
-      this.zoneList.map(t => {
-        this.scene.removeItem(t);
-      })
-    },
     // 适配底图到窗口
     fit() {
       this.view.fitSceneToView()
@@ -266,6 +248,10 @@ export default {
     saveSvg() {
       this.view.saveSceneSvg(`${this.buildingData[1]}.svg`, 6400, 4800);
     },
+    // 框选
+    groupSelect() {
+      this.scene.isRectSelection = 2;
+    },
     // 保存json
     saveJson() {
       this.view.saveFloorJson(`${this.buildingData[1]}.json`)
@@ -279,7 +265,14 @@ export default {
           this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
         }
       }
-    }
+    },
+    "scene.isRectSelection": {
+      handler(n) {
+        if (!n) {
+          this.$refs.canvasFun.active = '';
+        }
+      }
+    },
   }
 }
 </script>

+ 7 - 2
src/views/ledger/cenotelist/relatedSpace.vue

@@ -6,7 +6,7 @@
         <div class="edit-tool" v-if="!cenoteObj.onlyRead">
           <el-button v-if="isMyTab == 2" size="small" style="float:right" @click="dialogVisible = true">添加</el-button>
           <div v-else>
-            <el-button v-show="!isEdit" @click="isEdit = true" size="small" style="float:right">编辑</el-button>
+            <el-button v-show="!isEdit" @click="changeEditType" size="small" style="float:right">编辑</el-button>
             <el-button v-show="isEdit" size="small" @click="saveEdit" style="float:right">保存</el-button>
             <el-button v-show="isEdit" size="small" @click="cancelEdit" style="float:right">取消</el-button>
           </div>
@@ -249,6 +249,11 @@ export default {
       let buildfloor = [this.building, fid]
       this.$refs.cenotegraphy.getFloorMap(buildfloor, this.space)
     },
+    // 编辑
+    changeEditType() {
+      this.isEdit = true;
+      this.$refs.cenotegraphy.edit();
+    },
     //取消编辑
     cancelEdit() {
       this.isEdit = false;
@@ -289,7 +294,7 @@ export default {
   watch: {
     isEdit: {
       handler(val) {
-        this.$refs.cenotegraphy.setSelectAble(val);
+        // this.$refs.cenotegraphy.setSelectAble(val);
       }
     },
     projectId: {