【类 型】：

【原  因】：
【过  程】：
【影  响】：

src/components/MapBox.vue

@@ -339,37 +339,20 @@ export default {
         }), 'top-left')
       }
 
-      // 禁飞区 设置组件
+      // 禁飞区 限飞区 设置组件
       if (this.enableNofly) {
-        const defaultPolygons = [
+        const defaultPolygons = this.$store.state.noflyData[0]
-          [
+        const shopId = this.$store.state.user.shop_id
-            [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]
-          ]
-        ]
         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/setDefaultLonLat', this.map.getCenter())
-      this.$store.commit('app/setDefaultZoom', this.map.getZoom()) // 记录当前经纬度 缺省
+      this.$store.commit('app/setDefaultZoom', this.map.getZoom())
-      this.map.remove() // 清除地图资源
     }
   },
   watch: {

src/components/PlaneStatus.vue

@@ -180,6 +180,7 @@ export default {
   watch: {
     heartRandom: {
       handler () {
+        console.log('心跳：', this.plane.heartBeat)
         // 心跳动画
         this.heartAnimation = true
         setTimeout(() => {

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) {
+    setNoflyData (state, payload) {
-      state.noflyData = data
+      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 }) {
+    async fetchNoflyData ({ commit }, shopId) {
-      const res = await api.get('getNoflyData')
+      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', {})
+        commit('setNoflyData', [[], []])
-        Message.warning(res.data.msg)
+        Message.warning(res.data.msg || '暂无禁飞区数据')
       }
-      return res.data.routeData
+      return res
     },
     /**
      * @description: 获取分类列表

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
+  }
+}

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
@@ -225,6 +227,7 @@ export class NoFlyControl {
     this._onDrawFinish = options.onDrawFinish || function () {}
     this._defaultPolygons = options.defaultPolygons || []
     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)
   }
 }

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: {
-    /**
+    noflyData () {
-     * @description: 侧边栏显隐
+      return this.$store.state.noflyData
-     */
+    },
     isCollapse () {
       return this.$store.state.app.isCollapse
     }
@@ -30,20 +32,25 @@ export default {
   mounted () {
   },
   watch: {
-    /**
+    noflyData: {
-     * @description: 侧边栏缩进有变化时 地图重新自适应
+      deep: true,
-     */
+      immediate: true,
-    isCollapse: {
+      handler () {
-      handler (val) {
+        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>

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列表