|
@@ -1,11 +1,11 @@
|
|
|
+
|
|
|
<!-- 底图 -->
|
|
|
<template>
|
|
|
<div id='floor_base' v-loading='loading' ref='graphy'>
|
|
|
- <div :id='`fengMap${id}`' class='fengMap'></div>
|
|
|
<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' @showText='showText' ref='canvasFun'></canvasFun>
|
|
|
</div>
|
|
|
<room-box ref='boxRoom'></room-box>
|
|
|
</div>
|
|
@@ -21,8 +21,9 @@ 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";
|
|
|
-let fengmap = null
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
@@ -35,8 +36,9 @@ export default {
|
|
|
loading: false, // 限制重复查询
|
|
|
view: null,
|
|
|
urlMsg: {},
|
|
|
- canvasID: 'canvas'
|
|
|
- // fmapID:'1001012_42',
|
|
|
+ canvasID: 'canvas',
|
|
|
+ floorid: '', //楼层id
|
|
|
+ topologyParser: null // 解析器数据
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
@@ -44,101 +46,53 @@ export default {
|
|
|
default: '1',
|
|
|
type: String
|
|
|
},
|
|
|
+ categoryId: {
|
|
|
+ default: '',
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+
|
|
|
loadName: null,
|
|
|
type: null
|
|
|
},
|
|
|
components: { RoomBox, canvasFun },
|
|
|
computed: {
|
|
|
- ...mapGetters(['plazaId', 'fmapID'])
|
|
|
+ ...mapGetters(['plazaId', 'fmapID', 'haveFengMap'])
|
|
|
},
|
|
|
methods: {
|
|
|
...mapActions(['getfmapID']),
|
|
|
init(floorid) {
|
|
|
- if (this.loading) {
|
|
|
- //console.log('正在查询...')
|
|
|
- return
|
|
|
- }
|
|
|
this.loading = true
|
|
|
- if (!this.fmapID) {
|
|
|
- this.getfmapID().then(() => {
|
|
|
- this.urlMsg.fmapID = this.fmapID
|
|
|
- this.getMap(floorid)
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- this.getMap(floorid)
|
|
|
- },
|
|
|
- getMap(floorid) {
|
|
|
- this.clearGraphy()
|
|
|
- this.scene = new FloorScene()
|
|
|
- this.scene.selectContainer.connect('listChange', this, this.listChange)
|
|
|
- if (!fengmap || this.canvasID != `canvas${this.id}`) {
|
|
|
- this.canvasID = `canvas${this.id}`
|
|
|
- fengmap = new SFengParser(`fengMap${this.id}`, `${this.mapServerURL}/fmap/${this.fmapID}`, this.key, this.appName, null)
|
|
|
- fengmap.loadMap(this.fmapID, () => {
|
|
|
+ this.floorid = floorid
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.haveFengMap) {
|
|
|
+ this.clearGraphy()
|
|
|
+ this.scene = new FloorScene()
|
|
|
+ this.scene.selectContainer.connect('listChange', this, this.listChange)
|
|
|
+ if (this.canvasID != `canvas${this.id}`) {
|
|
|
+ this.canvasID = `canvas${this.id}`
|
|
|
+ }
|
|
|
this.parserData(floorid)
|
|
|
- this.readGroup(floorid).then(data => {
|
|
|
- if (data.Data.length > 0) {
|
|
|
- //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)
|
|
|
- // 多边形
|
|
|
- parserData.zoneLegendList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
- })
|
|
|
- // 增加文字
|
|
|
- parserData.textMarkerList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
- })
|
|
|
- // 增加图片
|
|
|
- parserData.imageMarkerList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
- })
|
|
|
- // 增加直线
|
|
|
- parserData.lineMarkerList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
- })
|
|
|
- // 增加图标类图例
|
|
|
- parserData.imageLegendList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
- })
|
|
|
- // 增加管线类
|
|
|
- // 增加图标类图例
|
|
|
- parserData.relationList.forEach(t => {
|
|
|
- this.scene.addItem(t)
|
|
|
- })
|
|
|
- this.view.fitSceneToView()
|
|
|
- })
|
|
|
- })
|
|
|
- // 获取主题数据
|
|
|
- fengmap.loadTheme(`${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`).then(res => {
|
|
|
- //console.log('获取rf成功', res)
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.parserData(floorid)
|
|
|
- }
|
|
|
+ }
|
|
|
+ }, 100)
|
|
|
},
|
|
|
parserData(floor) {
|
|
|
if (floor == 'g80') {
|
|
|
// 屋顶
|
|
|
- if (fengmap.frImg) {
|
|
|
- let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`)
|
|
|
+ if (window.fengmapData.frImg) {
|
|
|
+ let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`)
|
|
|
this.scene.addItem(imgItem)
|
|
|
this.view.scene = this.scene
|
|
|
- this.view.fitSceneToView()
|
|
|
this.view.minScale = this.view.scale
|
|
|
if (this.$refs.canvasFun) {
|
|
|
this.$refs.canvasFun.everyScale = this.view.scale
|
|
|
}
|
|
|
- this.loading = false
|
|
|
+ this.view.fitSceneToView()
|
|
|
}
|
|
|
} else {
|
|
|
- if (fengmap.gnameToGid[floor]) {
|
|
|
- fengmap.parseData(fengmap.gnameToGid[floor], res => {
|
|
|
+ if (window.fengmapData.gnameToGid[floor]) {
|
|
|
+ window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], res => {
|
|
|
if (res.err) {
|
|
|
- //console.log(res.err)
|
|
|
+ console.log('errr', res.err)
|
|
|
return
|
|
|
}
|
|
|
const fParser = new SFloorParser(null)
|
|
@@ -153,18 +107,62 @@ export default {
|
|
|
fParser.columnList.forEach(t => this.scene.addItem(t))
|
|
|
fParser.casementList.forEach(t => this.scene.addItem(t))
|
|
|
this.view.scene = this.scene
|
|
|
- this.view.fitSceneToView()
|
|
|
this.view.minScale = this.view.scale
|
|
|
if (this.$refs.canvasFun) {
|
|
|
this.$refs.canvasFun.everyScale = this.view.scale
|
|
|
}
|
|
|
- this.loading = false
|
|
|
+ this.view.fitSceneToView()
|
|
|
//console.log('success')
|
|
|
})
|
|
|
} else {
|
|
|
- //console.log('楼层不正确')
|
|
|
+ console.log('楼层不正确')
|
|
|
}
|
|
|
}
|
|
|
+ this.readGroup(this.floorid).then(data => {
|
|
|
+ this.loading = false
|
|
|
+ if (data.Result == 'failure') {
|
|
|
+ this.$message({
|
|
|
+ message: data.Message,
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ this.$store.commit('SETISMESSAGE', false)
|
|
|
+ // 一会回来存这个
|
|
|
+ } else {
|
|
|
+ this.$store.commit('SETISMESSAGE', true)
|
|
|
+ }
|
|
|
+ if (data.Data.length > 0) {
|
|
|
+ //console.log(data.data.Data[0].ID)
|
|
|
+ this.$cookie.set('graphId', data.Data[0].ID, 3)
|
|
|
+ }
|
|
|
+ this.topologyParser = new STopologyParser(null)
|
|
|
+ this.topologyParser.parseData(data.Data[0].Elements)
|
|
|
+ // 多边形
|
|
|
+ this.topologyParser.zoneLegendList.forEach(t => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ })
|
|
|
+ // 增加文字
|
|
|
+ this.topologyParser.textMarkerList.forEach(t => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ })
|
|
|
+ // 增加图片
|
|
|
+ this.topologyParser.imageMarkerList.forEach(t => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ })
|
|
|
+ // 增加直线
|
|
|
+ this.topologyParser.lineMarkerList.forEach(t => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ })
|
|
|
+ // 增加图标类图例
|
|
|
+ this.topologyParser.imageLegendList.forEach(t => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ })
|
|
|
+ // 增加管线类
|
|
|
+ // 增加图标类图例
|
|
|
+ this.topologyParser.relationList.forEach(t => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ })
|
|
|
+ this.view.fitSceneToView()
|
|
|
+ })
|
|
|
},
|
|
|
clearGraphy() {
|
|
|
if (this.view) {
|
|
@@ -202,15 +200,19 @@ export default {
|
|
|
return
|
|
|
}
|
|
|
let scale = this.view.scale
|
|
|
- console.log(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
|
|
|
this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
|
|
|
},
|
|
|
+ showText(val) {
|
|
|
+ this.topologyParser.zoneLegendList.forEach(t => {
|
|
|
+ t.showText = val
|
|
|
+ })
|
|
|
+ },
|
|
|
// 读取数据
|
|
|
readGroup(FloorID) {
|
|
|
const data = {
|
|
|
BuildingID: '1',
|
|
|
FloorID: FloorID,
|
|
|
- categoryId: this.$cookie.get('categoryId'),
|
|
|
+ categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
|
|
|
projectId: this.urlMsg.ProjectID
|
|
|
}
|
|
|
return readGroup(data)
|
|
@@ -224,6 +226,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: {
|
|
@@ -234,10 +264,16 @@ export default {
|
|
|
this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
|
|
|
}
|
|
|
}
|
|
|
+ },
|
|
|
+ haveFengMap(val) {
|
|
|
+ if (val) {
|
|
|
+ this.init(this.floorid)
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.mapSize()
|
|
|
+ this.getEvent()
|
|
|
},
|
|
|
created() {
|
|
|
this.urlMsg = {
|
|
@@ -266,4 +302,4 @@ export default {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|