You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.8 KiB
68 lines
1.8 KiB
<template>
|
|
<OpenLayerMap class="w-full map-container" v-if="inited" :markers="markers" :fences="fences" />
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import OpenLayerMap from './components/OpenLayerMap.vue'
|
|
import { getLastestDetectorData } from '@/api/gas'
|
|
import { HandDetector } from '@/api/gas/handdetector'
|
|
import { MarkerData } from './components/types/map.types'
|
|
import { Fence } from '@/api/gas/fence'
|
|
import { FenceApi } from '@/api/gas/fence'
|
|
import dayjs from 'dayjs'
|
|
const getDataTimer = ref<NodeJS.Timeout | null>(null)
|
|
const markers = ref<MarkerData[]>([])
|
|
const fences = ref<Fence[]>([])
|
|
const inited = ref(false)
|
|
const getMarkers = async () => {
|
|
console.log('getMarkers')
|
|
return await getLastestDetectorData().then((res: HandDetector[]) => {
|
|
res = res.filter((i) => i.enableStatus === 1)
|
|
var res2 = res.map((i) => {
|
|
return {
|
|
...i,
|
|
coordinates: [i.longitude, i.latitude],
|
|
data: [],
|
|
time: i.time ? dayjs(i.time).format('YYYY-MM-DD HH:mm:ss') : '',
|
|
value: i.value,
|
|
unit: i.unit
|
|
}
|
|
})
|
|
markers.value = res2 as unknown as any[]
|
|
inited.value = true
|
|
})
|
|
}
|
|
const getFences = async () => {
|
|
console.log('getFences')
|
|
return await FenceApi.getFencePage({
|
|
pageNo: 1,
|
|
pageSize: 100
|
|
}).then((res) => {
|
|
console.log('getFences', res)
|
|
let fencesData = res.list as Fence[]
|
|
fencesData = fencesData.map((i) => {
|
|
return {
|
|
...i,
|
|
fenceRange: JSON.parse(i.fenceRange)
|
|
}
|
|
})
|
|
fences.value = fencesData as unknown as Fence[]
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
getMarkers()
|
|
getFences()
|
|
getDataTimer.value = setInterval(() => {
|
|
getMarkers()
|
|
getFences()
|
|
}, 5000)
|
|
})
|
|
onUnmounted(() => {
|
|
clearInterval(getDataTimer.value as NodeJS.Timeout)
|
|
})
|
|
</script>
|
|
<style scoped>
|
|
.map-container {
|
|
width: 100%;
|
|
height: calc(100vh - 140px);
|
|
}
|
|
</style>
|
|
|