Browse Source

修改:台账管理 -> 竖井台账 -> 编辑关联的业务空间时,平面图不能适应容器大小的问题

niuheng 3 years ago
parent
commit
38aa9b147a
1 changed files with 180 additions and 113 deletions
  1. 180 113
      src/components/ledger/lib/cenoteGraphy.vue

+ 180 - 113
src/components/ledger/lib/cenoteGraphy.vue

@@ -1,16 +1,33 @@
 <template>
-  <div id="cenoteGraphy" style="height:100%;width:100%;" ref="graphy">
+  <div id="cenoteGraphy" style="height: 100%; width: 100%" ref="graphy">
     <div v-show="!floorMap">
-      <div class="center" style="height: 400px;padding-top:182px;box-sizing:border-box;">
+      <div
+        class="center"
+        style="height: 400px; padding-top: 182px; box-sizing: border-box"
+      >
         <i class="icon-wushuju iconfont"></i>
         暂无数据
       </div>
     </div>
     <div class="canvas-box" v-show="floorMap" v-loading="canvasLoading">
-      <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
+      <canvas
+        id="floorCanvas"
+        :width="canvasWidth"
+        :height="canvasHeight"
+        ref="canvas"
+        tabindex="0"
+      ></canvas>
       <el-row class="canvas-actions-box">
-        <canvasFun @scale="scale" @groupSelect="groupSelect" @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>
@@ -19,10 +36,20 @@
 <script>
 import canvasFun from "@/components/business_space/newGraphy/canvasFun";
 import { SColor, SPoint } from "@saga-web/draw/lib";
-import { DivideFloorScene, SpaceItem, ZoneItem, Opt } from "@saga-web/cad-engine/lib";
+import {
+  DivideFloorScene,
+  SpaceItem,
+  ZoneItem,
+  Opt,
+} from "@saga-web/cad-engine/lib";
 import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
-import { colorArr } from '@/utils/spaceColor';
-import { getFloorMsgByFloorID, shaftSpaceQuery, shaftZoneLinkReplace, zoneQueryOutline } from '@/api/scan/request';
+import { colorArr } from "@/utils/spaceColor";
+import {
+  getFloorMsgByFloorID,
+  shaftSpaceQuery,
+  shaftZoneLinkReplace,
+  zoneQueryOutline,
+} from "@/api/scan/request";
 import { mapGetters } from "vuex";
 export default {
   props: {
@@ -30,26 +57,26 @@ export default {
   },
   data() {
     return {
-      canvasLoading: false,//加载canvas
-      floorMap: '',//地图
+      canvasLoading: false, //加载canvas
+      floorMap: "", //地图
       canvasWidth: 800,
       canvasHeight: 600,
       view: null,
       scene: null,
-      buildingData: [],//建筑,楼层
-      space: '',//当前空间类型
-      businessSpaceList: [],//所有业务空间
-      BSPRelaISPList: [],//已关联元空间的业务空间
+      buildingData: [], //建筑,楼层
+      space: "", //当前空间类型
+      businessSpaceList: [], //所有业务空间
+      BSPRelaISPList: [], //已关联元空间的业务空间
       zoneList: [], // 业务空间-canvas图中
       selectAble: false,
-      relatedSpaceIdList: [],//已关联的业务空间id
+      relatedSpaceIdList: [], //已关联的业务空间id
       config: {
         isEdit: false,
-        groupSelect: true
+        groupSelect: true,
       },
       sceneMarkList: [],
       isFirstFlag: true,
-    }
+    };
   },
   mounted() {
     this.canvasWidth = this.$refs.graphy.offsetWidth;
@@ -57,42 +84,54 @@ export default {
     this.isFirstFlag = true;
   },
   components: {
-    canvasFun
+    canvasFun,
   },
   computed: {
-    ...mapGetters("layout", ["projectId","projects"]),
+    ...mapGetters("layout", ["projectId", "projects"]),
     projectName() {
-      let projectObj = this.projects.find(item => {
-        return item.id == this.projectId
-      })
-      return projectObj?projectObj.name?projectObj.name:projectObj.id:this.projectId
-    }
+      let projectObj = this.projects.find((item) => {
+        return item.id == this.projectId;
+      });
+      return projectObj
+        ? projectObj.name
+          ? projectObj.name
+          : projectObj.id
+        : this.projectId;
+    },
   },
   created() {
-    Opt.sceneMarkColor = new SColor('#ffffff');
+    Opt.sceneMarkColor = new SColor("#ffffff");
   },
   methods: {
     //获取楼层map
     getFloorMap(buildfloor, space) {
-      if (buildfloor.length == 2 && space && buildfloor[0] && buildfloor[1] && buildfloor[1] !== 'all' && buildfloor[1] !== 'noKnow') {
-        this.buildingData = buildfloor
+      if (
+        buildfloor.length == 2 &&
+        space &&
+        buildfloor[0] &&
+        buildfloor[1] &&
+        buildfloor[1] !== "all" &&
+        buildfloor[1] !== "noKnow"
+      ) {
+        this.buildingData = buildfloor;
         let pa = {
-          filters: `id='${this.buildingData[1]}'`
-        }
-        getFloorMsgByFloorID(pa, res => {
-          this.floorMap = res.content[0].infos ? res.content[0].infos.floorMap : '';
+          filters: `id='${this.buildingData[1]}'`,
+        };
+        getFloorMsgByFloorID(pa, (res) => {
+          this.floorMap = res.content[0].infos
+            ? res.content[0].infos.floorMap
+            : "";
           this.space = space;
           // 蒙版
           if (res.content[0].outline) {
-            this.sceneMarkList = res.content[0].outline.map(t => {
+            this.sceneMarkList = res.content[0].outline.map((t) => {
               return new SPoint(t.X, t.Y);
-            })
+            });
           }
           this.getGraphy();
-        })
-      }
-      else {
-        this.floorMap = '';
+        });
+      } else {
+        this.floorMap = "";
       }
     },
     //加载
@@ -102,85 +141,95 @@ export default {
         this.scene.clearZoneSelection();
       }
       //加载底板
-      this.getGraphy()
+      this.getGraphy();
     },
     //获取底图
     getGraphy() {
       let that = this;
-      that.clearGraphy()
-      if (!this.floorMap) return
+      that.clearGraphy();
+      if (!this.floorMap) return;
       that.scene = new DivideFloorScene();
       that.canvasLoading = true;
-      that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.floorMap}`).then(res => {
-        that.canvasLoading = false;
-        if (res == 'error') {
-          this.floorMap = '';
-          console.log('数据解析异常');
-          return;
-        }
-        that.view.scene = that.scene;
-        if (that.sceneMarkList.length) {
-          that.scene.addSceneMark(that.sceneMarkList)
-        }
-        that.scene.isSpaceSelectable = false;
-        // 绘制业务空间
-        that.getBusinessSpace();
-        if (this.isFirstFlag) {
+      that.scene
+        .loadUrl(
+          `/image-service/common/file_get?systemId=revit&key=${this.floorMap}`
+        )
+        .then((res) => {
+          that.canvasLoading = false;
+          if (res == "error") {
+            this.floorMap = "";
+            console.log("数据解析异常");
+            return;
+          }
+          that.view.scene = that.scene;
+          if (that.sceneMarkList.length) {
+            that.scene.addSceneMark(that.sceneMarkList);
+          }
+          that.scene.isSpaceSelectable = false;
+          // 绘制业务空间
+          that.getBusinessSpace();
+          // if (this.isFirstFlag) {
+          //   that.fit();
+          //   that.view.minScale = that.view.scale;
+          //   if (that.$refs.canvasFun) {
+          //     that.$refs.canvasFun.everyScale = that.view.scale;
+          //   }
+          //   this.isFirstFlag = false;
+          // }
           that.fit();
           that.view.minScale = that.view.scale;
           if (that.$refs.canvasFun) {
             that.$refs.canvasFun.everyScale = that.view.scale;
           }
           this.isFirstFlag = false;
-        }
-      })
+        });
     },
     // 获取当前分区下的业务空间
     getBusinessSpace() {
-      this.canvasLoading = true
+      this.canvasLoading = true;
       let promise1 = new Promise((resolve, reject) => {
         let params = {
           data: {
             filters: `not id isNull;classCode='${this.space}';buildingId='${this.buildingData[0]}';floorId='${this.buildingData[1]}'`,
-            Orders: "localName desc"
+            Orders: "localName desc",
           },
-          ShaftId: this.$route.query.ShaftId
+          ShaftId: this.$route.query.ShaftId,
         };
-        shaftSpaceQuery(params, res => {
-          resolve(res)
-        })
+        shaftSpaceQuery(params, (res) => {
+          resolve(res);
+        });
       });
       let promise2 = new Promise((resolve, reject) => {
         let pa = {
           filters: `not id isNull`,
           orders: "createTime desc, id asc",
           pageSize: 1000,
-          zoneType: this.space
-        }
+          zoneType: this.space,
+        };
         if (this.buildingData.length && this.buildingData.length > 1) {
           pa.BuildingId = this.buildingData[0];
           pa.FloorId = this.buildingData[1];
         }
-        zoneQueryOutline(pa, res => {
+        zoneQueryOutline(pa, (res) => {
           resolve(res);
-        })
-      })
-      Promise.all([promise1, promise2]).then(values => {
+        });
+      });
+      Promise.all([promise1, promise2]).then((values) => {
         let relatedZone = values[0].content;
         let zoneData = values[1].content;
         this.relatedSpaceIdList = [];
-        relatedZone.map(item => {
+        relatedZone.map((item) => {
           this.relatedSpaceIdList.push(item.id);
-        })
+        });
         // 所有业务空间
         this.businessSpaceList = zoneData;
         // 已关联元空间的业务空间
         this.BSPRelaISPList = [];
-        zoneData.map(t => {
+        zoneData.map((t) => {
           if (t.outline && t.outline.length) {
-            this.BSPRelaISPList.push(t)
+            this.BSPRelaISPList.push(t);
           }
-        })
+        });
         // 绘制业务空间
         let tempArr = this.BSPRelaISPList.map((t, i) => {
           if (t.floorId == this.buildingData[1] && t.classCode == this.space) {
@@ -189,25 +238,27 @@ export default {
               OutLine: t.outline,
               RoomID: t.id,
               Color: colorArr[i % colorArr.length],
-              HighLightFlag: relatedZone.findIndex((item) => (item.id == t.id)) > -1,
-              Transparency: relatedZone.findIndex((item) => (item.id == t.id)) > -1 ? 20 : 1
-            }
+              HighLightFlag:
+                relatedZone.findIndex((item) => item.id == t.id) > -1,
+              Transparency:
+                relatedZone.findIndex((item) => item.id == t.id) > -1 ? 20 : 1,
+            };
           } else {
-            return undefined
+            return undefined;
           }
-        }).filter(item => item)
+        }).filter((item) => item);
         this.scene.removeAllZone();
         this.scene.addZoneList(tempArr);
         this.scene.click(this, this.canvasClick);
         if (this.config.isEdit) {
-            this.scene.zoneList.map(t => {
-                t.selected = t.highLightFlag;
-                t.transparency = 20;
-                t.highLightFlag = false;
-            })
+          this.scene.zoneList.map((t) => {
+            t.selected = t.highLightFlag;
+            t.transparency = 20;
+            t.highLightFlag = false;
+          });
         }
         this.canvasLoading = false;
-      })
+      });
     },
     // canvas点击事件
     canvasClick(item, event) {
@@ -217,19 +268,19 @@ export default {
     },
     // 立面图选中空间对应平面图选中
     canvasChecked(RoomID) {
-      this.scene.zoneList.map(zoneItem => {
+      this.scene.zoneList.map((zoneItem) => {
         if (zoneItem.data.RoomID == RoomID) {
           zoneItem.selected = true;
         }
-      })
+      });
     },
     // 立面图取消选中对应平面图取消选中
     canvasUncheck(RoomID) {
-      this.scene.zoneList.map(zoneItem => {
+      this.scene.zoneList.map((zoneItem) => {
         if (zoneItem.data.RoomID == RoomID) {
           zoneItem.selected = false;
         }
-      })
+      });
     },
     //取消编辑
     cancelEdit() {
@@ -242,11 +293,11 @@ export default {
     //编辑
     edit() {
       this.config.isEdit = true;
-      this.scene.zoneList.map(t => {
+      this.scene.zoneList.map((t) => {
         t.selected = t.highLightFlag;
         t.transparency = 20;
         t.highLightFlag = false;
-      })
+      });
     },
     //保存编辑
     saveEdit() {
@@ -257,17 +308,17 @@ export default {
         type: this.space,
         data: {
           shaftId: this.$route.query.ShaftId,
-          spaceIdList: []
-        }
-      }
-      param.data.spaceIdList = arr.map(t => {
+          spaceIdList: [],
+        },
+      };
+      param.data.spaceIdList = arr.map((t) => {
         return t.data.RoomID;
-      })
-      shaftZoneLinkReplace(param, res => {
+      });
+      shaftZoneLinkReplace(param, (res) => {
         this.config.isEdit = false;
         this.$message.success("保存成功");
         this.getBusinessSpace();
-      })
+      });
     },
     // 清除canvas
     clearGraphy() {
@@ -275,17 +326,20 @@ export default {
       this.scene = null;
       if (this.view) {
         this.view.scene = null;
-        return
+        // return
       }
-      this.view = new FloorView('floorCanvas')
+      this.view = null;
+      this.view = new FloorView("floorCanvas");
+      this.view.connect("leftMove", this, function () {});
     },
     // 适配底图到窗口
     fit() {
+      this.view.DragMove = true;
       if (this.scene.sceneMark) {
-        this.view.fitItemToView([this.scene.sceneMark])
-        return
+        this.view.fitItemToView([this.scene.sceneMark]);
+        return;
       }
-      this.view.fitSceneToView()
+      this.view.fitSceneToView();
     },
     // 缩放
     scale(val) {
@@ -293,15 +347,26 @@ export default {
         return;
       }
       let scale = this.view.scale;
-      this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
+      this.view.scaleByPoint(
+        val / scale,
+        this.canvasWidth / 2,
+        this.canvasHeight / 2
+      );
     },
     // 保存为png
     savePng() {
-      this.view.saveImage(`${this.projectName}-${this.buildFloorName}.png`, 'png');
+      this.view.saveImage(
+        `${this.projectName}-${this.buildFloorName}.png`,
+        "png"
+      );
     },
     // 保存为svg
     saveSvg() {
-      this.view.saveSceneSvg(`${this.projectName}-${this.buildFloorName}.svg`, 6400, 4800);
+      this.view.saveSceneSvg(
+        `${this.projectName}-${this.buildFloorName}.svg`,
+        6400,
+        4800
+      );
     },
     // 框选
     groupSelect() {
@@ -309,27 +374,29 @@ export default {
     },
     // 保存json
     saveJson() {
-      this.view.saveFloorJson(`${this.projectName}-${this.buildFloorName}.json`)
+      this.view.saveFloorJson(
+        `${this.projectName}-${this.buildFloorName}.json`
+      );
     },
   },
   watch: {
     "view.scale": {
       handler(n) {
         if (this.$refs.canvasFun) {
-          let s = n * 10 / this.view.minScale
+          let s = (n * 10) / this.view.minScale;
           this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
         }
-      }
+      },
     },
     "scene.isRectSelection": {
       handler(n) {
         if (!n) {
-          this.$refs.canvasFun.active = '';
+          this.$refs.canvasFun.active = "";
         }
-      }
+      },
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang="less" scoped>