|
@@ -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;
|