【类 型】：feat 电量条控件 变色功能

【原  因】：起警示作用
【过  程】：当前电量越接近返航所需电量 颜色越红
【影  响】：

src/components/BatteryStatus.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="w-100 batteryBar">
-    <el-progress class="z90" :percentage="batteryRemaining" :show-text="false" :stroke-width="3"></el-progress>
+    <el-progress class="z90" :percentage="batteryRemaining" :show-text="false" :stroke-width="3"
+      :color="statusColor"></el-progress>
     <tooltip v-if="batteryRemainingPower" class="z90" :horizontalPosition="`${batteryRemaining}%`"
       backgroundColor="#5cbb7a">
-      {{ batteryRemainingPower }} mah
+      {{ batteryRemainingPower }} 毫安
     </tooltip>
-    <tooltip class="z90" :horizontalPosition="'20%'" backgroundColor="#ff3333">
+    <tooltip v-if="rtlRemaining > 5" class="z90" :horizontalPosition="`${rtlRemaining}%`" backgroundColor="#ff3333">
       返
     </tooltip>
   </div>
@@ -18,10 +19,30 @@ export default {
   name: 'BatteryStatus',
   data () {
     return {
+      rtlRemainingPower: 0
     }
   },
   computed: {
-    // 电池剩余电量值 mah
+    statusColor () {
+      // 获取剩余电量百分比和返航电量百分比
+      const remaining = this.batteryRemaining
+      const rtl = this.rtlRemaining
+      // 计算剩余电量与返航电量的差值
+      const percentage = remaining - rtl
+      // 将百分比值限制在0到100范围内
+      const normalizedPercentage = Math.max(0, Math.min(100, percentage))
+      // 定义起始和结束的色相值 (0 - 360)
+      const startHue = 200 // 代表 #00C8C8
+      const endHue = 0 // 代表 #FF0000
+      // 根据百分比计算色相
+      const hue = Math.round(startHue + (endHue - startHue) * (100 - normalizedPercentage) / 100)
+      // 设置饱和度和亮度（可以根据需要调整）
+      const saturation = 90 // 饱和度保持不变
+      const lightness = 50 // 亮度保持不变
+      // 返回HSL颜色值
+      return `hsl(${hue}, ${saturation}%, ${lightness}%)`
+    },
+    // 电池剩余电量值 ma
     batteryRemainingPower () {
       // 检查 this.plane 是否存在，以及 this.plane.planeState 是否存在
       if (this.plane && this.plane.planeState) {
@@ -32,8 +53,8 @@ export default {
           return (battCapacity / 100) * batteryRemaining
         }
       }
-      // 如果上述检查未通过，返回 null
-      return null
+      // 如果上述检查未通过，返回 0
+      return 0
     },
     // 剩余电量 百分比
     batteryRemaining () {
@@ -48,8 +69,18 @@ export default {
         }
       }
       return 0
+    },
+    // 返航所需电量 值
+    // rtlRemainingPower () {
+    //   return 0
+    // },
+    // 返航所需电量 百分比
+    rtlRemaining () {
+      if (this.plane && this.plane.planeState && this.plane.planeState.battCapacity) {
+        return this.rtlRemainingPower / this.plane.planeState.battCapacity * 100
+      }
+      return 0
     }
-
   },
   props: {
     plane: {
@@ -61,6 +92,9 @@ export default {
     Tooltip
   },
   created () {
+    setInterval(() => {
+      this.rtlRemainingPower += 10
+    }, 1)
   }
 }
 </script>

src/components/MapBox.vue

@@ -157,7 +157,6 @@ export default {
       this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')// 移动旋转指南针
       // this.map.addControl(new mapboxgl.ScaleControl(), 'top-right')// 地图比例
       this.map.addControl(new mapboxgl.FullscreenControl(), 'top-right')// 全屏
-      // Add geolocate control to the map.
       this.map.addControl(
         new mapboxgl.GeolocateControl({
           positionOptions: {
@@ -168,7 +167,7 @@ export default {
           // Draw an arrow next to the location dot to indicate which direction the device is heading.
           showUserHeading: true
         })
-      )
+      )// 跟随
     },
     /**
      * @description: 清除地图上的航线
@@ -517,6 +516,29 @@ export default {
     }
   }
 }
+
+class CustomControl {
+  constructor({ label, onClick }) {
+    this._label = label
+    this._onClick = onClick
+  }
+
+  onAdd (map) {
+    this._map = map
+    this._container = document.createElement('div')
+    this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
+    this._button = document.createElement('button')
+    this._button.textContent = this._label
+    this._button.onclick = this._onClick
+    this._container.appendChild(this._button)
+    return this._container
+  }
+
+  onRemove () {
+    this._container.parentNode.removeChild(this._container)
+    this._map = undefined
+  }
+}
 </script>
 
 <style lang="scss" scoped>