|
|
@@ -4,7 +4,7 @@
|
|
|
<i class="icon-wushuju iconfont"></i>
|
|
|
<p>{{type == 1 ? '请选择楼层' : '当前楼层尚无平面图，请去空间管理根据模型生成'}}</p>
|
|
|
</div>
|
|
|
- <div style="width:100%;" v-show="type==3" ref="canvasContainer">
|
|
|
+ <div style="width:100%;height:100%;" v-show="type==3" ref="canvasContainer" v-loading="canvasLoading">
|
|
|
<canvas id="canvas" :width="canvasW" :height="canvasH"></canvas>
|
|
|
</div>
|
|
|
<div v-if="type == 3" style="height: 40px;z-index:999;overflow: hidden;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;">
|
|
|
@@ -21,21 +21,15 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import axios from "axios";
|
|
|
//引擎的引用
|
|
|
-import { SGraphyImgItem } from '@/assets/graphy/SGraphy/newItems/SGraphyImgItem.js'
|
|
|
-import SGraphyPolygonItem from '@/assets/graphy/SGraphy/newItems/SGraphyPolygonItem.js'
|
|
|
-import { SGraphyView } from "@sybotan-web/graphy";
|
|
|
import { mapGetters, mapActions } from "vuex";
|
|
|
-import { SPen, SPainter, SColor, SPoint } from "@sybotan-web/draw";
|
|
|
-import pako from '@/assets/pako/pako'
|
|
|
import tools from "@/utils/scan/tools";
|
|
|
-import { LocationPointScene } from './utils/LocationPointScene.js'
|
|
|
import {
|
|
|
- formBIMToPri,
|
|
|
- updateBusiness,
|
|
|
updateLocationPoint, //更新点位标签
|
|
|
} from "@/api/scan/request";
|
|
|
+import { SGraphyView } from "@saga-web/graphy/lib";
|
|
|
+import { LocationPointScene } from "@saga-web/cad-engine/lib";
|
|
|
+import { SPoint } from "@saga-web/draw/lib";
|
|
|
let colorArr = [
|
|
|
'#00f5ff0d', '#ffdab90d', '#8470ff0d', '#7fff000d', '#ee5c420d',
|
|
|
'#ffffe00d', '#eee9e90d', '#9c9c9c0d', '#90ee900d', '#b4cdcd0d'
|
|
|
@@ -50,7 +44,7 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
view: "",
|
|
|
- mainScene: null,
|
|
|
+ scene: null,
|
|
|
dataMax: "", //最大值最小值数据
|
|
|
menuShow: false, //右键菜单的显示
|
|
|
lineShow: false,
|
|
|
@@ -63,6 +57,7 @@ export default {
|
|
|
imageUrl: "http://adm.sagacloud.cn/image-service/common/image_get?systemId=dev&key=graphy.png",
|
|
|
setFlag: false, //插旗标志
|
|
|
point: {}, //右侧列表传来的位置标签
|
|
|
+ canvasLoading: false, //loading
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -96,22 +91,26 @@ export default {
|
|
|
},
|
|
|
//下载json文件
|
|
|
getJson(jsonId) {
|
|
|
- let url = `/image-service/common/file_get/${jsonId}?systemId=revit`
|
|
|
- this.mainScene = null;
|
|
|
- // 初始化view类
|
|
|
- this.view = new SGraphyView("canvas");
|
|
|
- this.mainScene = new LocationPointScene(null);
|
|
|
- this.mainScene.urlGetData(url).then(() => {
|
|
|
- this.view.scene = this.mainScene;
|
|
|
- this.mainScene.addFlagList(this.list)
|
|
|
- this.view.fitSceneToView();
|
|
|
- this.initGraphy()
|
|
|
- });
|
|
|
+ let that = this;
|
|
|
+ that.clearGraphy()
|
|
|
+ that.scene = new LocationPointScene();
|
|
|
+ that.canvasLoading = true;
|
|
|
+ that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${jsonId}`).then(() => {
|
|
|
+ that.canvasLoading = false;
|
|
|
+ that.view.scene = that.scene;
|
|
|
+ that.scene.isSpaceSelectable = false;
|
|
|
+ that.scene.addMarkerList(that.list);
|
|
|
+ that.scene.markerClick(that, that.markClick);
|
|
|
+ that.view.maxScale = that.view.scale * 10;
|
|
|
+ that.view.minScale = that.view.scale;
|
|
|
+ that.view.fitSceneToView();
|
|
|
+ // that.$refs.canvasFun.everyScale = that.view.scale;
|
|
|
+ })
|
|
|
},
|
|
|
//画点位坐标
|
|
|
doPoint(list) {
|
|
|
this.setFlag = false;
|
|
|
- if(this.view){
|
|
|
+ if (this.view) {
|
|
|
this.view.canvasView.style.cursor = `default`;
|
|
|
}
|
|
|
this.list = list.map(t => {
|
|
|
@@ -119,13 +118,10 @@ export default {
|
|
|
return undefined;
|
|
|
} else {
|
|
|
return {
|
|
|
- img: this.imageUrl,
|
|
|
- id: t.Id,
|
|
|
+ Id: t.Id,
|
|
|
X: t.X,
|
|
|
Y: t.Y * -1,
|
|
|
- width: 5000,
|
|
|
- height: 5000,
|
|
|
- name: t.Name
|
|
|
+ Name: t.Name
|
|
|
};
|
|
|
}
|
|
|
}).filter(item => item);
|
|
|
@@ -160,7 +156,7 @@ export default {
|
|
|
//实例化视图
|
|
|
initGraphy(data) {
|
|
|
this.resetSize();
|
|
|
- let items = this.mainScene.root.children;
|
|
|
+ let items = this.scene.root.children;
|
|
|
items.map((t, i) => {
|
|
|
this.drawText(t)
|
|
|
this.applyColor(t, i)
|
|
|
@@ -241,7 +237,7 @@ export default {
|
|
|
if (item instanceof SGraphyPolygonItem) {
|
|
|
if (this.setFlag) {
|
|
|
if (item.businessType == 'space') {
|
|
|
- this.mainScene.addImageList([{
|
|
|
+ this.scene.addImageList([{
|
|
|
img: this.imageUrl,
|
|
|
X: event[0].x,
|
|
|
Y: event[0].y,
|
|
|
@@ -272,6 +268,18 @@ export default {
|
|
|
updateLocationPoint(pa, res => {
|
|
|
this.$message.success('修改成功')
|
|
|
})
|
|
|
+ },
|
|
|
+ // 清除canvas
|
|
|
+ clearGraphy() {
|
|
|
+ if (this.view) {
|
|
|
+ this.view.scene = null;
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.view = new SGraphyView('canvas')
|
|
|
+ },
|
|
|
+ //
|
|
|
+ markClick() {
|
|
|
+ console.log(arguments)
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
