From 21fb9a9c599c28170b95a4bb2bea96d67a417990 Mon Sep 17 00:00:00 2001 From: zjc <1034206993@qq.com> Date: Sun, 26 Jan 2025 01:27:56 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E5=96=84=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/index.vue | 1 + src/components/TicketSource/index.vue | 2 +- src/hooks/map.js | 6 ++- src/hooks/socket.js | 5 +- src/stores/home.js | 12 +++++ src/views/home/components/box-2.vue | 25 ++++++++- src/views/home/index.vue | 25 ++++++++- .../scenic/components/big-car-ship-map.vue | 53 ++++++++++++++++--- src/views/scenic/components/box-2.vue | 28 +++++++--- src/views/scenic/index.vue | 24 ++++++++- vite.config.js | 7 +++ 11 files changed, 165 insertions(+), 23 deletions(-) diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue index 545d7f2..e4a1a9b 100644 --- a/src/components/Header/index.vue +++ b/src/components/Header/index.vue @@ -175,6 +175,7 @@ isSkip.value = false isBack.value = true let res = await getSpotListApi() + console.log(res, '============') navLeft.value = res.data current.value = 0 title.value = navLeft.value[current.value].name diff --git a/src/components/TicketSource/index.vue b/src/components/TicketSource/index.vue index 2f72303..1a2940c 100644 --- a/src/components/TicketSource/index.vue +++ b/src/components/TicketSource/index.vue @@ -91,7 +91,7 @@ } } }, - color: ['#F15A25', '#01FEFE', '#12B5FD'], + // color: ['#F15A25', '#01FEFE', '#12B5FD'], polar: { center: ['50%', '40%'] }, diff --git a/src/hooks/map.js b/src/hooks/map.js index 0984320..14d17ec 100644 --- a/src/hooks/map.js +++ b/src/hooks/map.js @@ -27,6 +27,10 @@ export function useMap() { var marker = new BMapGL.Marker(point, { icon: iconPath }) map.value.addOverlay(marker) } + // 清除覆盖物 + const clearOverlays = () => { + map.value.clearOverlays() + } - return { map, initMap, addMarker } + return { map, initMap, addMarker, clearOverlays } } diff --git a/src/hooks/socket.js b/src/hooks/socket.js index 978c97f..238e548 100644 --- a/src/hooks/socket.js +++ b/src/hooks/socket.js @@ -19,14 +19,13 @@ export function useWebSocket(url) { console.error('WebSocket error:', error) } socket.value.onmessage = (message) => { - // 处理接收到的消息 if (JSON.parse(message.data)) { let data = JSON.parse(message.data) dataRes.value = data } } - socket.value.onclose = () => { - console.log('WebSocket disconnected') + socket.value.onclose = (event) => { + console.log('WebSocket close：', event) } } diff --git a/src/stores/home.js b/src/stores/home.js index 549a481..de181e1 100644 --- a/src/stores/home.js +++ b/src/stores/home.js @@ -79,6 +79,18 @@ export const useHomeStore = defineStore('home', () => { spotInfo: [] }) // 车船信息 + // { + // car: { + // count: 0, + // info: [], + // list: [] + // }, + // ship: { + // count: 0, + // info: [], + // list: [] + // } + // } let carShipData = ref(null) // 酒店数据 let hotelData = ref(null) diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue index 3e8d002..ddb40be 100644 --- a/src/views/home/components/box-2.vue +++ b/src/views/home/components/box-2.vue @@ -131,6 +131,8 @@ import icon9 from '@/assets/images/icon-9.png' import icon10 from '@/assets/images/icon-10.png' import icon11 from '@/assets/images/icon-11.png' + import carIcon from '@/assets/images/car.png' + import shipIcon from '@/assets/images/ship.png' import { useMap } from '@/hooks/map' import { useHomeStore } from '@/stores/home' @@ -139,7 +141,7 @@ let emit = defineEmits(['switch-spot']) - const { map, initMap } = useMap() + const { map, initMap, addMarker } = useMap() let spotList = ref([]) @@ -162,6 +164,27 @@ } ]) let current = ref(0) + + watch( + () => [map.value, homeStore.carShipData], + () => { + if (map.value && homeStore.carShipData) { + homeStore.carShipData?.car?.list.map((item) => { + if (item.lng && item.lat) { + addMarker(carIcon, [item.lng, item.lat], [36, 50]) + } + }) + homeStore.carShipData?.ship?.list.map((item) => { + if (item.lng && item.lat) { + addMarker(shipIcon, [item.lng, item.lat], [36, 50]) + } + }) + } + }, + { + immediate: true + } + ) const handleMap = (e) => { emit('switch-spot', e) // map.value.centerAndZoom(new BMapGL.Point('108.704166', '30.94776'), 16) diff --git a/src/views/home/index.vue b/src/views/home/index.vue index b2487c6..73c5970 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -18,6 +18,8 @@ ) const homeStore = useHomeStore() + let timer = null + watch( () => isConnected.value, (val) => { @@ -25,7 +27,7 @@ sendMessage( JSON.stringify({ action: 'start', - type: 'index', + type: '', scenicSpot: '' }) ) @@ -35,8 +37,8 @@ watch( () => dataRes.value, (val) => { + console.log(val, '景区接受消息') if (val) { - console.log(val, '首页接受消息') switch (val.type) { case 'userPortrait': homeStore.setUserPortraitData(val.data) @@ -78,9 +80,24 @@ homeStore.setHotelData(val.data) break } + if (!timer) sendCarShip() } } ) + const sendCarShip = (e) => { + timer = setInterval(() => { + if (isConnected.value) { + console.log('定时发送车船消息11') + sendMessage( + JSON.stringify({ + action: 'start', + type: 'carShipData', + scenicSpotId: '' + }) + ) + } + }, 5000) + } const switchSpot = (e) => { sendMessage( JSON.stringify({ @@ -90,4 +107,8 @@ }) ) } + + onUnmounted(() => { + if (timer) clearInterval(timer) + }) diff --git a/src/views/scenic/components/big-car-ship-map.vue b/src/views/scenic/components/big-car-ship-map.vue index 6b0e8cd..39fd33b 100644 --- a/src/views/scenic/components/big-car-ship-map.vue +++ b/src/views/scenic/components/big-car-ship-map.vue @@ -13,22 +13,61 @@ import { useMap } from '@/hooks/map' let modelValue = defineModel() - const { map, initMap, addMarker } = useMap() + const { map, initMap, addMarker, clearOverlays } = useMap() + + let props = defineProps({ + carList: { + type: Array, + default: () => [] + }, + shipList: { + type: Array, + default: () => [] + } + }) + + let lat = ref('') + let lng = ref('') + let scenicChange = null watch( () => modelValue.value, (val) => { - if (val && !map.value) { + if (val) { setTimeout(() => { - initMap('big-car-ship', 109.552461, 31.049607, 15) - addMarker(carIcon, [109.551419, 31.050001], [36, 50]) - addMarker(shipIcon, [109.551671, 31.04847], [36, 50]) + initMap('big-car-ship', lng.value, lat.value, 15) }, 1000) } - } + }, + { immediate: true } + ) + watch( + () => [map.value, props.carList, props.shipList], + (val) => { + if (val[0]) { + setTimeout(() => { + clearOverlays() + val[1].map((item) => { + if (item.lng && item.lat) addMarker(carIcon, [item.lng, item.lat], [36, 50]) + }) + val[2].map((item) => { + if (item.lng && item.lat) addMarker(shipIcon, [item.lng, item.lat], [36, 50]) + }) + }, 1000) + } + }, + { immediate: true } ) - onMounted(() => {}) + onMounted(() => { + scenicChange = PubSub.subscribe('scenicChange', (msg, data) => { + lat.value = data.lat + lng.value = data.lng + }) + }) + onUnmounted(() => { + PubSub.unsubscribe(scenicChange) + })