【类型】：

【原因】：【过程】：【影响】：
2025-06-17 01:56:19 +08:00 · 2025-06-17 01:56:19 +08:00 · 5f9208f6a0
commit 5f9208f6a0
parent 99e7caffd5
7 changed files with 107 additions and 63 deletions
--- a/src/components/MapBox.vue
+++ b/src/components/MapBox.vue
@ -339,37 +339,20 @@ export default {
        }), 'top-left')
      }

-      // 禁飞区 设置组件
+      // 禁飞区 限飞区 设置组件
      if (this.enableNofly) {
-        const defaultPolygons = [
-          [
-            [113.0, 23.0],
-            [113.1, 23.0],
-            [113.1, 23.1],
-            [113.0, 23.1],
-            [113.0, 23.0]
-          ],
-          [
-            [113.2, 23.2],
-            [113.3, 23.2],
-            [113.3, 23.3],
-            [113.2, 23.3],
-            [113.2, 23.2]
-          ],
-          [
-            [113.2, 24.2],
-            [113.5, 23.1],
-            [113.5, 23.2],
-            [113.3, 23.2],
-            [113.3, 23.3],
-            [113.2, 23.3],
-            [113.4, 23.2]
-          ]
-        ]
+        const defaultPolygons = this.$store.state.noflyData[0]
+        const shopId = this.$store.state.user.shop_id
+
        this.map.addControl(new NoFlyControl({
          defaultPolygons,
+          shopId, // 传给 NoFlyControl
          onSave: (polygons) => {
-            console.log('polygons', polygons)
+            if (typeof this.onSave === 'function') {
+              this.onSave(polygons)
+            } else {
+              console.log('禁飞区保存数据:', polygons)
+            }
          }
        }), 'top-left')
      }
@ -802,9 +785,8 @@ export default {
  },
  beforeDestroy () {
    if (this.map) {
-      this.$store.commit('app/setDefaultLonLat', this.map.getCenter()) // 记录当前经纬度 缺省
-      this.$store.commit('app/setDefaultZoom', this.map.getZoom()) // 记录当前经纬度 缺省
-      this.map.remove() // 清除地图资源
+      this.$store.commit('app/setDefaultLonLat', this.map.getCenter())
+      this.$store.commit('app/setDefaultZoom', this.map.getZoom())
    }
  },
  watch: {
--- a/src/components/PlaneStatus.vue
+++ b/src/components/PlaneStatus.vue
@ -180,6 +180,7 @@ export default {
  watch: {
    heartRandom: {
      handler () {
+        console.log('心跳：', this.plane.heartBeat)
        // 心跳动画
        this.heartAnimation = true
        setTimeout(() => {
--- a/src/store/index.js
+++ b/src/store/index.js
@ -17,7 +17,7 @@ const store = new Vuex.Store({
    airList: [], // 所有飞机列表
    siteList: [], // 站点列表
    routeList: [], // 航线列表
-    noflyData: [], // 禁飞区数据
+    noflyData: [[], []], // [0]禁飞区数据 [1]限制飞区
    categoryList: [], // 分类列表(小程序)
    spuList: [], // 商品spu列表
    skuList: [], // 商品sku列表
@ -69,8 +69,15 @@ const store = new Vuex.Store({
    /**
     * @description: 设置禁飞区列表
     */
-    setNoflyData (state, data) {
-      state.noflyData = data
+    setNoflyData (state, payload) {
+      if (payload && payload.nofly_data && payload.restrictfly_data) {
+        state.noflyData = [
+          JSON.parse(payload.nofly_data || '[]'),
+          JSON.parse(payload.restrictfly_data || '[]')
+        ]
+      } else {
+        state.noflyData = [[], []]
+      }
    },
    /**
     * @description: 设置分类列表
@ -607,16 +614,21 @@ const store = new Vuex.Store({
    },
    /**
     * @description: 获取禁飞区数据
+     * @param {str} shopId 需要传shopId（总管理员调用其他商铺禁飞区）
     */
-    async fetchNoflyData ({ commit }) {
-      const res = await api.get('getNoflyData')
+    async fetchNoflyData ({ commit }, shopId) {
+      const params = new FormData()
+      params.append('shop_id', shopId)
+
+      const res = await api.post('getNoflyData', params, 'Plane')
+
      if (res.data.status === 1) {
        commit('setNoflyData', res.data.noflyData)
      } else {
-        commit('setNoflyData', {})
-        Message.warning(res.data.msg)
+        commit('setNoflyData', [[], []])
+        Message.warning(res.data.msg || '暂无禁飞区数据')
      }
-      return res.data.routeData
+      return res
    },
    /**
     * @description: 获取分类列表
--- a/src/utils/api/table.js
+++ b/src/utils/api/table.js
@ -190,3 +190,31 @@ export async function saveFlyData (data) {
  const res = await api.post('saveFlyData', params, 'Plane')
  return res
 }
+
+/**
+ * @description: 保存禁飞区数据
+ * @param {string|number} shop_id 商铺ID
+ * @param {Array} nofly_data 禁飞区数据数组
+ * @param {Array} restrictfly_data 限制飞区数据数组
+ * @returns {Object|null} 返回接口响应数据 或 null 表示失败
+ */
+export async function setNoflyData (shopId, noflyData, restrictflyData) {
+  try {
+    const params = new URLSearchParams()
+    params.append('shop_id', shopId || '')
+    params.append('nofly_data', JSON.stringify(noflyData || []))
+    params.append('restrictfly_data', JSON.stringify(restrictflyData || []))
+
+    const res = await api.post('setNoflyData', params)
+    if (res.data.status === 1) {
+      store.dispatch('fetchNoflyData', shopId)// 更新禁飞区数据
+      Message.success(res.data.msg)
+    } else {
+      Message.warning(res.data.msg)
+    }
+    return res.data
+  } catch (error) {
+    Message.error('保存禁飞区数据失败')
+    return null
+  }
+}
--- a/src/utils/mapboxgl_plugs/index.js
+++ b/src/utils/mapboxgl_plugs/index.js
@ -1,6 +1,8 @@
 import mapboxgl from 'mapbox-gl'
 import MapboxDraw from '@mapbox/mapbox-gl-draw'
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
+import { setNoflyData } from '@/utils/api/table'
+import { Message } from 'element-ui'

 /**
 * 自定义地图样式切换控件
@ -216,7 +218,7 @@ export class CustomFullscreenControl extends mapboxgl.FullscreenControl {
  }
 }

-// 禁飞区控件
+// 禁飞区 限飞区 保存 删除控件
 export class NoFlyControl {
  constructor (options = {}) {
    this._map = null
@ -224,7 +226,8 @@ export class NoFlyControl {
    this._draw = null
    this._onDrawFinish = options.onDrawFinish || function () {}
    this._defaultPolygons = options.defaultPolygons || []
-    this._onSave = options.onSave || function () {}
+    this._onSave = options.onSave || function () { }
+    this._shopId = options.shopId
  }

  onAdd (map) {
@ -360,11 +363,22 @@ export class NoFlyControl {
    }
  }

-  _savePolygons () {
+  async _savePolygons () {
    if (!this._draw) return
    const allFeatures = this._draw.getAll()
-    const polygons = allFeatures.features.map(f => f.geometry.coordinates)
-    // 调用传入的保存回调
+
+    const polygons = allFeatures.features
+      .filter(f => f.geometry.type === 'Polygon')
+      .map(f => f.geometry.coordinates[0]) // 解开一层数组 ✅
+
+    try {
+      const shopId = this._shopId
+      await setNoflyData(shopId, polygons, [])
+    } catch (error) {
+      Message.error('上传禁飞区数据时发生错误')
+      console.error(error)
+    }
+
    this._onSave(polygons)
  }
 }
--- a/src/views/layout/components/main/nofly/set.vue
+++ b/src/views/layout/components/main/nofly/set.vue
@ -1,6 +1,6 @@
 <template>
  <div class="h-100">
-    <map-box ref="mapbox" :enableNofly="true"/>
+    <map-box v-if="showMapbox" :key="mapboxKey" ref="mapbox" :enableNofly="true" />
  </div>
 </template>

@ -9,17 +9,19 @@ import MapBox from '@/components/MapBox'

 export default {
  name: 'Nofly',
-  data () {
-    return {
-    }
-  },
  components: {
    MapBox
  },
+  data () {
+    return {
+      showMapbox: true,
+      mapboxKey: 0
+    }
+  },
  computed: {
-    /**
-     * @description: 侧边栏显隐
-     */
+    noflyData () {
+      return this.$store.state.noflyData
+    },
    isCollapse () {
      return this.$store.state.app.isCollapse
    }
@ -30,20 +32,25 @@ export default {
  mounted () {
  },
  watch: {
-    /**
-     * @description: 侧边栏缩进有变化时 地图重新自适应
-     */
-    isCollapse: {
-      handler (val) {
+    noflyData: {
+      deep: true,
+      immediate: true,
+      handler () {
+        this.showMapbox = false
+        this.$nextTick(() => {
+          this.mapboxKey++
+          this.showMapbox = true
+        })
+      }
+    },
+    isCollapse (val) {
      if (val) {
        this.$refs.mapbox.handleResize()
      }
    }
  }
-  },
-  destroyed () {
-  }
 }
+
 </script>

-<style></style>
+<style scoped></style>
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@ -112,7 +112,7 @@ export default {
    this.$store.dispatch('fetchAdminList')// 获取管理员列表
    this.$store.dispatch('fetchSiteList')// 获取站点列表
    this.$store.dispatch('fetchRouteList')// 获取航线列表
-    this.$store.dispatch('fetchNoflyData')// 获取禁飞区数据
+    this.$store.dispatch('fetchNoflyData', this.shop_id)// 获取禁飞区数据 注意这里要有shopid  总管理员再操作其他商铺飞机时 要刷新此缓存 需要对应商铺的禁飞区数据
    this.$store.dispatch('fetchCategoryList')// 获取分类列表（小程序）
    this.$store.dispatch('fetchSpuList')// 获取商品spu列表
    this.$store.dispatch('fetchSkuList')// 获取商品sku列表