You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.9 KiB
99 lines
2.9 KiB
import { useRouter } from 'vue-router'
|
|
import { useStore } from '@/store/root'
|
|
import { uniqBy } from '@/utils/utils'
|
|
import { getMap, getFacilityList } from '@/http/api'
|
|
import Message from '@/base/Message/Message'
|
|
|
|
export const useInitMap = function () {
|
|
const store = useStore()
|
|
|
|
Promise.all([getMap(), getFacilityList()])
|
|
.then(([{ data }, { data: facs }]) => {
|
|
facs = facs.map(fac => ({ ...fac, filePath: fac.navFilePath }))
|
|
store.SET_MAP_DATA(JSON.parse(data.mapData))
|
|
//初始化地图
|
|
onReady(store.currentFloor, data, store.shopList, facs, () => {
|
|
store.SET_MAP_STATUS(true)
|
|
const facilityList = window.Map_QM.getAllIcon().flat(Infinity)
|
|
|
|
const list = facilityList.map(item => {
|
|
item.imgUrl.replace('./', '/')
|
|
return item
|
|
})
|
|
|
|
window.Map_QM.addEventListener('shop', onClickShop, false)
|
|
store.SET_FACILITY_LIST(uniqBy(list, 'type'))
|
|
window.Map_QM.renderer.domElement.addEventListener('webglcontextlost', onContextLost)
|
|
})
|
|
})
|
|
.catch(() => {
|
|
Message({ text: '地图数据获取失败', type: 'success' })
|
|
})
|
|
}
|
|
let lastShop
|
|
const bounceShopAndChangeColor = data => {
|
|
if (lastShop) window.Map_QM.changeMapIPState(lastShop.houseNumber, lastShop.formatColor)
|
|
lastShop = data
|
|
if (!data) return
|
|
window.Map_QM.changeMapIPState(data.houseNumber, '#516DD8')
|
|
}
|
|
|
|
export const setShopActive = shop => {
|
|
bounceShopAndChangeColor(shop)
|
|
window.Map_QM.setSelectShopMatByName(shop.houseNumber)
|
|
}
|
|
|
|
export const setShopInactive = () => {
|
|
bounceShopAndChangeColor(null)
|
|
}
|
|
|
|
//点击地图店铺box
|
|
function onClickShop(event) {
|
|
console.log(event)
|
|
const store = useStore()
|
|
store.SET_FACILITY(null)
|
|
if (!event.data) {
|
|
store.SET_SHOP(null)
|
|
bounceShopAndChangeColor(null)
|
|
hideMapDialog()
|
|
} else {
|
|
store.SET_SHOP({ ...event.data.shopData })
|
|
bounceShopAndChangeColor(event.data.shopData)
|
|
}
|
|
}
|
|
|
|
//地图弹框消失
|
|
export function hideMapDialog() {
|
|
document.getElementById('shopInfo').style.visibility = 'hidden'
|
|
document.getElementById('fac').style.visibility = 'hidden'
|
|
}
|
|
|
|
export const showFacility = fac => {
|
|
window.Map_QM.addElementLabel(document.getElementById('fac'), fac.site.x, -fac.site.y, 100, 'fac')
|
|
document.getElementById('fac').style.visibility = 'visible'
|
|
}
|
|
|
|
//地图初始化
|
|
function onReady({ floorOrder, location, angle }, map, shop, facs, callback) {
|
|
//设备楼栋, 设备楼层, 点位(机器点位直连主干道而不在主干道上), 方向 84 85
|
|
window.MainMap_QM.init(callback, {
|
|
build: 0,
|
|
floor: floorOrder,
|
|
navPoint: location,
|
|
angle,
|
|
perc_H: '-50%',
|
|
pathStyle: '3D',
|
|
containerId: 'mapContainer',
|
|
mapData: map,
|
|
shadow: false,
|
|
shopData: shop,
|
|
iconUrl: facs
|
|
})
|
|
}
|
|
|
|
//监听地图上下文丢失 刷新页面
|
|
function onContextLost() {
|
|
const router = useRouter()
|
|
router.push('/')
|
|
location.reload()
|
|
}
|
|
|