|
@@ -1,8 +1,8 @@
|
|
<!-- 底图 -->
|
|
<!-- 底图 -->
|
|
<template>
|
|
<template>
|
|
<div id='floor_base' v-loading='loading' ref='graphy'>
|
|
<div id='floor_base' v-loading='loading' ref='graphy'>
|
|
- <div id='fengMap'></div>
|
|
|
|
- <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
|
|
|
|
|
|
+ <div :id='`fengMap${id}`' class='fengMap'></div>
|
|
|
|
+ <canvas :id='`canvas${id}`' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
|
|
<!-- 地图底部操作按钮 -->
|
|
<!-- 地图底部操作按钮 -->
|
|
<div class='strip-bottom'>
|
|
<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>
|
|
@@ -32,13 +32,20 @@ export default {
|
|
mapServerURL: `/wdfn`,
|
|
mapServerURL: `/wdfn`,
|
|
canvasWidth: 1100,
|
|
canvasWidth: 1100,
|
|
canvasHeight: 800,
|
|
canvasHeight: 800,
|
|
- loading: false,
|
|
|
|
|
|
+ loading: false, // 限制重复查询
|
|
view: null,
|
|
view: null,
|
|
- isQuerying: false, // 限制重复查询
|
|
|
|
- urlMsg: {}
|
|
|
|
- // fmapID:'1001012_42'
|
|
|
|
|
|
+ urlMsg: {},
|
|
|
|
+ canvasID: 'canvas'
|
|
|
|
+ // fmapID:'1001012_42',
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ props: {
|
|
|
|
+ id: {
|
|
|
|
+ default: '1',
|
|
|
|
+ type: String
|
|
|
|
+ },
|
|
|
|
+ loadName:
|
|
|
|
+ },
|
|
components: { RoomBox, canvasFun },
|
|
components: { RoomBox, canvasFun },
|
|
computed: {
|
|
computed: {
|
|
...mapGetters(['plazaId', 'fmapID'])
|
|
...mapGetters(['plazaId', 'fmapID'])
|
|
@@ -46,6 +53,11 @@ export default {
|
|
methods: {
|
|
methods: {
|
|
...mapActions(['getfmapID']),
|
|
...mapActions(['getfmapID']),
|
|
init(floorid) {
|
|
init(floorid) {
|
|
|
|
+ if (this.loading) {
|
|
|
|
+ console.log('正在查询...')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.loading = true
|
|
if (!this.fmapID) {
|
|
if (!this.fmapID) {
|
|
this.getfmapID().then(() => {
|
|
this.getfmapID().then(() => {
|
|
this.urlMsg.fmapID = this.fmapID
|
|
this.urlMsg.fmapID = this.fmapID
|
|
@@ -56,19 +68,13 @@ export default {
|
|
this.getMap(floorid)
|
|
this.getMap(floorid)
|
|
},
|
|
},
|
|
getMap(floorid) {
|
|
getMap(floorid) {
|
|
- if (this.isQuerying) {
|
|
|
|
- console.log('正在查询...')
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- this.isQuerying = true
|
|
|
|
this.clearGraphy()
|
|
this.clearGraphy()
|
|
this.scene = new FloorScene()
|
|
this.scene = new FloorScene()
|
|
this.scene.selectContainer.connect('listChange', this, this.listChange)
|
|
this.scene.selectContainer.connect('listChange', this, this.listChange)
|
|
- if (!fengmap) {
|
|
|
|
-
|
|
|
|
- fengmap = new SFengParser('fengMap', `${this.mapServerURL}/fmap/${this.fmapID}`, this.key, this.appName, null)
|
|
|
|
- fengmap.loadMap(this.fmapID, res => {
|
|
|
|
- this.floorList = res
|
|
|
|
|
|
+ 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.parserData(floorid)
|
|
this.parserData(floorid)
|
|
})
|
|
})
|
|
// 获取主题数据
|
|
// 获取主题数据
|
|
@@ -76,38 +82,36 @@ export default {
|
|
console.log('获取rf成功', res)
|
|
console.log('获取rf成功', res)
|
|
})
|
|
})
|
|
this.readGroup().then(data => {
|
|
this.readGroup().then(data => {
|
|
|
|
+ if (data.data.Data.length > 0) {
|
|
|
|
+ console.log(data.data.Data[0].ID)
|
|
|
|
+ this.$cookie.set('graphId', data.data.Data[0].ID, 3)
|
|
|
|
+ }
|
|
const parserData = new STopologyParser(null)
|
|
const parserData = new STopologyParser(null)
|
|
parserData.parseData(data.data.Data[0].Elements)
|
|
parserData.parseData(data.data.Data[0].Elements)
|
|
// 多边形
|
|
// 多边形
|
|
parserData.zoneLegendList.forEach(t => {
|
|
parserData.zoneLegendList.forEach(t => {
|
|
this.scene.addItem(t)
|
|
this.scene.addItem(t)
|
|
- this.scene.Nodes.push(t)
|
|
|
|
})
|
|
})
|
|
// 增加文字
|
|
// 增加文字
|
|
parserData.textMarkerList.forEach(t => {
|
|
parserData.textMarkerList.forEach(t => {
|
|
this.scene.addItem(t)
|
|
this.scene.addItem(t)
|
|
- this.scene.Markers.push(t)
|
|
|
|
})
|
|
})
|
|
// 增加图片
|
|
// 增加图片
|
|
parserData.imageMarkerList.forEach(t => {
|
|
parserData.imageMarkerList.forEach(t => {
|
|
this.scene.addItem(t)
|
|
this.scene.addItem(t)
|
|
- this.scene.Markers.push(t)
|
|
|
|
})
|
|
})
|
|
// 增加直线
|
|
// 增加直线
|
|
parserData.lineMarkerList.forEach(t => {
|
|
parserData.lineMarkerList.forEach(t => {
|
|
this.scene.addItem(t)
|
|
this.scene.addItem(t)
|
|
- this.scene.Markers.push(t)
|
|
|
|
})
|
|
})
|
|
// 增加图标类图例
|
|
// 增加图标类图例
|
|
parserData.imageLegendList.forEach(t => {
|
|
parserData.imageLegendList.forEach(t => {
|
|
this.scene.addItem(t)
|
|
this.scene.addItem(t)
|
|
- this.scene.Nodes.push(t)
|
|
|
|
})
|
|
})
|
|
// 增加管线类
|
|
// 增加管线类
|
|
// 增加图标类图例
|
|
// 增加图标类图例
|
|
parserData.relationList.forEach(t => {
|
|
parserData.relationList.forEach(t => {
|
|
this.scene.addItem(t)
|
|
this.scene.addItem(t)
|
|
- this.scene.Relations.push(t)
|
|
|
|
})
|
|
})
|
|
this.view.fitSceneToView()
|
|
this.view.fitSceneToView()
|
|
})
|
|
})
|
|
@@ -124,11 +128,10 @@ export default {
|
|
this.view.scene = this.scene
|
|
this.view.scene = this.scene
|
|
this.view.fitSceneToView()
|
|
this.view.fitSceneToView()
|
|
this.loading = false
|
|
this.loading = false
|
|
- this.isQuerying = false
|
|
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
- if (this.floorList[floor]) {
|
|
|
|
- fengmap.parseData(this.floorList[floor], res => {
|
|
|
|
|
|
+ if (fengmap.gnameToGid[floor]) {
|
|
|
|
+ fengmap.parseData(fengmap.gnameToGid[floor], res => {
|
|
if (res.err) {
|
|
if (res.err) {
|
|
console.log(res.err)
|
|
console.log(res.err)
|
|
return
|
|
return
|
|
@@ -147,7 +150,6 @@ export default {
|
|
this.view.scene = this.scene
|
|
this.view.scene = this.scene
|
|
this.view.fitSceneToView()
|
|
this.view.fitSceneToView()
|
|
this.loading = false
|
|
this.loading = false
|
|
- this.isQuerying = false
|
|
|
|
console.log('success')
|
|
console.log('success')
|
|
})
|
|
})
|
|
} else {
|
|
} else {
|
|
@@ -160,7 +162,7 @@ export default {
|
|
this.view.scene = null
|
|
this.view.scene = null
|
|
return
|
|
return
|
|
}
|
|
}
|
|
- this.view = new FloorView('canvas')
|
|
|
|
|
|
+ this.view = new FloorView(`canvas${this.id}`)
|
|
},
|
|
},
|
|
listChange(item, ev) {
|
|
listChange(item, ev) {
|
|
let name = ev[0][0].data.Name
|
|
let name = ev[0][0].data.Name
|
|
@@ -174,15 +176,16 @@ export default {
|
|
},
|
|
},
|
|
// 保存为png
|
|
// 保存为png
|
|
savePng() {
|
|
savePng() {
|
|
- this.view.saveImage(`1.png`, 'png')
|
|
|
|
|
|
+ this.view.saveImage(`${this.loadName}.png`, 'png')
|
|
|
|
+ console.log(`${this.loadName}.png`)
|
|
},
|
|
},
|
|
// 保存为svg
|
|
// 保存为svg
|
|
saveSvg() {
|
|
saveSvg() {
|
|
- this.view.saveSceneSvg(`1.svg`, 6400, 4800)
|
|
|
|
|
|
+ this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
|
|
},
|
|
},
|
|
// 保存为json
|
|
// 保存为json
|
|
saveJson() {
|
|
saveJson() {
|
|
- this.view.saveFloorJson(`1.json`)
|
|
|
|
|
|
+ this.view.saveFloorJson(`${this.loadName}.json`)
|
|
},
|
|
},
|
|
// 缩放
|
|
// 缩放
|
|
scale(val) {
|
|
scale(val) {
|
|
@@ -195,7 +198,8 @@ export default {
|
|
// 读取数据
|
|
// 读取数据
|
|
readGroup() {
|
|
readGroup() {
|
|
const data = {
|
|
const data = {
|
|
- categoryId: this.urlMsg.categoryId,
|
|
|
|
|
|
+ // categoryId: this.urlMsg.categoryId,
|
|
|
|
+ categoryId: this.$cookie.get('categoryId'),
|
|
projectId: this.urlMsg.ProjectID
|
|
projectId: this.urlMsg.ProjectID
|
|
}
|
|
}
|
|
return readGroup(data)
|
|
return readGroup(data)
|
|
@@ -203,17 +207,23 @@ export default {
|
|
},
|
|
},
|
|
watch: {},
|
|
watch: {},
|
|
mounted() {
|
|
mounted() {
|
|
|
|
+ console.log(window.screen.height)
|
|
if (window.screen.height == '768') {
|
|
if (window.screen.height == '768') {
|
|
this.canvasWidth = this.$refs.graphy.offsetWidth
|
|
this.canvasWidth = this.$refs.graphy.offsetWidth
|
|
this.canvasHeight = this.$refs.graphy.offsetHeight - 100
|
|
this.canvasHeight = this.$refs.graphy.offsetHeight - 100
|
|
|
|
+ console.log(this.canvasWidth)
|
|
|
|
+ console.log(this.canvasHeight)
|
|
} else {
|
|
} else {
|
|
this.canvasWidth = this.$refs.graphy.offsetWidth
|
|
this.canvasWidth = this.$refs.graphy.offsetWidth
|
|
- this.canvasHeight = this.$refs.graphy.offsetHeight
|
|
|
|
|
|
+ this.canvasHeight = 900 + 'px'
|
|
|
|
+ console.log(this.canvasWidth)
|
|
|
|
+ console.log(this.canvasHeight)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
this.urlMsg = {
|
|
this.urlMsg = {
|
|
- categoryId: this.$cookie.get('categoryId') || 'LCGN',
|
|
|
|
|
|
+ // categoryId: this.$cookie.get('categoryId') || 'LCGN',
|
|
|
|
+ categoryId: this.$cookie.get('categoryId'),
|
|
ProjectID: this.plazaId,
|
|
ProjectID: this.plazaId,
|
|
BuildingID: '1',
|
|
BuildingID: '1',
|
|
FloorID: this.$cookie.get('floorMapId') || 'f1',
|
|
FloorID: this.$cookie.get('floorMapId') || 'f1',
|
|
@@ -226,7 +236,7 @@ export default {
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
#floor_base {
|
|
#floor_base {
|
|
position: relative;
|
|
position: relative;
|
|
- #fengMap {
|
|
|
|
|
|
+ .fengMap {
|
|
position: fixed;
|
|
position: fixed;
|
|
width: 100px;
|
|
width: 100px;
|
|
height: 100px;
|
|
height: 100px;
|