|
@@ -14,16 +14,17 @@ import axios from "axios";
|
|
|
import { SPoint } from "@sybotan-web/base/lib";
|
|
|
import { SPen, SPainter, SColor } from "@sybotan-web/draw";
|
|
|
import { mainScene, SGraphyRectItem } from "@/assets/graphy/index.js";
|
|
|
+import eventBus from "./bus.js";
|
|
|
export default {
|
|
|
props: {
|
|
|
cadWidth: {
|
|
|
type: String | Number,
|
|
|
- default: '100%',
|
|
|
+ default: "100%",
|
|
|
required: false
|
|
|
},
|
|
|
cadHeight: {
|
|
|
type: String | Number,
|
|
|
- default: '100%',
|
|
|
+ default: "100%",
|
|
|
required: false
|
|
|
},
|
|
|
dataKey: {
|
|
@@ -71,24 +72,31 @@ export default {
|
|
|
default: "#1abc9c",
|
|
|
required: false
|
|
|
},
|
|
|
- isScale: { //是否放大缩小
|
|
|
+ isScale: {
|
|
|
+ //是否放大缩小
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
required: false
|
|
|
},
|
|
|
- indexs:{ //是否放大缩小
|
|
|
- type: Number|String,
|
|
|
- default: '',
|
|
|
+ indexs: {
|
|
|
+ //是否放大缩小
|
|
|
+ type: Number | String,
|
|
|
+ default: "",
|
|
|
required: false
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- drawMainScene: null
|
|
|
+ drawMainScene: null,
|
|
|
+ view: null
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.initGraphy();
|
|
|
+ let that = this;
|
|
|
+ eventBus.$on("suitableRatios", function() {
|
|
|
+ that.view.fitSceneToView();
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
clickItem(item) {
|
|
@@ -111,39 +119,40 @@ export default {
|
|
|
return;
|
|
|
}
|
|
|
this.drawMainScene = null;
|
|
|
+ this.view = null;
|
|
|
// 初始化view类
|
|
|
- let view = new SGraphyView("canvas"+this.indexs);
|
|
|
+ this.view = new SGraphyView("canvas" + this.indexs);
|
|
|
this.drawMainScene = new mainScene(null);
|
|
|
this.drawMainScene
|
|
|
.urlGetData(
|
|
|
- "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit", ///////////测试路径
|
|
|
- // this.dataKey //开发url
|
|
|
+ "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit" ///////////测试路径
|
|
|
+ // this.dataKey //开发url
|
|
|
)
|
|
|
.then(() => {
|
|
|
// 将场景赋给view对图进行绘制
|
|
|
- view.scene = this.drawMainScene;
|
|
|
+ this.view.scene = this.drawMainScene;
|
|
|
// 自动缩放比例
|
|
|
- view.fitSceneToView();
|
|
|
+ this.view.fitSceneToView();
|
|
|
// 绘制地图颜色
|
|
|
this.drawAllItemColor();
|
|
|
// this.drawMainScene.click(this, this.clickItem);
|
|
|
- this.drawMainScene.mouseMove(this,this.leftClickMove);
|
|
|
+ this.drawMainScene.mouseMove(this, this.leftClickMove);
|
|
|
});
|
|
|
- if(this.isScale){
|
|
|
- this.cancelScale(view)
|
|
|
- }
|
|
|
+ if (this.isScale) {
|
|
|
+ this.cancelScale(this.view);
|
|
|
+ }
|
|
|
},
|
|
|
// 单个item 高亮
|
|
|
heightLightitem(item, highlightColor) {
|
|
|
this.drawItemColor(item, highlightColor);
|
|
|
},
|
|
|
// 取消放大缩小
|
|
|
- cancelScale(view){
|
|
|
+ cancelScale(view) {
|
|
|
view.wheelZoom = 1;
|
|
|
},
|
|
|
// 左键长按控制canvas的坐标
|
|
|
- leftClickMove(a,b){
|
|
|
- // console.log('move',a,b)
|
|
|
+ leftClickMove(a, b) {
|
|
|
+ // console.log('move',a,b)
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -165,10 +174,10 @@ export default {
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
height: auto;
|
|
|
- canvas{
|
|
|
+ canvas {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
- transform: translateX(-50%)
|
|
|
+ transform: translateX(-50%);
|
|
|
}
|
|
|
}
|
|
|
</style>
|