|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div id="drawFloor">
|
|
|
- <canvas :id="'canvas'+indexs" :width="cadWidth" :height="cadHeight"></canvas>
|
|
|
+ <canvas id="floorCanvas" :width="cadWidth" :height="cadHeight" ref="canvas"></canvas>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -11,21 +11,16 @@ import { FloorScene } from "cad-engine";
|
|
|
import { SColor } from "@sybotan-web/draw/lib";
|
|
|
export default {
|
|
|
props: {
|
|
|
- cadWidth: {
|
|
|
- type: String | Number,
|
|
|
- default: "100%",
|
|
|
- required: false
|
|
|
- },
|
|
|
- cadHeight: {
|
|
|
- type: String | Number,
|
|
|
- default: "100%",
|
|
|
- required: false
|
|
|
- },
|
|
|
- dataKey: {
|
|
|
- type: String,
|
|
|
- default: "",
|
|
|
- required: true
|
|
|
- },
|
|
|
+ // cadWidth: {
|
|
|
+ // type: String | Number,
|
|
|
+ // default: "100%",
|
|
|
+ // required: false
|
|
|
+ // },
|
|
|
+ // cadHeight: {
|
|
|
+ // type: String | Number,
|
|
|
+ // default: "100%",
|
|
|
+ // required: false
|
|
|
+ // },
|
|
|
point: {
|
|
|
type: Array,
|
|
|
default: [0, 0],
|
|
@@ -82,26 +77,31 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
drawMainScene: null,
|
|
|
- view: null
|
|
|
+ view: null,
|
|
|
+ dataKey: '',
|
|
|
+ cadWidth: 800,
|
|
|
+ cadHeight: 600
|
|
|
};
|
|
|
},
|
|
|
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.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 - 20;
|
|
|
+ this.cadHeight = document.getElementById("drawFloor").offsetHeight - 20;
|
|
|
},
|
|
|
methods: {
|
|
|
clickItem(item) {
|
|
@@ -120,18 +120,17 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
initGraphy(ModelId) {
|
|
|
+ this.dataKey = ModelId
|
|
|
if (!this.dataKey) {
|
|
|
return;
|
|
|
}
|
|
|
- let arr = ['3af6d175c34e11e993ac85337be80696', 'bd174039c32311e98359dfc652ba919b', '8544a3c3cd2611e99abc839db1015353']
|
|
|
- let index = Math.floor(Math.random() * 3)
|
|
|
this.drawMainScene = null;
|
|
|
this.view = null;
|
|
|
// 初始化view类
|
|
|
- this.view = new SGraphyView("canvas" + this.indexs);
|
|
|
+ this.view = new SGraphyView("floorCanvas");
|
|
|
this.drawMainScene = new FloorScene(null);
|
|
|
let that = this;
|
|
|
- this.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: arr[index] }).then(res => {
|
|
|
+ this.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
|
|
|
that.view.scene = that.drawMainScene
|
|
|
that.view.fitSceneToView();
|
|
|
})
|
|
@@ -141,11 +140,11 @@ export default {
|
|
|
},
|
|
|
// 单个item 高亮
|
|
|
heightLightitem(item, highlightColor) {
|
|
|
- this.drawItemColor(item, highlightColor);
|
|
|
+ // this.drawItemColor(item, highlightColor);
|
|
|
},
|
|
|
// 取消放大缩小
|
|
|
cancelScale(view) {
|
|
|
- view.wheelZoom = 1;
|
|
|
+ // view.wheelZoom = 1;
|
|
|
},
|
|
|
// 左键长按控制canvas的坐标
|
|
|
leftClickMove(a, b) {
|
|
@@ -155,15 +154,15 @@ export default {
|
|
|
//计算缩放比例
|
|
|
this.view.scale = val;
|
|
|
},
|
|
|
+ clearGraphy(){
|
|
|
+ this.drawMainScene.root.children = null
|
|
|
+ this.drawMainScene = null;
|
|
|
+ this.view = null;
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
- dataKey(str) {
|
|
|
- if (str) {
|
|
|
- this.initGraphy('3af6d175c34e11e993ac85337be80696');
|
|
|
- }
|
|
|
- },
|
|
|
- findGraphyItemId(str) {
|
|
|
- if (str) {
|
|
|
+ findGraphyItemId(n) {
|
|
|
+ if (n) {
|
|
|
this.heightLightitem();
|
|
|
}
|
|
|
}
|
|
@@ -173,12 +172,8 @@ export default {
|
|
|
<style scoped lang="less">
|
|
|
#drawFloor {
|
|
|
width: 100%;
|
|
|
+ height: 100%;
|
|
|
position: relative;
|
|
|
- height: auto;
|
|
|
- canvas {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
</style>
|