|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
- <div id="drawFloor" v-loading="canvasLoading">
|
|
|
- <canvas id="floorCanvas" :width="cadWidth" :height="cadHeight" ref="canvas" tabindex="0"></canvas>
|
|
|
+ <div :id="`drawFloor${id}`" class="drawFloor" v-loading="canvasLoading">
|
|
|
+ <canvas :id="`floorCanvas${id}`" :width="cadWidth" :height="cadHeight" ref="canvas" tabindex="0"></canvas>
|
|
|
<div class="operate" v-if="showTools">
|
|
|
<canvasFun @move="moveCanvas" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo"
|
|
|
@redo="redo" @scale="scale" :isEdit="isEdit" ref="canvasFun"></canvasFun>
|
|
@@ -12,7 +12,7 @@
|
|
|
import eventBus from "./bus.js";
|
|
|
import { SGraphyView } from "@sybotan-web/graphy/lib";
|
|
|
import { DivideFloorScene } from "cad-engine"
|
|
|
-import { SColor } from "@sybotan-web/draw/lib";
|
|
|
+import { SColor, SPoint } from "@sybotan-web/draw/lib";
|
|
|
import canvasFun from "@/components/business_space/newGraphy/canvasFun"
|
|
|
export default {
|
|
|
components: {
|
|
@@ -25,68 +25,87 @@ export default {
|
|
|
dataKey: '',
|
|
|
cadWidth: 800,
|
|
|
cadHeight: 600,
|
|
|
- canvasLoading: false
|
|
|
+ canvasLoading: false,
|
|
|
+ modelId: '',
|
|
|
+ FloorID: '',
|
|
|
+ Outline: [],
|
|
|
};
|
|
|
},
|
|
|
props: {
|
|
|
isEdit: {
|
|
|
default: false
|
|
|
},
|
|
|
- showTools:{
|
|
|
+ showTools: {
|
|
|
default: false
|
|
|
+ },
|
|
|
+ id: {
|
|
|
+ default: 0
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.modelId = this.$route.query.modelId;
|
|
|
+ this.FloorID = this.$route.query.FloorID;
|
|
|
+ this.Outline = this.$route.query.Outline || [];
|
|
|
+ },
|
|
|
mounted() {
|
|
|
- this.cadWidth = document.getElementById("drawFloor").offsetWidth;
|
|
|
- this.cadHeight = document.getElementById("drawFloor").offsetHeight;
|
|
|
- this.floor = this.$route.query.FloorID
|
|
|
+ this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
|
|
|
+ this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
|
|
|
},
|
|
|
methods: {
|
|
|
initGraphy(ModelId) {
|
|
|
let that = this;
|
|
|
- this.view = new SGraphyView('floorCanvas')
|
|
|
+ that.clearGraphy()
|
|
|
+ let id = `floorCanvas${that.id}`;
|
|
|
+ console.log(id)
|
|
|
+ that.view = new SGraphyView(id)
|
|
|
that.drawMainScene = new DivideFloorScene();
|
|
|
- // that.drawMainScene.loadUrl(`/image-service/common/file_get/${ModelId}?systemId=revit`).then(res => {
|
|
|
- // that.view.scene = that.drawMainScene
|
|
|
- // that.view.fitSceneToView();
|
|
|
- // this.canvasLoading = false
|
|
|
- // })
|
|
|
- this.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: '5fec5a64cedd11e994a0ad55e7095c26' }).then(res => {
|
|
|
+ that.canvasLoading = true;
|
|
|
+ that.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
|
|
|
+ // let Elements = res.EntityList[0].Elements;
|
|
|
+ // let flag = false;
|
|
|
+ // for (let key in Elements) {
|
|
|
+ // if (Elements[key].length > 0) {
|
|
|
+ // flag = true;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // if (flag) {
|
|
|
that.view.scene = that.drawMainScene
|
|
|
that.view.fitSceneToView();
|
|
|
- this.canvasLoading = false
|
|
|
+ that.canvasLoading = false;
|
|
|
+ // that.view.maxScale = that.view.scale * 1000;
|
|
|
+ // that.$refs.canvasFun.maxScale = that.view.maxScale;
|
|
|
+ // if (that.Outline.length) {
|
|
|
+ // let newArr = that.Outline.map(t => {
|
|
|
+ // return new SPoint(t.X, t.Y);
|
|
|
+ // })
|
|
|
+ // that.drawMainScene.addSceneMark(newArr)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
})
|
|
|
},
|
|
|
- // 单个item 高亮
|
|
|
- heightLightitem(item, highlightColor) {
|
|
|
- // this.drawItemColor(item, highlightColor);
|
|
|
- },
|
|
|
- // 取消放大缩小
|
|
|
- cancelScale(view) {
|
|
|
- // view.wheelZoom = 1;
|
|
|
- },
|
|
|
- // 左键长按控制canvas的坐标
|
|
|
- leftClickMove(a, b) {
|
|
|
- // console.log('move',a,b)
|
|
|
- },
|
|
|
- changeRatios(val) {
|
|
|
- //计算缩放比例
|
|
|
- this.view.scale = val;
|
|
|
- },
|
|
|
+ // 清空平面图
|
|
|
clearGraphy() {
|
|
|
- if (this.drawMainScene) {
|
|
|
- this.drawMainScene.root.children = null
|
|
|
+ if (this.view) {
|
|
|
+ this.drawMainScene.root.children = null;
|
|
|
this.drawMainScene = null;
|
|
|
this.view = null;
|
|
|
}
|
|
|
},
|
|
|
// canvas 获取焦点
|
|
|
focus() {
|
|
|
- document.getElementById('floorCanvas').focus()
|
|
|
+ document.getElementById(`floorCanvas${this.id}`).focus()
|
|
|
},
|
|
|
// 工具栏操作
|
|
|
// 移动底图
|
|
|
- moveCanvas() { },
|
|
|
+ moveCanvas(move) {
|
|
|
+ // todo
|
|
|
+ let canvas = document.getElementById(`floorCanvas${this.id}`);
|
|
|
+ if (move) {
|
|
|
+ canvas.style.cursor = 'move';
|
|
|
+ } else {
|
|
|
+ canvas.style.cursor = 'default';
|
|
|
+ }
|
|
|
+ },
|
|
|
// 适配底图到窗口
|
|
|
fit() {
|
|
|
this.view.fitSceneToView()
|
|
@@ -109,31 +128,29 @@ export default {
|
|
|
},
|
|
|
// 撤销
|
|
|
undo() {
|
|
|
- console.log(this.view)
|
|
|
- console.log(this.drawMainScene)
|
|
|
+
|
|
|
},
|
|
|
// 反撤销
|
|
|
redo() { },
|
|
|
// 缩放
|
|
|
scale(val) {
|
|
|
- console.log(val)
|
|
|
- this.view.scaleByPoint(val, this.cadWidth / 2, this.cadHeight / 2)
|
|
|
+ let scale = this.view.scale
|
|
|
+ this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
"view.scale": {
|
|
|
- // deep: true,
|
|
|
handler(n) {
|
|
|
- // console.log(n)
|
|
|
- // this.$refs.canvasFun.sliderVal = n;
|
|
|
- console.log(this.$refs.canvasFun.sliderVal)
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
+ this.$refs.canvasFun.sliderVal = n;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
-#drawFloor {
|
|
|
+.drawFloor {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|