|
@@ -5,14 +5,7 @@
|
|
|
<canvas :id="`canvas${id}`" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
|
|
|
<!-- 地图底部操作按钮 -->
|
|
|
<div class="strip-bottom">
|
|
|
- <canvasFun
|
|
|
- @fit="fit"
|
|
|
- @savePng="savePng"
|
|
|
- @saveSvg="saveSvg"
|
|
|
- @saveJson="saveJson"
|
|
|
- @scale="scale"
|
|
|
- ref="canvasFun"
|
|
|
- ></canvasFun>
|
|
|
+ <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" @scale="scale" ref="canvasFun"></canvasFun>
|
|
|
</div>
|
|
|
<room-box ref="boxRoom"></room-box>
|
|
|
</div>
|
|
@@ -28,6 +21,8 @@ import { readGroup } from "@/api/public";
|
|
|
import { STopologyParser } from "@/lib/parsers/STopologyParser";
|
|
|
import { mapGetters, mapActions } from "vuex";
|
|
|
import { SImageItem } from "@saga-web/graph/lib";
|
|
|
+import bus from "@/utils/bus.js"
|
|
|
+
|
|
|
// import { uuid } from "@/components/mapClass/until";
|
|
|
|
|
|
export default {
|
|
@@ -42,7 +37,8 @@ export default {
|
|
|
view: null,
|
|
|
urlMsg: {},
|
|
|
canvasID: "canvas",
|
|
|
- floorid: "" //楼层id
|
|
|
+ floorid: "", //楼层id
|
|
|
+ topologyParser: null, // 解析器数据
|
|
|
};
|
|
|
},
|
|
|
props: {
|
|
@@ -76,7 +72,7 @@ export default {
|
|
|
}
|
|
|
this.parserData(floorid);
|
|
|
}
|
|
|
- },100);
|
|
|
+ }, 100);
|
|
|
},
|
|
|
parserData(floor) {
|
|
|
if (floor == "g80") {
|
|
@@ -133,31 +129,31 @@ export default {
|
|
|
//console.log(data.data.Data[0].ID)
|
|
|
this.$cookie.set("graphId", data.Data[0].ID, 3);
|
|
|
}
|
|
|
- const parserData = new STopologyParser(null);
|
|
|
- parserData.parseData(data.Data[0].Elements);
|
|
|
+ this.topologyParser = new STopologyParser(null);
|
|
|
+ this.topologyParser.parseData(data.Data[0].Elements);
|
|
|
// 多边形
|
|
|
- parserData.zoneLegendList.forEach(t => {
|
|
|
+ this.topologyParser.zoneLegendList.forEach(t => {
|
|
|
this.scene.addItem(t);
|
|
|
});
|
|
|
// 增加文字
|
|
|
- parserData.textMarkerList.forEach(t => {
|
|
|
+ this.topologyParser.textMarkerList.forEach(t => {
|
|
|
this.scene.addItem(t);
|
|
|
});
|
|
|
// 增加图片
|
|
|
- parserData.imageMarkerList.forEach(t => {
|
|
|
+ this.topologyParser.imageMarkerList.forEach(t => {
|
|
|
this.scene.addItem(t);
|
|
|
});
|
|
|
// 增加直线
|
|
|
- parserData.lineMarkerList.forEach(t => {
|
|
|
+ this.topologyParser.lineMarkerList.forEach(t => {
|
|
|
this.scene.addItem(t);
|
|
|
});
|
|
|
// 增加图标类图例
|
|
|
- parserData.imageLegendList.forEach(t => {
|
|
|
+ this.topologyParser.imageLegendList.forEach(t => {
|
|
|
this.scene.addItem(t);
|
|
|
});
|
|
|
// 增加管线类
|
|
|
// 增加图标类图例
|
|
|
- parserData.relationList.forEach(t => {
|
|
|
+ this.topologyParser.relationList.forEach(t => {
|
|
|
this.scene.addItem(t);
|
|
|
});
|
|
|
this.view.fitSceneToView();
|
|
@@ -225,6 +221,34 @@ export default {
|
|
|
this.canvasWidth = this.$refs.graphy.offsetWidth;
|
|
|
this.canvasHeight = 900;
|
|
|
}
|
|
|
+ },
|
|
|
+ getEvent() {
|
|
|
+ bus.$on('changeShow', res => {
|
|
|
+ this.topologyParser.zoneLegendList.forEach(t => {
|
|
|
+ let id = t.data.GraphElementId
|
|
|
+ t.maskFlag = !(res.indexOf(id) > -1)
|
|
|
+ })
|
|
|
+ this.topologyParser.textMarkerList.forEach(t => {
|
|
|
+ let id = t.data.GraphElementId
|
|
|
+ t.maskFlag = !(res.indexOf(id) > -1)
|
|
|
+ });
|
|
|
+ this.topologyParser.imageMarkerList.forEach(t => {
|
|
|
+ let id = t.data.GraphElementId
|
|
|
+ t.maskFlag = !(res.indexOf(id) > -1)
|
|
|
+ });
|
|
|
+ this.topologyParser.lineMarkerList.forEach(t => {
|
|
|
+ let id = t.data.GraphElementId
|
|
|
+ t.maskFlag = !(res.indexOf(id) > -1)
|
|
|
+ });
|
|
|
+ this.topologyParser.imageLegendList.forEach(t => {
|
|
|
+ let id = t.data.GraphElementId
|
|
|
+ t.maskFlag = !(res.indexOf(id) > -1)
|
|
|
+ });
|
|
|
+ this.topologyParser.relationList.forEach(t => {
|
|
|
+ let id = t.data.GraphElementId
|
|
|
+ t.maskFlag = !(res.indexOf(id) > -1)
|
|
|
+ });
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -244,6 +268,7 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
this.mapSize();
|
|
|
+ this.getEvent()
|
|
|
},
|
|
|
created() {
|
|
|
this.urlMsg = {
|