src/components/MapBox.vue

@@ -177,7 +177,6 @@ export default {
     this.init().then(() => {
       // 地图初始化之后
       this.map.on('load', () => {
-        this.$emit('map-ready') // 外部组件回调 触发地图加载完成事件 传到外部组件调用 以确保执行时地图已经加载完成
         /* 更新样式，添加自定义 sprite */
 
         // 星空背景 大气层
@@ -356,26 +355,6 @@ 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: 清除地图上的航线
      */
@@ -750,10 +729,9 @@ export default {
      * @description: 镜头跳转
      * @param {obj} lonLat {lon:lon,lat:lat} 经纬度
      */
-    goto (lonLat, zoom = 18) {
+    goto (lonLat) {
       this.map.flyTo({
         center: lonLat,
-        zoom: zoom,
         speed: 2,
         curve: 1,
         easing (t) {

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

@@ -7,22 +7,19 @@
           <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" v-if="flyDataList.length">
+      <div class="chart-area">
-        <div v-if="boxShow" id="main" class="chart-container"></div>
+        <div v-if="flyDataList.length" id="main" class="chart-container"></div>
-        <map-box v-else ref="mapbox" @map-ready="onMapReady"/>
+        <div v-else class="no-data-tip">暂无数据</div>
       </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'
 
@@ -39,13 +36,11 @@ export default {
       flyDataList: [],
       selectedPlaneIdArr: this.$store.state.app.toFlyDataIdArr,
       dateRange: [start, end],
-      radioClass: '飞行时长',
+      radioClass: '飞行时长'
-      boxShow: true
     }
   },
   components: {
-    DateRangePicker,
+    DateRangePicker
-    MapBox
   },
   computed: {
     source () {
@@ -90,14 +85,12 @@ export default {
       const keyMap = {
         飞行时长: (item) => {
           if (!item.start_time || !item.end_time) return 0
-          return Math.round((item.end_time - item.start_time) / 60)
+          return (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)
@@ -152,10 +145,10 @@ export default {
     }
   },
   created () {
+    this.loadFlyData()
   },
   watch: {
     flyDataList (newVal) {
-      // 图标销毁 和 初始化
       if (!newVal.length && this.myChart) {
         this.myChart.dispose()
         this.myChart = null
@@ -164,15 +157,6 @@ export default {
           this.initChart()
         })
       }
-      // 多个飞机轨迹全部绘制
-      if (!this.boxShow && newVal.length) {
-        this.onMapReady()
-      }
-    },
-    boxshow (val) {
-      if (!val) {
-        this.onMapReady()
-      }
     },
     dateRange: {
       handler () {
@@ -181,60 +165,15 @@ export default {
       immediate: true
     },
     source (newVal) {
-      if (Array.isArray(newVal) && newVal.length > 1) {
+      if (newVal.length > 1) {
         this.initChart()
       }
     },
-    radioClass (val) {
+    radioClass () {
-      if (val === '飞行轨迹') {
+      this.initChart()
-        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')
@@ -252,6 +191,7 @@ 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)
       }
@@ -280,7 +220,7 @@ export default {
         xAxis: { type: 'category' },
         yAxis: {
           gridIndex: 0,
-          name: this.radioClass === '飞行时长' ? '分钟' : this.radioClass === '飞行距离' ? '米' : '毫安'
+          name: this.radioClass === '飞行时长' ? '分钟' : this.radioClass === '飞行距离' ? '米' : 'mAh'
         },
         grid: { top: '55%' },
         series: [

src/views/layout/index.vue

@@ -136,6 +136,7 @@ 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