|
@@ -2,7 +2,7 @@
|
|
<div :id="`drawFloor${id}`" class="drawFloor" v-loading="canvasLoading">
|
|
<div :id="`drawFloor${id}`" class="drawFloor" v-loading="canvasLoading">
|
|
<canvas :id="`floorCanvas${id}`" :width="cadWidth" :height="cadHeight" ref="canvas" tabindex="0"></canvas>
|
|
<canvas :id="`floorCanvas${id}`" :width="cadWidth" :height="cadHeight" ref="canvas" tabindex="0"></canvas>
|
|
<div class="operate" v-if="showTools">
|
|
<div class="operate" v-if="showTools">
|
|
- <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo" @redo="redo" @scale="scale"
|
|
|
|
|
|
+ <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @scale="scale"
|
|
@changeAbsorb="changeAbsorb" :config="config" ref="canvasFun" @saveJson="saveJson"></canvasFun>
|
|
@changeAbsorb="changeAbsorb" :config="config" ref="canvasFun" @saveJson="saveJson"></canvasFun>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -12,8 +12,10 @@
|
|
import { DivideFloorScene, FloorView, Opt } from "@saga-web/cad-engine/lib"
|
|
import { DivideFloorScene, FloorView, Opt } from "@saga-web/cad-engine/lib"
|
|
import { SColor, SPoint } from "@saga-web/draw/lib";
|
|
import { SColor, SPoint } from "@saga-web/draw/lib";
|
|
import canvasFun from "@/components/business_space/newGraphy/canvasFun"
|
|
import canvasFun from "@/components/business_space/newGraphy/canvasFun"
|
|
-import { floorQueryOutline } from "@/api/scan/request";
|
|
|
|
|
|
+import { floorQueryOutline, floorQueryAndSign } from "@/api/scan/request";
|
|
|
|
+import { EditLineItem } from "@saga-web/cad-engine"
|
|
import { mapGetters } from "vuex";
|
|
import { mapGetters } from "vuex";
|
|
|
|
+import { floorQuery } from "@/api/object/floor.js"
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
canvasFun
|
|
canvasFun
|
|
@@ -26,7 +28,6 @@ export default {
|
|
cadWidth: 800,
|
|
cadWidth: 800,
|
|
cadHeight: 600,
|
|
cadHeight: 600,
|
|
canvasLoading: false,
|
|
canvasLoading: false,
|
|
- modelId: '',
|
|
|
|
FloorID: '',
|
|
FloorID: '',
|
|
Outline: [],
|
|
Outline: [],
|
|
floorData: {},
|
|
floorData: {},
|
|
@@ -84,8 +85,9 @@ export default {
|
|
initGraphy(Id, type) {
|
|
initGraphy(Id, type) {
|
|
// type=1 => id:模型id
|
|
// type=1 => id:模型id
|
|
// type=2 => id:floormap
|
|
// type=2 => id:floormap
|
|
|
|
+ // type=3 => id:图片的key
|
|
let that = this;
|
|
let that = this;
|
|
- that.modelId = Id;
|
|
|
|
|
|
+ that.type = type;
|
|
that.clearGraphy()
|
|
that.clearGraphy()
|
|
that.drawMainScene = new DivideFloorScene();
|
|
that.drawMainScene = new DivideFloorScene();
|
|
that.canvasLoading = true;
|
|
that.canvasLoading = true;
|
|
@@ -99,11 +101,9 @@ export default {
|
|
})
|
|
})
|
|
}else if(type==3){
|
|
}else if(type==3){
|
|
that.drawMainScene.loadImg(`/image-service/common/image_get?systemId=dataPlatform&key=${Id}`, res=>{
|
|
that.drawMainScene.loadImg(`/image-service/common/image_get?systemId=dataPlatform&key=${Id}`, res=>{
|
|
- // fdfd
|
|
|
|
that.getGraphtSuc(res)
|
|
that.getGraphtSuc(res)
|
|
- })
|
|
|
|
|
|
+ })
|
|
}
|
|
}
|
|
-
|
|
|
|
},
|
|
},
|
|
// 获取底图成功
|
|
// 获取底图成功
|
|
getGraphtSuc(res) {
|
|
getGraphtSuc(res) {
|
|
@@ -122,6 +122,18 @@ export default {
|
|
this.view.fitSceneToView();
|
|
this.view.fitSceneToView();
|
|
this.drawMainScene.isSpaceSelectable = false;
|
|
this.drawMainScene.isSpaceSelectable = false;
|
|
|
|
|
|
|
|
+ if (this.type == 3) {
|
|
|
|
+ this.addScaleItem(this.floorData.properties)
|
|
|
|
+ this.$emit('getGraphSuc');
|
|
|
|
+ if (this.floorData.properties) {
|
|
|
|
+ const x = this.floorData.properties.X;
|
|
|
|
+ const y = this.floorData.properties.Y;
|
|
|
|
+ if (x != 0 || y != 0) {
|
|
|
|
+ this.drawMainScene.imgList[0].moveTo(x, y);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
if (this.$refs.canvasFun) {
|
|
if (this.$refs.canvasFun) {
|
|
this.view.minScale = this.view.scale;
|
|
this.view.minScale = this.view.scale;
|
|
this.$refs.canvasFun.everyScale = this.view.scale;
|
|
this.$refs.canvasFun.everyScale = this.view.scale;
|
|
@@ -136,38 +148,65 @@ export default {
|
|
// 获取楼层数据
|
|
// 获取楼层数据
|
|
getFloorData() {
|
|
getFloorData() {
|
|
let pa = {
|
|
let pa = {
|
|
- filters: `id='${this.FloorID}'`
|
|
|
|
|
|
+ filters: `id='${this.FloorID}'`,
|
|
|
|
+ cascader: [{ name: 'floorOutline' }]
|
|
|
|
+ }
|
|
|
|
+ // 先用 floorQuery 级联 floorOutline 以后与 floorQueryOutline 一块使用
|
|
|
|
+ console.log(this.urlModelId);
|
|
|
|
+ const temp = this.urlModelId && this.urlModelId.split('.')[1].toLowerCase()
|
|
|
|
+ if (temp == 'png' || temp == 'jpg') { //底图为图片且已经绑定过图片
|
|
|
|
+ floorQueryAndSign(pa, res => {
|
|
|
|
+ this.floorData = res.content[0];
|
|
|
|
+ if (this.floorData.infos && this.floorData.infos.floorMap) {
|
|
|
|
+ let floorMap = this.floorData.infos.floorMap
|
|
|
|
+ this.initGraphy(floorMap, 3)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ // floorQueryOutline
|
|
|
|
+ floorQuery(pa, res => {
|
|
|
|
+ this.floorData = res.content[0];
|
|
|
|
+ if (this.floorData.infos && this.floorData.infos.FloorMap) {
|
|
|
|
+ this.getOtherFloorOutLine();
|
|
|
|
+ let floorMap = this.floorData.infos.FloorMap
|
|
|
|
+ this.initGraphy(floorMap, 2)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
}
|
|
}
|
|
- floorQueryOutline(pa, res => {
|
|
|
|
- this.floorData = res.Content[0];
|
|
|
|
- this.getOtherFloorOutLine();
|
|
|
|
- let floorMap = this.floorData.StructureInfo.FloorMap
|
|
|
|
- if(floorMap.split('.')[1].toString() == 'png' || floorMap.split('.')[1].toString() == 'jpg'){
|
|
|
|
- this.initGraphy(floorMap, 3)
|
|
|
|
- }else{
|
|
|
|
- this.initGraphy(floorMap, 2)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
},
|
|
},
|
|
// 获取绑定该模型id的其他楼层轮廓线
|
|
// 获取绑定该模型id的其他楼层轮廓线
|
|
getOtherFloorOutLine() {
|
|
getOtherFloorOutLine() {
|
|
- let modelid = this.floorData.ModelId;
|
|
|
|
- let pa = {
|
|
|
|
- Filters: `ModelId='${modelid}'`
|
|
|
|
- }
|
|
|
|
- this.shadeList = [];
|
|
|
|
- floorQueryOutline(pa, res => {
|
|
|
|
- res.Content.map(t => {
|
|
|
|
- if (t.FloorID != this.FloorID && t.Outline && t.Outline.length) {
|
|
|
|
- let line = t.Outline.map(item => {
|
|
|
|
- return new SPoint(item.X, item.Y);
|
|
|
|
- })
|
|
|
|
- this.shadeList.push(line);
|
|
|
|
- }
|
|
|
|
|
|
+ let modelid = this.floorData.modelId;
|
|
|
|
+ if (modelid) {
|
|
|
|
+ let pa = {
|
|
|
|
+ filters: `modelId='${modelid}'`
|
|
|
|
+ }
|
|
|
|
+ this.shadeList = [];
|
|
|
|
+ floorQueryOutline(pa, res => {
|
|
|
|
+ res.content.map(t => {
|
|
|
|
+ if (t.id != this.FloorID && t.outline && t.outline.length) {
|
|
|
|
+ let line = t.outline.map(item => {
|
|
|
|
+ return new SPoint(item.X, item.Y);
|
|
|
|
+ })
|
|
|
|
+ this.shadeList.push(line);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.drawMainScene.addAllShade(this.shadeList);
|
|
|
|
+ this.$emit('changeSign', res.content.length > 1);
|
|
});
|
|
});
|
|
- this.drawMainScene.addAllShade(this.shadeList);
|
|
|
|
- this.$emit('changeSign', res.Content.length > 1);
|
|
|
|
- });
|
|
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 添加比例尺item 当楼层图为图片类型时 回显比例尺
|
|
|
|
+ addScaleItem(data) {
|
|
|
|
+ this.scaleItem = new EditLineItem(null)
|
|
|
|
+ this.scaleItem.strokeColor = SColor.Red;
|
|
|
|
+ this.drawMainScene.addItem(this.scaleItem)
|
|
|
|
+ if (data && data.Line && data.Line.length == 2) {
|
|
|
|
+ this.scaleItem.line = data.Line;
|
|
|
|
+ this.scaleItem.text = data.Text;
|
|
|
|
+ // todo
|
|
|
|
+ this.scaleItem.pointChange();
|
|
|
|
+ }
|
|
},
|
|
},
|
|
// 清空平面图
|
|
// 清空平面图
|
|
clearGraphy() {
|
|
clearGraphy() {
|
|
@@ -211,12 +250,6 @@ export default {
|
|
changeAbsorb(isAbsorbing) {
|
|
changeAbsorb(isAbsorbing) {
|
|
this.drawMainScene.isAbsorbing = isAbsorbing;
|
|
this.drawMainScene.isAbsorbing = isAbsorbing;
|
|
},
|
|
},
|
|
- // 撤销
|
|
|
|
- undo() {
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- // 反撤销
|
|
|
|
- redo() { },
|
|
|
|
// 缩放
|
|
// 缩放
|
|
scale(val) {
|
|
scale(val) {
|
|
if (!this.view) {
|
|
if (!this.view) {
|