|
@@ -1,15 +1,23 @@
|
|
|
<template>
|
|
|
<div id="drawFloor" v-loading="canvasLoading">
|
|
|
- <canvas id="floorCanvas" :width="cadWidth" :height="cadHeight" ref="canvas"></canvas>
|
|
|
+ <canvas id="floorCanvas" :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>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import eventBus from "./bus.js";
|
|
|
import { SGraphyView } from "@sybotan-web/graphy/lib";
|
|
|
-import { FloorScene } from "cad-engine";
|
|
|
+import { DivideFloorScene } from "cad-engine"
|
|
|
import { SColor } from "@sybotan-web/draw/lib";
|
|
|
+import canvasFun from "@/components/business_space/newGraphy/canvasFun"
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ canvasFun
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
drawMainScene: null,
|
|
@@ -20,61 +28,34 @@ export default {
|
|
|
canvasLoading: false
|
|
|
};
|
|
|
},
|
|
|
+ props: {
|
|
|
+ isEdit: {
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ showTools:{
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
mounted() {
|
|
|
- // this.initGraphy('3af6d175c34e11e993ac85337be80696');
|
|
|
- // let that = this;
|
|
|
- // eventBus.$on("suitableRatios", function () {
|
|
|
- // that.view.fitSceneToView();
|
|
|
- // });
|
|
|
- // eventBus.$on("changeRatios", function (val) {
|
|
|
- // that.changeRatios(val);
|
|
|
- // });
|
|
|
- // eventBus.$on("downImgs", function (val) {
|
|
|
- // that.view.saveImage("saveImage" + new Date(), "png");
|
|
|
- // });
|
|
|
- // eventBus.$on("openDrags", function (val) {
|
|
|
- // if (val) {
|
|
|
-
|
|
|
- // }
|
|
|
- // });
|
|
|
this.cadWidth = document.getElementById("drawFloor").offsetWidth;
|
|
|
this.cadHeight = document.getElementById("drawFloor").offsetHeight;
|
|
|
+ this.floor = this.$route.query.FloorID
|
|
|
},
|
|
|
methods: {
|
|
|
- clickItem(item) {
|
|
|
- this.$emit("clickGraphyItem", item);
|
|
|
- },
|
|
|
- // 单个个体绘制颜色
|
|
|
- drawItemColor(item, color) {
|
|
|
- item.fillColor = new SColor(color); //需要缓存的边框
|
|
|
- item.cacheFillColor = new SColor(color); //需要
|
|
|
- },
|
|
|
- // 绘制所有的item
|
|
|
- drawAllItemColor() {
|
|
|
- this.drawMainScene.root.children.forEach((item, index) => {
|
|
|
- let color = this.initColor[index % 10];
|
|
|
- this.drawItemColor(item, color);
|
|
|
- });
|
|
|
- },
|
|
|
initGraphy(ModelId) {
|
|
|
- this.dataKey = ModelId
|
|
|
- if (!this.dataKey) {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.canvasLoading = true
|
|
|
- this.clearGraphy()
|
|
|
- // 初始化view类
|
|
|
- this.view = new SGraphyView("floorCanvas");
|
|
|
- this.drawMainScene = new FloorScene(null);
|
|
|
let that = this;
|
|
|
- this.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
|
|
|
+ this.view = new SGraphyView('floorCanvas')
|
|
|
+ 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.view.scene = that.drawMainScene
|
|
|
that.view.fitSceneToView();
|
|
|
this.canvasLoading = false
|
|
|
})
|
|
|
- if (this.isScale) {
|
|
|
- this.cancelScale(this.view);
|
|
|
- }
|
|
|
},
|
|
|
// 单个item 高亮
|
|
|
heightLightitem(item, highlightColor) {
|
|
@@ -93,17 +74,59 @@ export default {
|
|
|
this.view.scale = val;
|
|
|
},
|
|
|
clearGraphy() {
|
|
|
- if(this.drawMainScene){
|
|
|
+ if (this.drawMainScene) {
|
|
|
this.drawMainScene.root.children = null
|
|
|
this.drawMainScene = null;
|
|
|
this.view = null;
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ // canvas 获取焦点
|
|
|
+ focus() {
|
|
|
+ document.getElementById('floorCanvas').focus()
|
|
|
+ },
|
|
|
+ // 工具栏操作
|
|
|
+ // 移动底图
|
|
|
+ moveCanvas() { },
|
|
|
+ // 适配底图到窗口
|
|
|
+ fit() {
|
|
|
+ this.view.fitSceneToView()
|
|
|
+ },
|
|
|
+ // 保存为png
|
|
|
+ savePng() {
|
|
|
+ this.view.saveImage(`${this.floor}.png`, 'png');
|
|
|
+ },
|
|
|
+ // 保存为svg
|
|
|
+ saveSvg() {
|
|
|
+ this.view.saveSceneSvg(`${this.floor}.png`, 6400, 4800);
|
|
|
+ },
|
|
|
+ // 切割划分
|
|
|
+ divide() {
|
|
|
+ this.drawMainScene.isMarking = true;
|
|
|
+ },
|
|
|
+ // 清除切割划分
|
|
|
+ clearDivide() {
|
|
|
+ this.drawMainScene.clearSceneMark()
|
|
|
+ },
|
|
|
+ // 撤销
|
|
|
+ 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)
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
- findGraphyItemId(n) {
|
|
|
- if (n) {
|
|
|
- this.heightLightitem();
|
|
|
+ "view.scale": {
|
|
|
+ // deep: true,
|
|
|
+ handler(n) {
|
|
|
+ // console.log(n)
|
|
|
+ // this.$refs.canvasFun.sliderVal = n;
|
|
|
+ console.log(this.$refs.canvasFun.sliderVal)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -114,5 +137,12 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
+ .operate {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 20px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|