feat: 导览当层距离方向展示

src/base/ShopItem/ShopItem.vue

@@ -5,7 +5,8 @@
     </div>
     <p class="name">
       <span class="shop-name">{{ switchLanguage(shop, 'shopName') }}</span>
-      <span class="name-right">{{ shop.floor }}</span>
+      <span class="name-right" v-if="$route.path === '/guide'"> {{ shop.distance ? shop.distance + '米' : '' }}<img v-if="shop.dir" :src="shop.dir" /> </span>
+      <span class="name-right" v-else>{{ shop.floor }}</span>
     </p>
   </div>
 </template>
@@ -68,6 +69,11 @@ function handleShop() {
   line-height: 14px;
   font-family: 'font_bold';
   color: rgba(0, 0, 0, 0.4);
+  img {
+    width: 20px;
+    height: 20px;
+    margin-left: 7px;
+  }
 }
 .format-icon {
   width: 14px;
@@ -96,6 +102,15 @@ function handleShop() {
         line-height: 21px;
         color: rgba(0, 0, 0, 0.8);
       }
+      .name-right {
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 21px;
+        img {
+          width: 32px;
+          height: 32px;
+        }
+      }
     }
   }
   &.isFood {

src/composables/useInitMap.js

@@ -8,6 +8,7 @@ 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)

src/store/root/actions.js

@@ -46,5 +46,8 @@ export const actions = {
   },
   SET_ISUSE_SPEECH(flag) {
     this.isUseSpeech = flag
+  },
+  SET_MAP_DATA(data) {
+    this.mapData = data
   }
 }

src/store/root/getters.js

@@ -1,4 +1,52 @@
+import arrows from '../arrows/arrows'
+
 export const currentBuildingFloorsList = state => {
   const currentBuilding = state.buildingList.find(building => building.buildingCode === state.currentFloor.buildingCode)
   return currentBuilding?.floorList ?? []
 }
+
+const getCodeByAngle = angle =>
+  angle < (Math.PI / 8) * 1 || angle > (Math.PI / 8) * 15
+    ? '8003'
+    : angle >= (Math.PI / 8) * 1 && angle < (Math.PI / 8) * 3
+    ? '8002'
+    : angle >= (Math.PI / 8) * 3 && angle < (Math.PI / 8) * 5
+    ? '8001'
+    : angle >= (Math.PI / 8) * 5 && angle < (Math.PI / 8) * 7
+    ? '8008'
+    : angle >= (Math.PI / 8) * 7 && angle < (Math.PI / 8) * 9
+    ? '8007'
+    : angle >= (Math.PI / 8) * 9 && angle < (Math.PI / 8) * 11
+    ? '8006'
+    : angle >= (Math.PI / 8) * 11 && angle < (Math.PI / 8) * 13
+    ? '8005'
+    : '8004'
+const getDistance = (a, b) => Math.sqrt((b.x - a.x) * (b.x - a.x) + (b.y - a.y) * (b.y - a.y))
+export const currentFloorShopMap = ({ currentFloor: device, shopList, mapData }) => {
+  if (!mapData || !shopList.length) return {}
+  device.angle = Number(device.angle)
+  if (isNaN(device.angle)) device.angle = 0
+  const building = mapData[0]
+  const map = building.buildArr[device.floorOrder].mapData
+  const nodes = map.path.nodes
+  const deviceX = nodes[device.location].x
+  const deviceY = nodes[device.location].y
+  return shopList
+    .filter(shop => shop.floor === device.floor)
+    .reduce((acc, shop) => {
+      const result = {}
+      try {
+        const xaxis = JSON.parse(shop.xaxis).map(Number)
+        let angle = (Math.atan2(deviceY - xaxis[2], xaxis[0] - deviceX) / Math.PI) * 180 - device.angle
+        if (angle < 0) angle += 360
+        if (angle > 360) angle -= 360
+        angle = (angle / 180) * Math.PI
+        result.distance = Math.ceil(getDistance({ x: deviceX, y: deviceY }, { x: xaxis[0], y: xaxis[2] }) / building.scale)
+
+        result.dir = arrows[getCodeByAngle(angle)]
+      } catch (error) {
+        result.dir = arrows[getCodeByAngle(0)]
+      }
+      return { ...acc, [shop.shopId]: result }
+    }, {})
+}

src/store/root/state.js

@@ -16,7 +16,8 @@ export const state = () => ({
   showDetail: false, //是否显示详情
   currentFloor: {}, //设备所属的当前楼栋的当前楼层信息
   isUseFace: 0, //是否使用人脸 0:不使用 1: 使用
-  isUseSpeech: 1 //是否使用语音 0:不使用 1: 使用
+  isUseSpeech: 1, //是否使用语音 0:不使用 1: 使用
+  mapData: null
 })
 
 export const is4k = () => {

src/views/Billboard/Billboard.vue

@@ -53,27 +53,6 @@ import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 import { useRouter } from 'vue-router'
 import { getBrandListByFormat } from '@/http/brand/api'
-import { getMap } from '@/http/api'
-import arrows from './arrows/arrows'
-
-const getCodeByAngle = angle =>
-  angle < (Math.PI / 8) * 1 || angle > (Math.PI / 8) * 15
-    ? '8003'
-    : angle >= (Math.PI / 8) * 1 && angle < (Math.PI / 8) * 3
-    ? '8002'
-    : angle >= (Math.PI / 8) * 3 && angle < (Math.PI / 8) * 5
-    ? '8001'
-    : angle >= (Math.PI / 8) * 5 && angle < (Math.PI / 8) * 7
-    ? '8008'
-    : angle >= (Math.PI / 8) * 7 && angle < (Math.PI / 8) * 9
-    ? '8007'
-    : angle >= (Math.PI / 8) * 9 && angle < (Math.PI / 8) * 11
-    ? '8006'
-    : angle >= (Math.PI / 8) * 11 && angle < (Math.PI / 8) * 13
-    ? '8005'
-    : '8004'
-
-const getDistance = (a, b) => Math.sqrt((b.x - a.x) * (b.x - a.x) + (b.y - a.y) * (b.y - a.y))
 
 const timeout = 30000
 const heights = { shop: 44, format: 49, placeholder: 40 }
@@ -82,7 +61,7 @@ const store = useStore()
 const router = useRouter()
 const shops = ref([])
 const listRef = ref(null)
-const { currentFloor, buildingList } = storeToRefs(store)
+const { currentFloor, buildingList, currentFloorShopMap } = storeToRefs(store)
 const bf = computed(() => (buildingList.length > 1 ? currentFloor.value.building + '-' : '') + currentFloor.value.floor)
 
 const scrollWidth = ref(0)
@@ -99,52 +78,19 @@ const setRemainingMinutes = setValue(remainingMinutes)
 const showBullets = computed(() => scrollLefts.value.length > 1)
 const columnHeight = 746
 
-Promise.all([getMap(), getBrandListByFormat()]).then(
-  ([
-    {
-      data: { mapData }
-    },
-    { data: brandListByFormat }
-  ]) => {
-    console.log(currentFloor.value)
-    const device = currentFloor.value
-    device.angle = Number(device.angle)
-    if (isNaN(device.angle)) device.angle = 0
-    const building = JSON.parse(mapData)[0]
-    const map = building.buildArr[device.floorOrder].mapData
-    const nodes = map.path.nodes
-
-    const deviceX = nodes[device.location].x
-    const deviceY = nodes[device.location].y
+Promise.all([getBrandListByFormat()]).then(([{ data: brandListByFormat }]) => {
   shops.value = brandListByFormat.list.map(brand => {
-      const shopList = brand.shopList.filter(shop => shop.floor === currentFloor.value.floor)
-      console.log(shopList)
-      shopList.forEach(shop => {
-        shop.xaxis = JSON.parse(shop.xaxis)
-        try {
-          shop.xaxis = shop.xaxis.map(Number)
-          let angle = (Math.atan2(deviceY - shop.xaxis[2], shop.xaxis[0] - deviceX) / Math.PI) * 180 - device.angle
-          if (angle < 0) angle += 360
-          if (angle > 360) angle -= 360
-          angle = (angle / 180) * Math.PI
-          shop.dir = arrows[getCodeByAngle(angle)]
-        } catch (error) {
-          shop.dir = arrows[getCodeByAngle(0)]
-          console.warn(error)
-        }
-        try {
-          shop.distance = Math.ceil(getDistance({ x: deviceX, y: deviceY }, { x: shop.xaxis[0], y: shop.xaxis[2] }) / building.scale)
-        } catch (error) {
-          console.warn(error)
-        }
-      })
     return {
       ...brand,
-        shopList
-      }
+      shopList: brand.shopList
+        .filter(shop => shop.floor === currentFloor.value.floor)
+        .map(shop => {
+          const meta = currentFloorShopMap.value[shop.shopId]
+          return { ...shop, ...(meta ? meta : {}) }
         })
     }
-)
+  })
+})
 
 try {
   window.Map_QM?.showFloor?.(currentFloor.value.floorOrder)

src/views/Guide/Guide.vue

@@ -80,7 +80,7 @@ const isRow = ref(false)
 const store = useStore()
 const formatMap = ref({})
 const facMap = ref({})
-const { currentBuildingFloorsList, currentFloor, config } = storeToRefs(store)
+const { currentBuildingFloorsList, currentFloor, config, currentFloorShopMap } = storeToRefs(store)
 
 try {
   const facs = window.Map_QM.getAllIcon()
@@ -172,7 +172,12 @@ function handleFloor(item, index) {
     floorIdx.value = index
     selectedShopList.value = shopList.value.map(brand => ({
       ...brand,
-      shopList: brand.shopList.filter(shop => shop.floor === item.floor)
+      shopList: brand.shopList
+        .filter(shop => shop.floor === item.floor)
+        .map(shop => {
+          const meta = currentFloorShopMap.value[shop.shopId]
+          return { ...shop, ...(meta ? meta : {}) }
+        })
     }))
   })
 }