feat: 增加设施跳转功能

public/static/qm/MainMap_QM.js

@@ -328,6 +328,7 @@ ConfigFun = function () {
           Config.allMap = JSON.parse(LZString.decompressFromBase64(mapData.mapData))
         }
       } catch (e) {
+        console.log(e);
         backObj.code = 404
         backObj.msg = '地图数据JSON格式错误'
         callBack(backObj)
@@ -1456,6 +1457,7 @@ ConfigFun = function () {
             Map_QM.loaderOver()
           }
         } catch (e) {
+          console.log(e);
           callBack({ code: 404, msg: '地图数据解析失败' })
           callBack = null
         }
@@ -1725,6 +1727,7 @@ MainMap_QM.prototype = {
   },
 
   initBuild: function (e) {
+    console.log("******");
     elevator = null
     straight = null
     elevatorDown = null
@@ -2874,10 +2877,11 @@ MainMap_QM.prototype = {
    * @apiSampleRequest off
    *
    * @apiParamExample {String} 请求示例
-   * Map_QM.addElementLabel(divObj,0,0);
+   * Map_QM.addElementLabel(divObj,0,0,"shopInfo");
    *
    */
-  addElementLabel: function (divObj, x = 0, y = 0, type = '2d_pop') {
+  addElementLabel: function (divObj, x = 0, y = 0, type = 'shopInfo') {
+    Map_QM.elementDestroy(type);
     let shopInfo = new THREE.CSS2DObject(divObj)
     shopInfo.position.set(x, -1 * y, Config.shopHeight || 50)
     shopInfo.applyMatrix(Map_QM.mapArr[Config.selectBuild][Config.selectFloor].allObj.matrix)
@@ -3424,7 +3428,7 @@ MainMap_QM.prototype = {
     }
 
     if (selIcon) {
-      return { build: selIcon.build, floor: selIcon.floor, node: selIcon.navCode, typeCode: Config.getFacType(iconType.type) }
+      return { build: selIcon.build, floor: selIcon.floor, node: selIcon.navCode, site:{x: selIcon.position.x, y: selIcon.position.y}, typeCode: Config.getFacType(iconType.type) }
     } else {
       // 当前楼栋没有
       let startNade = Config.deviceObj.build + '_' + Config.startObj.floor + '_' + Config.startObj.node
@@ -3454,7 +3458,7 @@ MainMap_QM.prototype = {
       }
     }
     if (selIcon) {
-      return { build: selIcon.build, floor: selIcon.floor, node: selIcon.navCode, typeCode: Config.getFacType(iconType.type) }
+      return { build: selIcon.build, floor: selIcon.floor, node: selIcon.navCode, site:{x: selIcon.position.x, y: selIcon.position.y}, typeCode: Config.getFacType(iconType.type) }
     }
   },
   /**
@@ -4416,7 +4420,7 @@ MainMap_QM.prototype = {
           if (child_elem[i].material !== undefined) Map_QM.removeMaterial(child_elem.material) // 删除材质
         }
       }
-      if (child_elem[i].name != 'light' && child_elem[i].name != 'shopInfo' && child_elem[i].name != 'dtline') {
+      if (child_elem[i].name != 'light' && child_elem[i].name != 'dtline') {
         remObj.remove(child_elem[i])
       }
     }

src/components/Map/Map.vue

@@ -7,6 +7,8 @@
     <div id="shopInfo" class="boxShop">
       <div>{{ shop ? switchLanguage(shop, 'shopName') : '' }}</div>
     </div>
+    <img src="./fac.png" id="fac" class="boxShop" />
+
     <div id="moveFloorBG">
       <span id="moveFloor"></span>
       <div style="position: absolute; z-index: 128" id="floorBox"></div>
@@ -41,7 +43,13 @@ const { shop } = storeToRefs(store)
     top: 408px;
   }
 }
-
+#fac {
+  position: absolute;
+  z-index: 9000 !important;
+  visibility: hidden;
+  width: 72px;
+  height: 36px;
+}
 #shopInfo {
   position: absolute;
   z-index: 9000 !important;

src/components/SearchResultList/SearchResultList.vue

@@ -14,7 +14,16 @@
 <script setup>
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
 import SearchResultItem from '@/components/SearchResultItem/SearchResultItem.vue'
-
+defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  },
+  config: {
+    type: Object,
+    default: () => ({})
+  }
+})
 const emits = defineEmits(['handle-shop'])
 
 function handleShop(item) {

src/composables/useFacilityNav.js

@@ -1,23 +1,16 @@
 import { useStore } from '@/store/root'
-import Shop from '@/utils/Class/Shop'
 import { useRouter } from 'vue-router'
 
 export const useFacilityNav = () => {
   const store = useStore()
   const router = useRouter()
 
-  function handleFacility(name, floorOrder, floorName, logoPath, yaxis, isFacility) {
-    const shop = new Shop(name, floorOrder, floorName, logoPath, yaxis, isFacility)
-    store.SET_SHOP(shop)
-  }
-
   function _handleFacility(item) {
     store.showSearch && store.SET_SHOW_SEARCH(false)
     store.showVoice && store.SET_SHOW_VOICE(false)
     store.showDetail && store.SET_SHOW_DETAIL(false)
-
-    window.Map_QM.bounceIcon({ type: item.type })
-
+    store.shop && store.SET_SHOP(null)
+    store.SET_FACILITY(window.Map_QM.pathIcon({ type: item.type }))
     router.push('/guide')
   }
 

src/composables/useInitMap.js

@@ -51,6 +51,7 @@ export const setShopInactive = () => {
 //点击地图店铺box
 function onClickShop(event) {
   const store = useStore()
+  store.SET_FACILITY(null)
   if (!event.data) {
     store.SET_SHOP(null)
     bounceShopAndChangeColor(null)
@@ -64,6 +65,7 @@ function onClickShop(event) {
 //地图弹框消失
 export function hideMapDialog() {
   document.getElementById('shopInfo').style.visibility = 'hidden'
+  document.getElementById('fac').style.visibility = 'hidden'
 }
 
 //显示地图弹框
@@ -71,6 +73,11 @@ function showMapDialog() {
   document.getElementById('shopInfo').style.visibility = 'visible'
 }
 
+export const showFacility = fac => {
+  window.Map_QM.addElementLabel(document.getElementById('fac'), fac.site.x, fac.site.y, 'fac')
+  document.getElementById('fac').style.visibility = 'visible'
+}
+
 //地图初始化
 function onReady({ floorOrder, location, angle }, map, shop, callback) {
   //设备楼栋, 设备楼层, 点位(机器点位直连主干道而不在主干道上), 方向    84   85

src/store/root/actions.js

@@ -57,5 +57,8 @@ export const actions = {
     Object.entries(themes[data]).forEach(([cat, obj]) => {
       Object.entries(obj).forEach(([k, v]) => r.style.setProperty(`--${cat}-${k}`, v))
     })
+  },
+  SET_FACILITY(data) {
+    this.facility = data
   }
 }

src/store/root/state.js

@@ -20,7 +20,8 @@ export const state = () => ({
   isUseSpeech: 1, //是否使用语音 0:不使用 1: 使用
   mapData: null,
   themes,
-  currentThemeName: 'main'
+  currentThemeName: 'main',
+  facility: null
 })
 
 export const is4k = () => {

src/views/Guide/Guide.vue

@@ -87,12 +87,12 @@
 </template>
 
 <script setup>
-import { ref, watch, onBeforeUnmount, computed, nextTick } from 'vue'
+import { ref, watch, onBeforeUnmount, computed, nextTick, onBeforeMount } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 import { RESET, DIRECTION, ACTIVITY_BRAND, list as buttonList } from './list'
 import View from '@/layouts/View.vue'
-import { hideMapDialog, setShopActive, setShopInactive } from '@/composables/useInitMap'
+import { hideMapDialog, setShopActive, setShopInactive, showFacility } from '@/composables/useInitMap'
 import { getBrandListByFormat, getBrandListByFloor } from '@/http/brand/api'
 import BrandScroll from '@/components/BrandScroll/BrandScroll.vue'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
@@ -106,7 +106,7 @@ const isRow = ref(false)
 const store = useStore()
 const formatMap = ref({})
 const facMap = ref({})
-const { currentBuildingFloorsList, currentFloor, config, currentFloorShopMap, shop, theme } = storeToRefs(store)
+const { currentBuildingFloorsList, currentFloor, config, currentFloorShopMap, shop, theme, facility } = storeToRefs(store)
 
 try {
   const facs = window.Map_QM.getAllIcon()
@@ -244,6 +244,8 @@ function filterAboutCurrentInfo() {
   nextTick(() => {
     if (shop.value) {
       setShopActive(shop.value)
+    } else if (facility.value) {
+      handleFacility(facility.value)
     }
   })
 }
@@ -254,6 +256,7 @@ onBeforeUnmount(() => {
   clearTimeout(mapIconTimer.value)
   hideMapDialog()
   store.SET_SHOP(null)
+  store.SET_FACILITY(null)
 })
 
 watch(
@@ -268,6 +271,17 @@ watch(
     immediate: true
   }
 )
+
+watch(facility, fac => {
+  if (fac) handleFacility(fac)
+  else hideMapDialog()
+})
+const handleFacility = async fac => {
+  const index = currentBuildingFloorsList.value.findIndex(item => item.floorOrder === fac.floor)
+  console.log(index, currentBuildingFloorsList.value[index])
+  await changeFloor(index)
+  setTimeout(() => showFacility(fac), 500)
+}
 </script>
 
 <style lang="scss" scoped>