|
@@ -1,28 +1,30 @@
|
|
|
<template>
|
|
|
- <div class='map-view'>
|
|
|
- <van-nav-bar title="F3平面图" @click-left='backPage'>
|
|
|
- <template #left>
|
|
|
- <van-icon name="arrow-left" size="18" color="#333333" />
|
|
|
- </template>
|
|
|
- </van-nav-bar>
|
|
|
- <div id="bind-map-content" v-loading="canvasLoading">
|
|
|
- <canvas id="bind-canvas" ref="bind-canvas" tabindex="0"></canvas>
|
|
|
- <!-- 地图底部操作按钮 -->
|
|
|
- <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>
|
|
|
- </div>
|
|
|
+ <div class='map-view'>
|
|
|
+ <van-nav-bar title="F3平面图" @click-left='backPage'>
|
|
|
+ <template #left>
|
|
|
+ <van-icon name="arrow-left" size="18" color="#333333" />
|
|
|
+ </template>
|
|
|
+ </van-nav-bar>
|
|
|
+ <div id="bind-map-content">
|
|
|
+ <canvas id="bind-canvas" ref="bind-canvas" tabindex="0"></canvas>
|
|
|
+ <!-- 地图底部操作按钮 -->
|
|
|
+ <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>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
/**
|
|
|
* 说明书更新记录
|
|
|
*/
|
|
|
import Vue from 'vue'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
import { NavBar } from 'vant'
|
|
|
import floorList from "@/components/floorMap/floorList.vue"
|
|
|
import canvasFun from '@/components/floorMap/canvasFun'
|
|
|
+import { readGroup, queryStatis, graphQuery } from '@/api/public'
|
|
|
import { FloorView } from '@/lib/FloorView'
|
|
|
import { FloorScene } from '@/lib/FloorScene'
|
|
|
import { STopologyParser } from '@/lib/parsers/STopologyParser'
|
|
@@ -31,89 +33,339 @@ import { TipelineItem } from '@/lib/items/TipelineItem'
|
|
|
import { SImageLegendItem } from '@/lib/items/SImageLegendItem'
|
|
|
|
|
|
import { SImageItem, SImageShowType, SGraphItem } from '@saga-web/graph/lib'
|
|
|
+import { SFloorParser, ItemOrder, ItemColor, SPolygonItem, SBoardItem } from '@saga-web/big'
|
|
|
import { SColor } from '@saga-web/draw/lib'
|
|
|
Vue.use(NavBar)
|
|
|
export default {
|
|
|
- name: 'MapView',
|
|
|
- props: {},
|
|
|
- components: { floorList, canvasFun },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- floorsArr: [],
|
|
|
- view: '',
|
|
|
- scene: '',
|
|
|
- mapServerURL: "http://map.wanda.cn/editor",
|
|
|
- activeFloor: null,
|
|
|
- canvasLoading: false
|
|
|
+ name: 'MapView',
|
|
|
+ props: {},
|
|
|
+ components: { floorList, canvasFun },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj']),
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ floorsArr: [],
|
|
|
+ view: '',
|
|
|
+ scene: '',
|
|
|
+ mapServerURL: "http://map.wanda.cn/editor",
|
|
|
+ activeFloor: null,
|
|
|
+ canvasLoading: false,
|
|
|
+ floorid: 'f1', //楼层id
|
|
|
+ count: 0, // 顶楼为多张图时计数器
|
|
|
+ topologyParser: null, // 解析器数据
|
|
|
+ fParser: null, // 底图解析器
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ categoryId: {
|
|
|
+ default: 'LCGN',
|
|
|
+ type: String,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeMount() { },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ 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: {
|
|
|
+ backPage() {
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ // 切换楼层
|
|
|
+ emitFloor(floorObj) {
|
|
|
+ // if (floorObj) {
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.canvasLoading = true;
|
|
|
+ // this.activeFloor = floorObj;
|
|
|
+ // this.initGraph(floorObj.FloorId);
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ init(floorid) {
|
|
|
+ this.canvasLoading = true
|
|
|
+ // this.floorid = floorid
|
|
|
+ // this.$refs.canvasFun.isShow = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.clearGraphy()
|
|
|
+ this.scene = new FloorScene()
|
|
|
+ if (this.haveFengMap == 1) {
|
|
|
+ this.getGraphDetail().then((res) => {
|
|
|
+ if (res.Content.length == 1) {
|
|
|
+ const data = res.Content[0]
|
|
|
+ if (data.MaxY && data.MinX) {
|
|
|
+ window.fengmapData.maxY = data.MaxY
|
|
|
+ window.fengmapData.minX = data.MinX
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.parserData(floorid)
|
|
|
+ })
|
|
|
+ // this.parserData(floorid);
|
|
|
+ } else if (this.haveFengMap == 0) {
|
|
|
+ this.view.scene = this.scene
|
|
|
+ this.readGraph()
|
|
|
+ } else {
|
|
|
+ this.canvasLoading = false
|
|
|
}
|
|
|
+ }, 100)
|
|
|
},
|
|
|
- beforeMount() {},
|
|
|
- mounted() {
|
|
|
- this.$nextTick(() => {
|
|
|
- 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;
|
|
|
+ // 解析底图
|
|
|
+ parserData(floor) {
|
|
|
+ if (floor == 'g80') {
|
|
|
+ // 屋顶
|
|
|
+ if (window.fengmapData.frImg) {
|
|
|
+ const pj = this.fmapID.split('_')[0]
|
|
|
+ // 单张图片
|
|
|
+ if (!ProjectRf[pj]) {
|
|
|
+ let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`)
|
|
|
+ imgItem.showType = SImageShowType.AutoFit
|
|
|
+ imgItem.connect('imgLoadOver', this, () => {
|
|
|
+ this.readGraph()
|
|
|
+ })
|
|
|
+ this.scene.addItem(imgItem)
|
|
|
+ this.view.scene = this.scene
|
|
|
+ // this.view.fitSceneToView()
|
|
|
+ } else {
|
|
|
+ // 多张图
|
|
|
+ try {
|
|
|
+ // 初始化0
|
|
|
+ this.count = 0
|
|
|
+ ProjectRf[pj].forEach((t) => {
|
|
|
+ const item = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${t.name}`)
|
|
|
+ item.width = t.width
|
|
|
+ item.height = t.height
|
|
|
+ item.moveTo(t.x, t.y)
|
|
|
+ item.connect('imgLoadOver', this, () => {
|
|
|
+ this.countRf(ProjectRf[pj].length)
|
|
|
+ })
|
|
|
+ this.scene.addItem(item)
|
|
|
+ })
|
|
|
+ this.view.scene = this.scene
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 屋顶图不为图片
|
|
|
+ this.readBaseMap(floor)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (window.fengmapData.gnameToGid[floor]) {
|
|
|
+ this.readBaseMap(floor)
|
|
|
+ } else {
|
|
|
+ console.log('楼层不正确')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 解析楼地板
|
|
|
+ loadBoard(floor) {
|
|
|
+ window.fengmapData.loadFloor(floor, (res) => {
|
|
|
+ const zone = new SBoardItem(null, res)
|
|
|
+ this.scene.addItem(zone)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ readBaseMap(floor) {
|
|
|
+ this.loadBoard(window.fengmapData.gnameToGid[floor])
|
|
|
+ window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], (res) => {
|
|
|
+ if (res.err) {
|
|
|
+ console.log('errr', res.err)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.fParser = new SFloorParser(null)
|
|
|
+ this.fParser.parseData(res)
|
|
|
+ this.fParser.spaceList.forEach((t) => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ t.nameSize = 12
|
|
|
+ t.nameColor = '#2a2a2a'
|
|
|
+ if (t.data.Name && this.bunkObj[t.data.Name]) {
|
|
|
+ t.name = this.bunkObj[t.data.Name].brandname
|
|
|
+ } else {
|
|
|
+ // t.name = t.data.Name
|
|
|
+ t.name = ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.fParser.wallList.forEach((t) => this.scene.addItem(t))
|
|
|
+ this.fParser.virtualWallList.forEach((t) => this.scene.addItem(t))
|
|
|
+ this.fParser.doorList.forEach((t) => this.scene.addItem(t))
|
|
|
+ this.fParser.columnList.forEach((t) => this.scene.addItem(t))
|
|
|
+ this.fParser.casementList.forEach((t) => this.scene.addItem(t))
|
|
|
+ this.view.scene = this.scene
|
|
|
+ // this.view.fitSceneToView()
|
|
|
+ this.readGraph()
|
|
|
})
|
|
|
},
|
|
|
- methods: {
|
|
|
- backPage() {
|
|
|
- this.$router.go(-1)
|
|
|
- },
|
|
|
- init(floorid) {
|
|
|
- this.canvasLoading = true
|
|
|
- this.floorid = floorid
|
|
|
- this.$refs.canvasFun.isShow = false
|
|
|
- setTimeout(() => {
|
|
|
- this.clearGraphy()
|
|
|
- this.scene = new FloorScene()
|
|
|
- if (this.haveFengMap == 1) {
|
|
|
- this.getGraphDetail().then((res) => {
|
|
|
- if (res.Content.length == 1) {
|
|
|
- const data = res.Content[0]
|
|
|
- if (data.MaxY && data.MinX) {
|
|
|
- window.fengmapData.maxY = data.MaxY
|
|
|
- window.fengmapData.minX = data.MinX
|
|
|
- }
|
|
|
- }
|
|
|
- this.parserData(floorid)
|
|
|
- })
|
|
|
- // this.parserData(floorid);
|
|
|
- } else if (this.haveFengMap == 0) {
|
|
|
- this.view.scene = this.scene
|
|
|
- this.readGraph()
|
|
|
- } else {
|
|
|
- this.canvasLoading = false
|
|
|
- }
|
|
|
- }, 100)
|
|
|
- },
|
|
|
- // 切换楼层
|
|
|
- emitFloor(floorObj) {
|
|
|
- // if (floorObj) {
|
|
|
- // this.$nextTick(() => {
|
|
|
- // this.canvasLoading = true;
|
|
|
- // this.activeFloor = floorObj;
|
|
|
- // this.initGraph(floorObj.FloorId);
|
|
|
+ readGraph() {
|
|
|
+ this.readGroup()
|
|
|
+ .then((data) => {
|
|
|
+ if (data.Result == 'failure') {
|
|
|
+ this.$store.commit('SETISMESSAGE', false)
|
|
|
+ this.view.minScale = this.view.scale
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
+ this.$refs.canvasFun.everyScale = this.view.scale
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ if (
|
|
|
+ data.Data[0].Elements.Nodes.length === 0 &&
|
|
|
+ data.Data[0].Elements.Markers.length === 0 &&
|
|
|
+ data.Data[0].Elements.Relations.length === 0
|
|
|
+ ) {
|
|
|
+ this.$store.commit('SETISMESSAGE', false)
|
|
|
+ } else {
|
|
|
+ this.$store.commit('SETISMESSAGE', true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 无返回Data处理
|
|
|
+ if (!(data.Data && data.Data.length)) {
|
|
|
+ this.view.fitSceneToView()
|
|
|
+ this.view.minScale = this.view.scale
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
+ this.$refs.canvasFun.everyScale = this.view.scale
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // // 请求回来的备注
|
|
|
+ // if (data.Data && data.Data[0].Note) {
|
|
|
+ // let note = data.Data[0].Note
|
|
|
+ // bus.$emit('queryRemarksMethods', note)
|
|
|
+ // } else {
|
|
|
+ // bus.$emit('queryRemarksMethods', '')
|
|
|
+ // }
|
|
|
+ // //土建装饰的图例展示
|
|
|
+ // if (this.$cookie.get('categoryId') == 'SCPZ') {
|
|
|
+ // let scpzTable = [],
|
|
|
+ // arr = []
|
|
|
+ // scpzTable = data.Data[0].Elements.Nodes || []
|
|
|
+ // console.log(scpzTable)
|
|
|
+ // if (scpzTable.length > 0) {
|
|
|
+ // scpzTable.forEach((e) => {
|
|
|
+ // if (e.Properties.ItemExplain) {
|
|
|
+ // let obj = e
|
|
|
+ // arr.push(obj)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // console.log(arr)
|
|
|
+ // this.$store.commit('SETSCPZTABLE', arr)
|
|
|
+ // }
|
|
|
+ // if (data.Data[0].Elements.Nodes.length > 0) {
|
|
|
+ // this.$store.commit('SETTYPENUM', '')
|
|
|
+ // let Lengd = data.Data[0].Elements.Nodes
|
|
|
+ // Lengd.forEach((el) => {
|
|
|
+ // if (el.Type == 'Image' && el.Num > 1) {
|
|
|
+ // console.log(el.Num)
|
|
|
+ // this.$store.commit('SETTYPENUM', el.Num)
|
|
|
+ // }
|
|
|
// })
|
|
|
// }
|
|
|
- },
|
|
|
- clearGraphy() {
|
|
|
- if (this.view) {
|
|
|
- this.view.scene = null
|
|
|
- return
|
|
|
+ // 放到后边 $cookie graphId
|
|
|
+ // this.$cookie.set('graphId', data.Data[0].ID, 3)
|
|
|
+ // if (this.$cookie.get('graphId')) {
|
|
|
+ // // 得到graphId 就请求图例
|
|
|
+ // // 除土建装饰之外的图例展示 包括楼层功能
|
|
|
+ // bus.$emit('queryViewMethods')
|
|
|
+ // }
|
|
|
+ this.topologyParser = new STopologyParser(null)
|
|
|
+ this.topologyParser.parseData(data.Data[0].Elements)
|
|
|
+ // 多边形
|
|
|
+ this.topologyParser.zoneLegendList.forEach((t) => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ t.connect('legendItemClick', t, this.handleClickLegendItem)
|
|
|
+ })
|
|
|
+ // 增加文字
|
|
|
+ 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)
|
|
|
+ t.connect('legendItemClick', t, this.handleClickLegendItem)
|
|
|
+ })
|
|
|
+ // 增加管线类
|
|
|
+ // 增加图标类图例
|
|
|
+ this.topologyParser.relationList.forEach((t) => {
|
|
|
+ t.selectable = true
|
|
|
+ this.scene.addItem(t)
|
|
|
+ t.connect('legendItemClick', t, this.handleClickLegendItem)
|
|
|
+ })
|
|
|
+ // this.view.fitSceneToView()
|
|
|
+ // this.view.minScale = this.view.scale
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
+ this.$refs.canvasFun.everyScale = this.view.scale
|
|
|
}
|
|
|
- this.view = new FloorView("bind-canvas");
|
|
|
- },
|
|
|
+ this.view.fitSceneToView()
|
|
|
+ this.view.minScale = this.view.scale
|
|
|
+ this.canvasLoading = false
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.canvasLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 顶楼为多张图时计数器
|
|
|
+ countRf(len) {
|
|
|
+ this.count++
|
|
|
+ if (len == this.count) {
|
|
|
+ this.readGraph()
|
|
|
+ } else {
|
|
|
+ console.log('所有图片未加载完成')
|
|
|
+ }
|
|
|
},
|
|
|
+ clearGraphy() {
|
|
|
+ if (this.view) {
|
|
|
+ this.view.scene = null
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.view = new FloorView("bind-canvas");
|
|
|
+ },
|
|
|
+ // 小眼睛控制显示铺位名称
|
|
|
+ showText(val) {
|
|
|
+ this.fParser.spaceList.forEach((t) => {
|
|
|
+ t.showBaseName = val
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 读取数据
|
|
|
+ readGroup() {
|
|
|
+ const data = {
|
|
|
+ BuildingID: '1',
|
|
|
+ FloorID: this.floorid,
|
|
|
+ categoryId: this.categoryId,
|
|
|
+ projectId: this.plazaId,
|
|
|
+ Pub: true,
|
|
|
+ }
|
|
|
+ return readGroup(data)
|
|
|
+ },
|
|
|
+ // 获取图最大最小值
|
|
|
+ getGraphDetail() {
|
|
|
+ const categoryId = this.categoryId
|
|
|
+ const data = {
|
|
|
+ Filters: `categoryId='${categoryId}';projectId='${this.plazaId}';BuildingID='1';FloorID='${this.floorid}';isPub=true`,
|
|
|
+ }
|
|
|
+ return graphQuery(data)
|
|
|
+ },
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
.map-view {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- #bind-map-content {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ #bind-map-content {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|