|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div id="drawFloor">
|
|
|
+ <div id="drawFloor" v-loading="canvasLoading">
|
|
|
<canvas id="floorCanvas" :width="cadWidth" :height="cadHeight" ref="canvas"></canvas>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -10,77 +10,14 @@ import { SGraphyView } from "@sybotan-web/graphy/lib";
|
|
|
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
|
|
|
- // },
|
|
|
- point: {
|
|
|
- type: Array,
|
|
|
- default: [0, 0],
|
|
|
- required: false
|
|
|
- },
|
|
|
- pointWidth: {
|
|
|
- type: Number,
|
|
|
- default: 2000,
|
|
|
- required: false
|
|
|
- },
|
|
|
- initColor: {
|
|
|
- type: Array,
|
|
|
- default: function () {
|
|
|
- return [
|
|
|
- "#F9C3C3",
|
|
|
- "#FFD1BF",
|
|
|
- "#FFF3BF",
|
|
|
- "#D8F7C6",
|
|
|
- "#C6F2F6",
|
|
|
- "#DCE3C0",
|
|
|
- "#FAE6C9",
|
|
|
- "#E3D7F7",
|
|
|
- "#C4CBF8",
|
|
|
- "#DEC3F6"
|
|
|
- ];
|
|
|
- },
|
|
|
- required: false
|
|
|
- },
|
|
|
- findGraphyItemId: {
|
|
|
- //高亮的id
|
|
|
- type: String,
|
|
|
- default: "",
|
|
|
- required: false
|
|
|
- },
|
|
|
- highlightColor: {
|
|
|
- //高亮的color
|
|
|
- type: String,
|
|
|
- default: "#1abc9c",
|
|
|
- required: false
|
|
|
- },
|
|
|
- isScale: {
|
|
|
- //是否放大缩小
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- required: false
|
|
|
- },
|
|
|
- indexs: {
|
|
|
- //是否放大缩小
|
|
|
- type: Number | String,
|
|
|
- default: "",
|
|
|
- required: false
|
|
|
- }
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
drawMainScene: null,
|
|
|
view: null,
|
|
|
dataKey: '',
|
|
|
cadWidth: 800,
|
|
|
- cadHeight: 600
|
|
|
+ cadHeight: 600,
|
|
|
+ canvasLoading: false
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -124,8 +61,8 @@ export default {
|
|
|
if (!this.dataKey) {
|
|
|
return;
|
|
|
}
|
|
|
- this.drawMainScene = null;
|
|
|
- this.view = null;
|
|
|
+ this.canvasLoading = true
|
|
|
+ this.clearGraphy()
|
|
|
// 初始化view类
|
|
|
this.view = new SGraphyView("floorCanvas");
|
|
|
this.drawMainScene = new FloorScene(null);
|
|
@@ -133,6 +70,7 @@ export default {
|
|
|
this.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
|
|
|
that.view.scene = that.drawMainScene
|
|
|
that.view.fitSceneToView();
|
|
|
+ this.canvasLoading = false
|
|
|
})
|
|
|
if (this.isScale) {
|
|
|
this.cancelScale(this.view);
|
|
@@ -154,10 +92,12 @@ export default {
|
|
|
//计算缩放比例
|
|
|
this.view.scale = val;
|
|
|
},
|
|
|
- clearGraphy(){
|
|
|
- this.drawMainScene.root.children = null
|
|
|
- this.drawMainScene = null;
|
|
|
- this.view = null;
|
|
|
+ clearGraphy() {
|
|
|
+ if(this.drawMainScene){
|
|
|
+ this.drawMainScene.root.children = null
|
|
|
+ this.drawMainScene = null;
|
|
|
+ this.view = null;
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
watch: {
|