|
@@ -1,15 +1,15 @@
|
|
|
<template>
|
|
|
<div id="cenoteGraphy" style="height:100%;width:100%;" ref="graphy">
|
|
|
- <!-- <div v-if="!FloorMap">
|
|
|
+ <div v-show="!floorMap">
|
|
|
<div class="center" style="height: 400px;padding-top:182px;box-sizing:border-box;">
|
|
|
<i class="icon-wushuju iconfont"></i>
|
|
|
暂无数据
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
- <div class="canvas-box" v-loading="canvasLoading">
|
|
|
+ </div>
|
|
|
+ <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 @fit="fit" @scale="scale" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun> -->
|
|
|
+ <canvasFun @scale="scale" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -36,7 +36,7 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
canvasLoading: false,//加载canvas
|
|
|
- FloorMap: '',//地图
|
|
|
+ floorMap: '',//地图
|
|
|
canvasWidth: 800,
|
|
|
canvasHeight: 600,
|
|
|
view: null,
|
|
@@ -48,12 +48,8 @@ export default {
|
|
|
zoneList: [], // 业务空间-canvas图中
|
|
|
selectAble: false,
|
|
|
relatedSpaceIdList: [],//已关联的业务空间id
|
|
|
- config: () => {
|
|
|
- return {
|
|
|
- isEdit: false,
|
|
|
- divide: true,
|
|
|
- groupSelect: true
|
|
|
- }
|
|
|
+ config: {
|
|
|
+ isEdit: false
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -109,6 +105,11 @@ export default {
|
|
|
// 绘制业务空间
|
|
|
that.getBusinessSpace();
|
|
|
that.view.fitSceneToView();
|
|
|
+ that.view.maxScale = that.view.scale * 10;
|
|
|
+ that.view.minScale = that.view.scale;
|
|
|
+ if (that.$refs.canvasFun) {
|
|
|
+ that.$refs.canvasFun.everyScale = that.view.scale;
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
// 获取当前分区下的业务空间
|
|
@@ -146,8 +147,7 @@ export default {
|
|
|
Promise.all([promise1, promise2]).then(values => {
|
|
|
let relatedZone = values[0].Content;
|
|
|
let zoneData = values[1].Content;
|
|
|
- console.log(relatedZone);
|
|
|
- console.log(values[1])
|
|
|
+ this.relatedSpaceIdList = [];
|
|
|
relatedZone.map(item => {
|
|
|
this.relatedSpaceIdList.push(item.RoomID);
|
|
|
})
|
|
@@ -175,8 +175,9 @@ export default {
|
|
|
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.highLightFlag = true;
|
|
|
+ t.selected = true;
|
|
|
}
|
|
|
})
|
|
|
this.canvasLoading = false;
|
|
@@ -184,58 +185,42 @@ export default {
|
|
|
},
|
|
|
// canvas点击事件
|
|
|
canvasClick(item, event) {
|
|
|
- console.log(this.relatedSpaceIdList.indexOf(item.data.RoomID)," ",item.data.RoomID)
|
|
|
- console.log(this.relatedSpaceIdList)
|
|
|
- if (this.relatedSpaceIdList.indexOf(item.data.RoomID) != -1) {
|
|
|
- item.highLightFlag = false;
|
|
|
- this.relatedSpaceIdList = this.relatedSpaceIdList.filter(t => { return t != item.data.RoomID });
|
|
|
- }
|
|
|
- else {
|
|
|
- item.highLightFlag = true;
|
|
|
- this.relatedSpaceIdList.push(item.data.RoomID);
|
|
|
+ if (item.selectable) {
|
|
|
+ if (this.selectAble) {
|
|
|
+ if (this.relatedSpaceIdList.indexOf(item.data.RoomID) != -1) {
|
|
|
+ item.highLightFlag = false;
|
|
|
+ this.relatedSpaceIdList = this.relatedSpaceIdList.filter(t => { return t != item.data.RoomID });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ item.highLightFlag = true;
|
|
|
+ this.relatedSpaceIdList.push(item.data.RoomID);
|
|
|
+ }
|
|
|
+ console.log(this.relatedSpaceIdList.length);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ item.selected = !item.selected;
|
|
|
+ }
|
|
|
}
|
|
|
- console.log(this.relatedSpaceIdList.length);
|
|
|
- // console.log(this.scene)
|
|
|
- // console.log(item)
|
|
|
- // console.log(this.zoneList)
|
|
|
- // this.clearZoneCanvas();
|
|
|
- // this.scene.addZoneList(this.zoneList);
|
|
|
- // console.log(item)
|
|
|
- // console.log(event)
|
|
|
- // if (this.type == 4) {//重新划分
|
|
|
-
|
|
|
- // } else if (this.type == 5) {//批量
|
|
|
+ },
|
|
|
+ //取消编辑
|
|
|
+ cancelEdit(){
|
|
|
+ this.getBusinessSpace();
|
|
|
+ },
|
|
|
+ //保存编辑
|
|
|
+ saveEdit(){
|
|
|
|
|
|
- // } else {
|
|
|
- // if (item instanceof SpaceItem && item.selectable) {
|
|
|
- // if (this.type == 2) {
|
|
|
- // this.scene.clearZoneSelection();
|
|
|
- // }
|
|
|
- // this.type = 3;
|
|
|
- // this.curZoneItem = {};
|
|
|
- // }
|
|
|
- // if (item instanceof ZoneItem && item.selectable) {
|
|
|
- // if (this.type == 3) {
|
|
|
- // this.scene.clearSpaceSelection();
|
|
|
- // }
|
|
|
- // this.type = 2;
|
|
|
- // this.curZoneItem = item;
|
|
|
- // this.scene.clearZoneSelection();
|
|
|
- // item.selected = true;
|
|
|
- // }
|
|
|
- // }
|
|
|
},
|
|
|
//是否可点
|
|
|
setSelectAble(val) {
|
|
|
if (this.scene) {
|
|
|
this.selectAble = val && !this.$route.query.onlyRead;
|
|
|
- this.scene.isZoneSelectable = this.selectAble;
|
|
|
}
|
|
|
},
|
|
|
// 清除canvas
|
|
|
clearGraphy() {
|
|
|
// debugger
|
|
|
- if (this.view && this.view.scene) {
|
|
|
+ this.scene = null;
|
|
|
+ if (this.view) {
|
|
|
this.view.scene = null;
|
|
|
return
|
|
|
}
|
|
@@ -292,4 +277,8 @@ export default {
|
|
|
transform: translateX(-50%);
|
|
|
z-index: 999;
|
|
|
}
|
|
|
+.canvas-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
</style>
|