From 2d7194bb918f6c0a2c1fa2128ea82491a34399a6 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Sat, 8 Nov 2025 01:11:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9C=B0=E5=9B=BE=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96=EF=BC=8C=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E8=BD=A8=E8=BF=B9=E5=B1=95=E7=A4=BA=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/td/tdEngine.js                |    9 +
 src/permission.js                     |    2 +-
 src/router/index.js                   |   12 +
 src/views/mapTest/allTrajectories.vue | 1121 +++++++++++++++++++++++++
 src/views/mapTest/index.vue           |  459 ++++++----
 src/views/mapTest/trajectory.vue      |  737 ++++++++++++++++
 6 files changed, 2158 insertions(+), 182 deletions(-)
 create mode 100644 src/views/mapTest/allTrajectories.vue
 create mode 100644 src/views/mapTest/trajectory.vue

diff --git a/src/api/td/tdEngine.js b/src/api/td/tdEngine.js
index 7cf7393..3558c72 100644
--- a/src/api/td/tdEngine.js
+++ b/src/api/td/tdEngine.js
@@ -7,3 +7,12 @@ export function getLastData() {
     method: 'get'
   })
 }
+
+// 获取设备历史轨迹
+export function getDeviceTrajectory(deviceId, params) {
+  return request({
+    url: `/tdengine/td/trajectory/${deviceId}`,
+    method: 'get',
+    params: params
+  })
+}
diff --git a/src/permission.js b/src/permission.js
index 02fe4ac..1f33195 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -11,7 +11,7 @@ import usePermissionStore from '@/store/modules/permission'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register', '/redirectTo', '/bdsLocation']
+const whiteList = ['/login', '/register', '/redirectTo', '/bdsLocation', '/trajectory', '/allTrajectories']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
diff --git a/src/router/index.js b/src/router/index.js
index 21558ff..1ef88f5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -107,6 +107,18 @@ export const constantRoutes = [
     component: () => import('@/views/mapTest/index.vue'),
     hidden: true,
     meta: { title: '北斗上位机实时显示位置' }
+  },
+  {
+    path: '/trajectory',
+    component: () => import('@/views/mapTest/trajectory.vue'),
+    hidden: true,
+    meta: { title: '设备历史轨迹' }
+  },
+  {
+    path: '/allTrajectories',
+    component: () => import('@/views/mapTest/allTrajectories.vue'),
+    hidden: true,
+    meta: { title: '所有设备历史轨迹' }
   }
 ]
 
diff --git a/src/views/mapTest/allTrajectories.vue b/src/views/mapTest/allTrajectories.vue
new file mode 100644
index 0000000..8650aaa
--- /dev/null
+++ b/src/views/mapTest/allTrajectories.vue
@@ -0,0 +1,1121 @@
+<template>
+  <div class="all-trajectories-container">
+    <div class="header-bar">
+      <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
+      <h2>所有设备历史轨迹</h2>
+      <div class="time-selector">
+        <div class="sample-count-input">
+          <label>采样数:</label>
+          <el-input-number
+            v-model="sampleCount"
+            :min="1"
+            :max="200"
+            :step="5"
+            :precision="0"
+            controls-position="right"
+            placeholder="采样数"
+            style="width: 150px;"
+            @change="fetchAllTrajectories"
+          />
+        </div>
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          @change="handleTimeChange"
+        />
+        <el-button type="primary" @click="fetchAllTrajectories" :loading="loading">
+          <el-icon><Search /></el-icon>
+          查询轨迹
+        </el-button>
+      </div>
+    </div>
+    
+    <div id="allTrajectoriesMap" class="trajectory-map" v-loading="loading" element-loading-text="加载轨迹数据中..."></div>
+    
+    <!-- 设备列表面板 -->
+    <div class="device-panel">
+      <div class="panel-header">
+        <h3>设备列表 <span class="device-count">({{ devices.length }})</span></h3>
+      </div>
+      <div class="action-buttons">
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="showAllTrajectories"
+          :disabled="devicesWithDataCount === 0"
+        >
+          显示全部
+        </el-button>
+        <el-button 
+          size="small" 
+          @click="hideAllTrajectories"
+          :disabled="visibleDeviceCount === 0"
+        >
+          取消全部
+        </el-button>
+      </div>
+      <div class="device-list">
+        <div 
+          v-for="device in devices" 
+          :key="device.id"
+          class="device-item"
+          :class="{ active: device.visible }"
+          @click="toggleDeviceTrajectory(device)"
+        >
+          <div class="device-info">
+            <el-icon v-if="device.visible" class="icon-visible"><View /></el-icon>
+            <el-icon v-else class="icon-hidden"><Hide /></el-icon>
+            <span class="device-name">{{ device.name }}</span>
+          </div>
+          <div class="device-stats">
+            <span class="point-count">{{ device.pointCount || 0 }}点</span>
+          </div>
+          <div class="color-indicator" :style="{ backgroundColor: device.color }"></div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 信息面板 -->
+    <div class="info-panel">
+      <h3>轨迹信息</h3>
+      <p>设备总数: {{ devices.length }}</p>
+      <p>显示设备: {{ visibleDeviceCount }}</p>
+      <p>轨迹点数: {{ totalPointCount }}</p>
+      <p>当前缩放: {{ currentZoom }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup name="AllTrajectories">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import { initMap, initLayer, addImage } from '@/utils/map'
+import { mapConfig, layerUrl, imageArr } from '@/config/map'
+import { PointLayer, LineLayer, Marker, Popup } from '@antv/l7'
+import { getLastData, getDeviceTrajectory } from '@/api/td/tdEngine'
+import { ElMessage } from 'element-plus'
+import { ArrowLeft, Search, View, Hide } from '@element-plus/icons-vue'
+
+const router = useRouter()
+const scene = ref(null)
+const timeRange = ref([])
+const devices = ref([])
+const loading = ref(false)
+const currentZoom = ref(14)
+const trajectoryLayers = ref({}) // 存储每个设备的图层
+const sampleCount = ref(10) // 采样数，默认10
+const currentPopup = ref(null) // 存储当前显示的弹窗
+const popupTimer = ref(null) // 存储弹窗定时器
+
+// 预定义颜色数组
+const colors = [
+  '#1890FF', '#52C41A', '#FA8C16', '#F5222D', '#722ED1',
+  '#13C2C2', '#EB2F96', '#FAAD14', '#2F54EB', '#FA541C'
+]
+
+// 计算显示的设备数量
+const visibleDeviceCount = computed(() => {
+  return devices.value.filter(d => d.visible).length
+})
+
+// 计算有数据的设备数量
+const devicesWithDataCount = computed(() => {
+  return devices.value.filter(d => d.pointCount > 0).length
+})
+
+// 计算点位总数（只统计显示的设备）
+const totalPointCount = computed(() => {
+  return devices.value
+    .filter(d => d.visible)
+    .reduce((sum, d) => sum + (d.pointCount || 0), 0)
+})
+
+// 返回上一页
+const goBack = () => {
+  router.back()
+}
+
+// 时间范围改变
+const handleTimeChange = (val) => {
+  // 时间范围改变处理
+}
+
+// 获取所有设备列表
+const fetchDeviceList = async () => {
+  try {
+    const response = await getLastData()
+    devices.value = response.map((item, index) => ({
+      id: item.deviceId,
+      name: `设备 ${item.deviceId}`,
+      visible: false,
+      color: colors[index % colors.length],
+      pointCount: 0,
+      trajectoryPoints: []
+    }))
+  } catch (error) {
+    console.error('获取设备列表失败:', error)
+    ElMessage.error('获取设备列表失败')
+  }
+}
+
+// 获取所有设备的轨迹数据
+const fetchAllTrajectories = async () => {
+  if (devices.value.length === 0) {
+    ElMessage.warning('暂无设备数据')
+    return
+  }
+  
+  // 先清除所有已显示的轨迹
+  devices.value.forEach(device => {
+    if (device.visible) {
+      removeDeviceTrajectory(device)
+      device.visible = false
+    }
+  })
+  
+  loading.value = true
+  try {
+    const params = {
+      sampleCount: sampleCount.value
+    }
+    
+    if (timeRange.value && timeRange.value.length === 2) {
+      params.startTime = timeRange.value[0]
+      params.endTime = timeRange.value[1]
+    }
+    
+    // 分批并发请求，每批10个设备，避免并发过多导致超时
+    const batchSize = 10
+    const allResults = []
+    const failedDevices = []
+    
+    for (let i = 0; i < devices.value.length; i += batchSize) {
+      const batch = devices.value.slice(i, i + batchSize)
+      
+      const batchPromises = batch.map(device => {
+        return getDeviceTrajectory(device.id, params)
+          .then(response => {
+            const trajectoryData = response.data || response
+            if (trajectoryData && trajectoryData.length > 0) {
+              const points = trajectoryData.map(item => ({
+                longitude: item.longitude,
+                latitude: item.latitude,
+                time: item.time || item.createTime,
+                deviceId: item.deviceId
+              }))
+              points.sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime())
+              return { deviceId: device.id, points, success: true }
+            }
+            return { deviceId: device.id, points: [], success: true }
+          })
+          .catch(error => {
+            console.error(`获取设备 ${device.id} 轨迹失败:`, error)
+            failedDevices.push(device.name)
+            return { deviceId: device.id, points: [], success: false }
+          })
+      })
+      
+      const batchResults = await Promise.all(batchPromises)
+      allResults.push(...batchResults)
+    }
+    
+    // 更新设备轨迹数据
+    allResults.forEach(result => {
+      const device = devices.value.find(d => d.id === result.deviceId)
+      if (device) {
+        device.trajectoryPoints = result.points
+        device.pointCount = result.points.length
+      }
+    })
+    
+    const totalPoints = allResults.reduce((sum, r) => sum + r.points.length, 0)
+    const devicesWithData = allResults.filter(r => r.points.length > 0).length
+    const successCount = allResults.filter(r => r.success).length
+    
+    // 显示查询结果
+    if (failedDevices.length > 0) {
+      ElMessage.warning({
+        message: `查询完成：成功 ${successCount}/${devices.value.length} 个设备，${failedDevices.length} 个设备查询失败（${failedDevices.slice(0, 3).join(', ')}${failedDevices.length > 3 ? '等' : ''}）`,
+        duration: 3000
+      })
+    }
+    
+    if (totalPoints > 0) {
+      ElMessage.success(`成功获取轨迹数据：${devicesWithData}/${devices.value.length} 个设备有数据，共 ${totalPoints} 个轨迹点`)
+      
+      // 自动显示前10个有数据的设备的轨迹
+      let displayedCount = 0
+      const maxAutoDisplay = 10
+      
+      for (const device of devices.value) {
+        if (device.pointCount > 0 && displayedCount < maxAutoDisplay) {
+          device.visible = true
+          drawDeviceTrajectory(device)
+          displayedCount++
+        }
+      }
+      
+      if (displayedCount > 0) {
+        ElMessage.info(`已自动显示 ${displayedCount} 个设备的轨迹，可点击左侧列表切换显示`)
+        
+        // 调整地图视野到所有有数据设备的居中位置
+        fitBoundsToAllDevices()
+      }
+    } else {
+      ElMessage.warning('所有设备在该时间段内均无轨迹数据')
+    }
+  } catch (error) {
+    console.error('获取轨迹数据失败:', error)
+    ElMessage.error('获取轨迹数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 初始化地图
+const initializeMap = async () => {
+  try {
+    const mapScene = await initMap('allTrajectoriesMap', mapConfig)
+    scene.value = mapScene
+    
+    initLayer(mapScene, layerUrl)
+    addImage(mapScene, imageArr)
+    
+    // 监听缩放事件
+    mapScene.on('zoom', () => {
+      currentZoom.value = Math.round(mapScene.getZoom())
+    })
+  } catch (error) {
+    console.error('地图初始化失败:', error)
+    ElMessage.error('地图初始化失败')
+  }
+}
+
+// 切换设备轨迹显示
+const toggleDeviceTrajectory = (device) => {
+  // 如果设备没有轨迹数据，提示用户
+  if (!device.trajectoryPoints || device.trajectoryPoints.length === 0) {
+    ElMessage.warning(`设备 ${device.name} 在当前时间段内暂无轨迹数据`)
+    device.visible = false
+    return
+  }
+  
+  device.visible = !device.visible
+  
+  if (device.visible) {
+    drawDeviceTrajectory(device)
+  } else {
+    removeDeviceTrajectory(device)
+  }
+}
+
+// 显示所有有数据的设备轨迹
+const showAllTrajectories = () => {
+  let displayedCount = 0
+  
+  devices.value.forEach(device => {
+    if (device.pointCount > 0 && !device.visible) {
+      device.visible = true
+      drawDeviceTrajectory(device)
+      displayedCount++
+    }
+  })
+  
+  if (displayedCount > 0) {
+    ElMessage.success(`已显示所有 ${devicesWithDataCount.value} 个有数据的设备轨迹`)
+  } else {
+    ElMessage.info('所有有数据的设备轨迹已在显示中')
+  }
+}
+
+// 隐藏所有设备轨迹
+const hideAllTrajectories = () => {
+  let hiddenCount = 0
+  
+  devices.value.forEach(device => {
+    if (device.visible) {
+      device.visible = false
+      removeDeviceTrajectory(device)
+      hiddenCount++
+    }
+  })
+  
+  if (hiddenCount > 0) {
+    ElMessage.success(`已隐藏 ${hiddenCount} 个设备的轨迹`)
+  }
+}
+
+// 绘制单个设备的轨迹
+const drawDeviceTrajectory = (device) => {
+  if (!scene.value) {
+    ElMessage.warning('地图未初始化，请稍后再试')
+    device.visible = false
+    return
+  }
+  
+  if (!device.trajectoryPoints || device.trajectoryPoints.length === 0) {
+    ElMessage.warning(`设备 ${device.name} 暂无轨迹数据`)
+    device.visible = false
+    return
+  }
+  
+  try {
+    // 构建轨迹线数据
+    const lineData = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: { deviceId: device.id },
+        geometry: {
+          type: 'LineString',
+          coordinates: device.trajectoryPoints.map(p => [p.longitude, p.latitude])
+        }
+      }]
+    }
+    
+    // 创建轨迹线图层
+    const lineLayer = new LineLayer({
+      name: `line_${device.id}`,
+      zIndex: 101
+    })
+      .source(lineData)
+      .size(4)
+      .shape('line')
+      .color(device.color)
+      .style({
+        lineType: 'solid',
+        opacity: 0.8
+      })
+    
+    scene.value.addLayer(lineLayer)
+    
+    // 创建轨迹点图层
+    const pointLayer = new PointLayer({
+      name: `point_${device.id}`,
+      zIndex: 102
+    })
+      .source(device.trajectoryPoints.map((point, index) => ({
+        ...point,
+        index: index + 1, // 添加序号，从1开始
+        deviceName: device.name,
+        deviceColor: device.color
+      })), {
+        parser: {
+          type: 'json',
+          x: 'longitude',
+          y: 'latitude'
+        }
+      })
+      .shape('circle')
+      .size(6)
+      .color(device.color)
+      .style({
+        opacity: 0.6,
+        strokeWidth: 2,
+        stroke: '#fff'
+      })
+    
+    // 添加鼠标悬停事件，显示详细信息
+    pointLayer.on('mousemove', (e) => {
+      const feature = e.feature
+      if (feature) {
+        // 先关闭之前的弹窗
+        if (currentPopup.value) {
+          currentPopup.value.remove()
+        }
+        
+        const popup = new Popup({
+          offsets: [0, -15],
+          closeButton: false
+        })
+          .setLnglat([feature.longitude, feature.latitude])
+          .setHTML(`
+            <div class="trajectory-tooltip">
+              <div class="tooltip-header">
+                <div class="header-icon">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                    <circle cx="12" cy="12" r="3" fill="currentColor"/>
+                  </svg>
+                </div>
+                <div class="header-title">轨迹点 #${feature.index}</div>
+              </div>
+              <div class="tooltip-content">
+                <div class="info-row">
+                  <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  </svg>
+                  <span class="label">时间</span>
+                  <span class="value">${feature.time}</span>
+                </div>
+                <div class="info-row">
+                  <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                    <path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  </svg>
+                  <span class="label">经度</span>
+                  <span class="value">${feature.longitude.toFixed(6)}°</span>
+                </div>
+                <div class="info-row">
+                  <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                    <path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  </svg>
+                  <span class="label">纬度</span>
+                  <span class="value">${feature.latitude.toFixed(6)}°</span>
+                </div>
+              </div>
+            </div>
+          `)
+        scene.value.addPopup(popup)
+        currentPopup.value = popup
+      }
+    })
+    
+    // 鼠标移出时关闭弹窗
+    pointLayer.on('mouseout', () => {
+      if (currentPopup.value) {
+        currentPopup.value.remove()
+        currentPopup.value = null
+      }
+    })
+    
+    // 鼠标移入时改变光标样式
+    pointLayer.on('mouseenter', () => {
+      document.body.style.cursor = 'pointer'
+    })
+    
+    pointLayer.on('mouseleave', () => {
+      document.body.style.cursor = ''
+    })
+    
+    scene.value.addLayer(pointLayer)
+    
+    // 创建起点和终点标记
+    const startPoint = device.trajectoryPoints[0]
+    const startMarker = createMarker(startPoint, '起', device.color)
+    scene.value.addMarker(startMarker)
+    
+    const endPoint = device.trajectoryPoints[device.trajectoryPoints.length - 1]
+    const endMarker = createMarker(endPoint, '终', device.color)
+    scene.value.addMarker(endMarker)
+    
+    // 保存图层引用
+    trajectoryLayers.value[device.id] = { lineLayer, pointLayer, startMarker, endMarker }
+  } catch (error) {
+    console.error(`绘制设备 ${device.name} 轨迹失败:`, error)
+    ElMessage.error(`绘制设备 ${device.name} 轨迹失败`)
+  }
+}
+
+// 移除单个设备的轨迹
+const removeDeviceTrajectory = (device) => {
+  const layers = trajectoryLayers.value[device.id]
+  if (!layers || !scene.value) return
+  
+  try {
+    if (layers.lineLayer) {
+      scene.value.removeLayer(layers.lineLayer)
+    }
+    if (layers.pointLayer) {
+      scene.value.removeLayer(layers.pointLayer)
+    }
+    if (layers.startMarker) {
+      layers.startMarker.remove()
+    }
+    if (layers.endMarker) {
+      layers.endMarker.remove()
+    }
+    
+    delete trajectoryLayers.value[device.id]
+  } catch (error) {
+    console.error(`移除设备 ${device.name} 轨迹失败:`, error)
+  }
+}
+
+// 创建标记点
+const createMarker = (point, label, color) => {
+  const el = document.createElement('div')
+  el.className = 'trajectory-marker'
+  el.style.cursor = 'pointer' // 直接设置为pointer，不再动态切换
+  el.innerHTML = `
+    <div class="marker-content" style="background: ${color};">
+      <span>${label}</span>
+    </div>
+  `
+  
+  // 添加鼠标悬停事件
+  el.addEventListener('mouseenter', () => {
+    // 清除可能存在的隐藏定时器
+    if (popupTimer.value) {
+      clearTimeout(popupTimer.value)
+      popupTimer.value = null
+    }
+    
+    // 如果已有弹窗，直接返回，不重复创建
+    if (currentPopup.value) {
+      return
+    }
+    
+    const popup = new Popup({
+      offsets: [0, -45],
+      closeButton: false,
+      closeOnClick: false
+    })
+      .setLnglat([point.longitude, point.latitude])
+      .setHTML(`
+        <div class="trajectory-tooltip">
+          <div class="tooltip-header">
+            <div class="header-icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                <path d="M12 8l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+            <div class="header-title">${label}</div>
+          </div>
+          <div class="tooltip-content">
+            <div class="info-row">
+              <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+              <span class="label">时间</span>
+              <span class="value">${point.time}</span>
+            </div>
+            <div class="info-row">
+              <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                <path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+              <span class="label">经度</span>
+              <span class="value">${point.longitude.toFixed(6)}°</span>
+            </div>
+            <div class="info-row">
+              <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                <path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+              <span class="label">纬度</span>
+              <span class="value">${point.latitude.toFixed(6)}°</span>
+            </div>
+          </div>
+        </div>
+      `)
+    scene.value.addPopup(popup)
+    currentPopup.value = popup
+  })
+  
+  // 鼠标离开时延迟关闭，防止快速进出导致闪烁
+  el.addEventListener('mouseleave', () => {
+    // 延迟300ms关闭，如果在这期间鼠标又进入，则不关闭
+    popupTimer.value = setTimeout(() => {
+      if (currentPopup.value) {
+        currentPopup.value.remove()
+        currentPopup.value = null
+      }
+    }, 300)
+  })
+  
+  return new Marker({
+    element: el,
+    anchor: 'center'
+  }).setLnglat([point.longitude, point.latitude])
+}
+
+// 调整地图视野到设备轨迹范围
+const fitBoundsToDevice = (device) => {
+  if (!scene.value || !device.trajectoryPoints || device.trajectoryPoints.length === 0) return
+
+  const lngs = device.trajectoryPoints.map(p => p.longitude)
+  const lats = device.trajectoryPoints.map(p => p.latitude)
+  
+  const minLng = Math.min(...lngs)
+  const maxLng = Math.max(...lngs)
+  const minLat = Math.min(...lats)
+  const maxLat = Math.max(...lats)
+  
+  const centerLng = (minLng + maxLng) / 2
+  const centerLat = (minLat + maxLat) / 2
+  
+  scene.value.setCenter([centerLng, centerLat])
+  scene.value.setZoom(14)
+  currentZoom.value = 14
+}
+
+// 调整地图视野到所有显示设备的居中位置
+const fitBoundsToAllDevices = () => {
+  if (!scene.value) return
+  
+  // 只收集当前显示的设备的轨迹点
+  const allPoints = []
+  devices.value.forEach(device => {
+    if (device.visible && device.trajectoryPoints && device.trajectoryPoints.length > 0) {
+      allPoints.push(...device.trajectoryPoints)
+    }
+  })
+  
+  if (allPoints.length === 0) return
+  
+  // 计算所有点的边界
+  const lngs = allPoints.map(p => p.longitude)
+  const lats = allPoints.map(p => p.latitude)
+  
+  const minLng = Math.min(...lngs)
+  const maxLng = Math.max(...lngs)
+  const minLat = Math.min(...lats)
+  const maxLat = Math.max(...lats)
+  
+  // 计算中心点
+  const centerLng = (minLng + maxLng) / 2
+  const centerLat = (minLat + maxLat) / 2
+  
+  // 设置地图中心
+  scene.value.setCenter([centerLng, centerLat])
+  
+  // 根据边界范围计算合适的缩放级别
+  const lngRange = maxLng - minLng
+  const latRange = maxLat - minLat
+  const maxRange = Math.max(lngRange, latRange)
+  
+  let zoom = 13 // 默认缩放级别
+  if (maxRange > 1) {
+    zoom = 10
+  } else if (maxRange > 0.5) {
+    zoom = 11
+  } else if (maxRange > 0.1) {
+    zoom = 12
+  } else if (maxRange > 0.01) {
+    zoom = 14
+  } else {
+    zoom = 15
+  }
+  
+  scene.value.setZoom(zoom)
+  currentZoom.value = zoom
+}
+
+onMounted(async () => {
+  // 设置默认时间范围为最近24小时
+  const now = new Date()
+  const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+  
+  const formatDateTime = (date) => {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const hours = String(date.getHours()).padStart(2, '0')
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    const seconds = String(date.getSeconds()).padStart(2, '0')
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+  }
+  
+  timeRange.value = [
+    formatDateTime(yesterday),
+    formatDateTime(now)
+  ]
+  
+  await initializeMap()
+  await fetchDeviceList()
+  
+  // 自动查询所有设备的轨迹数据
+  if (devices.value.length > 0) {
+    await fetchAllTrajectories()
+  }
+})
+
+onBeforeUnmount(() => {
+  // 清理所有图层
+  Object.keys(trajectoryLayers.value).forEach(deviceId => {
+    const device = devices.value.find(d => d.id === deviceId)
+    if (device) {
+      removeDeviceTrajectory(device)
+    }
+  })
+  
+  // 销毁地图实例
+  if (scene.value) {
+    try {
+      scene.value.destroy()
+      scene.value = null
+    } catch (e) {
+      console.warn('Scene destroy error:', e)
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.all-trajectories-container {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  
+  .header-bar {
+    display: flex;
+    align-items: center;
+    padding: 16px 24px;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+    gap: 20px;
+    
+    h2 {
+      margin: 0;
+      font-size: 18px;
+      color: #333;
+      flex: 1;
+    }
+    
+    .time-selector {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      transform: translateX(-300px); // 整体向左平移400px
+      
+      .sample-count-input {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        
+        label {
+          font-size: 14px;
+          color: #333;
+          white-space: nowrap;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+  
+  .trajectory-map {
+    flex: 1;
+    width: 100%;
+  }
+  
+  .device-panel {
+    position: absolute;
+    top: 80px;
+    left: 20px;
+    width: 300px;
+    max-height: calc(100vh - 120px);
+    background: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    
+    .panel-header {
+      padding: 20px 20px 16px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      
+      h3 {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #ffffff;
+        
+        .device-count {
+          font-size: 14px;
+          font-weight: normal;
+          color: rgba(255, 255, 255, 0.8);
+          margin-left: 4px;
+        }
+      }
+    }
+    
+    .action-buttons {
+      display: flex;
+      gap: 10px;
+      padding: 16px;
+      background: #f8f9fc;
+      
+      .el-button {
+        flex: 1;
+        font-size: 13px;
+        border-radius: 6px;
+        font-weight: 500;
+        
+        &.el-button--primary {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+          
+          &:hover {
+            opacity: 0.9;
+          }
+        }
+        
+        &:not(.el-button--primary) {
+          background: #ffffff;
+          border: 1px solid #e0e0e0;
+          color: #666;
+          
+          &:hover {
+            border-color: #667eea;
+            color: #667eea;
+          }
+        }
+      }
+    }
+    
+    h3 {
+      margin: 0;
+      padding: 20px 20px 15px;
+      font-size: 16px;
+      color: #333;
+      border-bottom: 2px solid #1890FF;
+    }
+    
+    .device-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 12px;
+      background: #fafbfc;
+      
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      
+      &::-webkit-scrollbar-thumb {
+        background: #d0d0d0;
+        border-radius: 3px;
+        
+        &:hover {
+          background: #b0b0b0;
+        }
+      }
+    }
+    
+    .device-item {
+      display: flex;
+      align-items: center;
+      padding: 14px 12px;
+      margin-bottom: 8px;
+      border-radius: 8px;
+      background: #ffffff;
+      border: 1px solid #e8e8e8;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        border-color: #667eea;
+        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
+        transform: translateY(-2px);
+      }
+      
+      &.active {
+        background: linear-gradient(90deg, #f0f3ff 0%, #ffffff 100%);
+        border-color: #667eea;
+        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
+        
+        .device-info {
+          .icon-visible {
+            color: #667eea;
+          }
+        }
+      }
+      
+      .device-info {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        
+        .icon-visible,
+        .icon-hidden {
+          font-size: 18px;
+          flex-shrink: 0;
+        }
+        
+        .icon-visible {
+          color: #52C41A;
+        }
+        
+        .icon-hidden {
+          color: #d0d0d0;
+        }
+        
+        .device-name {
+          font-size: 14px;
+          color: #333;
+          font-weight: 500;
+        }
+      }
+      
+      .device-stats {
+        margin-right: 10px;
+        
+        .point-count {
+          font-size: 12px;
+          color: #666;
+          background: #f0f0f0;
+          padding: 3px 10px;
+          border-radius: 12px;
+          font-weight: 500;
+        }
+      }
+      
+      .color-indicator {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        border: 2px solid #fff;
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+        flex-shrink: 0;
+      }
+    }
+  }
+  
+  .info-panel {
+    position: absolute;
+    top: 80px;
+    right: 20px;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    min-width: 180px;
+    backdrop-filter: blur(10px);
+    z-index: 100;
+    
+    h3 {
+      margin: 0 0 15px 0;
+      font-size: 16px;
+      color: #333;
+      border-bottom: 2px solid #1890FF;
+      padding-bottom: 10px;
+    }
+    
+    p {
+      margin: 8px 0;
+      font-size: 14px;
+      color: #666;
+      
+      &:first-of-type {
+        font-weight: bold;
+        color: #1890FF;
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+:deep(.trajectory-marker) {
+  .marker-content {
+    padding: 4px 8px;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    min-width: 24px;
+    min-height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+:deep(.trajectory-tooltip) {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  padding: 0;
+  min-width: 260px;
+  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  
+  .tooltip-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 16px;
+    background: rgba(255, 255, 255, 0.15);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    
+    .header-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 50%;
+      color: #fff;
+    }
+    
+    .header-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #fff;
+      letter-spacing: 0.5px;
+    }
+  }
+  
+  .tooltip-content {
+    padding: 14px 16px;
+    
+    .info-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .icon {
+        flex-shrink: 0;
+        color: rgba(255, 255, 255, 0.8);
+      }
+      
+      .label {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.7);
+        min-width: 40px;
+      }
+      
+      .value {
+        flex: 1;
+        font-size: 13px;
+        font-weight: 600;
+        color: #fff;
+        text-align: right;
+        font-family: 'Monaco', 'Consolas', monospace;
+      }
+    }
+  }
+}
+
+// 自定义 L7 Popup 样式
+:deep(.l7-popup) {
+  pointer-events: none !important; // 弹窗不阻挡鼠标事件
+  
+  .l7-popup-content {
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none !important; // 内容也不响应鼠标事件，避免阻挡
+  }
+  
+  .l7-popup-tip {
+    border-top-color: #667eea;
+    pointer-events: none !important;
+  }
+}
+
+// 确保tooltip内容也不阻挡
+:deep(.trajectory-tooltip) {
+  pointer-events: none !important;
+}
+</style>
diff --git a/src/views/mapTest/index.vue b/src/views/mapTest/index.vue
index 706fefe..00322b9 100644
--- a/src/views/mapTest/index.vue
+++ b/src/views/mapTest/index.vue
@@ -5,13 +5,17 @@
       <h3>地图信息</h3>
       <p>总点位数: {{ points.length }}</p>
       <p>当前缩放级别: {{ currentZoom }}</p>
-      <div class="legend">
+      <el-button type="primary" @click="viewAllTrajectories" style="width: 100%; margin-top: 10px;">
+        <el-icon><TrendCharts /></el-icon>
+        查看历史轨迹
+      </el-button>
+      <!-- <div class="legend">
         <h4>图例</h4>
         <div class="legend-item">
           <span class="dot"></span>
           <span>设备点位</span>
         </div>
-      </div>
+      </div> -->
     </div>
     <!-- 隐藏的SVG定义 -->
     <svg width="0" height="0" style="position: absolute;">
@@ -25,58 +29,51 @@
         </filter>
       </defs>
     </svg>
-    
-    <!-- 点位信息弹出框 -->
-    <el-dialog
-      v-model="dialogVisible"
-      title="位置详情"
-      width="400px"
-      :close-on-click-modal="true"
-    >
-      <div class="point-info">
-        <div class="info-row">
-          <span class="label">编号:</span>
-          <span class="value">{{ selectedPoint.id }}</span>
-        </div>
-        <div class="info-row">
-          <span class="label">上报时间:</span>
-          <span class="value">{{ selectedPoint.reportTime }}</span>
-        </div>
-        <div class="info-row">
-          <span class="label">经度:</span>
-          <span class="value">{{ selectedPoint.longitude }}</span>
-        </div>
-        <div class="info-row">
-          <span class="label">纬度:</span>
-          <span class="value">{{ selectedPoint.latitude }}</span>
-        </div>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script setup name="MapTest">
 import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
 import { initMap, initLayer, addImage } from '@/utils/map'
 import { mapConfig, layerUrl, imageArr } from '@/config/map'
-import { PointLayer, Marker } from '@antv/l7'
+import { PointLayer, Marker, Popup } from '@antv/l7'
 import { getLastData } from '@/api/td/tdEngine'
 import { ElMessage } from 'element-plus'
+import { TrendCharts } from '@element-plus/icons-vue'
 
+const router = useRouter()
 const scene = ref(null)
 const pointLayer = ref(null)
 const currentZoom = ref(13)
 const points = ref([])
-const dialogVisible = ref(false)
-const selectedPoint = ref({
-  id: '',
-  reportTime: '',
-  longitude: '',
-  latitude: ''
-})
 const loading = ref(false)
+const currentPopup = ref(null) // 存储当前显示的弹窗
+const popupTimer = ref(null) // 存储弹窗定时器
 let refreshTimer = null  // 定时刷新定时器
 
+// 查看历史轨迹(直接跳转)
+const viewTrajectory = (deviceId) => {
+  if (!deviceId) {
+    ElMessage.warning('设备ID无效')
+    return
+  }
+  
+  router.push({
+    path: '/trajectory',
+    query: {
+      deviceId: deviceId
+    }
+  })
+}
+
+// 查看所有设备历史轨迹
+const viewAllTrajectories = () => {
+  router.push({
+    path: '/allTrajectories'
+  })
+}
+
 // 从接口获取设备数据
 const fetchDeviceData = async () => {
   loading.value = true
@@ -103,7 +100,6 @@ const fetchDeviceData = async () => {
     })
     
     points.value = devicePoints
-    console.log('从接口获取到', points.value.length, '个设备点位')
     
     // 如果已经有图层，更新图层数据；否则创建新图层
     if (scene.value) {
@@ -126,20 +122,50 @@ const initializeMap = async () => {
     // 从接口获取设备数据
     await fetchDeviceData()
     
-    // 如果有数据,使用第一个设备的经纬度作为地图中心
+    // 计算所有设备的居中位置
     let mapCenter = mapConfig.center
+    let mapZoom = mapConfig.zoom
+    
     if (points.value.length > 0) {
-      const firstPoint = points.value[0]
-      mapCenter = [firstPoint.longitude, firstPoint.latitude]
-      console.log('地图中心设置为:', mapCenter)
+      const lngs = points.value.map(p => p.longitude)
+      const lats = points.value.map(p => p.latitude)
+      
+      const minLng = Math.min(...lngs)
+      const maxLng = Math.max(...lngs)
+      const minLat = Math.min(...lats)
+      const maxLat = Math.max(...lats)
+      
+      // 计算中心点
+      const centerLng = (minLng + maxLng) / 2
+      const centerLat = (minLat + maxLat) / 2
+      mapCenter = [centerLng, centerLat]
+      
+      // 根据边界范围计算合适的缩放级别
+      const lngRange = maxLng - minLng
+      const latRange = maxLat - minLat
+      const maxRange = Math.max(lngRange, latRange)
+      
+      if (maxRange > 1) {
+        mapZoom = 10
+      } else if (maxRange > 0.5) {
+        mapZoom = 11
+      } else if (maxRange > 0.1) {
+        mapZoom = 12
+      } else if (maxRange > 0.01) {
+        mapZoom = 14
+      } else {
+        mapZoom = 15
+      }
     }
     
-    // 创建地图场景,使用动态中心点
+    // 创建地图场景,使用动态中心点和缩放级别
     const mapScene = await initMap('mapContainer', {
       ...mapConfig,
-      center: mapCenter
+      center: mapCenter,
+      zoom: mapZoom
     })
     scene.value = mapScene
+    currentZoom.value = mapZoom
     
     // 添加图层
     initLayer(mapScene, layerUrl)
@@ -160,8 +186,6 @@ const initializeMap = async () => {
     mapScene.on('zoom', () => {
       currentZoom.value = Math.round(mapScene.getZoom())
     })
-    
-    console.log('地图初始化成功，已添加', points.value.length, '个点位')
   } catch (error) {
     console.error('地图初始化失败:', error)
     ElMessage.error('地图初始化失败')
@@ -172,6 +196,7 @@ const initializeMap = async () => {
 const create3DMarkerElement = (point) => {
   const element = document.createElement('div')
   element.className = 'marker-3d'
+  element.style.cursor = 'pointer' // 固定光标样式
   element.innerHTML = `
     <div class="marker-container">
       <div class="pulse-ring"></div>
@@ -188,15 +213,89 @@ const create3DMarkerElement = (point) => {
     </div>
   `
   
-  // 添加点击事件
-  element.addEventListener('click', () => {
-    selectedPoint.value = {
-      id: point.id,
-      reportTime: point.reportTime,
-      longitude: point.longitude.toFixed(6),
-      latitude: point.latitude.toFixed(6)
+  // 鼠标悬停显示信息
+  element.addEventListener('mouseenter', () => {
+    // 清除可能存在的隐藏定时器
+    if (popupTimer.value) {
+      clearTimeout(popupTimer.value)
+      popupTimer.value = null
     }
-    dialogVisible.value = true
+    
+    // 先移除之前的弹窗
+    if (currentPopup.value) {
+      currentPopup.value.remove()
+      currentPopup.value = null
+    }
+    
+    const popup = new Popup({
+      offsets: [150, -50], // 向右150px，向上50px，明显偏向右上角
+      closeButton: false,
+      closeOnClick: false
+    })
+      .setLnglat([point.longitude, point.latitude])
+      .setHTML(`
+        <div class="trajectory-tooltip">
+          <div class="tooltip-header">
+            <div class="header-icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                <circle cx="12" cy="12" r="3" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="header-title">设备信息</div>
+          </div>
+          <div class="tooltip-content">
+            <div class="info-row">
+              <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
+                <path d="M9 3v18M15 3v18M3 9h18M3 15h18" stroke="currentColor" stroke-width="2"/>
+              </svg>
+              <span class="label">编号</span>
+              <span class="value">${point.id}</span>
+            </div>
+            <div class="info-row">
+              <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+              <span class="label">时间</span>
+              <span class="value">${point.reportTime}</span>
+            </div>
+            <div class="info-row">
+              <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                <path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+              <span class="label">经度</span>
+              <span class="value">${point.longitude.toFixed(6)}°</span>
+            </div>
+            <div class="info-row">
+              <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                <path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+              <span class="label">纬度</span>
+              <span class="value">${point.latitude.toFixed(6)}°</span>
+            </div>
+          </div>
+        </div>
+      `)
+    scene.value.addPopup(popup)
+    currentPopup.value = popup
+  })
+  
+  // 鼠标离开时延迟关闭，防止快速进出导致闪烁
+  element.addEventListener('mouseleave', () => {
+    // 延迟300ms关闭，如果在这期间鼠标又进入，则不关闭
+    popupTimer.value = setTimeout(() => {
+      if (currentPopup.value) {
+        currentPopup.value.remove()
+        currentPopup.value = null
+      }
+    }, 300)
+  })
+  
+  // 点击跳转到历史轨迹页面
+  element.addEventListener('click', () => {
+    viewTrajectory(point.id)
   })
   
   return element
@@ -274,17 +373,10 @@ const updatePointLayer = () => {
           // 更新点击事件数据
           const element = marker.getElement()
           element.onclick = () => {
-            selectedPoint.value = {
-              id: newPoint.id,
-              reportTime: newPoint.reportTime,
-              longitude: newPoint.longitude.toFixed(6),
-              latitude: newPoint.latitude.toFixed(6)
-            }
-            dialogVisible.value = true
+            viewTrajectory(newPoint.id)
           }
         }
       })
-      console.log('已无感更新', newPoints.length, '个点位位置')
     } else {
       // 点位数量变化时才完全重建
       rebuildPointLayer()
@@ -313,7 +405,6 @@ const rebuildPointLayer = () => {
   
   // 重新创建图层
   createPointLayer()
-  console.log('点位数量变化,已重建图层')
 }
 
 // 启动定时刷新
@@ -325,11 +416,8 @@ const startAutoRefresh = () => {
   
   // 每10秒刷新一次数据
   refreshTimer = setInterval(() => {
-    console.log('定时刷新设备数据...')
     fetchDeviceData()
   }, 10000)
-  
-  console.log('已启动自动刷新，每10秒更新一次')
 }
 
 // 停止定时刷新
@@ -337,7 +425,18 @@ const stopAutoRefresh = () => {
   if (refreshTimer) {
     clearInterval(refreshTimer)
     refreshTimer = null
-    console.log('已停止自动刷新')
+  }
+}
+
+// 清理弹窗和定时器
+const cleanupPopup = () => {
+  if (popupTimer.value) {
+    clearTimeout(popupTimer.value)
+    popupTimer.value = null
+  }
+  if (currentPopup.value) {
+    currentPopup.value.remove()
+    currentPopup.value = null
   }
 }
 
@@ -349,20 +448,37 @@ onBeforeUnmount(() => {
   // 停止定时刷新
   stopAutoRefresh()
   
+  // 清理弹窗
+  cleanupPopup()
+  
+  // 清理图层和markers
   if (pointLayer.value) {
-    // 清理markers
     if (pointLayer.value.markers) {
       pointLayer.value.markers.forEach(marker => {
-        marker.remove()  // 使用marker.remove()方法移除标记
+        try {
+          marker.remove()
+        } catch (e) {
+          console.warn('Marker remove error:', e)
+        }
       })
     }
-    // 清理图层
-    if (pointLayer.value.pulseLayer) {
-      scene.value?.removeLayer(pointLayer.value.pulseLayer)
+    if (pointLayer.value.pulseLayer && scene.value) {
+      try {
+        scene.value.removeLayer(pointLayer.value.pulseLayer)
+      } catch (e) {
+        console.warn('Layer remove error:', e)
+      }
     }
   }
+  
+  // 销毁地图实例
   if (scene.value) {
-    scene.value.destroy()
+    try {
+      scene.value.destroy()
+      scene.value = null
+    } catch (e) {
+      console.warn('Scene destroy error:', e)
+    }
   }
 })
 </script>
@@ -388,6 +504,7 @@ onBeforeUnmount(() => {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     min-width: 220px;
     backdrop-filter: blur(10px);
+    z-index: 100;  // 确保信息面板显示在地图之上
     
     h3 {
       margin: 0 0 15px 0;
@@ -460,8 +577,8 @@ onBeforeUnmount(() => {
   
   .marker-container {
     position: relative;
-    width: 40px;
-    height: 48px;
+    width: 32px;
+    height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -472,8 +589,8 @@ onBeforeUnmount(() => {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 50px;
-    height: 50px;
+    width: 40px;
+    height: 40px;
     border: 2px solid #5B8FF9;
     border-radius: 50%;
     opacity: 0;
@@ -485,8 +602,8 @@ onBeforeUnmount(() => {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 42px;
-    height: 42px;
+    width: 34px;
+    height: 34px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(91, 143, 249, 0.4) 0%, transparent 70%);
     animation: glow-pulse 2s ease-in-out infinite;
@@ -494,8 +611,8 @@ onBeforeUnmount(() => {
   
   .marker-pin {
     position: relative;
-    width: 28px;
-    height: 28px;
+    width: 22px;
+    height: 22px;
     border-radius: 50% 50% 50% 0;
     transform: rotate(-45deg);
     background: linear-gradient(135deg, #5B8FF9 0%, #7BA3FF 100%);
@@ -538,8 +655,8 @@ onBeforeUnmount(() => {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(45deg);
-    width: 16px;
-    height: 16px;
+    width: 13px;
+    height: 13px;
     filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
   }
   
@@ -548,8 +665,8 @@ onBeforeUnmount(() => {
     bottom: -5px;
     left: 50%;
     transform: translateX(-50%);
-    width: 20px;
-    height: 8px;
+    width: 16px;
+    height: 6px;
     background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 70%);
     border-radius: 50%;
     animation: shadow-pulse 3s ease-in-out infinite;
@@ -560,8 +677,8 @@ onBeforeUnmount(() => {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 38px;
-    height: 38px;
+    width: 30px;
+    height: 30px;
     border: 2px solid #5B8FF9;
     border-radius: 50%;
     opacity: 0.4;
@@ -644,115 +761,95 @@ onBeforeUnmount(() => {
   }
 }
 
-// 点位信息弹出框样式
-:deep(.el-dialog) {
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+// 自定义 L7 Popup 样式
+:deep(.l7-popup) {
+  pointer-events: none !important;
   
-  .el-dialog__header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    padding: 24px 30px;
-    margin: 0;
-    border-bottom: none;
-    
-    .el-dialog__title {
-      color: #fff;
-      font-size: 18px;
-      font-weight: 600;
-      letter-spacing: 0.5px;
-    }
-    
-    .el-dialog__headerbtn {
-      top: 24px;
-      right: 30px;
-      width: 32px;
-      height: 32px;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 50%;
-      transition: all 0.3s ease;
-      
-      &:hover {
-        background: rgba(255, 255, 255, 0.3);
-        transform: rotate(90deg);
-      }
-      
-      .el-dialog__close {
-        color: #fff;
-        font-size: 18px;
-        font-weight: bold;
-      }
-    }
+  .l7-popup-content {
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none !important;
   }
   
-  .el-dialog__body {
-    padding: 32px 30px;
-    background: #fff;
+  .l7-popup-tip {
+    border-top-color: #667eea;
+    pointer-events: none !important;
   }
 }
 
-.point-info {
-  .info-row {
+// 确保tooltip内容也不阻挡
+:deep(.trajectory-tooltip) {
+  pointer-events: none !important;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  padding: 0;
+  min-width: 280px;
+  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  
+  .tooltip-header {
     display: flex;
     align-items: center;
-    margin-bottom: 18px;
-    padding: 16px 18px;
-    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
-    border-radius: 8px;
-    border-left: 4px solid #667eea;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
+    gap: 10px;
+    padding: 12px 16px;
+    background: rgba(255, 255, 255, 0.15);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      width: 0;
-      background: linear-gradient(90deg, rgba(102, 126, 234, 0.08) 0%, transparent 100%);
-      transition: width 0.3s ease;
-    }
-    
-    &:last-child {
-      margin-bottom: 0;
-    }
-    
-    &:hover {
-      background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
-      transform: translateX(4px);
-      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
-      border-left-color: #764ba2;
-      
-      &::before {
-        width: 100%;
-      }
-    }
-    
-    .label {
-      font-weight: 600;
-      color: #495057;
-      min-width: 95px;
-      font-size: 14px;
+    .header-icon {
       display: flex;
       align-items: center;
-      position: relative;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 50%;
       
-      &::after {
-        content: ':';
-        margin-left: 4px;
-        color: #667eea;
+      svg {
+        color: #fff;
       }
     }
     
-    .value {
-      color: #212529;
-      font-size: 14px;
-      flex: 1;
-      word-break: break-all;
-      font-family: 'Consolas', 'Monaco', monospace;
-      letter-spacing: 0.3px;
+    .header-title {
+      font-size: 15px;
+      font-weight: 600;
+      color: #fff;
+      letter-spacing: 0.5px;
+    }
+  }
+  
+  .tooltip-content {
+    padding: 14px 16px;
+    
+    .info-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .icon {
+        color: rgba(255, 255, 255, 0.9);
+        flex-shrink: 0;
+      }
+      
+      .label {
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.85);
+        min-width: 45px;
+      }
+      
+      .value {
+        flex: 1;
+        font-size: 13px;
+        font-weight: 600;
+        color: #fff;
+        text-align: right;
+        font-family: 'Monaco', 'Consolas', monospace;
+      }
     }
   }
 }
diff --git a/src/views/mapTest/trajectory.vue b/src/views/mapTest/trajectory.vue
new file mode 100644
index 0000000..b97c6db
--- /dev/null
+++ b/src/views/mapTest/trajectory.vue
@@ -0,0 +1,737 @@
+<template>
+  <div class="trajectory-container">
+    <div class="header-bar">
+      <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
+      <h2>历史轨迹 - {{ deviceId }}</h2>
+      <div class="time-selector">
+        <div class="sample-count-input">
+          <label>采样数:</label>
+          <el-input-number
+            v-model="sampleCount"
+            :min="1"
+            :max="500"
+            :step="50"
+            :precision="0"
+            controls-position="right"
+            placeholder="采样数"
+            style="width: 150px;"
+            @change="fetchTrajectory"
+          />
+        </div>
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          @change="handleTimeChange"
+          @visible-change="handlePickerVisibleChange"
+        />
+        <el-button type="primary" @click="fetchTrajectory" :loading="loading">
+          <el-icon><Search /></el-icon>
+          查询轨迹
+        </el-button>
+      </div>
+    </div>
+    
+    <div id="trajectoryMap" class="trajectory-map" v-loading="loading" element-loading-text="加载轨迹数据中..."></div>
+    
+    <div class="info-panel">
+      <h3>轨迹信息</h3>
+      <p>轨迹点数: {{ trajectoryPoints.length }}</p>
+      <p>当前缩放级别: {{ currentZoom }}</p>
+      <p v-if="trajectoryPoints.length > 0">起点时间: {{ trajectoryPoints[0]?.time }}</p>
+      <p v-if="trajectoryPoints.length > 0">终点时间: {{ trajectoryPoints[trajectoryPoints.length - 1]?.time }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup name="Trajectory">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { initMap, initLayer, addImage } from '@/utils/map'
+import { mapConfig, layerUrl, imageArr } from '@/config/map'
+import { PointLayer, LineLayer, Marker, Popup } from '@antv/l7'
+import { getDeviceTrajectory } from '@/api/td/tdEngine'
+import { ElMessage } from 'element-plus'
+import { ArrowLeft, Search } from '@element-plus/icons-vue'
+
+const router = useRouter()
+const route = useRoute()
+const scene = ref(null)
+const trajectoryLayer = ref(null)
+const deviceId = ref('')
+const timeRange = ref([])
+const trajectoryPoints = ref([])
+const loading = ref(false)
+const currentZoom = ref(16)
+const currentPopup = ref(null) // 存储当前显示的弹窗
+const popupTimer = ref(null) // 存储弹窗定时器
+const isDatePickerOpen = ref(false) // 日期选择器是否打开
+const sampleCount = ref(100) // 采样数，默认10
+
+// 返回上一页
+const goBack = () => {
+  router.back()
+}
+
+// 时间范围改变
+const handleTimeChange = (val) => {
+  console.log('时间范围:', val)
+}
+
+// 日期选择器可见性改变
+const handlePickerVisibleChange = (visible) => {
+  isDatePickerOpen.value = visible
+  // 当日期选择器打开时，禁用地图交互
+  if (scene.value) {
+    if (visible) {
+      scene.value.setMapStatus({ dragEnable: false, keyboardEnable: false, doubleClickZoom: false, scrollZoom: false })
+    } else {
+      scene.value.setMapStatus({ dragEnable: true, keyboardEnable: true, doubleClickZoom: true, scrollZoom: true })
+    }
+  }
+}
+
+// 获取轨迹数据
+const fetchTrajectory = async () => {
+  if (!deviceId.value) {
+    ElMessage.warning('设备ID不能为空')
+    return
+  }
+  
+  loading.value = true
+  try {
+    const params = {
+      sampleCount: sampleCount.value
+    }
+    
+    if (timeRange.value && timeRange.value.length === 2) {
+      params.startTime = timeRange.value[0]
+      params.endTime = timeRange.value[1]
+    }
+    
+    const response = await getDeviceTrajectory(deviceId.value, params)
+    
+    // 处理响应数据，后端返回格式为 { code, msg, data }
+    const trajectoryData = response.data || response
+    
+    if (trajectoryData && trajectoryData.length > 0) {
+      trajectoryPoints.value = trajectoryData.map(item => ({
+        longitude: item.longitude,
+        latitude: item.latitude,
+        time: item.time || item.createTime,
+        deviceId: item.deviceId
+      }))
+      
+      // 按时间排序，确保轨迹线是按时间顺序连接的
+      trajectoryPoints.value.sort((a, b) => {
+        return new Date(a.time).getTime() - new Date(b.time).getTime()
+      })
+      
+      drawTrajectory()
+    } else {
+      ElMessage.warning('暂无轨迹数据')
+      trajectoryPoints.value = []
+    }
+  } catch (error) {
+    console.error('获取轨迹失败:', error)
+    ElMessage.error('获取轨迹数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 初始化地图
+const initializeMap = async () => {
+  try {
+    // 创建地图场景
+    const mapScene = await initMap('trajectoryMap', mapConfig)
+    scene.value = mapScene
+    
+    // 添加图层
+    initLayer(mapScene, layerUrl)
+    
+    // 添加图片资源
+    addImage(mapScene, imageArr)
+    
+    // 监听缩放事件
+    mapScene.on('zoom', () => {
+      currentZoom.value = Math.round(mapScene.getZoom())
+    })
+    
+    return mapScene
+  } catch (error) {
+    console.error('地图初始化失败:', error)
+    ElMessage.error('地图初始化失败')
+    throw error
+  }
+}
+
+// 绘制轨迹
+const drawTrajectory = () => {
+  if (!scene.value || trajectoryPoints.value.length === 0) {
+    return
+  }
+  
+  // 清除旧轨迹
+  if (trajectoryLayer.value) {
+    try {
+      if (trajectoryLayer.value.lineLayer) {
+        scene.value.removeLayer(trajectoryLayer.value.lineLayer)
+      }
+      if (trajectoryLayer.value.pointLayer) {
+        scene.value.removeLayer(trajectoryLayer.value.pointLayer)
+      }
+      if (trajectoryLayer.value.startMarker) {
+        trajectoryLayer.value.startMarker.remove()
+      }
+      if (trajectoryLayer.value.endMarker) {
+        trajectoryLayer.value.endMarker.remove()
+      }
+    } catch (e) {
+      console.warn('清除旧轨迹失败:', e)
+    }
+  }
+  
+  // 直接绘制，不再使用事件监听
+  try {
+    // 构建轨迹线数据
+    const lineData = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'LineString',
+          coordinates: trajectoryPoints.value.map(p => [p.longitude, p.latitude])
+        }
+      }]
+    }
+    
+    // 创建轨迹线图层 - 增强显示效果
+    const lineLayer = new LineLayer({
+      name: 'trajectoryLine',
+      zIndex: 101
+    })
+      .source(lineData)
+      .size(5)  // 增加线宽
+      .shape('line')
+      .color('#1890FF')  // 使用更鲜艳的蓝色
+      .style({
+        lineType: 'solid',
+        opacity: 0.9  // 增加不透明度
+      })
+    
+    scene.value.addLayer(lineLayer)
+    
+    // 创建轨迹点图层
+    const pointLayer = new PointLayer({
+      name: 'trajectoryPoints',
+      zIndex: 102
+    })
+      .source(trajectoryPoints.value.map((point, index) => ({
+        ...point,
+        index: index + 1 // 添加序号，从1开始
+      })), {
+        parser: {
+          type: 'json',
+          x: 'longitude',
+          y: 'latitude'
+        }
+      })
+      .shape('circle')
+      .size(8)  // 稍微增大点的大小
+      .color('#FF6B6B')
+      .style({
+        opacity: 0.8,
+        strokeWidth: 2,
+        stroke: '#fff'
+      })
+    
+    // 添加鼠标悬停事件，显示详细信息
+    pointLayer.on('mousemove', (e) => {
+      const feature = e.feature
+      if (feature) {
+        // 先关闭之前的弹窗
+        if (currentPopup.value) {
+          currentPopup.value.remove()
+        }
+        
+        const popup = new Popup({
+          offsets: [0, -15],
+          closeButton: false
+        })
+          .setLnglat([feature.longitude, feature.latitude])
+          .setHTML(`
+            <div class="trajectory-tooltip">
+              <div class="tooltip-header">
+                <div class="header-icon">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                    <circle cx="12" cy="12" r="3" fill="currentColor"/>
+                  </svg>
+                </div>
+                <div class="header-title">轨迹点 #${feature.index}</div>
+              </div>
+              <div class="tooltip-content">
+                <div class="info-row">
+                  <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  </svg>
+                  <span class="label">时间</span>
+                  <span class="value">${feature.time}</span>
+                </div>
+                <div class="info-row">
+                  <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                    <path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  </svg>
+                  <span class="label">经度</span>
+                  <span class="value">${feature.longitude.toFixed(6)}°</span>
+                </div>
+                <div class="info-row">
+                  <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                    <path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  </svg>
+                  <span class="label">纬度</span>
+                  <span class="value">${feature.latitude.toFixed(6)}°</span>
+                </div>
+              </div>
+            </div>
+          `)
+        scene.value.addPopup(popup)
+        currentPopup.value = popup
+      }
+    })
+    
+    // 鼠标移出时关闭弹窗
+    pointLayer.on('mouseout', () => {
+      if (currentPopup.value) {
+        currentPopup.value.remove()
+        currentPopup.value = null
+      }
+    })
+    
+    // 鼠标移入时改变光标样式
+    pointLayer.on('mouseenter', () => {
+      document.body.style.cursor = 'pointer'
+    })
+    
+    pointLayer.on('mouseleave', () => {
+      document.body.style.cursor = ''
+    })
+    
+    scene.value.addLayer(pointLayer)
+    
+    // 创建起点标记
+    const startPoint = trajectoryPoints.value[0]
+    const startMarker = createMarker(startPoint, '起点', '#52C41A', true)
+    scene.value.addMarker(startMarker)
+    
+    // 创建终点标记
+    const endPoint = trajectoryPoints.value[trajectoryPoints.value.length - 1]
+    const endMarker = createMarker(endPoint, '终点', '#FF4D4F', false)
+    scene.value.addMarker(endMarker)
+    
+    trajectoryLayer.value = { lineLayer, pointLayer, startMarker, endMarker }
+    
+    // 调整地图视野到轨迹范围
+    fitBounds()
+  } catch (error) {
+    console.error('绘制轨迹失败:', error)
+    ElMessage.error('绘制轨迹失败')
+  }
+}
+
+// 创建标记点
+const createMarker = (point, label, color, isStart = true) => {
+  const el = document.createElement('div')
+  el.className = 'trajectory-marker'
+  el.style.cursor = 'pointer' // 直接设置为pointer，不再动态切换
+  el.innerHTML = `
+    <div class="marker-content" style="background: ${color};">
+      <span>${label}</span>
+    </div>
+  `
+  
+  // 添加鼠标悬停事件
+  el.addEventListener('mouseenter', () => {
+    // 清除可能存在的隐藏定时器
+    if (popupTimer.value) {
+      clearTimeout(popupTimer.value)
+      popupTimer.value = null
+    }
+    
+    // 如果已有弹窗，直接返回，不重复创建
+    if (currentPopup.value) {
+      return
+    }
+    
+    const popup = new Popup({
+      offsets: [0, -45],
+      closeButton: false,
+      closeOnClick: false
+    })
+      .setLnglat([point.longitude, point.latitude])
+      .setHTML(`
+        <div class="trajectory-tooltip">
+          <div class="tooltip-header">
+            <div class="header-icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                <path d="M12 8l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+            <div class="header-title">${isStart ? '起点' : '终点'}</div>
+          </div>
+          <div class="tooltip-content">
+            <div class="info-row">
+              <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+              <span class="label">时间</span>
+              <span class="value">${point.time}</span>
+            </div>
+            <div class="info-row">
+              <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                <path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+              <span class="label">经度</span>
+              <span class="value">${point.longitude.toFixed(6)}°</span>
+            </div>
+            <div class="info-row">
+              <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
+                <path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+              <span class="label">纬度</span>
+              <span class="value">${point.latitude.toFixed(6)}°</span>
+            </div>
+          </div>
+        </div>
+      `)
+    scene.value.addPopup(popup)
+    currentPopup.value = popup
+  })
+  
+  // 鼠标离开时延迟关闭，防止快速进出导致闪烁
+  el.addEventListener('mouseleave', () => {
+    // 延迟300ms关闭，如果在这期间鼠标又进入，则不关闭
+    popupTimer.value = setTimeout(() => {
+      if (currentPopup.value) {
+        currentPopup.value.remove()
+        currentPopup.value = null
+      }
+    }, 300)
+  })
+  
+  return new Marker({
+    element: el,
+    anchor: 'center'
+  }).setLnglat([point.longitude, point.latitude])
+}
+
+// 调整地图视野
+const fitBounds = () => {
+  if (!scene.value || trajectoryPoints.value.length === 0) return
+  
+  const lngs = trajectoryPoints.value.map(p => p.longitude)
+  const lats = trajectoryPoints.value.map(p => p.latitude)
+  
+  const minLng = Math.min(...lngs)
+  const maxLng = Math.max(...lngs)
+  const minLat = Math.min(...lats)
+  const maxLat = Math.max(...lats)
+  
+  const centerLng = (minLng + maxLng) / 2
+  const centerLat = (minLat + maxLat) / 2
+  
+  scene.value.setCenter([centerLng, centerLat])
+  scene.value.setZoom(16)  // 增大默认缩放级别
+  currentZoom.value = 16
+}
+
+onMounted(() => {
+  deviceId.value = route.query.deviceId || ''
+  
+  if (!deviceId.value) {
+    ElMessage.error('设备ID不能为空')
+    router.back()
+    return
+  }
+  
+  // 设置默认时间范围为最近24小时
+  const now = new Date()
+  const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+  
+  const formatDateTime = (date) => {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const hours = String(date.getHours()).padStart(2, '0')
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    const seconds = String(date.getSeconds()).padStart(2, '0')
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+  }
+  
+  timeRange.value = [
+    formatDateTime(yesterday),
+    formatDateTime(now)
+  ]
+  
+  initializeMap().then(() => {
+    fetchTrajectory()
+  })
+})
+
+onBeforeUnmount(() => {
+  // 清理轨迹图层
+  if (trajectoryLayer.value && scene.value) {
+    try {
+      if (trajectoryLayer.value.lineLayer) {
+        scene.value.removeLayer(trajectoryLayer.value.lineLayer)
+      }
+      if (trajectoryLayer.value.pointLayer) {
+        scene.value.removeLayer(trajectoryLayer.value.pointLayer)
+      }
+      if (trajectoryLayer.value.startMarker) {
+        trajectoryLayer.value.startMarker.remove()
+      }
+      if (trajectoryLayer.value.endMarker) {
+        trajectoryLayer.value.endMarker.remove()
+      }
+    } catch (e) {
+      console.warn('Layer cleanup error:', e)
+    }
+  }
+  
+  // 销毁地图实例
+  if (scene.value) {
+    try {
+      scene.value.destroy()
+      scene.value = null
+    } catch (e) {
+      console.warn('Scene destroy error:', e)
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.trajectory-container {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  
+  .header-bar {
+    display: flex;
+    align-items: center;
+    padding: 16px 24px;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1000; // 提高z-index，确保日期选择器下拉面板在最上层
+    gap: 20px;
+    position: relative; // 添加定位
+    
+    h2 {
+      margin: 0;
+      font-size: 18px;
+      color: #333;
+      flex: 1;
+    }
+    
+    .time-selector {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      transform: translateX(-300px); // 整体向左平移400px
+      
+      .sample-count-input {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        
+        label {
+          font-size: 14px;
+          color: #333;
+          white-space: nowrap;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+  
+  .trajectory-map {
+    flex: 1;
+    width: 100%;
+  }
+  
+  .info-panel {
+    position: absolute;
+    top: 80px;
+    right: 20px;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    min-width: 220px;
+    backdrop-filter: blur(10px);
+    z-index: 100;  // 确保信息面板显示在地图之上
+    
+    h3 {
+      margin: 0 0 15px 0;
+      font-size: 16px;
+      color: #333;
+      border-bottom: 2px solid #5B8FF9;
+      padding-bottom: 10px;
+    }
+    
+    p {
+      margin: 8px 0;
+      font-size: 14px;
+      color: #666;
+      
+      &:first-of-type {
+        font-weight: bold;
+        color: #5B8FF9;
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+:deep(.trajectory-marker) {
+  .marker-content {
+    padding: 6px 12px;
+    border-radius: 20px;
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+}
+
+:deep(.trajectory-tooltip) {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  padding: 0;
+  min-width: 260px;
+  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  
+  .tooltip-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 16px;
+    background: rgba(255, 255, 255, 0.15);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    
+    .header-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 50%;
+      color: #fff;
+    }
+    
+    .header-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #fff;
+      letter-spacing: 0.5px;
+    }
+  }
+  
+  .tooltip-content {
+    padding: 14px 16px;
+    
+    .info-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      .icon {
+        flex-shrink: 0;
+        color: rgba(255, 255, 255, 0.8);
+      }
+      
+      .label {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.7);
+        min-width: 40px;
+      }
+      
+      .value {
+        flex: 1;
+        font-size: 13px;
+        font-weight: 600;
+        color: #fff;
+        text-align: right;
+        font-family: 'Monaco', 'Consolas', monospace;
+      }
+    }
+  }
+}
+
+// 自定义 L7 Popup 样式
+:deep(.l7-popup) {
+  pointer-events: none !important; // 弹窗不阻挡鼠标事件
+  
+  .l7-popup-content {
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none !important; // 内容也不响应鼠标事件，避免阻挡
+  }
+  
+  .l7-popup-tip {
+    border-top-color: #667eea;
+    pointer-events: none !important;
+  }
+}
+
+// 确保tooltip内容也不阻挡
+:deep(.trajectory-tooltip) {
+  pointer-events: none !important;
+}
+
+// 确保Element Plus日期选择器面板在最上层
+:deep(.el-picker-panel) {
+  z-index: 9999 !important;
+  transform: translate3d(0, 0, 0) !important; // 开启硬件加速
+  backface-visibility: hidden !important; // 防止闪烁
+  will-change: transform !important; // 优化渲染性能
+}
+
+:deep(.el-popper) {
+  z-index: 9999 !important;
+  transform: translate3d(0, 0, 0) !important;
+  backface-visibility: hidden !important;
+  will-change: transform !important;
+}
+
+// 时间选择列表也需要优化
+:deep(.el-time-panel) {
+  transform: translate3d(0, 0, 0) !important;
+  backface-visibility: hidden !important;
+}
+
+:deep(.el-picker-panel__content) {
+  transform: translate3d(0, 0, 0) !important;
+  backface-visibility: hidden !important;
+}
+</style>