Browse Source

创建业务空间

haojianlong 4 years ago
parent
commit
a404d3dda3

+ 15 - 0
src/api/datacenter.ts

@@ -51,6 +51,21 @@ export function queryZone(postParams: any): any {
     return httputils.postJson(`${ baseApi }/object/zone/query`, postParams)
 }
 
+// 查询元空间信息
+export function queryIspace(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/ispace/query`, postParams)
+}
+
+// 创建空间
+export function createZone(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/zone/create`, postParams)
+}
+
+// 更新空间
+export function updateZone(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/zone/update`, postParams)
+}
+
 // 查询设备统计
 export function queryCount(postParams: any): any {
     return httputils.postJson(`${ baseApi }/object/equip/count`, postParams)

+ 9 - 0
src/utils/graph/FloorScene.ts

@@ -264,4 +264,13 @@ export class FloorScene extends SGraphScene {
         );
     }
 
+    /**
+     * 清空业务空间
+     */
+    removeAllZone(){
+        this.zoneList.forEach(t => {
+            this.removeItem(t);
+        })
+        this.zoneList = [];
+    }
 }

+ 8 - 8
src/utils/graph/config/zoneColor.ts

@@ -1,11 +1,11 @@
 const colorArr = [
-  "#fed44c",
-  "#3485d6",
-  "#a384fc",
-  "#4caf50",
-  "#ff6316",
-  "#fd8bbe",
-  "#03a9f3",
-  "#ea615b"
+  "#faf7db",
+  "#f9e8f2",
+  "#d1e7f7",
+  "#d6efdc",
+  "#e8e6fe",
+  "#fae0d0",
+  "#c7eefc",
+  "#e7f098"
 ];
 export default colorArr;

+ 38 - 0
src/views/maintain/space/components/createBSP.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogVisible" width="400px" id="createBSP">
+    <div>请输入创建的业务空间名:</div>
+    <el-input :placeholder="`请输入业务空间名称`" v-model="roomName"></el-input>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="small" @click="dialogVisible=false">取 消</el-button>
+      <el-button size="small" type="primary" @click="confirm">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: '提示',
+      dialogVisible: false,
+      roomName: '',
+    };
+  },
+  methods: {
+    // 显示弹窗
+    showDialog(val) {
+      this.roomName = val;
+      this.dialogVisible = true;
+    },
+    // 确认
+    confirm() {
+      if (this.roomName == '') {
+        this.$message.warning("请填写空间名称");
+        return
+      }
+      this.$emit('createRoom', this.roomName);
+      this.dialogVisible = false;
+    }
+  },
+};
+</script>

+ 183 - 50
src/views/maintain/space/components/spaceGraph.vue

@@ -27,8 +27,8 @@
                             </el-dropdown-menu>
                         </el-dropdown>
                         <!-- 点击已经关联的业务空间 -->
-                        <el-button plain @click="refactorBSP" :disabled="zoneDisable" style="margin-left:10px;">重新划分业务空间</el-button>
-                        <el-button plain :disabled="zoneDisable" style="margin-left:10px;">维护空间信息</el-button>
+                        <el-button plain @click="refactorBSP" :disabled="zoneDisable" style="margin-left:10px;">编辑业务空间</el-button>
+                        <!-- <el-button plain :disabled="zoneDisable" style="margin-left:10px;">维护空间信息</el-button> -->
                         <el-button plain @click="cancelGraphy" v-show="!zoneDisable">取 消</el-button>
                     </div>
                     <!-- 点击未关联的业务空间 -->
@@ -61,6 +61,8 @@
                 暂无数据
             </p>
         </div>
+        <!-- 创建新的业务空间 -->
+        <createBSP ref="createBSP" @createRoom="createRoom"></createBSP>
     </div>
 </template>
 <script lang="ts">
@@ -68,9 +70,21 @@ import { Vue, Component, Watch } from "vue-property-decorator";
 import { FloorView } from "@/utils/graph/FloorView";
 import { FloorScene } from "@/utils/graph/FloorScene";
 import canvasFun from "./canvasFun.vue";
+import {
+    queryZone,
+    queryIspace,
+    createZone,
+    updateZone,
+} from "@/api/datacenter";
+import createBSP from "./createBSP";
+import colorArr from "@/utils/graph/config/zoneColor";
+import { SObject } from "@persagy-web/base/lib";
+import { ItemColor } from "@persagy-web/big/lib";
+import { SSpaceItem } from "@persagy-web/big/lib/items/floor/SSpaceItem";
+import { SZoneItem } from "@persagy-web/big/lib/items/floor/ZoneItem";
 
 @Component({
-    components: { canvasFun },
+    components: { canvasFun, createBSP },
 })
 export default class spaceGraph extends Vue {
     canvasWidth = 800;
@@ -92,6 +106,13 @@ export default class spaceGraph extends Vue {
     buildFloor: string[] = [];
     floor = {}; // 当前楼层对象
     floorKey = ""; // 当前楼层底图请求完整url
+    curZoneType = "";
+    allzone = [];
+    BSPRelaISPList = [];
+    businessSpaceList = [];
+    BIMIDToSID = {};
+    BIMIDToSIName = {};
+    sourceIdToISP = {};
     // 挂载
     mounted(): void {
         this.canvasWidth = this.$refs.graphContainer.offsetWidth;
@@ -99,12 +120,13 @@ export default class spaceGraph extends Vue {
         this.getGraph();
     }
     // 父组件调用查询楼层底图
-    getData(floor) {
+    getData(floor, zoneType) {
+        this.curZoneType = zoneType[zoneType.length - 1];
         this.canvasLoading = true;
         if (floor.infos && floor.infos.floorMap) {
             this.floor = floor;
             this.floorKey = this.mapBaseUrl + floor.infos.floorMap;
-            this.getGraph();
+            this.init(1);
         } else {
             this.noMap();
         }
@@ -118,12 +140,11 @@ export default class spaceGraph extends Vue {
     init(initType: number): void {
         this.type = 1;
         if (this.scene) {
-            // this.scene.clearSpaceSelection();
-            // this.scene.clearZoneSelection();
-            // this.scene.clearLikeSpaces();
-            // this.zoneDisable = true;
-            // this.scene.isZoneSelectable = true;
-            // this.scene.isSpaceSelectable = false;
+            this.scene.selectContainer.clear();
+            this.scene.initSpaceColor();
+            this.zoneDisable = true;
+            this.scene.isZoneSelectable = true;
+            this.scene.isSpaceSelectable = false;
         }
         if (
             this.buildFloor.indexOf("all") > -1 ||
@@ -134,10 +155,10 @@ export default class spaceGraph extends Vue {
 
         if (initType == 1) {
             // 底图
-            // this.getGraphy();
+            this.getGraph();
         } else {
             // 业务空间
-            // this.getBusinessSpace();
+            this.getBussiness();
         }
         this.config = {
             isEdit: false,
@@ -145,11 +166,7 @@ export default class spaceGraph extends Vue {
             groupSelect: true,
         };
         // 获取当前楼层的元空间
-        // this.getFloorISpace();
-        // 查询未关联业务空间的元空间
-        // this.getISPSPUnrelaBSP();
-        // 查询未关联平面图的业务空间
-        // this.getBSPunrelaISP();
+        this.getFloorISpace();
     }
     // 获取底图
     getGraph(): void {
@@ -183,7 +200,9 @@ export default class spaceGraph extends Vue {
         }
         if (this.scene) {
             this.scene.changeSelect = this.changeSelect;
+            this.scene.isSpaceSelectable = false;
         }
+        this.getBussiness();
         this.canvasLoading = false;
     }
     // 清除canvas
@@ -194,7 +213,6 @@ export default class spaceGraph extends Vue {
         }
         this.view = new FloorView("spaceCanvas");
     }
-
     // 搜索
     querySearch(queryString: string, cb: Function) {
         let restaurants = this.zoneList;
@@ -204,26 +222,21 @@ export default class spaceGraph extends Vue {
         // 调用 callback 返回建议列表的数据
         cb(results);
     }
-
     // 过滤器
     createFilter(queryString: any) {
         return (restaurant: any) => {
             return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
         };
     }
-
     // 查询选中,定位
     handleSelect(zone) {
-        //   // 清空选中
-        //   this.scene.clearSpaceSelection();
-        //   this.scene.clearZoneSelection();
-        //   // 选中当前
-        //   zone.selected = true;
-        //   this.curZoneItem = zone;
-        //   this.zoneDisable = false;
-        //   this.view.fitSelectedToView();
+        // 清空选中
+        this.scene?.selectContainer.clear();
+        this.curZoneItem = zone;
+        this.scene?.selectContainer.setItem(zone);
+        this.zoneDisable = false;
+        this.view.fitSelectedToView();
     }
-
     // 点击创建业务空间
     editGraphy() {
         this.type = 3;
@@ -233,39 +246,159 @@ export default class spaceGraph extends Vue {
         this.scene!.isSpaceSelectable = true;
         this.scene!.isZoneSelectable = false;
         this.view?.update();
+        console.log(12312312);
     }
     // 创建新的业务空间
     createNewZone() {
-        //   let arr = this.scene.getSelectedSpaces();
-        //   if (arr.length) {
-        //     let tempArr = [];
-        //     arr.map(t => {
-        //       tempArr.push(this.BIMIDToSIName[t.data.SourceId]);
-        //     })
-        //     this.$refs.createBSP.showDialog(tempArr.toString());
-        //   } else {
-        //     this.$message.warning('请至少选择一个空间');
-        //   }
+        let arr = this.scene?.selectContainer.itemList;
+        if (arr.length) {
+            let tempArr = [];
+            arr.map((t) => {
+                tempArr.push(this.BIMIDToSIName[t.data.SourceId]);
+            });
+            this.$refs.createBSP.showDialog(tempArr.toString());
+        } else {
+            this.$message.warning("请至少选择一个空间");
+        }
     }
-
     handleCommand() {}
-
-    refactorBSP() {}
-
+    // 编辑业务空间
+    refactorBSP() {
+        this.scene!.isZoneSelectable = false;
+        this.scene!.isSpaceSelectable = true;
+        this.type = 4;
+        this.curZoneItem.visible = false;
+    }
     editeSpaceDetail() {}
-
+    // 获取元空间
+    getFloorISpace() {
+        const pa = {
+            floorId: this.floor.id,
+            buildingId: this.floor.buildingId,
+            pageSize: 2000,
+        };
+        queryIspace(pa).then((res) => {
+            if (res.message == this.floor.id) {
+                this.BIMIDToSID = {};
+                this.BIMIDToSIName = {};
+                this.sourceIdToISP = {};
+                res.content.map((t) => {
+                    let key = t.bimId.split(":")[1];
+                    this.BIMIDToSID[key] = t.id;
+                    this.BIMIDToSIName[key] = t.localName || t.name;
+                    this.sourceIdToISP[key] = t;
+                });
+            }
+        });
+    }
+    // 获取业务空间
+    getBussiness() {
+        const pa = {
+            filters: `classCode='${this.curZoneType}';floorId='${this.floor.id}';buildingId='${this.floor.buildingId}'`,
+            pageSize: 2000,
+        };
+        this.canvasLoading = true;
+        queryZone(pa).then((res) => {
+            // if (res.FloorId == this.buildFloor[1] && res.ZoneType == tempType) {
+            // 所有业务空间
+            this.businessSpaceList = res.content;
+            // 已关联元空间的业务空间
+            this.BSPRelaISPList = [];
+            res.content.map((t) => {
+                if (t.outline && t.outline.length) {
+                    this.BSPRelaISPList.push(t);
+                }
+            });
+            // 绘制业务空间
+            let tempArr = this.BSPRelaISPList.map((t, i) => {
+                return {
+                    RoomLocalName: t.localName || t.name,
+                    OutLine: t.outline,
+                    RoomID: t.id,
+                    Color: colorArr[i % colorArr.length],
+                };
+            }).filter((item) => item);
+            console.log(this.scene);
+            this.scene.removeAllZone();
+            this.scene.addZoneList(tempArr);
+            this.zoneList = this.scene.zoneList;
+            this.view.update();
+            this.canvasLoading = false;
+            // }
+        });
+    }
     // 取消(所有取消公用)
     cancelGraphy() {
         this.init(2);
     }
-
-    saveRefactorBSP() {}
+    // 重新划分业务空间保存
+    saveRefactorBSP() {
+        const arr = this.scene?.selectContainer.itemList;
+        const zoneObj = {
+            id: this.curZoneItem.data.RoomID,
+            classCode: this.curZoneType,
+            outline: [],
+        };
+        if (arr.length) {
+            arr?.forEach((t) => {
+                zoneObj.outline.push(t.data.OutLine);
+            });
+        }
+        const pa = {
+            content: [zoneObj]
+        }
+        this.canvasLoading = true;
+        updateZone(pa).then((res) => {
+            this.$message.success("更新成功");
+            this.init(2);
+        });
+    }
 
     groupCreateZone() {}
 
     //
-    changeSelect() {
-        console.log(arguments);
+    changeSelect(selectContainer: SObject, data: any[]) {
+        if (data.length) {
+            if (data[0].length) {
+                if (data[0][0] instanceof SSpaceItem) {
+                    this.scene?.initSpaceColor();
+                } else if (data[0][0] instanceof SZoneItem) {
+                    this.scene?.initZoneColor();
+                    this.zoneDisable = false;
+                    this.curZoneItem = data[0][0];
+                }
+            }
+            data[0].forEach((t) => {
+                t.fillColor = ItemColor.selectColor;
+            });
+        } else {
+            this.scene?.initSpaceColor();
+            this.scene?.initZoneColor();
+            this.zoneDisable = true;
+        }
+    }
+
+    // 根据图创建新的业务空间-弹窗返回确认创建
+    createRoom(val) {
+        const zoneObj = {
+            outline: [],
+            localName: val,
+            buildingId: this.floor.buildingId,
+            floorId: this.floor.id,
+            classCode: this.curZoneType,
+        };
+        let arr = this.scene?.selectContainer.itemList;
+        arr?.forEach((t) => {
+            zoneObj.outline.push(t.data.OutLine);
+        });
+        const pa = {
+            content: [zoneObj],
+        };
+        this.canvasLoading = true;
+        createZone(pa).then((res) => {
+            this.$message.success("创建成功");
+            this.init(2);
+        });
     }
 
     // 适配底图到窗口
@@ -332,7 +465,7 @@ export default class spaceGraph extends Vue {
     height: 100%;
     .canvas-actions-box {
         position: absolute;
-        bottom: 60px;
+        bottom: 14px;
         left: 50%;
         transform: translateX(-50%);
         z-index: 99;

+ 5 - 5
src/views/maintain/space/index.vue

@@ -11,7 +11,7 @@
                 <div class="search" :class="{ 'borderBottom': activeName==='picture' }">
                     <el-cascader clearable ref="floorCascader" placeholder="请选择建筑楼层" :options="options" v-model="building" filterable size="small"
                         @change="changeCascader" style="margin-right: 12px"></el-cascader>
-                    <el-cascader v-model="zoneTypeVal" :options="zoneTypeOption" @change="handleChange" placeholder="请选择分区" class="item"
+                    <el-cascader v-model="zoneTypeVal" :options="zoneTypeOption" @change="changeZoneType" placeholder="请选择分区" class="item"
                         v-if="activeName==='picture'"></el-cascader>
                     <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'" />
                 </div>
@@ -76,7 +76,7 @@ export default class spaceIndex extends Vue {
     activeName = "table";
     building = ["all"];
 
-    zoneTypeVal = ['FunctionZone'];
+    zoneTypeVal = ['GeneralZone'];
     // 分页
     private paginationList = {
         page: 1,
@@ -87,7 +87,7 @@ export default class spaceIndex extends Vue {
     options = [];
     zoneTypeOption = [
         {
-            value: "FunctionZone",
+            value: "GeneralZone",
             label: "功能分区",
         },
         {
@@ -427,7 +427,7 @@ export default class spaceIndex extends Vue {
         }
     }
 
-    handleChange(val) {
+    changeZoneType(val) {
         console.log(val);
     }
 
@@ -464,7 +464,7 @@ export default class spaceIndex extends Vue {
                 this.building.indexOf("noKnow") < 0 &&
                 this.building.indexOf("all") < 0
             ) {
-                this.$refs.spaceGraph.getData(this.floorToMap[this.building[1]]);
+                this.$refs.spaceGraph.getData(this.floorToMap[this.building[1]], this.zoneTypeVal);
             } else {
                 this.$refs.spaceGraph.noMap();
             }