|
@@ -1,16 +1,33 @@
|
|
|
<template>
|
|
|
- <div id="cenoteGraphy" style="height:100%;width:100%;" ref="graphy">
|
|
|
+ <div id="cenoteGraphy" style="height: 100%; width: 100%" ref="graphy">
|
|
|
<div v-show="!floorMap">
|
|
|
- <div class="center" style="height: 400px;padding-top:182px;box-sizing:border-box;">
|
|
|
+ <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-show="floorMap" v-loading="canvasLoading">
|
|
|
- <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
|
|
|
+ <canvas
|
|
|
+ id="floorCanvas"
|
|
|
+ :width="canvasWidth"
|
|
|
+ :height="canvasHeight"
|
|
|
+ ref="canvas"
|
|
|
+ tabindex="0"
|
|
|
+ ></canvas>
|
|
|
<el-row class="canvas-actions-box">
|
|
|
- <canvasFun @scale="scale" @groupSelect="groupSelect" @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>
|
|
@@ -19,10 +36,20 @@
|
|
|
<script>
|
|
|
import canvasFun from "@/components/business_space/newGraphy/canvasFun";
|
|
|
import { SColor, SPoint } from "@saga-web/draw/lib";
|
|
|
-import { DivideFloorScene, SpaceItem, ZoneItem, Opt } from "@saga-web/cad-engine/lib";
|
|
|
+import {
|
|
|
+ DivideFloorScene,
|
|
|
+ SpaceItem,
|
|
|
+ ZoneItem,
|
|
|
+ Opt,
|
|
|
+} from "@saga-web/cad-engine/lib";
|
|
|
import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
|
|
|
-import { colorArr } from '@/utils/spaceColor';
|
|
|
-import { getFloorMsgByFloorID, shaftSpaceQuery, shaftZoneLinkReplace, zoneQueryOutline } from '@/api/scan/request';
|
|
|
+import { colorArr } from "@/utils/spaceColor";
|
|
|
+import {
|
|
|
+ getFloorMsgByFloorID,
|
|
|
+ shaftSpaceQuery,
|
|
|
+ shaftZoneLinkReplace,
|
|
|
+ zoneQueryOutline,
|
|
|
+} from "@/api/scan/request";
|
|
|
import { mapGetters } from "vuex";
|
|
|
export default {
|
|
|
props: {
|
|
@@ -30,26 +57,26 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- canvasLoading: false,//加载canvas
|
|
|
- floorMap: '',//地图
|
|
|
+ canvasLoading: false, //加载canvas
|
|
|
+ floorMap: "", //地图
|
|
|
canvasWidth: 800,
|
|
|
canvasHeight: 600,
|
|
|
view: null,
|
|
|
scene: null,
|
|
|
- buildingData: [],//建筑,楼层
|
|
|
- space: '',//当前空间类型
|
|
|
- businessSpaceList: [],//所有业务空间
|
|
|
- BSPRelaISPList: [],//已关联元空间的业务空间
|
|
|
+ buildingData: [], //建筑,楼层
|
|
|
+ space: "", //当前空间类型
|
|
|
+ businessSpaceList: [], //所有业务空间
|
|
|
+ BSPRelaISPList: [], //已关联元空间的业务空间
|
|
|
zoneList: [], // 业务空间-canvas图中
|
|
|
selectAble: false,
|
|
|
- relatedSpaceIdList: [],//已关联的业务空间id
|
|
|
+ relatedSpaceIdList: [], //已关联的业务空间id
|
|
|
config: {
|
|
|
isEdit: false,
|
|
|
- groupSelect: true
|
|
|
+ groupSelect: true,
|
|
|
},
|
|
|
sceneMarkList: [],
|
|
|
isFirstFlag: true,
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
mounted() {
|
|
|
this.canvasWidth = this.$refs.graphy.offsetWidth;
|
|
@@ -57,42 +84,54 @@ export default {
|
|
|
this.isFirstFlag = true;
|
|
|
},
|
|
|
components: {
|
|
|
- canvasFun
|
|
|
+ canvasFun,
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters("layout", ["projectId","projects"]),
|
|
|
+ ...mapGetters("layout", ["projectId", "projects"]),
|
|
|
projectName() {
|
|
|
- let projectObj = this.projects.find(item => {
|
|
|
- return item.id == this.projectId
|
|
|
- })
|
|
|
- return projectObj?projectObj.name?projectObj.name:projectObj.id:this.projectId
|
|
|
- }
|
|
|
+ let projectObj = this.projects.find((item) => {
|
|
|
+ return item.id == this.projectId;
|
|
|
+ });
|
|
|
+ return projectObj
|
|
|
+ ? projectObj.name
|
|
|
+ ? projectObj.name
|
|
|
+ : projectObj.id
|
|
|
+ : this.projectId;
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
- Opt.sceneMarkColor = new SColor('#ffffff');
|
|
|
+ Opt.sceneMarkColor = new SColor("#ffffff");
|
|
|
},
|
|
|
methods: {
|
|
|
//获取楼层map
|
|
|
getFloorMap(buildfloor, space) {
|
|
|
- if (buildfloor.length == 2 && space && buildfloor[0] && buildfloor[1] && buildfloor[1] !== 'all' && buildfloor[1] !== 'noKnow') {
|
|
|
- this.buildingData = buildfloor
|
|
|
+ if (
|
|
|
+ buildfloor.length == 2 &&
|
|
|
+ space &&
|
|
|
+ buildfloor[0] &&
|
|
|
+ buildfloor[1] &&
|
|
|
+ buildfloor[1] !== "all" &&
|
|
|
+ buildfloor[1] !== "noKnow"
|
|
|
+ ) {
|
|
|
+ this.buildingData = buildfloor;
|
|
|
let pa = {
|
|
|
- filters: `id='${this.buildingData[1]}'`
|
|
|
- }
|
|
|
- getFloorMsgByFloorID(pa, res => {
|
|
|
- this.floorMap = res.content[0].infos ? res.content[0].infos.floorMap : '';
|
|
|
+ filters: `id='${this.buildingData[1]}'`,
|
|
|
+ };
|
|
|
+ getFloorMsgByFloorID(pa, (res) => {
|
|
|
+ this.floorMap = res.content[0].infos
|
|
|
+ ? res.content[0].infos.floorMap
|
|
|
+ : "";
|
|
|
this.space = space;
|
|
|
// 蒙版
|
|
|
if (res.content[0].outline) {
|
|
|
- this.sceneMarkList = res.content[0].outline.map(t => {
|
|
|
+ this.sceneMarkList = res.content[0].outline.map((t) => {
|
|
|
return new SPoint(t.X, t.Y);
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
this.getGraphy();
|
|
|
- })
|
|
|
- }
|
|
|
- else {
|
|
|
- this.floorMap = '';
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.floorMap = "";
|
|
|
}
|
|
|
},
|
|
|
//加载
|
|
@@ -102,85 +141,95 @@ export default {
|
|
|
this.scene.clearZoneSelection();
|
|
|
}
|
|
|
//加载底板
|
|
|
- this.getGraphy()
|
|
|
+ this.getGraphy();
|
|
|
},
|
|
|
//获取底图
|
|
|
getGraphy() {
|
|
|
let that = this;
|
|
|
- that.clearGraphy()
|
|
|
- if (!this.floorMap) return
|
|
|
+ that.clearGraphy();
|
|
|
+ if (!this.floorMap) return;
|
|
|
that.scene = new DivideFloorScene();
|
|
|
that.canvasLoading = true;
|
|
|
- that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.floorMap}`).then(res => {
|
|
|
- that.canvasLoading = false;
|
|
|
- if (res == 'error') {
|
|
|
- this.floorMap = '';
|
|
|
- console.log('数据解析异常');
|
|
|
- return;
|
|
|
- }
|
|
|
- that.view.scene = that.scene;
|
|
|
- if (that.sceneMarkList.length) {
|
|
|
- that.scene.addSceneMark(that.sceneMarkList)
|
|
|
- }
|
|
|
- that.scene.isSpaceSelectable = false;
|
|
|
- // 绘制业务空间
|
|
|
- that.getBusinessSpace();
|
|
|
- if (this.isFirstFlag) {
|
|
|
+ that.scene
|
|
|
+ .loadUrl(
|
|
|
+ `/image-service/common/file_get?systemId=revit&key=${this.floorMap}`
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ that.canvasLoading = false;
|
|
|
+ if (res == "error") {
|
|
|
+ this.floorMap = "";
|
|
|
+ console.log("数据解析异常");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ that.view.scene = that.scene;
|
|
|
+ if (that.sceneMarkList.length) {
|
|
|
+ that.scene.addSceneMark(that.sceneMarkList);
|
|
|
+ }
|
|
|
+ that.scene.isSpaceSelectable = false;
|
|
|
+ // 绘制业务空间
|
|
|
+ that.getBusinessSpace();
|
|
|
+ // if (this.isFirstFlag) {
|
|
|
+ // that.fit();
|
|
|
+ // that.view.minScale = that.view.scale;
|
|
|
+ // if (that.$refs.canvasFun) {
|
|
|
+ // that.$refs.canvasFun.everyScale = that.view.scale;
|
|
|
+ // }
|
|
|
+ // this.isFirstFlag = false;
|
|
|
+ // }
|
|
|
that.fit();
|
|
|
that.view.minScale = that.view.scale;
|
|
|
if (that.$refs.canvasFun) {
|
|
|
that.$refs.canvasFun.everyScale = that.view.scale;
|
|
|
}
|
|
|
this.isFirstFlag = false;
|
|
|
- }
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
// 获取当前分区下的业务空间
|
|
|
getBusinessSpace() {
|
|
|
- this.canvasLoading = true
|
|
|
+ this.canvasLoading = true;
|
|
|
let promise1 = new Promise((resolve, reject) => {
|
|
|
let params = {
|
|
|
data: {
|
|
|
filters: `not id isNull;classCode='${this.space}';buildingId='${this.buildingData[0]}';floorId='${this.buildingData[1]}'`,
|
|
|
- Orders: "localName desc"
|
|
|
+ Orders: "localName desc",
|
|
|
},
|
|
|
- ShaftId: this.$route.query.ShaftId
|
|
|
+ ShaftId: this.$route.query.ShaftId,
|
|
|
};
|
|
|
- shaftSpaceQuery(params, res => {
|
|
|
- resolve(res)
|
|
|
- })
|
|
|
+ shaftSpaceQuery(params, (res) => {
|
|
|
+ resolve(res);
|
|
|
+ });
|
|
|
});
|
|
|
let promise2 = new Promise((resolve, reject) => {
|
|
|
let pa = {
|
|
|
filters: `not id isNull`,
|
|
|
orders: "createTime desc, id asc",
|
|
|
pageSize: 1000,
|
|
|
- zoneType: this.space
|
|
|
- }
|
|
|
+ zoneType: this.space,
|
|
|
+ };
|
|
|
if (this.buildingData.length && this.buildingData.length > 1) {
|
|
|
pa.BuildingId = this.buildingData[0];
|
|
|
pa.FloorId = this.buildingData[1];
|
|
|
}
|
|
|
- zoneQueryOutline(pa, res => {
|
|
|
+ zoneQueryOutline(pa, (res) => {
|
|
|
resolve(res);
|
|
|
- })
|
|
|
- })
|
|
|
- Promise.all([promise1, promise2]).then(values => {
|
|
|
+ });
|
|
|
+ });
|
|
|
+ Promise.all([promise1, promise2]).then((values) => {
|
|
|
let relatedZone = values[0].content;
|
|
|
let zoneData = values[1].content;
|
|
|
this.relatedSpaceIdList = [];
|
|
|
- relatedZone.map(item => {
|
|
|
+ relatedZone.map((item) => {
|
|
|
this.relatedSpaceIdList.push(item.id);
|
|
|
- })
|
|
|
+ });
|
|
|
// 所有业务空间
|
|
|
this.businessSpaceList = zoneData;
|
|
|
// 已关联元空间的业务空间
|
|
|
this.BSPRelaISPList = [];
|
|
|
- zoneData.map(t => {
|
|
|
+ zoneData.map((t) => {
|
|
|
if (t.outline && t.outline.length) {
|
|
|
- this.BSPRelaISPList.push(t)
|
|
|
+ this.BSPRelaISPList.push(t);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
// 绘制业务空间
|
|
|
let tempArr = this.BSPRelaISPList.map((t, i) => {
|
|
|
if (t.floorId == this.buildingData[1] && t.classCode == this.space) {
|
|
@@ -189,25 +238,27 @@ export default {
|
|
|
OutLine: t.outline,
|
|
|
RoomID: t.id,
|
|
|
Color: colorArr[i % colorArr.length],
|
|
|
- HighLightFlag: relatedZone.findIndex((item) => (item.id == t.id)) > -1,
|
|
|
- Transparency: relatedZone.findIndex((item) => (item.id == t.id)) > -1 ? 20 : 1
|
|
|
- }
|
|
|
+ HighLightFlag:
|
|
|
+ relatedZone.findIndex((item) => item.id == t.id) > -1,
|
|
|
+ Transparency:
|
|
|
+ relatedZone.findIndex((item) => item.id == t.id) > -1 ? 20 : 1,
|
|
|
+ };
|
|
|
} else {
|
|
|
- return undefined
|
|
|
+ return undefined;
|
|
|
}
|
|
|
- }).filter(item => item)
|
|
|
+ }).filter((item) => item);
|
|
|
this.scene.removeAllZone();
|
|
|
this.scene.addZoneList(tempArr);
|
|
|
this.scene.click(this, this.canvasClick);
|
|
|
if (this.config.isEdit) {
|
|
|
- this.scene.zoneList.map(t => {
|
|
|
- t.selected = t.highLightFlag;
|
|
|
- t.transparency = 20;
|
|
|
- t.highLightFlag = false;
|
|
|
- })
|
|
|
+ this.scene.zoneList.map((t) => {
|
|
|
+ t.selected = t.highLightFlag;
|
|
|
+ t.transparency = 20;
|
|
|
+ t.highLightFlag = false;
|
|
|
+ });
|
|
|
}
|
|
|
this.canvasLoading = false;
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
// canvas点击事件
|
|
|
canvasClick(item, event) {
|
|
@@ -217,19 +268,19 @@ export default {
|
|
|
},
|
|
|
// 立面图选中空间对应平面图选中
|
|
|
canvasChecked(RoomID) {
|
|
|
- this.scene.zoneList.map(zoneItem => {
|
|
|
+ this.scene.zoneList.map((zoneItem) => {
|
|
|
if (zoneItem.data.RoomID == RoomID) {
|
|
|
zoneItem.selected = true;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
// 立面图取消选中对应平面图取消选中
|
|
|
canvasUncheck(RoomID) {
|
|
|
- this.scene.zoneList.map(zoneItem => {
|
|
|
+ this.scene.zoneList.map((zoneItem) => {
|
|
|
if (zoneItem.data.RoomID == RoomID) {
|
|
|
zoneItem.selected = false;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
//取消编辑
|
|
|
cancelEdit() {
|
|
@@ -242,11 +293,11 @@ export default {
|
|
|
//编辑
|
|
|
edit() {
|
|
|
this.config.isEdit = true;
|
|
|
- this.scene.zoneList.map(t => {
|
|
|
+ this.scene.zoneList.map((t) => {
|
|
|
t.selected = t.highLightFlag;
|
|
|
t.transparency = 20;
|
|
|
t.highLightFlag = false;
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
//保存编辑
|
|
|
saveEdit() {
|
|
@@ -257,17 +308,17 @@ export default {
|
|
|
type: this.space,
|
|
|
data: {
|
|
|
shaftId: this.$route.query.ShaftId,
|
|
|
- spaceIdList: []
|
|
|
- }
|
|
|
- }
|
|
|
- param.data.spaceIdList = arr.map(t => {
|
|
|
+ spaceIdList: [],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ param.data.spaceIdList = arr.map((t) => {
|
|
|
return t.data.RoomID;
|
|
|
- })
|
|
|
- shaftZoneLinkReplace(param, res => {
|
|
|
+ });
|
|
|
+ shaftZoneLinkReplace(param, (res) => {
|
|
|
this.config.isEdit = false;
|
|
|
this.$message.success("保存成功");
|
|
|
this.getBusinessSpace();
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
// 清除canvas
|
|
|
clearGraphy() {
|
|
@@ -275,17 +326,20 @@ export default {
|
|
|
this.scene = null;
|
|
|
if (this.view) {
|
|
|
this.view.scene = null;
|
|
|
- return
|
|
|
+ // return
|
|
|
}
|
|
|
- this.view = new FloorView('floorCanvas')
|
|
|
+ this.view = null;
|
|
|
+ this.view = new FloorView("floorCanvas");
|
|
|
+ this.view.connect("leftMove", this, function () {});
|
|
|
},
|
|
|
// 适配底图到窗口
|
|
|
fit() {
|
|
|
+ this.view.DragMove = true;
|
|
|
if (this.scene.sceneMark) {
|
|
|
- this.view.fitItemToView([this.scene.sceneMark])
|
|
|
- return
|
|
|
+ this.view.fitItemToView([this.scene.sceneMark]);
|
|
|
+ return;
|
|
|
}
|
|
|
- this.view.fitSceneToView()
|
|
|
+ this.view.fitSceneToView();
|
|
|
},
|
|
|
// 缩放
|
|
|
scale(val) {
|
|
@@ -293,15 +347,26 @@ export default {
|
|
|
return;
|
|
|
}
|
|
|
let scale = this.view.scale;
|
|
|
- this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
|
|
|
+ this.view.scaleByPoint(
|
|
|
+ val / scale,
|
|
|
+ this.canvasWidth / 2,
|
|
|
+ this.canvasHeight / 2
|
|
|
+ );
|
|
|
},
|
|
|
// 保存为png
|
|
|
savePng() {
|
|
|
- this.view.saveImage(`${this.projectName}-${this.buildFloorName}.png`, 'png');
|
|
|
+ this.view.saveImage(
|
|
|
+ `${this.projectName}-${this.buildFloorName}.png`,
|
|
|
+ "png"
|
|
|
+ );
|
|
|
},
|
|
|
// 保存为svg
|
|
|
saveSvg() {
|
|
|
- this.view.saveSceneSvg(`${this.projectName}-${this.buildFloorName}.svg`, 6400, 4800);
|
|
|
+ this.view.saveSceneSvg(
|
|
|
+ `${this.projectName}-${this.buildFloorName}.svg`,
|
|
|
+ 6400,
|
|
|
+ 4800
|
|
|
+ );
|
|
|
},
|
|
|
// 框选
|
|
|
groupSelect() {
|
|
@@ -309,27 +374,29 @@ export default {
|
|
|
},
|
|
|
// 保存json
|
|
|
saveJson() {
|
|
|
- this.view.saveFloorJson(`${this.projectName}-${this.buildFloorName}.json`)
|
|
|
+ this.view.saveFloorJson(
|
|
|
+ `${this.projectName}-${this.buildFloorName}.json`
|
|
|
+ );
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
"view.scale": {
|
|
|
handler(n) {
|
|
|
if (this.$refs.canvasFun) {
|
|
|
- let s = n * 10 / this.view.minScale
|
|
|
+ let s = (n * 10) / this.view.minScale;
|
|
|
this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
"scene.isRectSelection": {
|
|
|
handler(n) {
|
|
|
if (!n) {
|
|
|
- this.$refs.canvasFun.active = '';
|
|
|
+ this.$refs.canvasFun.active = "";
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|