Browse Source

业务空间按钮位置 删除功能添加

haojianlong 4 years ago
parent
commit
a6673aa02d

+ 5 - 0
src/api/datacenter.ts

@@ -92,6 +92,11 @@ export function updateZone(postParams: any): any {
     return httputils.postJson(`${ baseApi }/object/zone/update`, postParams)
 }
 
+// 更新空间
+export function deleteZone(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/zone/delete`, postParams)
+}
+
 // 查询设备统计
 export function queryCount(postParams: any): any {
     return httputils.postJson(`${ baseApi }/object/equip/count`, postParams)

+ 76 - 85
src/views/maintain/space/components/spaceGraph.vue

@@ -2,44 +2,30 @@
     <div id="graphContainer" ref="graphContainer">
         <div v-show="floorKey" v-loading="canvasLoading">
             <el-row class="buttons-box">
-                <div>
-                    <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch"
-                        placeholder="输入平面图中已有的业务空间名称进行查找" width="180px" @select="handleSelect">
-                        <i class="el-icon-search el-input__icon" slot="suffix"></i>
-                        <template slot-scope="{ item }">
-                            <div class="name"
-                                style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
-                                :title="item.data.RoomLocalName">
-                                {{ item.data.RoomLocalName }}
-                                <span class="addr" style="position: absolute;right:0;color:#409EFF;">定位</span>
-                            </div>
-                        </template>
-                    </el-autocomplete>
-                </div>
                 <div class="button-group">
                     <!-- 默认操作模式 -->
                     <div v-if="type==1">
                         <el-dropdown split-button type="primary" @click="editGraphy" @command="handleCommand">
-                            创建业务空间
+                            创建空间
                             <el-dropdown-menu slot="dropdown">
                                 <!-- <el-dropdown-item command="groupCreateBSpace">批量创建业务空间</el-dropdown-item> -->
                                 <el-dropdown-item command="createWall">创建墙体</el-dropdown-item>
                             </el-dropdown-menu>
                         </el-dropdown>
                         <!-- 点击已经关联的业务空间 -->
-                        <el-button plain @click="refactorBSP" :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>
+                        <!-- <el-button plain @click="cancelGraphy" v-show="!zoneDisable">取 消</el-button> -->
                     </div>
                     <!-- 点击未关联的业务空间 -->
                     <div v-if="type==3">
-                        <el-button plain @click="createNewZone">创建单个全新的业务空间</el-button>
+                        <el-button plain @click="createNewZone">创 建</el-button>
                         <el-button plain @click="cancelGraphy">取 消</el-button>
                     </div>
                     <!-- 重新划分业务空间 -->
                     <div v-if="type==4">
+                        <el-button type="primary" @click="saveRefactorBSP">保 存</el-button>
                         <el-button plain @click="cancelGraphy">取 消</el-button>
-                        <el-button type="primary" @click="saveRefactorBSP">保存</el-button>
                     </div>
                     <!-- 批量创建所选业务空间 -->
                     <div v-if="type==5">
@@ -48,8 +34,13 @@
                     </div>
                     <!-- 保存墙 -->
                     <div v-if="type==6">
+                        <el-button type="primary" @click="saveMap">保 存</el-button>
+                        <el-button plain @click="cancelGraphy">取 消</el-button>
+                    </div>
+                    <!-- 保存墙 -->
+                    <div v-if="type==7">
+                        <el-button type="primary" @click="deleteRoom">删 除</el-button>
                         <el-button plain @click="cancelGraphy">取 消</el-button>
-                        <el-button type="primary" @click="saveMap">保存</el-button>
                     </div>
                 </div>
             </el-row>
@@ -81,6 +72,7 @@ import {
     queryIspace,
     createZone,
     updateZone,
+    deleteZone,
 } from "@/api/datacenter";
 import createBSP from "./createBSP";
 import colorArr from "@/utils/graph/config/zoneColor";
@@ -102,15 +94,14 @@ export default class spaceGraph extends Vue {
     view: FloorView | null = null;
     scene: DivideFloorScene | null = null;
     canvasLoading = false;
-    type = 1;
+    type = -1;
     config = {
         isEdit: false,
         divide: true,
         groupSelect: false,
         drawWall: false,
     };
-    search = ""; //搜索
-    zoneDisable = true;
+    // zoneDisable = true;
     curZoneItem = {};
     zoneList = [];
     buildFloor: string[] = [];
@@ -158,13 +149,13 @@ export default class spaceGraph extends Vue {
     }
     // 初始化
     init(initType: number): void {
-        this.type = 1;
+        this.type = -1;
         if (this.scene) {
             this.scene.selectContainer.clear();
             this.scene.initSpaceColor();
             this.scene.clearCut();
-            this.scene.clearWalls()
-            this.zoneDisable = true;
+            this.scene.clearWalls();
+            // this.zoneDisable = true;
             this.scene.isZoneSelectable = true;
             this.scene.isSpaceSelectable = false;
         }
@@ -239,29 +230,14 @@ export default class spaceGraph extends Vue {
         }
         this.view = new FloorView("spaceCanvas");
     }
-    // 搜索
-    querySearch(queryString: string, cb: Function) {
-        let restaurants = this.zoneList;
-        let results = queryString
-            ? restaurants.filter(this.createFilter(queryString))
-            : restaurants;
-        // 调用 callback 返回建议列表的数据
-        cb(results);
-    }
-    // 过滤器
-    createFilter(queryString: any) {
-        return (restaurant: any) => {
-            return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
-        };
-    }
     // 查询选中,定位
-    handleSelect(zone) {
+    handleSelect(zone: SZoneItem) {
         // 清空选中
         this.scene?.selectContainer.clear();
         this.curZoneItem = zone;
         this.scene?.selectContainer.setItem(zone);
-        this.zoneDisable = false;
-        this.view.fitSelectedToView();
+        // this.zoneDisable = false;
+        this.view?.fitSelectedToView();
     }
     // 点击创建业务空间
     editGraphy() {
@@ -380,11 +356,10 @@ export default class spaceGraph extends Vue {
                     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.scene?.removeAllZone();
+            this.scene?.addZoneList(tempArr);
+            this.$emit("getZoneSuc", this.scene?.zoneList);
+            this.view?.update();
             this.canvasLoading = false;
             // }
         });
@@ -429,7 +404,8 @@ export default class spaceGraph extends Vue {
                     this.scene?.initSpaceColor();
                 } else if (data[0][0] instanceof SZoneItem) {
                     this.scene?.initZoneColor();
-                    this.zoneDisable = false;
+                    // this.zoneDisable = false;
+                    this.type = 7;
                     this.curZoneItem = data[0][0];
                 }
             } else {
@@ -438,7 +414,8 @@ export default class spaceGraph extends Vue {
                     console.log(3);
                 } else {
                     this.scene?.initZoneColor();
-                    this.zoneDisable = true;
+                    this.type = -1;
+                    // this.zoneDisable = true;
                 }
             }
             data[0].forEach((t) => {
@@ -447,7 +424,8 @@ export default class spaceGraph extends Vue {
         } else {
             this.scene?.initSpaceColor();
             this.scene?.initZoneColor();
-            this.zoneDisable = true;
+            this.type = -1;
+            // this.zoneDisable = true;
         }
     }
 
@@ -474,11 +452,30 @@ export default class spaceGraph extends Vue {
     }
 
     /**
+     * 删除业务空间
+     */
+    deleteRoom() {
+        let arr = this.scene?.selectContainer.itemList || [];
+        if (arr.length) {
+            let temp = arr
+                .map((t) => {
+                    if (t instanceof SZoneItem) {
+                        return { id: t.data.RoomID };
+                    }
+                })
+                .filter((item) => item);
+            if (temp.length) {
+                this.handleDeleteZone(temp);
+            }
+        }
+    }
+
+    /**
      * 生成底图json
      */
     saveMap() {
         if (this.scene) {
-            const json = this.scene.getMapObject()
+            const json = this.scene.getMapObject();
             console.log(json);
         }
     }
@@ -591,7 +588,7 @@ export default class spaceGraph extends Vue {
             pa.content = zoneObj;
         }
         this.canvasLoading = true;
-        createZone(pa).then((res) => {
+        createZone(pa).then(() => {
             this.$message.success("创建成功");
             this.init(2);
         });
@@ -608,12 +605,27 @@ export default class spaceGraph extends Vue {
             pa.content = zoneObj;
         }
         this.canvasLoading = true;
-        updateZone(pa).then((res) => {
+        updateZone(pa).then(() => {
             this.$message.success("更新成功");
             this.init(2);
         });
     }
 
+    /**
+     * 删除业务空间接口
+     */
+    handleDeleteZone(zone: any) {
+        let pa = [zone]
+        if (Array.isArray(zone)) {
+            pa = zone;
+        }
+        this.canvasLoading = true;
+        deleteZone(pa).then(() => {
+            this.$message.success("删除成功");
+            this.init(2);
+        });
+    }
+
     // 适配底图到窗口
     fit() {
         this.view?.fitSceneToView();
@@ -677,7 +689,7 @@ export default class spaceGraph extends Vue {
             if (this.scene.selectContainer.itemList.length) {
                 const item = this.scene.selectContainer.itemList[0];
                 if (item instanceof SWallItem || item instanceof CustomWall) {
-                    this.scene.deleteItem(item)
+                    this.scene.deleteItem(item);
                 }
             }
         }
@@ -718,40 +730,19 @@ export default class spaceGraph extends Vue {
     }
     .buttons-box {
         position: absolute;
-        top: 16px;
+        bottom: 68px;
         left: 0;
         padding: 0 16px;
         width: 100%;
         z-index: 999;
         & > div {
-            float: left;
-        }
-        .el-autocomplete {
-            display: inline-block;
-            width: 320px;
-            margin-right: 10px;
-        }
-        .button-group button,
-        .button-group .el-dropdown {
-            display: block;
-            float: left;
-        }
-        .my-autocomplete {
-            li {
-                line-height: normal;
-                padding: 7px;
-                .name {
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-                .addr {
-                    font-size: 12px;
-                    color: #b4b4b4;
-                }
-                .highlighted .addr {
-                    color: #ddd;
-                }
-            }
+            margin: 0 auto;
+        }
+        .button-group {
+            width: 300px;
+            height: 35px;
+            margin: 0 auto;
+            text-align: center;
         }
     }
 }

+ 104 - 16
src/views/maintain/space/index.vue

@@ -9,20 +9,40 @@
             </el-tabs>
             <div class="tab-content">
                 <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"
-                                 v-if="activeName==='table'"></el-cascader>
-                    <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'"/>
-
-                    <el-cascader clearable ref="graphCascader" placeholder="请选择建筑楼层" :options="graphOptions"
-                                 v-model="graphBuilding" filterable
-                                 size="small" @change="changeGraphCascader" style="margin-right: 12px"
-                                 v-if="activeName==='picture'" :props="graphProps">
-                    </el-cascader>
-                    <el-cascader v-model="zoneTypeVal" :options="zoneTypeOption" @change="changeZoneType"
-                                 placeholder="请选择分区" class="item"
-                                 v-if="activeName==='picture'"></el-cascader>
+                    <template v-if="activeName==='table'">
+                        <el-cascader clearable ref="floorCascader" placeholder="请选择建筑楼层" :options="options"
+                                    v-model="building" filterable size="small"
+                                    @change="changeCascader" style="margin-right: 12px"
+                                    ></el-cascader>
+                        <admSearch @SearchValue="searchValue" class="item"/>
+                    </template>
+                    <template v-if="activeName==='picture'">
+                        <el-cascader clearable ref="graphCascader" placeholder="请选择建筑楼层" :options="graphOptions"
+                                    v-model="graphBuilding" filterable size="small"
+                                    @change="changeGraphCascader" style="margin-right: 12px" :props="graphProps">
+                        </el-cascader>
+                        <el-cascader v-model="zoneTypeVal" :options="zoneTypeOption" @change="changeZoneType"
+                                    placeholder="请选择分区" class="item"></el-cascader>
+                        <el-autocomplete popper-class="my-autocomplete" v-model="autoCompleteSearch" :fetch-suggestions="querySearch"
+                            placeholder="输入平面图中已有的业务空间名称进行查找" width="180" @select="handleSelect">
+                            <i class="el-icon-search el-input__icon" slot="suffix"></i>
+                            <template slot-scope="{ item }">
+                                <div class="name"
+                                    style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
+                                    :title="item.data.RoomLocalName">
+                                    {{ item.data.RoomLocalName }}
+                                    <span class="addr" style="position: absolute;right:0;color:#409EFF;">定位</span>
+                                </div>
+                            </template>
+                        </el-autocomplete>
+                        <el-dropdown split-button type="primary" @click="editGraphy" @command="handleCommand" style="float:right;">
+                            创建空间
+                            <el-dropdown-menu slot="dropdown">
+                                <!-- <el-dropdown-item command="groupCreateBSpace">批量创建业务空间</el-dropdown-item> -->
+                                <el-dropdown-item command="createWall">创建墙体</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </el-dropdown>
+                    </template>
                 </div>
                 <div v-if="activeName==='table'" v-loading="loading" style="height: calc(100% - 100px);padding: 0 12px">
                     <template style="height: 100%;" v-if="building.length > 0">
@@ -42,7 +62,7 @@
                     </div>
                 </div>
                 <div class="graph" v-if="activeName==='picture'">
-                    <spaceGraph ref="spaceGraph"/>
+                    <spaceGraph @getZoneSuc="getZoneSuc" ref="spaceGraph"/>
                 </div>
             </div>
         </div>
@@ -142,7 +162,10 @@ export default class spaceIndex extends Vue {
     currRowContent = {}
     // 弹窗开关
     dialogVisible = false
-    //
+    // 搜索
+    autoCompleteSearch = "";
+    // 业务空间列表
+    zoneList = []
     // 项目id
     private get projectId(): string {
         return UserModule.projectId;
@@ -155,6 +178,49 @@ export default class spaceIndex extends Vue {
         this.changeCascader();
     }
 
+    // 业务空间下拉搜索
+    querySearch(queryString: string, cb: Function) {
+        let restaurants = this.zoneList;
+        let results = queryString
+            ? restaurants.filter(this.createFilter(queryString))
+            : restaurants;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+    }
+
+    // 过滤器
+    createFilter(queryString: any) {
+        return (restaurant: any) => {
+            return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
+        };
+    }
+
+    // 查询选中,定位
+    handleSelect(zone:any) {
+        if(this.$refs.spaceGraph) {
+            this.$refs.spaceGraph.handleSelect(zone)
+        }
+    }
+
+    // 子组件中获取业务空间成功
+    getZoneSuc(list: []){
+        this.zoneList = list
+    }
+
+    // 创建空间
+    editGraphy() {
+        if(this.$refs.spaceGraph) {
+            this.$refs.spaceGraph.editGraphy()
+        }
+    }
+
+    // 下拉菜单
+    handleCommand(command: string) {
+        if(this.$refs.spaceGraph) {
+            this.$refs.spaceGraph.handleCommand(command)
+        }
+    }
+
     //查询统计数量
     dataCount() {
         queryCountSpace({}).then((res) => {
@@ -651,5 +717,27 @@ export default class spaceIndex extends Vue {
     .el-select, .el-date-editor.el-input, .el-date-editor.el-input__inner {
         width: 100%;
     }
+    .el-autocomplete {
+        display: inline-block;
+        width: 320px;
+        margin-left: 12px;
+    }
+    .my-autocomplete {
+        li {
+            line-height: normal;
+            padding: 7px;
+            .name {
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+            .addr {
+                font-size: 12px;
+                color: #b4b4b4;
+            }
+            .highlighted .addr {
+                color: #ddd;
+            }
+        }
+    }
 }
 </style>