位置轨迹

web/src/api/gas/handdetector/index.ts

@@ -28,10 +28,11 @@ export interface HandDetector {
 export interface HandDetectorData extends HandDetector {
   time?: number // 时间
   value?: number // 数值
-  gasStatus?: number //气体报警状态
-  batteryStatus?: number //电池报警状态
-  fenceStatus?: number //电子围栏报警状态
-  onlineStatus?: number //在线状态
+  battery?: number // 电池电量
+  gasStatus?: number //气体报警状态 （0：正常；1：报警）
+  batteryStatus?: number //电池报警状态 （0：正常；1：报警）
+  fenceStatus?: number //电子围栏报警状态 （0：正常；1：报警）
+  onlineStatus?: number //在线状态 （0：离线；1：在线）
 }
 
 // GAS手持探测器 API

web/src/api/gas/tdengine/index.ts

@@ -26,6 +26,11 @@ export interface tdengineOriginalStruct {
   ts: string | number // 更新时间
 }
 
+interface tdHistoricalSnStructParams {
+  sn: string // 设备编号
+  startTime?: string | number // 开始时间
+  endTime?: string | number // 结束时间
+}
 // 历史记录
 export const tdengineApi = {
   // 获取历史数据
@@ -35,5 +40,9 @@ export const tdengineApi = {
   // 获取原始数据
   getOriginalLogPage: async (params: any) => {
     return await request.get({ url: `/gas/tdengine/originalLogPage`, params })
+  },
+  // 获取轨迹数据
+  getHistoricalSn: async (params: tdHistoricalSnStructParams) => {
+    return await request.get<tdStruct[]>({ url: `/gas/tdengine/HistoricalSn`, params })
   }
 }

web/src/views/HandDevice/Home/components/OpenLayerMap.vue

@@ -22,7 +22,7 @@
       @stop="stopTrajectory"
       @speed-change="setTrajectorySpeed"
       @time-change="setTrajectoryTime"
-      @time-range-change="setTrajectoryTimeRange"
+      @time-range-change="setTrajectoryTimeRangeCustom"
     />
 
     <div v-if="panelVisible" class="info-panel">
@@ -81,6 +81,7 @@ const props = withDefaults(defineProps<MapProps>(), {
 const emit = defineEmits<{
   (e: 'fence-draw-complete', coordinates: [number, number][]): void
   (e: 'refresh-fences'): void
+  (e: 'time-range-change', range: { startTime: number; endTime: number }): void
 }>()
 // 响应式状态
 const showMarkers = ref(props.showMarkers)
@@ -127,22 +128,23 @@ const {
   setupTrajectoryWatcher,
   cleanup: cleanupTrajectory
 } = useTrajectoryControls()
-
+// 自定义设置轨迹时间范围
+const setTrajectoryTimeRangeCustom = (range: { startTime: number; endTime: number }) => {
+  setTrajectoryTimeRange(range)
+  emit('time-range-change', range)
+}
 const { setupMapEventListeners } = useMapEvents()
 
 // 控制函数
 const toggleTrajectories = () => {
-  
   if (showTrajectoriesStatus.value && trajectoryPlayState.value.isPlaying) {
     cleanupTrajectory()
   }
-    showTrajectoriesStatus.value = !showTrajectoriesStatus.value
+  showTrajectoriesStatus.value = !showTrajectoriesStatus.value
   // console.log(showTrajectoriesStatus.value, props.markers);
   if (showTrajectoriesStatus.value) {
     setTrajectoriesVisible(showTrajectoriesStatus.value, props.markers)
   }
-
-
 }
 
 const toggleMarkers = () => {
@@ -181,7 +183,7 @@ const init = () => {
 
     // 设置初始显示状态
     setMarkersVisible(showMarkers.value)
-    setTrajectoriesVisible(showTrajectoriesStatus.value, props.markers)
+    setTrajectoriesVisible(showTrajectoriesStatus.value, [])
     setFencesVisible(showFences.value)
 
     // 设置事件监听器,打开弹窗,点击设备 marker 时触发
@@ -199,9 +201,8 @@ const init = () => {
           panelVisible.value = true
         },
         onZoomEnd: (zoom: number) => {
-          // console.log('onZoomEnd', zoom)
+          console.log('onZoomEnd', zoom)
           services.markerService?.createMarkerLayer(props)
-          // updateMarkers(props.markers || [],props)
         }
         // refreshMarkerStyles
       }
@@ -212,7 +213,7 @@ const init = () => {
     // 设置状态监听器
     const { setupAllWatchers } = useMapWatchers({
       showMarkers,
-      showTrajectoriesStatus:showTrajectoriesStatus,
+      showTrajectoriesStatus: showTrajectoriesStatus,
       showFences,
       showDrawFences,
       setMarkersVisible,
@@ -259,6 +260,37 @@ const fitToMarkers = () => {
     services.mapService?.fitToMarkers(markerCoords)
   }
 }
+const setCenter = (coords: [number, number]) => {
+  console.log('setCenter', coords)
+
+  if (isMapInitialized) {
+    services.mapService?.setCenter(coords)
+  }
+}
+/**
+ * 显示轨迹
+ */
+const showTrajectory = (startTime: number, endTime: number, markers: MarkerData[]) => {
+  if (isMapInitialized) {
+    // if (!markers || markers.length === 0) {
+    //   return
+    // }
+    setTrajectoryTimeRange({ startTime, endTime })
+    var latLng: [number, number][] = []
+    markers.map((marker) => [
+      marker.data.map((item) => {
+        if (item.longitude && item.latitude) {
+          latLng.push([item.longitude, item.latitude])
+        }
+      })
+    ])
+    services.mapService?.fitToMarkers(latLng)
+    showTrajectoriesStatus.value = true
+    console.log('showTrajectory', latLng)
+
+    setTrajectoriesVisible(true, markers)
+  }
+}
 
 const refreshFences = () => {
   if (isMapInitialized) {
@@ -290,7 +322,7 @@ onMounted(() => {
   }, 100)
 })
 
-defineExpose({ refreshFences, fitToMarkers })
+defineExpose({ refreshFences, fitToMarkers, setCenter, showTrajectory })
 </script>
 
 <style scoped lang="scss">

web/src/views/HandDevice/Home/components/composables/useMapWatchers.ts

@@ -57,7 +57,7 @@ export const useMapWatchers = (options: WatchOptions) => {
         if (showMarkers.value) {
           showMarkers.value = false
         }
-        setTrajectoriesVisible(true, markers)
+        // setTrajectoriesVisible(true, markers)
       } else {
         setTrajectoriesVisible(false)
         // 隐藏轨迹时，显示标记

web/src/views/HandDevice/Home/components/composables/useTrajectoryControls.ts

@@ -23,15 +23,13 @@ export const useTrajectoryControls = () => {
    * 播放轨迹
    */
   const playTrajectory = () => {
-    debugger
     if (trajectoryPlayTimer.value) {
       window.clearInterval(trajectoryPlayTimer.value)
     }
-
+    trajectoryPlayState.value.isPlaying = true
     trajectoryPlayTimer.value = window.setInterval(() => {
       trajectoryPlayState.value.currentTime += 1000 * trajectoryPlayState.value.speed
-      trajectoryPlayState.value.isPlaying = true
-    }, 1000)
+    }, 500)
   }
 
   /**
@@ -40,9 +38,9 @@ export const useTrajectoryControls = () => {
   const pauseTrajectory = () => {
     if (trajectoryPlayTimer.value) {
       window.clearInterval(trajectoryPlayTimer.value)
-      trajectoryPlayTimer.value = null
-      trajectoryPlayState.value.isPlaying = false
     }
+    trajectoryPlayTimer.value = null
+    trajectoryPlayState.value.isPlaying = false
   }
 
   /**
@@ -51,9 +49,9 @@ export const useTrajectoryControls = () => {
   const stopTrajectory = () => {
     if (trajectoryPlayTimer.value) {
       window.clearInterval(trajectoryPlayTimer.value)
-      trajectoryPlayTimer.value = null
-      trajectoryPlayState.value.isPlaying = false
     }
+    trajectoryPlayTimer.value = null
+    trajectoryPlayState.value.isPlaying = false
   }
 
   /**
@@ -63,12 +61,12 @@ export const useTrajectoryControls = () => {
     trajectoryPlayState.value.speed = speed
 
     // 如果正在播放，重启定时器以应用新速度
-    if (trajectoryPlayTimer.value) {
-      window.clearInterval(trajectoryPlayTimer.value)
-      trajectoryPlayTimer.value = window.setInterval(() => {
-        trajectoryPlayState.value.currentTime += 1000 * trajectoryPlayState.value.speed
-      }, 1000)
-    }
+    // if (trajectoryPlayTimer.value) {
+    //   window.clearInterval(trajectoryPlayTimer.value)
+    //   trajectoryPlayTimer.value = window.setInterval(() => {
+    //     trajectoryPlayState.value.currentTime += 1000 * trajectoryPlayState.value.speed
+    //   }, 1000)
+    // }
   }
 
   /**
@@ -127,8 +125,8 @@ export const useTrajectoryControls = () => {
   const cleanup = () => {
     if (trajectoryPlayTimer.value) {
       window.clearInterval(trajectoryPlayTimer.value)
-      trajectoryPlayTimer.value = null
     }
+    trajectoryPlayTimer.value = null
   }
 
   return {

web/src/views/HandDevice/Home/components/constants/map.constants.ts

@@ -46,7 +46,8 @@ export const DEFAULT_MARKERS = []
 
 // 地图默认配置
 export const MAP_DEFAULTS = {
-  tileUrl: 'http://qtbj.icpcdev.site/roadmap/{z}/{x}/{y}.png',
+  // tileUrl: 'http://qtbj.icpcdev.site/roadmap/{z}/{x}/{y}.png',
+  tileUrl: 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
   center: [116.3912757, 39.906217] as [number, number],
   zoom: 10,
   maxZoom: 18,

web/src/views/HandDevice/Home/components/services/map.service.ts

@@ -98,6 +98,15 @@ export class MapService {
     })
   }
   /**
+   * 设置地图中心
+   */
+  setCenter(center: number[]): void {
+    if (!this.map) return
+    center = fromLonLat(center)
+    this.map.getView().setCenter(center)
+  }
+
+  /**
    * 获取地图实例
    */
   getMap(): Map | null {

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

@@ -8,6 +8,7 @@
         :showTrajectories="true"
         :markers="filterMarkers"
         :fences="fences"
+        @time-range-change="timeRangeChange"
       />
       <TopPanel
         v-model="search"
@@ -18,32 +19,44 @@
     <div class="markerList">
       <el-scrollbar height="100%">
         <!--marker列表  -->
-        <el-collapse accordion @change="collapseChange">
-          <el-collapse-item :name="item.name" v-for="item in filterMarkers" :key="item.id">
+        <el-collapse accordion>
+          <el-collapse-item :name="item.sn" v-for="item in filterMarkers" :key="item.id">
             <template #title>
               <div class="flex flex-row w-100%">
                 <div class="flex-1 text-left font-500">
                   {{ item.name }}
                 </div>
                 <div class="text-gray-500 font-400 text-12px">
-                  {{ item.onlineStatus === 1 ? '在线' : '离线' }}
+                  {{ item.onlineStatus === 1 ? '在线' : '在线' }}
                 </div>
               </div>
             </template>
             <div class="markerList-content">
               <div> <span>SN：</span>{{ item.sn }}</div>
               <div> <span>类型：</span>{{ item.gasChemical }}</div>
+              <hr />
               <div> <span>气体状态：</span>{{ item.gasStatus }}</div>
               <div> <span>电池告警状态：</span>{{ item.batteryStatus }}</div>
-              <div> <span>电池：</span>{{ item.battery }}</div>
+
               <div> <span>围栏状态：</span>{{ item.fenceStatus }}</div>
-              <!-- <div> <span>在线状态：</span>{{ item.onlineStatus }}</div> -->
+              <div> <span>在线状态：</span>{{ item.onlineStatus }}</div>
+              <div> <span>启用状态：</span>{{ item.enableStatus === 1 ? '启用' : '备用' }}</div>
+              <hr />
+              <div> <span>电量：</span>{{ item.battery }}</div>
               <div> <span>数值：</span>{{ item.value }} {{ item.unit }}</div>
               <div> <span>时间：</span>{{ dayjs(item.time).format('YYYY-MM-DD HH:mm:ss') }}</div>
-              <!-- <div>
-                <el-button type="primary" size="small">定位</el-button>
-                <el-button type="primary" size="small">轨迹</el-button>
-              </div> -->
+              <div>
+                <el-button
+                  type="primary"
+                  size="small"
+                  v-if="item.latitude && item.longitude"
+                  @click="setCenter(item)"
+                  >定位</el-button
+                >
+                <el-button type="primary" size="small" @click="onClickTrajectory(item)"
+                  >轨迹</el-button
+                >
+              </div>
 
               <!-- {{ item }} -->
             </div>
@@ -67,7 +80,7 @@ import { tdengineApi, tdStruct, tdQuery } from '@/api/gas/tdengine/index'
 import { MarkerData, FenceData } from './components/types/map.types'
 
 import { useHandDetectorStore } from '@/store/modules/handDetector'
-
+import { ElMessage } from 'element-plus'
 import dayjs from 'dayjs'
 
 const handDetectorStore = useHandDetectorStore() // 手持探测器 store
@@ -78,9 +91,6 @@ const fences = ref<FenceData[]>([])
 
 const mapRef = ref<typeof OpenLayerMap>()
 const search = ref('')
-function collapseChange(name: string) {
-  console.log('collapseChange', name)
-}
 watch(
   () => search.value,
   (newSearch, oldSearch) => {
@@ -90,6 +100,7 @@ watch(
   },
   { immediate: false }
 )
+
 // 手持设备数量
 const handDetectorCount = computed(() => markers.value.length)
 const onlineCount = computed(() => markers.value.filter((item) => item.onlineStatus === 1).length)
@@ -128,7 +139,6 @@ const getMarkers = async () => {
       }
     })
     markers.value = res2 as unknown as any[]
-    getMarkersHistory()
   })
 }
 const getFences = async () => {
@@ -145,31 +155,62 @@ const getFences = async () => {
     fences.value = fencesData as unknown as FenceData[]
   })
 }
-// const markersHistory = ref<tdStruct[]>([])
-const getMarkersHistory = async () => {
+// 定位到手持设备
+function setCenter(item: MarkerData) {
+  console.log('setCenter', item)
+  if (item.longitude && item.latitude) {
+    mapRef.value?.setCenter([item.longitude || 0, item.latitude || 0])
+  }
+}
+
+let currentMarker: MarkerData | null = null
+var trajectoryTimeRange = ref([dayjs().subtract(1, 'hour').valueOf(), dayjs().valueOf()])
+// 时间范围改变
+function timeRangeChange(range: { startTime: number; endTime: number }) {
+  console.log('timeRangeChange', range)
+  trajectoryTimeRange.value = [range.startTime,range.endTime]
+  if (currentMarker) {
+    showTrajectory(currentMarker)
+  }
+}
+// 显示手持设备轨迹
+async function showTrajectory(item: MarkerData) {
+  console.log('showTrajectory', item)
   try {
-    const data = await tdengineApi.getPage({
-      pageNo: 1,
-      pageSize: 100,
-      sn: '867989072729904'
-    })
-    // markersHistory.value = data.list
-    markers.value.map((item) => {
-      if (item.sn === '867989072729904') {
-        item.data = data.list.map((j) => {
-          return {
-            ...j,
-            lng: j.longitude,
-            lat: j.latitude,
-            time: dayjs(j.ts).format('YYYY-MM-DD HH:mm:ss'),
-            timeStr: dayjs(j.ts).format('YYYY-MM-DD HH:mm:ss')
-          }
-        })
-      }
+    if (!item.sn) {
+      ElMessage.error('手持设备无效')
+      return
+    }
+    currentMarker = item
+    const data = await tdengineApi.getHistoricalSn({
+      sn: item.sn,
+      startTime: dayjs(trajectoryTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss'),
+      endTime: dayjs(trajectoryTimeRange.value[1]).format('YYYY-MM-DD HH:mm:ss')
+
+      // sn: '867989072729904'
     })
+
+    item.data = data
+      .filter((i) => i.longitude && i.latitude)
+      .map((j) => {
+        return {
+          ...j,
+          lng: j.longitude,
+          lat: j.latitude,
+          time: dayjs(j.ts).format('YYYY-MM-DD HH:mm:ss'),
+          timeStr: dayjs(j.ts).format('YYYY-MM-DD HH:mm:ss')
+        }
+      })
+    mapRef.value?.showTrajectory(trajectoryTimeRange.value[0], trajectoryTimeRange.value[1], [item])
   } finally {
   }
 }
+// 点击轨迹
+function onClickTrajectory(item: MarkerData) {
+  console.log('onClickTrajectory', item)
+  trajectoryTimeRange.value = [dayjs().subtract(1, 'hour').valueOf(), dayjs().valueOf()]
+  showTrajectory(item)
+}
 
 onMounted(() => {
   getMarkers()