easthospital_iot-daoshi-v/src/composables/useInitMap.js

import { useRouter } from 'vue-router'
import { useStore } from '@/store/root'
import { uniqBy } from '@/utils/utils'
import { getMap } from '@/http/api'
import Message from '@/base/Message/Message'

export const useInitMap = function () {
  const store = useStore()
  getMap()
    .then(({ data }) => {
      store.SET_MAP_DATA(JSON.parse(data.mapData))
      //初始化地图
      onReady(store.currentFloor, data, { shopList: store.shopList }, () => {
        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
//点击地图店铺box
function onClickShop(event) {
  const store = useStore()
  if (lastShop) window.Map_QM.changeMapIPState(lastShop.shopNum, lastShop.entColor)
  lastShop = event.data
  if (event.data) {
    showMapDialog()
    window.Map_QM.addElementLabel(document.getElementById('shopInfo'), event.data.xaxis, event.data.yaxis)
    store.SET_SHOP(event.data.shopData)
    window.Map_QM.changeMapIPState(event.data.shopNum, '#516DD8')
  } else {
    hideMapDialog()
  }
}

//地图弹框消失
export function hideMapDialog() {
  document.getElementById('shopInfo').style.visibility = 'hidden'
}

//显示地图弹框
function showMapDialog() {
  document.getElementById('shopInfo').style.visibility = 'visible'
}

//地图初始化
function onReady({ floorOrder, location, angle }, map, shop, callback) {
  //设备楼栋, 设备楼层, 点位(机器点位直连主干道而不在主干道上), 方向    84   85
  window.Config.getInstance(callback, 0, floorOrder, location, angle, map, shop)
}

//监听地图上下文丢失 刷新页面
function onContextLost() {
  const router = useRouter()
  router.push('/')
  location.reload()
}