|
@@ -1,15 +1,15 @@
|
|
|
<template>
|
|
|
<div id="cenoteGraphy" style="height:100%;width:100%;" ref="graphy">
|
|
|
- <div v-if="!FloorMap">
|
|
|
+ <!-- <div v-if="!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-else v-loading="canvasLoading">
|
|
|
+ </div> -->
|
|
|
+ <div class="canvas-box" 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" ref="canvasFun"></canvasFun>
|
|
|
+ <!-- <canvasFun @fit="fit" @scale="scale" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun> -->
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -20,22 +20,233 @@ import canvasFun from "@/components/business_space/newGraphy/canvasFun";
|
|
|
import { SColor, SPoint } from "@saga-web/draw/lib";
|
|
|
import { DivideFloorScene, SpaceItem, ZoneItem } from "@saga-web/cad-engine/lib";
|
|
|
import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
|
|
|
+import { getFloorMsgByFloorID, queryZone, shaftSpaceQuery } from '@/api/scan/request';
|
|
|
+import { resolve, reject } from 'q';
|
|
|
+const colorArr = [
|
|
|
+ "#fed44c",
|
|
|
+ "#3485d6",
|
|
|
+ "#a384fc",
|
|
|
+ "#4caf50",
|
|
|
+ "#ff6316",
|
|
|
+ "#fd8bbe",
|
|
|
+ "#03a9f3",
|
|
|
+ "#ea615b"
|
|
|
+];
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- canvasLoading:false,//加载canvas
|
|
|
- FloorMap:false,//地图
|
|
|
+ canvasLoading: false,//加载canvas
|
|
|
+ FloorMap: '',//地图
|
|
|
canvasWidth: 800,
|
|
|
canvasHeight: 600,
|
|
|
- view: null,
|
|
|
+ view: null,
|
|
|
scene: null,
|
|
|
+ buildingData: [],//建筑,楼层
|
|
|
+ space: '',//当前空间类型
|
|
|
+ businessSpaceList: [],//所有业务空间
|
|
|
+ BSPRelaISPList: [],//已关联元空间的业务空间
|
|
|
+ zoneList: [], // 业务空间-canvas图中
|
|
|
+ selectAble: false,
|
|
|
+ relatedSpaceIdList: [],//已关联的业务空间id
|
|
|
+ config: () => {
|
|
|
+ return {
|
|
|
+ isEdit: false,
|
|
|
+ divide: true,
|
|
|
+ groupSelect: true
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.canvasWidth = this.$refs.graphy.offsetWidth;
|
|
|
this.canvasHeight = this.$refs.graphy.offsetHeight;
|
|
|
},
|
|
|
- methods:{
|
|
|
+ components: {
|
|
|
+ canvasFun
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //获取楼层map
|
|
|
+ getFloorMap(buildfloor, space) {
|
|
|
+ if (buildfloor.length == 2) {
|
|
|
+ this.buildingData = buildfloor
|
|
|
+ let pa = {
|
|
|
+ Filters: `FloorID='${this.buildingData[1]}'`
|
|
|
+ }
|
|
|
+ getFloorMsgByFloorID(pa, res => {
|
|
|
+ this.floorMap = res.Content[0].StructureInfo ? res.Content[0].StructureInfo.FloorMap : '';
|
|
|
+ this.space = space;
|
|
|
+ this.getGraphy();
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //加载
|
|
|
+ load() {
|
|
|
+ if (this.scene) {
|
|
|
+ this.scene.clearSpaceSelection();
|
|
|
+ this.scene.clearZoneSelection();
|
|
|
+ }
|
|
|
+ //加载底板
|
|
|
+ this.getGraphy()
|
|
|
+ },
|
|
|
+ //获取底图
|
|
|
+ getGraphy() {
|
|
|
+ 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;
|
|
|
+ if (res == 'error') {
|
|
|
+ this.floorMap = '';
|
|
|
+ this.$message.warning('数据解析异常');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ that.view.scene = that.scene;
|
|
|
+ // 绘制业务空间
|
|
|
+ that.getBusinessSpace();
|
|
|
+ that.view.fitSceneToView();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取当前分区下的业务空间
|
|
|
+ getBusinessSpace() {
|
|
|
+ this.canvasLoading = true
|
|
|
+ this.clearZoneCanvas();
|
|
|
+ let promise1 = new Promise((resolve, reject) => {
|
|
|
+ let params = {
|
|
|
+ data: {
|
|
|
+ Filters: `not RoomID isNull;ObjectType = '${this.space}';buildingId = '${this.buildingData[0]}';floorId = '${this.buildingData[1]}'`,
|
|
|
+ Orders: "RoomLocalName desc"
|
|
|
+ },
|
|
|
+ ShaftId: this.$route.query.ShaftId
|
|
|
+ };
|
|
|
+ shaftSpaceQuery(params, res => {
|
|
|
+ resolve(res)
|
|
|
+ })
|
|
|
+ });
|
|
|
+ let promise2 = new Promise((resolve, reject) => {
|
|
|
+ let pa = {
|
|
|
+ zone: this.space,
|
|
|
+ data: {
|
|
|
+ Filters: ``,
|
|
|
+ Orders: "createTime desc, RoomID asc",
|
|
|
+ PageSize: 1000
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.buildingData.length && this.buildingData.length > 1) {
|
|
|
+ pa.data.Filters = `BuildingId='${this.buildingData[0]}';FloorId='${this.buildingData[1]}'`
|
|
|
+ }
|
|
|
+ queryZone(pa, res => {
|
|
|
+ resolve(res);
|
|
|
+ })
|
|
|
+ })
|
|
|
+ Promise.all([promise1, promise2]).then(values => {
|
|
|
+ let relatedZone = values[0].Content;
|
|
|
+ let zoneData = values[1].Content;
|
|
|
+ console.log(relatedZone);
|
|
|
+ console.log(values[1])
|
|
|
+ relatedZone.map(item => {
|
|
|
+ this.relatedSpaceIdList.push(item.RoomID);
|
|
|
+ })
|
|
|
+ // 所有业务空间
|
|
|
+ this.businessSpaceList = zoneData;
|
|
|
+ // 已关联元空间的业务空间
|
|
|
+ this.BSPRelaISPList = [];
|
|
|
+ zoneData.map(t => {
|
|
|
+ if (t.Outline && t.Outline.length) {
|
|
|
+ this.BSPRelaISPList.push(t)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 绘制业务空间
|
|
|
+ let tempArr = this.BSPRelaISPList.map((t, i) => {
|
|
|
+ let item = {
|
|
|
+ RoomLocalName: t.RoomLocalName,
|
|
|
+ OutLine: t.Outline,
|
|
|
+ RoomID: t.RoomID,
|
|
|
+ Color: colorArr[i % colorArr.length],
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ })
|
|
|
+ this.scene.zoneList = [];
|
|
|
+ this.scene.addZoneList(tempArr);
|
|
|
+ this.scene.click(this, this.canvasClick);
|
|
|
+ this.zoneList = this.scene.zoneList;
|
|
|
+ this.scene.zoneList.map(t => {
|
|
|
+ if (this.relatedSpaceIdList.indexOf(t.data.RoomID) != -1) {
|
|
|
+ t.highLightFlag = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.canvasLoading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 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);
|
|
|
+ }
|
|
|
+ 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) {//批量
|
|
|
+
|
|
|
+ // } 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.view.scene = null;
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.view = new FloorView('floorCanvas')
|
|
|
+ },
|
|
|
+ // 清空绘制业务空间
|
|
|
+ clearZoneCanvas() {
|
|
|
+ this.zoneList.map(t => {
|
|
|
+ this.scene.removeItem(t);
|
|
|
+ })
|
|
|
+ },
|
|
|
// 适配底图到窗口
|
|
|
fit() {
|
|
|
this.view.fitSceneToView()
|
|
@@ -48,16 +259,37 @@ export default {
|
|
|
let scale = this.view.scale;
|
|
|
this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
|
|
|
},
|
|
|
+ // 保存为png
|
|
|
+ savePng() {
|
|
|
+ this.view.saveImage(`${this.buildingData[1]}.png`, 'png');
|
|
|
+ },
|
|
|
+ // 保存为svg
|
|
|
+ saveSvg() {
|
|
|
+ this.view.saveSceneSvg(`${this.buildingData[1]}.svg`, 6400, 4800);
|
|
|
+ },
|
|
|
+ // 保存json
|
|
|
+ saveJson() {
|
|
|
+ this.view.saveFloorJson(`${this.buildingData[1]}.json`)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "view.scale": {
|
|
|
+ handler(n) {
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
+ this.$refs.canvasFun.sliderVal = n * 10 / this.view.minScale;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .canvas-actions-box {
|
|
|
- position: absolute;
|
|
|
- bottom: 20px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
+.canvas-actions-box {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
</style>
|