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 { HandDetectorData } from '@/api/gas/handdetector'
import { MarkerData,FenceData } 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<FenceData[]>([])
const inited = ref(false)
const getMarkers = async () => {
  console.log('getMarkers')
  return await getLastestDetectorData().then((res: HandDetectorData[]) => {
    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,
        gasStatus: i.gasStatus, //气体报警状态
        batteryStatus: i.batteryStatus, //电池报警状态
        fenceStatus: i.fenceStatus, //电子围栏报警状态
        onlineStatus: i.onlineStatus, //在线状态
        enableStatus: i.enableStatus //启用状态
      }
    })
    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 FenceData[]
  })
}
onMounted(() => {
  getMarkers()
  getFences()
  console.log('定时器，暂时关掉，太烦了')

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