【类 型】：feat 参数控制 地图 子组件 显隐

【原  因】：比如跟随飞机组件 在概况地图中时不用显示的
【过  程】：通过参数设置
【影  响】：

src/components/MapBox.vue

@@ -133,6 +133,28 @@ export default {
       ]
     }
   },
+  props: {
+    enableFollow: { // 开启跟随组件
+      type: Boolean,
+      default: false
+    },
+    enableSwitch: { // 开启 地图选择
+      type: Boolean,
+      default: true
+    },
+    enableZoom: { // 开启 地图放大组件
+      type: Boolean,
+      default: true
+    },
+    enblueTranslate: { // 开启 地图移动旋转 组件
+      type: Boolean,
+      default: true
+    },
+    enblueScale: { // 开启 地图 距离比例 组件
+      type: Boolean,
+      default: false
+    }
+  },
   computed: {
     defaultLnglat () {
       return this.$store.getters['app/getDefaultLngLat']
@@ -228,18 +250,28 @@ export default {
       })
       /* 地图控件 */
       // 移动旋转指南针
+      if (this.enblueTranslate) {
         this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')
+      }
+
       // 地图比例
-      // this.map.addControl(new mapboxgl.ScaleControl(), 'top-right')
+      if (this.enblueScale) {
+        this.map.addControl(new mapboxgl.ScaleControl(), 'bottom-right')
+      }
       // 全屏 并再之后 刷新地图
+      if (this.enableZoom) {
         this.map.addControl(new CustomFullscreenControl(this.handleResize), 'top-right')
+      }
 
       // 地图样式选择控件
       // 自定义地图样式列表
+      if (this.enableSwitch) {
         const styleSwitcherControl = new MapboxStyleSwitcherControl(this.mapStyles, 'iconfont icon-duozhang f-s-20', this.currentStyleIndex)
         this.map.addControl(styleSwitcherControl, 'top-right')
+      }
 
       // 飞机跟随
+      if (this.enableFollow) {
         this.map.addControl(new FollowControl({
           defaultIconClass: 'iconfont icon-weidingwei f-s-20', // 默认图标
           activeIconClass: 'iconfont icon-dingwei f-s-20 brandFontColor', // 激活时图标
@@ -250,6 +282,7 @@ export default {
             }
           }
         }), 'top-right')
+      }
     },
     /**
      * @description: 清除地图上的航线

src/components/PlaneStatus.vue

@@ -13,8 +13,8 @@
     </div>
     <!-- 飞机模式 -->
     <div class="flex">
-      <div v-if="planeMode" class="plane-mode p-l-5 p-r-5 mc mac">
-        <font class="plane-mode-text">{{ planeMode }}</font>
+      <div v-if="getPlaneMode" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ getPlaneMode }}</font>
       </div>
       <div class="tag flex mac mc iconfont icon-moshixuanze">
       </div>
@@ -37,7 +37,7 @@
     </div>
     <!-- 电池电流 -->
     <div class="flex">
-      <div v-if="currentBattery " class="plane-mode p-l-5 p-r-5 mc mac">
+      <div v-if="currentBattery" class="plane-mode p-l-5 p-r-5 mc mac">
         <font class="plane-mode-text">{{ currentBattery }}A</font>
       </div>
       <div class="tag flex mac mc iconfont icon-dianliu">
@@ -45,16 +45,25 @@
     </div>
     <!-- 飞机高度 -->
     <div class="flex">
+      <div v-if="positionAlt" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ positionAlt }}米</font>
+      </div>
       <div class="tag flex mac mc iconfont icon-gaodu">
       </div>
     </div>
     <!-- 飞机对地速度 -->
     <div class="flex">
+      <div v-if="groundSpeed" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ groundSpeed }}米/秒</font>
+      </div>
       <div class="tag flex mac mc iconfont icon-sudu">
       </div>
     </div>
-    <!-- 钩子状态 1px solid #ddd-->
+    <!-- 飞机载重 钩子状态 -->
     <div class="flex">
+      <div v-if="loadweight" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{hookstatus}} {{ loadweight }}克</font>
+      </div>
       <div class="tag flex mac mc iconfont icon-mianxingdiaogou">
       </div>
     </div>
@@ -100,7 +109,7 @@ export default {
       return true
     },
     // 飞机模式
-    planeMode () {
+    getPlaneMode () {
       if (this.plane && this.plane.planeState) {
         return this.plane.planeState.getPlaneMode
       }
@@ -137,6 +146,34 @@ export default {
         }
       }
       return null
+    },
+    // 飞机高度
+    positionAlt () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.positionAlt
+      }
+      return null
+    },
+    // 飞机对地速度
+    groundSpeed () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.groundSpeed
+      }
+      return null
+    },
+    // 钩子状态
+    hookstatus () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.hookstatus
+      }
+      return null
+    },
+    // 飞机载重
+    loadweight () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.loadweight
+      }
+      return null
     }
   },
   watch: {

src/views/layout/components/main/planes/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-100">
-    <map-box ref="mapbox">
+    <map-box ref="mapbox" :enableFollow="true" :enblueScale="!widthLt480">
       <template #content>
         <BatteryStatus :plane="plane" />
         <PlaneStatus :plane="plane" />
@@ -54,6 +54,12 @@ export default {
      */
     isCollapse () {
       return this.$store.state.app.isCollapse
+    },
+    /**
+     * @description: 屏幕宽度是否小于480
+     */
+    widthLt480 () {
+      return window.innerWidth < 480
     }
   },
   methods: {