hand_device/web/src/views/HandDevice/Home/index.vue

<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'
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)
    res = res.map((i) => {
      return {
        ...i,
        coordinates: [i.longitude, i.latitude],
        data: []
      }
    })
    markers.value = res 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>