|
@@ -9,7 +9,8 @@
|
|
|
<div class="canvas-box" v-show="floorMap" v-loading="canvasLoading">
|
|
|
<canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
|
|
|
<el-row class="canvas-actions-box">
|
|
|
- <canvasFun @scale="scale" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun>
|
|
|
+ <canvasFun @scale="scale" @groupSelect="groupSelect" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config"
|
|
|
+ ref="canvasFun"></canvasFun>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -40,7 +41,8 @@ export default {
|
|
|
selectAble: false,
|
|
|
relatedSpaceIdList: [],//已关联的业务空间id
|
|
|
config: {
|
|
|
- isEdit: false
|
|
|
+ isEdit: false,
|
|
|
+ groupSelect: true
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -68,7 +70,7 @@ export default {
|
|
|
this.getGraphy();
|
|
|
})
|
|
|
}
|
|
|
- else{
|
|
|
+ else {
|
|
|
this.floorMap = '';
|
|
|
}
|
|
|
},
|
|
@@ -86,7 +88,6 @@ export default {
|
|
|
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;
|
|
@@ -96,6 +97,7 @@ export default {
|
|
|
return;
|
|
|
}
|
|
|
that.view.scene = that.scene;
|
|
|
+ that.scene.isSpaceSelectable = false;
|
|
|
// 绘制业务空间
|
|
|
that.getBusinessSpace();
|
|
|
that.view.fitSceneToView();
|
|
@@ -108,7 +110,6 @@ export default {
|
|
|
// 获取当前分区下的业务空间
|
|
|
getBusinessSpace() {
|
|
|
this.canvasLoading = true
|
|
|
- this.clearZoneCanvas();
|
|
|
let promise1 = new Promise((resolve, reject) => {
|
|
|
let params = {
|
|
|
data: {
|
|
@@ -155,59 +156,61 @@ export default {
|
|
|
})
|
|
|
// 绘制业务空间
|
|
|
let tempArr = this.BSPRelaISPList.map((t, i) => {
|
|
|
- let item = {
|
|
|
- RoomLocalName: t.RoomLocalName,
|
|
|
- OutLine: t.Outline,
|
|
|
- RoomID: t.RoomID,
|
|
|
- Color: colorArr[i % colorArr.length],
|
|
|
+ if (t.FloorId == this.buildingData[1] && t.ObjectType == this.space) {
|
|
|
+ return {
|
|
|
+ RoomLocalName: t.RoomLocalName,
|
|
|
+ OutLine: t.Outline,
|
|
|
+ RoomID: t.RoomID,
|
|
|
+ Color: colorArr[i % colorArr.length],
|
|
|
+ HighLightFlag: relatedZone.findIndex((item) => (item.RoomID == t.RoomID)) > -1,
|
|
|
+ Transparency: relatedZone.findIndex((item) => (item.RoomID == t.RoomID)) > -1 ? 20 : 1
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return undefined
|
|
|
}
|
|
|
- return item;
|
|
|
- })
|
|
|
- this.scene.zoneList = [];
|
|
|
+ }).filter(item => item)
|
|
|
+ this.scene.removeAllZone();
|
|
|
this.scene.addZoneList(tempArr);
|
|
|
this.scene.click(this, this.canvasClick);
|
|
|
- this.zoneList = this.scene.zoneList;
|
|
|
- this.scene.zoneList.map(t => {
|
|
|
- t.selected = false;
|
|
|
- if (this.relatedSpaceIdList.indexOf(t.data.RoomID) != -1) {
|
|
|
- // t.selected = true;
|
|
|
- t.highLightFlag = true;
|
|
|
- }
|
|
|
- })
|
|
|
this.canvasLoading = false;
|
|
|
})
|
|
|
},
|
|
|
// canvas点击事件
|
|
|
canvasClick(item, event) {
|
|
|
- if (item.selectable) {
|
|
|
- if (this.selectAble) {
|
|
|
- if (this.relatedSpaceIdList.indexOf(item.data.RoomID) != -1) {
|
|
|
- this.relatedSpaceIdList = this.relatedSpaceIdList.filter(t => { return t != item.data.RoomID });
|
|
|
- }
|
|
|
- else {
|
|
|
- this.relatedSpaceIdList.push(item.data.RoomID);
|
|
|
- }
|
|
|
- }
|
|
|
- else {
|
|
|
- item.selected = !item.selected;
|
|
|
- }
|
|
|
+ if (!this.config.isEdit) {
|
|
|
+ item.selected = false;
|
|
|
}
|
|
|
},
|
|
|
//取消编辑
|
|
|
cancelEdit() {
|
|
|
+ this.config.isEdit = false;
|
|
|
+ this.scene.clearZoneSelection();
|
|
|
this.getBusinessSpace();
|
|
|
},
|
|
|
+ //编辑
|
|
|
+ edit() {
|
|
|
+ this.config.isEdit = true;
|
|
|
+ this.scene.zoneList.map(t => {
|
|
|
+ t.selected = t.highLightFlag;
|
|
|
+ t.transparency = 20;
|
|
|
+ t.highLightFlag = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
//保存编辑
|
|
|
saveEdit() {
|
|
|
+ let arr = this.scene.getSelectedZone();
|
|
|
let param = {
|
|
|
BuildingId: this.buildingData[0],
|
|
|
FloorId: this.buildingData[1],
|
|
|
Type: this.space,
|
|
|
data: {
|
|
|
ShaftId: this.$route.query.ShaftId,
|
|
|
- SpaceIdList: this.relatedSpaceIdList
|
|
|
+ SpaceIdList: []
|
|
|
}
|
|
|
}
|
|
|
+ param.data.SpaceIdList = arr.map(t => {
|
|
|
+ return t.data.RoomID;
|
|
|
+ })
|
|
|
shaftZoneLink(param, res => {
|
|
|
if (res.Result == "success") {
|
|
|
this.$message.success("保存成功");
|
|
@@ -215,21 +218,6 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- //是否可点
|
|
|
- setSelectAble(val) {
|
|
|
- if (this.scene) {
|
|
|
- this.selectAble = val && !this.$route.query.onlyRead;
|
|
|
- if (this.selectAble) {
|
|
|
- this.scene.zoneList.map(t => {
|
|
|
- t.highLightFlag = false;
|
|
|
- t.selected = false;
|
|
|
- if (this.relatedSpaceIdList.indexOf(t.data.RoomID) != -1) {
|
|
|
- t.selected = true;
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
// 清除canvas
|
|
|
clearGraphy() {
|
|
|
// debugger
|
|
@@ -240,12 +228,6 @@ export default {
|
|
|
}
|
|
|
this.view = new FloorView('floorCanvas')
|
|
|
},
|
|
|
- // 清空绘制业务空间
|
|
|
- clearZoneCanvas() {
|
|
|
- this.zoneList.map(t => {
|
|
|
- this.scene.removeItem(t);
|
|
|
- })
|
|
|
- },
|
|
|
// 适配底图到窗口
|
|
|
fit() {
|
|
|
this.view.fitSceneToView()
|
|
@@ -266,6 +248,10 @@ export default {
|
|
|
saveSvg() {
|
|
|
this.view.saveSceneSvg(`${this.buildingData[1]}.svg`, 6400, 4800);
|
|
|
},
|
|
|
+ // 框选
|
|
|
+ groupSelect() {
|
|
|
+ this.scene.isRectSelection = 2;
|
|
|
+ },
|
|
|
// 保存json
|
|
|
saveJson() {
|
|
|
this.view.saveFloorJson(`${this.buildingData[1]}.json`)
|
|
@@ -279,7 +265,14 @@ export default {
|
|
|
this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ "scene.isRectSelection": {
|
|
|
+ handler(n) {
|
|
|
+ if (!n) {
|
|
|
+ this.$refs.canvasFun.active = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|