Browse Source

竖井业务空间canvas

LXXXY 5 years ago
parent
commit
41f1147b2d
2 changed files with 268 additions and 25 deletions
  1. 247 15
      src/components/ledger/lib/cenoteGraphy.vue
  2. 21 10
      src/views/ledger/cenotelist/relatedSpace.vue

+ 247 - 15
src/components/ledger/lib/cenoteGraphy.vue

@@ -1,15 +1,15 @@
 <template>
   <div id="cenoteGraphy" style="height:100%;width:100%;" ref="graphy">
-    <div v-if="!FloorMap">
+    <!-- <div v-if="!FloorMap">
       <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-else v-loading="canvasLoading">
+    </div> -->
+    <div class="canvas-box" v-loading="canvasLoading">
       <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
       <el-row class="canvas-actions-box">
-        <canvasFun @fit="fit"  @scale="scale" ref="canvasFun"></canvasFun>
+        <!-- <canvasFun @fit="fit" @scale="scale" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun> -->
       </el-row>
     </div>
   </div>
@@ -20,22 +20,233 @@ import canvasFun from "@/components/business_space/newGraphy/canvasFun";
 import { SColor, SPoint } from "@saga-web/draw/lib";
 import { DivideFloorScene, SpaceItem, ZoneItem } from "@saga-web/cad-engine/lib";
 import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
+import { getFloorMsgByFloorID, queryZone, shaftSpaceQuery } from '@/api/scan/request';
+import { resolve, reject } from 'q';
+const colorArr = [
+  "#fed44c",
+  "#3485d6",
+  "#a384fc",
+  "#4caf50",
+  "#ff6316",
+  "#fd8bbe",
+  "#03a9f3",
+  "#ea615b"
+];
 export default {
   data() {
     return {
-      canvasLoading:false,//加载canvas
-      FloorMap:false,//地图
+      canvasLoading: false,//加载canvas
+      FloorMap: '',//地图
       canvasWidth: 800,
       canvasHeight: 600,
-       view: null,
+      view: null,
       scene: null,
+      buildingData: [],//建筑,楼层
+      space: '',//当前空间类型
+      businessSpaceList: [],//所有业务空间
+      BSPRelaISPList: [],//已关联元空间的业务空间
+      zoneList: [], // 业务空间-canvas图中
+      selectAble: false,
+      relatedSpaceIdList: [],//已关联的业务空间id
+      config: () => {
+        return {
+          isEdit: false,
+          divide: true,
+          groupSelect: true
+        }
+      },
     }
   },
   mounted() {
     this.canvasWidth = this.$refs.graphy.offsetWidth;
     this.canvasHeight = this.$refs.graphy.offsetHeight;
   },
-  methods:{
+  components: {
+    canvasFun
+  },
+  created() {
+
+  },
+  methods: {
+    //获取楼层map
+    getFloorMap(buildfloor, space) {
+      if (buildfloor.length == 2) {
+        this.buildingData = buildfloor
+        let pa = {
+          Filters: `FloorID='${this.buildingData[1]}'`
+        }
+        getFloorMsgByFloorID(pa, res => {
+          this.floorMap = res.Content[0].StructureInfo ? res.Content[0].StructureInfo.FloorMap : '';
+          this.space = space;
+          this.getGraphy();
+        })
+      }
+    },
+    //加载
+    load() {
+      if (this.scene) {
+        this.scene.clearSpaceSelection();
+        this.scene.clearZoneSelection();
+      }
+      //加载底板
+      this.getGraphy()
+    },
+    //获取底图
+    getGraphy() {
+      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;
+        if (res == 'error') {
+          this.floorMap = '';
+          this.$message.warning('数据解析异常');
+          return;
+        }
+        that.view.scene = that.scene;
+        // 绘制业务空间
+        that.getBusinessSpace();
+        that.view.fitSceneToView();
+      })
+    },
+    // 获取当前分区下的业务空间
+    getBusinessSpace() {
+      this.canvasLoading = true
+      this.clearZoneCanvas();
+      let promise1 = new Promise((resolve, reject) => {
+        let params = {
+          data: {
+            Filters: `not RoomID isNull;ObjectType = '${this.space}';buildingId = '${this.buildingData[0]}';floorId = '${this.buildingData[1]}'`,
+            Orders: "RoomLocalName desc"
+          },
+          ShaftId: this.$route.query.ShaftId
+        };
+        shaftSpaceQuery(params, res => {
+          resolve(res)
+        })
+      });
+      let promise2 = new Promise((resolve, reject) => {
+        let pa = {
+          zone: this.space,
+          data: {
+            Filters: ``,
+            Orders: "createTime desc, RoomID asc",
+            PageSize: 1000
+          }
+        }
+        if (this.buildingData.length && this.buildingData.length > 1) {
+          pa.data.Filters = `BuildingId='${this.buildingData[0]}';FloorId='${this.buildingData[1]}'`
+        }
+        queryZone(pa, res => {
+          resolve(res);
+        })
+      })
+      Promise.all([promise1, promise2]).then(values => {
+        let relatedZone = values[0].Content;
+        let zoneData = values[1].Content;
+        console.log(relatedZone);
+        console.log(values[1])
+        relatedZone.map(item => {
+          this.relatedSpaceIdList.push(item.RoomID);
+        })
+        // 所有业务空间
+        this.businessSpaceList = zoneData;
+        // 已关联元空间的业务空间
+        this.BSPRelaISPList = [];
+        zoneData.map(t => {
+          if (t.Outline && t.Outline.length) {
+            this.BSPRelaISPList.push(t)
+          }
+        })
+        // 绘制业务空间
+        let tempArr = this.BSPRelaISPList.map((t, i) => {
+          let item = {
+            RoomLocalName: t.RoomLocalName,
+            OutLine: t.Outline,
+            RoomID: t.RoomID,
+            Color: colorArr[i % colorArr.length],
+          }
+          return item;
+        })
+        this.scene.zoneList = [];
+        this.scene.addZoneList(tempArr);
+        this.scene.click(this, this.canvasClick);
+        this.zoneList = this.scene.zoneList;
+        this.scene.zoneList.map(t => {
+          if (this.relatedSpaceIdList.indexOf(t.data.RoomID) != -1) {
+            t.highLightFlag = true;
+          }
+        })
+        this.canvasLoading = false;
+      })
+    },
+    // canvas点击事件
+    canvasClick(item, event) {
+      console.log(this.relatedSpaceIdList.indexOf(item.data.RoomID)," ",item.data.RoomID)
+      console.log(this.relatedSpaceIdList)
+      if (this.relatedSpaceIdList.indexOf(item.data.RoomID) != -1) {
+        item.highLightFlag = false;
+        this.relatedSpaceIdList = this.relatedSpaceIdList.filter(t => { return t != item.data.RoomID });
+      }
+      else {
+        item.highLightFlag = true;
+        this.relatedSpaceIdList.push(item.data.RoomID);
+      }
+      console.log(this.relatedSpaceIdList.length);
+      // console.log(this.scene)
+      // console.log(item)
+      // console.log(this.zoneList)
+      // this.clearZoneCanvas();
+      // this.scene.addZoneList(this.zoneList);
+      // console.log(item)
+      // console.log(event)
+      // if (this.type == 4) {//重新划分
+
+      // } else if (this.type == 5) {//批量
+
+      // } else {
+      //   if (item instanceof SpaceItem && item.selectable) {
+      //     if (this.type == 2) {
+      //       this.scene.clearZoneSelection();
+      //     }
+      //     this.type = 3;
+      //     this.curZoneItem = {};
+      //   }
+      //   if (item instanceof ZoneItem && item.selectable) {
+      //     if (this.type == 3) {
+      //       this.scene.clearSpaceSelection();
+      //     }
+      //     this.type = 2;
+      //     this.curZoneItem = item;
+      //     this.scene.clearZoneSelection();
+      //     item.selected = true;
+      //   }
+      // }
+    },
+    //是否可点
+    setSelectAble(val) {
+      if (this.scene) {
+        this.selectAble = val && !this.$route.query.onlyRead;
+        this.scene.isZoneSelectable = this.selectAble;
+      }
+    },
+    // 清除canvas
+    clearGraphy() {
+      // debugger
+      if (this.view && this.view.scene) {
+        this.view.scene = null;
+        return
+      }
+      this.view = new FloorView('floorCanvas')
+    },
+    // 清空绘制业务空间
+    clearZoneCanvas() {
+      this.zoneList.map(t => {
+        this.scene.removeItem(t);
+      })
+    },
     // 适配底图到窗口
     fit() {
       this.view.fitSceneToView()
@@ -48,16 +259,37 @@ export default {
       let scale = this.view.scale;
       this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
     },
+    // 保存为png
+    savePng() {
+      this.view.saveImage(`${this.buildingData[1]}.png`, 'png');
+    },
+    // 保存为svg
+    saveSvg() {
+      this.view.saveSceneSvg(`${this.buildingData[1]}.svg`, 6400, 4800);
+    },
+    // 保存json
+    saveJson() {
+      this.view.saveFloorJson(`${this.buildingData[1]}.json`)
+    },
+  },
+  watch: {
+    "view.scale": {
+      handler(n) {
+        if (this.$refs.canvasFun) {
+          this.$refs.canvasFun.sliderVal = n * 10 / this.view.minScale;
+        }
+      }
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
- .canvas-actions-box {
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 999;
-  }
+.canvas-actions-box {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 999;
+}
 </style>

+ 21 - 10
src/views/ledger/cenotelist/relatedSpace.vue

@@ -25,7 +25,7 @@
           <el-radio-button label="2" class="space-own-radio" style="width: 68px;">列表</el-radio-button>
         </el-radio-group>
       </div>
-      <div v-if="isMyTab == 1" class="data-item">
+      <div v-show="isMyTab == 1" class="data-item">
         <el-select v-model="building" placeholder="请选择建筑" @change="changeBuilding" v-loading="buildingLoading">
           <el-option v-for="item in buildingList" :key="item.value" :label="item.BuildLocalName" :value="item.BuildID"></el-option>
         </el-select>
@@ -40,12 +40,12 @@
             </div>
           </el-scrollbar>
           <div style="float:right;height:100%;width:calc(100% - 150px);">
-            <cenote-graphy></cenote-graphy>
+            <cenote-graphy ref="cenotegraphy"></cenote-graphy>
           </div>
         </div>
 
       </div>
-      <div v-else class="data-item">
+      <div v-show="isMyTab == 2" class="data-item">
         <related-spaceList :space="space" :buildingList="buildingList" :spaceType="spaceType" :floorType="floorType" ref="relatedSpacelist">
         </related-spaceList>
       </div>
@@ -73,7 +73,7 @@ export default {
       dialogVisible: false,//添加空间弹窗
       spaceType: {},//空间种类
       floorType: {},//子组件楼层信息
-      buildingLoading:false,//左侧列表加载
+      buildingLoading: false,//左侧列表加载
     }
   },
   computed: {
@@ -151,11 +151,11 @@ export default {
           this.buildingList = this.buildingList.map(item => {
             item.Floor = item.FloorList;
             item.BuildID = item.BuildingId;
-            item.BuildLocalName = item.BuildingName;
+            item.BuildLocalName = item.BuildingLocalName;
             if (item.Floor) {
               item.Floor = item.Floor.map(item => {
                 item.FloorID = item.FloorId;
-                item.FloorLocalName = item.FloorName;
+                item.FloorLocalName = item.FloorLocalName;
                 return item;
               })
             }
@@ -205,14 +205,14 @@ export default {
     },
     //加载数据
     load() {
-      
+
     },
     //更换建筑
     changeBuilding(bid) {
       this.buildingList.map(item => {
         if (item.BuildID == bid) {
           this.buildingObj = item;
-          if(item.Floor && item.Floor.length){
+          if (item.Floor && item.Floor.length) {
             this.floor = item.Floor[0].FloorID
           }
         }
@@ -234,7 +234,7 @@ export default {
           this.spaceList.shift();
         }
       }
-      if(this.spaceList.length){
+      if (this.spaceList.length) {
         this.changeSpace(this.spaceList[0].Code);
       }
       this.isMyTab = val;
@@ -253,7 +253,18 @@ export default {
     }
   },
   watch: {
-
+    floor: {
+      handler(val) {
+          this.isEdit = false;
+          let buildfloor = [this.building, val]
+          this.$refs.cenotegraphy.getFloorMap(buildfloor, this.space)
+      }
+    },
+    isEdit: {
+      handler(val) {
+        this.$refs.cenotegraphy.setSelectAble(val);
+      }
+    }
   }
 }
 </script>