From f55ec12808a0c10368d9b1f42eb3eedc6bc4ba27 Mon Sep 17 00:00:00 2001
From: air <30444667+sszdot@users.noreply.github.com>
Date: Fri, 20 Jun 2025 15:03:24 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=E5=9E=8B=E3=80=91=EF=BC=9Afe?=
 =?UTF-8?q?at=20=E3=80=90=E5=8E=9F=E5=9B=A0=E3=80=91=EF=BC=9A=E8=A6=81?=
 =?UTF-8?q?=E6=8A=8A=20ADS-B=20=E7=9A=84=E9=A3=9E=E8=A1=8C=E5=99=A8?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=AE=9E=E6=97=B6=E6=98=BE=E7=A4=BA=E5=9C=A8?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E4=B8=8A=20=E3=80=90=E8=BF=87=E7=A8=8B?=
 =?UTF-8?q?=E3=80=91=EF=BC=9A=E7=9B=91=E5=90=AC=E5=90=8E=E5=8F=B0=E6=8E=A8?=
 =?UTF-8?q?=E9=80=81=E7=9A=84=20ADS-B=20=E6=95=B0=E6=8D=AE=EF=BC=8C?=
 =?UTF-8?q?=E6=8B=BF=E5=88=B0=E7=BB=8F=E7=BA=AC=E5=BA=A6=E5=90=8E=E5=9C=A8?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E4=B8=8A=E6=B7=BB=E5=8A=A0=E9=A3=9E=E8=A1=8C?=
 =?UTF-8?q?=E5=99=A8=E5=9B=BE=E6=A0=87=EF=BC=8C=E5=B9=B6=E5=AE=9A=E6=97=B6?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=9B=BE=E6=A0=87=E4=BD=8D=E7=BD=AE=EF=BC=9B?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=A4=9A=E4=B8=AA=E9=A3=9E=E8=A1=8C=E5=99=A8?=
 =?UTF-8?q?=E5=90=8C=E6=97=B6=E6=98=BE=E7=A4=BA=EF=BC=8C=E8=BF=98=E5=8A=A0?=
 =?UTF-8?q?=E4=BA=86=E5=8E=BB=E9=87=8D=E5=92=8C=E6=9B=B4=E6=96=B0=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=EF=BC=8C=E9=81=BF=E5=85=8D=E9=87=8D=E5=A4=8D=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E6=A0=87=E8=AE=B0=20=E3=80=90=E5=BD=B1=E5=93=8D?=
 =?UTF-8?q?=E3=80=91=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ControllerTabs.vue             |  9 ++-
 src/components/MapBox.vue                     | 64 ++++++++++++++++++-
 src/store/index.js                            | 24 ++++++-
 .../layout/components/main/planes/index.vue   | 21 +++++-
 src/views/layout/index.vue                    | 38 +++++++----
 5 files changed, 134 insertions(+), 22 deletions(-)

diff --git a/src/components/ControllerTabs.vue b/src/components/ControllerTabs.vue
index bc14c75..7850db7 100644
--- a/src/components/ControllerTabs.vue
+++ b/src/components/ControllerTabs.vue
@@ -5,8 +5,11 @@
       @open="openCallback">
       <!-- 起飞设置弹出框 -->
       <template v-if="dialogItem == 'takeoffBox'">
-        <el-slider class="w-100" v-model="takeoffValue" :show-tooltip="false" show-input :min="1" :max="100">
-        </el-slider>
+        <div class="flex  mse mac">
+          <el-slider class="w-100" v-model="takeoffValue" :show-tooltip="false" show-input :min="1" :max="100">
+          </el-slider>
+          <font class="m-l-5">米</font>
+        </div>
         <span slot="footer" class="dialog-footer">
           <el-button size="medium" @click="dialogVisible = false">关闭</el-button>
           <el-button size="medium" type="primary"
@@ -214,7 +217,7 @@
               <div class="m-t-5">加锁</div>
             </el-button>
             <el-button size="medium" type="primary" class="flex1 butIcon"
-              @click="dialogVisible = true; dialogTitle = '高度设置(米)'; dialogItem = 'takeoffBox'; speakText('设置起飞高度')">
+              @click="dialogVisible = true; dialogTitle = '高度设置'; dialogItem = 'takeoffBox'; speakText('设置起飞高度')">
               <i class="iconfont icon-yangshi_icon_tongyong_departure f-s-24"></i>
               <div class="m-t-5">起飞</div>
             </el-button>
diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue
index ad19fca..e053e73 100644
--- a/src/components/MapBox.vue
+++ b/src/components/MapBox.vue
@@ -8,6 +8,7 @@
 import mapboxgl from 'mapbox-gl'
 import { MapboxStyleSwitcherControl, FollowControl, CustomFullscreenControl, NoFlyControl, RestrictflyControl, SaveToFileControl, PolygonToggleControl } from '@/utils/mapboxgl_plugs'
 import planeIcon from '@/assets/svg/plane.svg'
+import civilIcon from '@/assets/svg/civil.svg'
 
 export default {
   name: 'MapBox',
@@ -15,6 +16,7 @@ export default {
     return {
       token: 'pk.eyJ1Ijoic3pkb3QiLCJhIjoiY2xhN2pkMWFoMHJ4eTN3cXp6bmlzaHZ0NCJ9.3hH-EAUr0wQCaLvIM2lBMQ',
       map: null,
+      ADSBMarkers: [], // ADSB民航飞机对象
       planes: [], // 飞机对象
       lonLats: [], // 航线 所有航点
       wayLonLats: [], // 航线 不包括起点航点
@@ -252,8 +254,8 @@ export default {
           const dy = currentPoint.y - startPoint.y
           if (Math.sqrt(dx * dx + dy * dy) <= 5 && isLongPress) { // 没有发生拖拽地图
             const lonLat = {
-              lon: this.map.unproject(currentPoint).lng,
-              lat: this.map.unproject(currentPoint).lat
+              lon: Number(this.map.unproject(currentPoint).lng.toFixed(7)),
+              lat: Number(this.map.unproject(currentPoint).lat.toFixed(7))
             }
             this.$emit('longPress', lonLat) // 将经纬度信息传递到组件外部
             this.makeGuidedMarker(lonLat) // 创建标记
@@ -864,6 +866,54 @@ export default {
       })
       this.planes = []
     },
+    /**
+     * @description: 创建 ADSB 飞机图标并添加到地
+     * @param {Array} adsbList - ADSB 飞机数据列表
+     */
+    makeADSBPlanes (adsbList = []) {
+      // 清除旧图标
+      if (this.ADSBMarkers && this.ADSBMarkers.length) {
+        this.ADSBMarkers.forEach(marker => marker.remove())
+      }
+      this.ADSBMarkers = []
+
+      adsbList.forEach((plane) => {
+        // 创建图标容器
+        const iconWrapper = document.createElement('div')
+        iconWrapper.className = 'adsb-wrapper'
+        iconWrapper.style.width = '36px'
+        iconWrapper.style.height = '36px'
+
+        // 创建真正的飞机图标元素（子元素旋转！父级无法控制transiton）
+        const planeIcon = document.createElement('div')
+        planeIcon.className = 'adsb-icon'
+        planeIcon.style.backgroundImage = `url(${civilIcon})`
+        planeIcon.style.width = '100%'
+        planeIcon.style.height = '100%'
+        planeIcon.style.backgroundSize = 'contain'
+        planeIcon.style.backgroundRepeat = 'no-repeat'
+        planeIcon.style.transform = `rotate(${plane.heading}deg)`
+        planeIcon.style.transition = 'transform 0.3s linear'
+
+        // 加入子元素
+        iconWrapper.appendChild(planeIcon)
+
+        const popupContent = `
+      <h3>ADSB 飞机</h3>
+      <hr>
+      <p>ICAO: ${plane.icao}</p>
+      <p>高度: ${plane.alt} m</p>
+      <p>航向: ${plane.heading}°</p>
+    `
+
+        const marker = new mapboxgl.Marker(iconWrapper)
+          .setLngLat([plane.lon, plane.lat])
+          .setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML(popupContent))
+          .addTo(this.map)
+
+        this.ADSBMarkers.push(marker)
+      })
+    },
     /**
      * @description: 实时更新经纬度
      * @param {obj} lonLat lon经度 lat纬度
@@ -950,4 +1000,14 @@ export default {
   cursor: pointer;
 }
 
+.adsb-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.adsb-icon {
+  will-change: transform;
+}
+
 </style>
diff --git a/src/store/index.js b/src/store/index.js
index 55cee03..86de523 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -25,7 +25,8 @@ const store = new Vuex.Store({
     paidOrderList: [], // 已付款 和已退款但是发货状态为 已发货 订单列表
     logList: [], // 操作日志列表
     messageList: [], // 管理员公告列表
-    crosFrequency: null// 对频macadd
+    crosFrequency: null, // 对频macadd
+    ADSBList: [] // 存放当前活跃的 ADSB 飞机数据
   },
   mutations: {
     /**
@@ -130,6 +131,27 @@ const store = new Vuex.Store({
      */
     setCrosFrequency (state, macAdd) {
       state.crosFrequency = macAdd
+    },
+    /**
+     * @description: 设置当前活跃的 ADSB 飞机数据
+     * @param {*} ADSB
+     */
+    setADSBList (state, ADSB) {
+      const index = state.ADSBList.findIndex(i => i.icao === ADSB.icao)
+      if (index > -1) {
+      // 更新已有
+        state.ADSBList[index] = { ...ADSB, timestamp: Date.now() }
+      } else {
+      // 新增
+        state.ADSBList.push({ ...ADSB, timestamp: Date.now() })
+      }
+    },
+    /**
+     *  @description: 清除过期的 ADSB 数据
+    */
+    cleanExpiredADSBList (state) {
+      const now = Date.now()
+      state.ADSBList = state.ADSBList.filter(i => now - i.timestamp < 20000)
     }
   },
   actions: {
diff --git a/src/views/layout/components/main/planes/index.vue b/src/views/layout/components/main/planes/index.vue
index 55109f2..0092ce6 100644
--- a/src/views/layout/components/main/planes/index.vue
+++ b/src/views/layout/components/main/planes/index.vue
@@ -15,10 +15,17 @@
       <!-- 点飞设置弹出框 -->
       <template v-if="dialogItem == 'guidedBox'">
         <el-form label-position="left">
+          <el-form-item label="纬度" label-width="80px">
+            <el-input v-model="guidedLonLat.lat" placeholder="请输维度" label="纬度"></el-input>
+          </el-form-item>
+          <el-form-item label="经度" label-width="80px">
+            <el-input v-model="guidedLonLat.lon" placeholder="请输经度" label="经度"></el-input>
+          </el-form-item>
           <el-form-item label="高度设置" label-width="80px">
             <el-input-number v-model="guidedAlt" label="高度设置"></el-input-number>
             <font class="m-l-5">米</font>
           </el-form-item>
+
         </el-form>
         <span slot="footer" class="dialog-footer">
           <el-button size="medium" @click="dialogVisible = false">关闭</el-button>
@@ -47,8 +54,6 @@ export default {
       guidedLonLat: {}, // 点飞 的经纬度
       guidedAlt: '', // 点飞的高度
       isReserveGuidedMaker: false, // 关闭指点飞行操作窗口时 标记是否删除图标
-      showMapbox: true, // 数据更新的时候 用于刷新地图组件
-      mapboxKey: 0, // 初始化一个变量用于控制map-box组件的重新渲染
       planesId: this.$route.params.id,
       localCount: 0 // 本地存储计数器
     }
@@ -80,6 +85,9 @@ export default {
     noflyData () {
       return this.$store.state.noflyData
     },
+    ADSBList () {
+      return this.$store.state.ADSBList
+    },
     /**
      * @description: 侧边栏显隐
      */
@@ -185,6 +193,15 @@ export default {
       },
       deep: true
     },
+    ADSBList: {
+      handler (newList) {
+        if (this.$refs.mapbox && typeof this.$refs.mapbox.makeADSBPlanes === 'function') {
+          this.$refs.mapbox.makeADSBPlanes(newList)
+        }
+      },
+      immediate: true,
+      deep: true
+    },
     /**
      * @description: 侧边栏缩进有变化时 地图重新自适应
      */
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 52fc7ed..ad687c6 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -101,22 +101,31 @@ export default {
     }
   },
   mounted () {
+    // 定时清理过期的ADSB数据
+    setInterval(() => {
+      if (this.$store.state.ADSBList.length > 0) {
+        this.$store.commit('cleanExpiredADSBList')
+      }
+    }, 5000)
   },
   created () {
     /* init */
-    this.$store.commit('app/setIsMobile')// 获取客户端平台类型
-    this.$store.dispatch('fetchPlaneClassList')// 获取机型列表
-    this.$store.dispatch('fetchAirList')// 获取飞机列表
-    this.$store.dispatch('fetchShopList')// 获取商铺列表
-    this.$store.dispatch('fetchAdminList')// 获取管理员列表
-    this.$store.dispatch('fetchSiteList')// 获取站点列表
-    this.$store.dispatch('fetchRouteList')// 获取航线列表
-    this.$store.dispatch('fetchNoflyData', this.shop_id)// 获取禁飞区数据 注意这里要有shopid  总管理员再操作其他商铺飞机时 要刷新此缓存 需要对应商铺的禁飞区数据
-    this.$store.dispatch('fetchCategoryList')// 获取分类列表（小程序）
-    this.$store.dispatch('fetchSpuList')// 获取商品spu列表
-    this.$store.dispatch('fetchSkuList')// 获取商品sku列表
-    this.$store.dispatch('fetchPaidOrderList')// 获取订单列表
-    this.$store.dispatch('fetchMessageList')// 获取管理员公告列表 并弹出公告框
+    this.$store.commit('app/setIsMobile')
+    Promise.all([
+      this.$store.dispatch('fetchPlaneClassList'),
+      this.$store.dispatch('fetchAirList'),
+      this.$store.dispatch('fetchShopList'),
+      this.$store.dispatch('fetchAdminList'),
+      this.$store.dispatch('fetchSiteList'),
+      this.$store.dispatch('fetchRouteList'),
+      this.$store.dispatch('fetchCategoryList'),
+      this.$store.dispatch('fetchSpuList'),
+      this.$store.dispatch('fetchSkuList'),
+      this.$store.dispatch('fetchPaidOrderList'),
+      this.$store.dispatch('fetchMessageList')
+    ]).then(() => {
+      return this.$store.dispatch('fetchNoflyData', this.shop_id)
+    })
   },
   watch: {
     /**
@@ -211,7 +220,8 @@ export default {
       // 订阅ADSB信息
       mqtt.doSubscribe('ADSB/+', (res) => {
         if (res.topic.indexOf('ADSB') > -1) {
-
+          const data = JSON.parse(res.msg)
+          this.$store.commit('setADSBList', data)
         }
       })
       // 订阅对频