diff --git a/src/base/ShopItem/ShopItem.vue b/src/base/ShopItem/ShopItem.vue index c6dd976..f1e49d7 100644 --- a/src/base/ShopItem/ShopItem.vue +++ b/src/base/ShopItem/ShopItem.vue @@ -5,7 +5,8 @@

{{ switchLanguage(shop, 'shopName') }} - {{ shop.floor }} + {{ shop.distance ? shop.distance + '米' : '' }} + {{ shop.floor }}

@@ -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 { diff --git a/src/composables/useInitMap.js b/src/composables/useInitMap.js index 90f7d4b..6762636 100644 --- a/src/composables/useInitMap.js +++ b/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) diff --git a/src/views/Billboard/arrows/8001.png b/src/store/arrows/8001.png similarity index 100% rename from src/views/Billboard/arrows/8001.png rename to src/store/arrows/8001.png diff --git a/src/views/Billboard/arrows/8002.png b/src/store/arrows/8002.png similarity index 100% rename from src/views/Billboard/arrows/8002.png rename to src/store/arrows/8002.png diff --git a/src/views/Billboard/arrows/8003.png b/src/store/arrows/8003.png similarity index 100% rename from src/views/Billboard/arrows/8003.png rename to src/store/arrows/8003.png diff --git a/src/views/Billboard/arrows/8004.png b/src/store/arrows/8004.png similarity index 100% rename from src/views/Billboard/arrows/8004.png rename to src/store/arrows/8004.png diff --git a/src/views/Billboard/arrows/8005.png b/src/store/arrows/8005.png similarity index 100% rename from src/views/Billboard/arrows/8005.png rename to src/store/arrows/8005.png diff --git a/src/views/Billboard/arrows/8006.png b/src/store/arrows/8006.png similarity index 100% rename from src/views/Billboard/arrows/8006.png rename to src/store/arrows/8006.png diff --git a/src/views/Billboard/arrows/8007.png b/src/store/arrows/8007.png similarity index 100% rename from src/views/Billboard/arrows/8007.png rename to src/store/arrows/8007.png diff --git a/src/views/Billboard/arrows/8008.png b/src/store/arrows/8008.png similarity index 100% rename from src/views/Billboard/arrows/8008.png rename to src/store/arrows/8008.png diff --git a/src/views/Billboard/arrows/arrows.js b/src/store/arrows/arrows.js similarity index 100% rename from src/views/Billboard/arrows/arrows.js rename to src/store/arrows/arrows.js diff --git a/src/store/root/actions.js b/src/store/root/actions.js index 865ae96..360f50c 100644 --- a/src/store/root/actions.js +++ b/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 } } diff --git a/src/store/root/getters.js b/src/store/root/getters.js index 67250af..19b126e 100644 --- a/src/store/root/getters.js +++ b/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 } + }, {}) +} diff --git a/src/store/root/state.js b/src/store/root/state.js index 72b1722..c8ceb9c 100644 --- a/src/store/root/state.js +++ b/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 = () => { diff --git a/src/views/Billboard/Billboard.vue b/src/views/Billboard/Billboard.vue index 4ca31eb..fa332be 100644 --- a/src/views/Billboard/Billboard.vue +++ b/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 - 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 - } - }) - } -) +Promise.all([getBrandListByFormat()]).then(([{ data: brandListByFormat }]) => { + shops.value = brandListByFormat.list.map(brand => { + return { + ...brand, + 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) diff --git a/src/views/Guide/Guide.vue b/src/views/Guide/Guide.vue index 80c1f00..5bfde8a 100644 --- a/src/views/Guide/Guide.vue +++ b/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 : {}) } + }) })) }) }