lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：完善功能

Browse Source
This commit is contained in:
zjc
2025-01-26 01:27:56 +08:00
parent fd726ead46
commit 21fb9a9c59
11 changed files with 165 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Header/index.vue
View File

@@ -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

2
src/components/TicketSource/index.vue
View File

@@ -91,7 +91,7 @@
}
}
},
color: ['#F15A25', '#01FEFE', '#12B5FD'],
// color: ['#F15A25', '#01FEFE', '#12B5FD'],
polar: {
center: ['50%', '40%']
},

6
src/hooks/map.js
View File

@@ -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 }
}

5
src/hooks/socket.js
View File

@@ -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)
}
}

12
src/stores/home.js
View File

@@ -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)

25
src/views/home/components/box-2.vue
View File

@@ -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)

25
src/views/home/index.vue
View File

@@ -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)
})
</script>

53
src/views/scenic/components/big-car-ship-map.vue
View File

@@ -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)
})
</script>
<style scoped lang="scss">

28
src/views/scenic/components/box-2.vue
View File

@@ -283,7 +283,7 @@
<div class="label">运营船只</div>
<div class="value flex">
<countup :end-val="scenicStore.carShipData.ship.count?.drivingCount" />
<span class="suffix">辆</span>
<span class="suffix">只</span>
</div>
</div>
<div class="car-item">
@@ -303,7 +303,11 @@
</div>
</div>
</div>
<BigCarShipMap v-model="show" />
<big-car-ship-map
v-model="show"
:carList="scenicStore.carShipData.car.list"
:shipList="scenicStore.carShipData.ship.list"
/>
</template>
<script setup>
@@ -319,6 +323,8 @@
import { useMap } from '@/hooks/map'
import { useScenicStore } from '@/stores/scenic'
import PubSub from 'pubsub-js'
const scenicStore = useScenicStore()
const { initMap, addMarker } = useMap()
@@ -372,17 +378,22 @@
})
let show = ref(false)
let scenicChange = null
watch(
() => scenicStore.carShipData,
(val) => {
if (val.car.list.length > 0) {
if (val.car.list.length) {
setTimeout(() => {
val.car.list.map((item) => {
addMarker(carIcon, [109.551419, 31.050001], [36, 50])
addMarker(carIcon, [item.lng, item.lat], [36, 50])
})
}, 1000)
}
if (val.ship.list.length) {
setTimeout(() => {
val.ship.list.map((item) => {
addMarker(shipIcon, [109.551671, 31.04847], [36, 50])
addMarker(shipIcon, [item.lng, item.lat], [36, 50])
})
}, 1000)
}
@@ -391,7 +402,12 @@
)
onMounted(() => {
initMap('car-ship', 109.552461, 31.049607, 15)
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
initMap('car-ship', data.lng, data.lat, 15)
})
})
onUnmounted(() => {
PubSub.unsubscribe(scenicChange)
})
</script>

24
src/views/scenic/index.vue
View File

@@ -6,6 +6,7 @@
<script setup>
import box1 from './components/box-1.vue'
import box2 from './components/box-2.vue'
import { useWebSocket } from '@/hooks/socket'
import { useScenicStore } from '@/stores/scenic'
import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
@@ -19,6 +20,8 @@
)
let scenicSpotId = ref('')
let scenicChange = null
let timer = null
watch(
() => [isConnected.value, scenicSpotId.value],
@@ -34,6 +37,7 @@
() => dataRes.value,
(val) => {
if (val) {
console.log(val, '景区接受消息')
switch (val.type) {
case 'wordkOrderlist':
scenicStore.setWordkOrderList(val.data)
@@ -66,17 +70,33 @@
scenicStore.setCarShipData(val.data)
break
}
if (!timer) sendCarShip()
}
}
)
let scenicChange = null
const sendCarShip = (e) => {
timer = setInterval(() => {
if (isConnected.value) {
console.log('定时发送车船消息22')
sendMessage(
JSON.stringify({
action: 'start',
type: 'carShipData',
scenicSpotId: scenicSpotId.value
})
)
}
}, 5000)
}
onMounted(() => {
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
scenicSpotId.value = data.scenicSpotId
})
})
onUnmounted(() => {
PubSub.unsubscribe(scenicChange)
if (scenicChange) PubSub.unsubscribe(scenicChange)
if (timer) clearInterval(timer)
})
</script>

7
vite.config.js
View File

@@ -27,6 +27,13 @@ export default defineConfig({
server: {
hmr: true,
host: '0.0.0.0'
// proxy: {
// '/': {
// // 目标服务器的地址
// target: 'http://36.138.38.16:8001',
// changeOrigin: true
// }
// }
},
resolve: {
alias: {