【类 型】：feat

【原  因】：完成 查看飞机 历史飞行轨迹  地图组件 显示功能
【过  程】：
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

src/components/MapBox.vue

@@ -177,6 +177,7 @@ export default {
     this.init().then(() => {
       // 地图初始化之后
       this.map.on('load', () => {
+        this.$emit('map-ready') // 外部组件回调 触发地图加载完成事件 传到外部组件调用 以确保执行时地图已经加载完成
         /* 更新样式，添加自定义 sprite */
 
         // 星空背景 大气层
@@ -355,6 +356,26 @@ export default {
         }), 'top-left')
       }
     },
+    /**
+     * @description 通用地图图层和数据源清除方法
+     * @param {Array} layerIds - 要清除的图层ID数组
+     * @param {Array} sourceIds - 要清除的数据源ID数组
+     */
+    clearMapElements (layerIds = [], sourceIds = []) {
+      // 先移除图层（必须先删图层，再删数据源）
+      layerIds.forEach(id => {
+        if (this.map.getLayer(id)) {
+          this.map.removeLayer(id)
+        }
+      })
+
+      // 再移除数据源
+      sourceIds.forEach(id => {
+        if (this.map.getSource(id)) {
+          this.map.removeSource(id)
+        }
+      })
+    },
     /**
      * @description: 清除地图上的航线
      */
@@ -729,9 +750,10 @@ export default {
      * @description: 镜头跳转
      * @param {obj} lonLat {lon:lon,lat:lat} 经纬度
      */
-    goto (lonLat) {
+    goto (lonLat, zoom = 18) {
       this.map.flyTo({
         center: lonLat,
+        zoom: zoom,
         speed: 2,
         curve: 1,
         easing (t) {

src/views/layout/components/main/register/flyData.vue

@@ -7,19 +7,22 @@
           <el-radio-button label="飞行时长"></el-radio-button>
           <el-radio-button label="飞行距离"></el-radio-button>
           <el-radio-button label="消耗电量"></el-radio-button>
+          <el-radio-button label="飞行轨迹"></el-radio-button>
         </el-radio-group>
       </div>
 
-      <div class="chart-area">
+      <div class="chart-area" v-if="flyDataList.length">
-        <div v-if="flyDataList.length" id="main" class="chart-container"></div>
+        <div v-if="boxShow" id="main" class="chart-container"></div>
-        <div v-else class="no-data-tip">暂无数据</div>
+        <map-box v-else ref="mapbox" @map-ready="onMapReady"/>
       </div>
+      <div v-else class="no-data-tip">暂无数据</div>
     </div>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
+import MapBox from '@/components/MapBox'
 import { getFlyData } from '@/utils/api/table'
 import DateRangePicker from '@/components/DateRangePicker'
 
@@ -36,11 +39,13 @@ export default {
       flyDataList: [],
       selectedPlaneIdArr: this.$store.state.app.toFlyDataIdArr,
       dateRange: [start, end],
-      radioClass: '飞行时长'
+      radioClass: '飞行时长',
+      boxShow: true
     }
   },
   components: {
-    DateRangePicker
+    DateRangePicker,
+    MapBox
   },
   computed: {
     source () {
@@ -85,12 +90,14 @@ export default {
       const keyMap = {
         飞行时长: (item) => {
           if (!item.start_time || !item.end_time) return 0
-          return (item.end_time - item.start_time) / 60
+          return Math.round((item.end_time - item.start_time) / 60)
         },
         飞行距离: (item) => Number(item.distance || 0),
         消耗电量: (item) => Number(item.power_used || 0)
       }
 
+      if (this.radioClass === '飞行轨迹') return []// 不处理轨迹数据
+
       this.flyDataList.forEach(item => {
         const planeName = item.plane_name
         const date = new Date(item.start_time * 1000)
@@ -145,10 +152,10 @@ export default {
     }
   },
   created () {
-    this.loadFlyData()
   },
   watch: {
     flyDataList (newVal) {
+      // 图标销毁 和 初始化
       if (!newVal.length && this.myChart) {
         this.myChart.dispose()
         this.myChart = null
@@ -157,6 +164,15 @@ export default {
           this.initChart()
         })
       }
+      // 多个飞机轨迹全部绘制
+      if (!this.boxShow && newVal.length) {
+        this.onMapReady()
+      }
+    },
+    boxshow (val) {
+      if (!val) {
+        this.onMapReady()
+      }
     },
     dateRange: {
       handler () {
@@ -165,15 +181,60 @@ export default {
       immediate: true
     },
     source (newVal) {
-      if (newVal.length > 1) {
+      if (Array.isArray(newVal) && newVal.length > 1) {
         this.initChart()
       }
     },
-    radioClass () {
+    radioClass (val) {
-      this.initChart()
+      if (val === '飞行轨迹') {
+        this.boxShow = false
+      } else {
+        this.boxShow = true
+        this.$nextTick(() => {
+          this.initChart()
+        })
+      }
     }
   },
   methods: {
+    // 地图组件回调地图加载完成后 执行
+    onMapReady () {
+      this.drawAllPathsOnMap()
+    },
+    // 地图轨迹绘制
+    drawAllPathsOnMap () {
+      if (!this.$refs.mapbox) return
+
+      // 清理旧轨迹
+      this.$refs.mapbox.clearMapElements(['path'], ['path'])
+
+      // 遍历所有飞行数据，绘制轨迹
+      this.flyDataList.forEach(item => {
+        if (!item.gps_path) return
+        try {
+          const pathArray = JSON.parse(item.gps_path)
+          if (Array.isArray(pathArray) && pathArray.length > 0) {
+            this.$refs.mapbox.createPathWithArray(pathArray)
+          }
+        } catch (e) {
+          console.warn('gps_path 解析失败', item.gps_path)
+        }
+      })
+
+      // 跳转到第一个轨迹的起点（经纬度）
+      if (this.flyDataList.length > 0 && this.flyDataList[0].gps_path) {
+        try {
+          const firstPath = JSON.parse(this.flyDataList[0].gps_path)
+          if (Array.isArray(firstPath) && firstPath.length > 0) {
+            const [lon, lat] = firstPath[0]
+            this.$refs.mapbox.goto({ lon, lat })
+          }
+        } catch (e) {
+          // 解析失败不跳转
+        }
+      }
+    },
+    // 获取飞行数据
     async loadFlyData () {
       if (this.selectedPlaneIdArr.length === 0) {
         this.$router.push('/register/index')
@@ -191,7 +252,6 @@ export default {
       const res = await getFlyData(this.selectedPlaneIdArr, startTimestamp, endTimestamp)
       if (res.data.status === 1) {
         this.flyDataList = res.data.dataList
-        console.log('飞行数据列表:', this.flyDataList)
       } else {
         this.$message.error(res.data.msg)
       }
@@ -220,7 +280,7 @@ export default {
         xAxis: { type: 'category' },
         yAxis: {
           gridIndex: 0,
-          name: this.radioClass === '飞行时长' ? '分钟' : this.radioClass === '飞行距离' ? '米' : 'mAh'
+          name: this.radioClass === '飞行时长' ? '分钟' : this.radioClass === '飞行距离' ? '米' : '毫安'
         },
         grid: { top: '55%' },
         series: [

src/views/layout/index.vue

@@ -136,7 +136,6 @@ export default {
               // 更新mqtt信息 选择性更新状态
               for (const key in jsonData) {
                 if (key === 'heartBeat') {
-                  console.log('接收到心跳信息', plane)
                   // 每次接收到心跳时，更新随机数以触发 watch 监听
                   plane.planeState.heartRandom = Math.random()
                   plane.planeState.heartBeat = jsonData.heartBeat