|
@@ -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,11 +72,12 @@ import {
|
|
|
queryIspace,
|
|
|
createZone,
|
|
|
updateZone,
|
|
|
+ deleteZone,
|
|
|
} 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 { ItemColor, SItemStatus } 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";
|
|
|
import { AppModule } from "@/store/modules/app";
|
|
@@ -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[] = [];
|
|
@@ -155,18 +146,21 @@ export default class spaceGraph extends Vue {
|
|
|
noMap() {
|
|
|
this.floorKey = "";
|
|
|
this.canvasLoading = false;
|
|
|
+ this.$emit('initCreatBtn', true)
|
|
|
}
|
|
|
// 初始化
|
|
|
init(initType: number): void {
|
|
|
- this.type = 1;
|
|
|
+ this.type = -1;
|
|
|
if (this.scene) {
|
|
|
this.scene.selectContainer.clear();
|
|
|
this.scene.initSpaceColor();
|
|
|
+ this.scene.initWallColor();
|
|
|
this.scene.clearCut();
|
|
|
- this.scene.clearWalls()
|
|
|
- this.zoneDisable = true;
|
|
|
+ this.scene.clearWalls();
|
|
|
+ // this.zoneDisable = true;
|
|
|
this.scene.isZoneSelectable = true;
|
|
|
this.scene.isSpaceSelectable = false;
|
|
|
+ this.scene.isWallSelectable = false
|
|
|
}
|
|
|
if (
|
|
|
this.buildFloor.indexOf("all") > -1 ||
|
|
@@ -174,7 +168,7 @@ export default class spaceGraph extends Vue {
|
|
|
) {
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
+ this.$emit('initCreatBtn', false)
|
|
|
if (initType == 1) {
|
|
|
// 底图
|
|
|
this.getGraph();
|
|
@@ -201,7 +195,7 @@ export default class spaceGraph extends Vue {
|
|
|
this.canvasLoading = true;
|
|
|
this.clearGraphy();
|
|
|
this.scene = null;
|
|
|
- scene.loadUrl(this.mapBaseUrl + this.floorKey).then((res) => {
|
|
|
+ scene.loadUrl(this.mapBaseUrl + this.floorKey + `&${+new Date()}`).then((res) => {
|
|
|
if (this.view) {
|
|
|
this.view.scene = scene;
|
|
|
}
|
|
@@ -239,29 +233,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() {
|
|
@@ -273,6 +252,7 @@ export default class spaceGraph extends Vue {
|
|
|
if (this.scene) {
|
|
|
this.scene.isSpaceSelectable = true;
|
|
|
this.scene.isZoneSelectable = false;
|
|
|
+ this.scene.isWallSelectable = false
|
|
|
this.scene.selectContainer.clear();
|
|
|
}
|
|
|
this.view?.update();
|
|
@@ -314,6 +294,7 @@ export default class spaceGraph extends Vue {
|
|
|
if (this.scene) {
|
|
|
this.scene.isSpaceSelectable = false;
|
|
|
this.scene.isZoneSelectable = false;
|
|
|
+ this.scene.isWallSelectable = true
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -326,6 +307,7 @@ export default class spaceGraph extends Vue {
|
|
|
if (this.scene) {
|
|
|
this.scene.isZoneSelectable = false;
|
|
|
this.scene.isSpaceSelectable = true;
|
|
|
+ this.scene.isWallSelectable = false
|
|
|
this.scene.selectContainer.clear();
|
|
|
}
|
|
|
this.type = 4;
|
|
@@ -380,11 +362,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,16 +410,20 @@ 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 {
|
|
|
this.scene?.initSpaceColor();
|
|
|
if (this.type == 3) {
|
|
|
console.log(3);
|
|
|
- } else {
|
|
|
+ } else if (this.type == 6) {
|
|
|
+ console.log(6)
|
|
|
+ } else {
|
|
|
this.scene?.initZoneColor();
|
|
|
- this.zoneDisable = true;
|
|
|
+ this.type = -1;
|
|
|
+ // this.zoneDisable = true;
|
|
|
}
|
|
|
}
|
|
|
data[0].forEach((t) => {
|
|
@@ -447,7 +432,8 @@ export default class spaceGraph extends Vue {
|
|
|
} else {
|
|
|
this.scene?.initSpaceColor();
|
|
|
this.scene?.initZoneColor();
|
|
|
- this.zoneDisable = true;
|
|
|
+ this.type = -1;
|
|
|
+ // this.zoneDisable = true;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -474,12 +460,33 @@ 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()
|
|
|
- console.log(json);
|
|
|
+ this.scene.generateFile(this.floorKey, () => {
|
|
|
+ this.$message.success('修改模型成功');
|
|
|
+ this.init(1)
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -591,7 +598,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 +615,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();
|
|
@@ -646,7 +668,7 @@ export default class spaceGraph extends Vue {
|
|
|
// 清除切割划分
|
|
|
clearDivide() {
|
|
|
// @ts-ignore
|
|
|
- this.view!.scene.clearCut();
|
|
|
+ this.view.scene.clearCut();
|
|
|
}
|
|
|
// 缩放
|
|
|
scale(val: number) {
|
|
@@ -674,12 +696,7 @@ export default class spaceGraph extends Vue {
|
|
|
*/
|
|
|
clearWall() {
|
|
|
if (this.scene) {
|
|
|
- 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.delWall();
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -718,40 +735,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;
|
|
|
}
|
|
|
}
|
|
|
}
|