|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class='map-view'>
|
|
|
- <van-nav-bar title="F3平面图" @click-left='backPage'>
|
|
|
+ <van-nav-bar :title="`${floorName}平面图`" @click-left='backPage'>
|
|
|
<template #left>
|
|
|
<van-icon name="arrow-left" size="18" color="#333333" />
|
|
|
</template>
|
|
@@ -11,7 +11,7 @@
|
|
|
<div class='strip-bottom'>
|
|
|
<!-- <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun> -->
|
|
|
</div>
|
|
|
- <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
|
|
|
+ <floor-list ref="fList" class="bind-floor-list" v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor'></floor-list>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -21,7 +21,7 @@
|
|
|
*/
|
|
|
import Vue from 'vue'
|
|
|
import { mapGetters } from 'vuex'
|
|
|
-import { NavBar } from 'vant'
|
|
|
+import { NavBar, Toast } from 'vant'
|
|
|
import floorList from "@/components/floorMap/floorList.vue"
|
|
|
import canvasFun from '@/components/floorMap/canvasFun'
|
|
|
import { readGroup, queryStatis, graphQuery } from '@/api/public'
|
|
@@ -33,25 +33,25 @@ import { TipelineItem } from '@/lib/items/TipelineItem'
|
|
|
import { SImageLegendItem } from '@/lib/items/SImageLegendItem'
|
|
|
|
|
|
import { SImageItem, SImageShowType, SGraphItem } from '@saga-web/graph/lib'
|
|
|
+import { ProjectRf } from '@saga-web/feng-map'
|
|
|
import { SFloorParser, ItemOrder, ItemColor, SPolygonItem, SBoardItem } from '@saga-web/big'
|
|
|
import { SColor } from '@saga-web/draw/lib'
|
|
|
-Vue.use(NavBar)
|
|
|
+Vue.use(NavBar).use(Toast)
|
|
|
export default {
|
|
|
name: 'MapView',
|
|
|
props: {},
|
|
|
components: { floorList, canvasFun },
|
|
|
computed: {
|
|
|
- ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj']),
|
|
|
+ ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj', 'floorsArr', 'categoryId']),
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- floorsArr: [],
|
|
|
view: '',
|
|
|
scene: '',
|
|
|
mapServerURL: "http://map.wanda.cn/editor",
|
|
|
- activeFloor: null,
|
|
|
canvasLoading: false,
|
|
|
- floorid: 'f1', //楼层id
|
|
|
+ floorid: '', //楼层id
|
|
|
+ floorName: '', //楼层名
|
|
|
count: 0, // 顶楼为多张图时计数器
|
|
|
topologyParser: null, // 解析器数据
|
|
|
fParser: null, // 底图解析器
|
|
@@ -64,7 +64,6 @@ export default {
|
|
|
console.log(document.getElementById("bind-map-content").offsetHeight)
|
|
|
document.getElementById("bind-canvas").width = document.getElementById("bind-map-content").offsetWidth;
|
|
|
document.getElementById("bind-canvas").height = document.getElementById("bind-map-content").offsetHeight;
|
|
|
- this.init(this.floorid)
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
@@ -73,16 +72,21 @@ export default {
|
|
|
},
|
|
|
// 切换楼层
|
|
|
emitFloor(floorObj) {
|
|
|
- // if (floorObj) {
|
|
|
- // this.$nextTick(() => {
|
|
|
- // this.canvasLoading = true;
|
|
|
- // this.activeFloor = floorObj;
|
|
|
- // this.initGraph(floorObj.FloorId);
|
|
|
- // })
|
|
|
- // }
|
|
|
+ if (floorObj) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.floorid = floorObj.gcname;
|
|
|
+ this.floorName = floorObj.code;
|
|
|
+ this.init(floorObj.gcname);
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
init(floorid) {
|
|
|
- this.canvasLoading = true
|
|
|
+ // this.canvasLoading = true
|
|
|
+ Toast.loading({
|
|
|
+ duration: 0, // 持续展示 toast
|
|
|
+ message: '加载中...',
|
|
|
+ forbidClick: true,
|
|
|
+ });
|
|
|
// this.floorid = floorid
|
|
|
// this.$refs.canvasFun.isShow = false
|
|
|
setTimeout(() => {
|
|
@@ -105,6 +109,7 @@ export default {
|
|
|
this.readGraph()
|
|
|
} else {
|
|
|
this.canvasLoading = false
|
|
|
+ Toast.clear();
|
|
|
}
|
|
|
}, 100)
|
|
|
},
|
|
@@ -202,7 +207,7 @@ export default {
|
|
|
if (this.$refs.canvasFun) {
|
|
|
this.$refs.canvasFun.everyScale = this.view.scale
|
|
|
}
|
|
|
- this.loading = false
|
|
|
+ Toast.clear();
|
|
|
return
|
|
|
} else {
|
|
|
if (
|
|
@@ -304,9 +309,11 @@ export default {
|
|
|
this.view.fitSceneToView()
|
|
|
this.view.minScale = this.view.scale
|
|
|
this.canvasLoading = false
|
|
|
+ Toast.clear();
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.canvasLoading = false
|
|
|
+ Toast.clear();
|
|
|
})
|
|
|
},
|
|
|
// 顶楼为多张图时计数器
|
|
@@ -336,7 +343,7 @@ export default {
|
|
|
const data = {
|
|
|
BuildingID: '1',
|
|
|
FloorID: this.floorid,
|
|
|
- categoryId: this.$route.params.categoryId,
|
|
|
+ categoryId: this.categoryId,
|
|
|
projectId: this.plazaId,
|
|
|
Pub: true,
|
|
|
}
|
|
@@ -344,13 +351,27 @@ export default {
|
|
|
},
|
|
|
// 获取图最大最小值
|
|
|
getGraphDetail() {
|
|
|
- const categoryId = this.$route.params.categoryId
|
|
|
+ const categoryId = this.categoryId
|
|
|
const data = {
|
|
|
Filters: `categoryId='${categoryId}';projectId='${this.plazaId}';BuildingID='1';FloorID='${this.floorid}';isPub=true`,
|
|
|
}
|
|
|
return graphQuery(data)
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ '$route.params.floor': {
|
|
|
+ handler(floor) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.floorid = floor.FloorId;
|
|
|
+ this.floorName = floor.FloorName;
|
|
|
+ this.$refs.fList.currentFloorId = floor.FloorId;
|
|
|
+ this.init(floor.FloorId);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
@@ -361,6 +382,12 @@ export default {
|
|
|
flex-direction: column;
|
|
|
#bind-map-content {
|
|
|
flex: 1;
|
|
|
+ position: relative;
|
|
|
+ .bind-floor-list {
|
|
|
+ position: fixed;
|
|
|
+ top: 65px;
|
|
|
+ right: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|