From 7490cff74de77c33641254fdcf7d44ff1a688e63 Mon Sep 17 00:00:00 2001
From: tk <szdot@live.com>
Date: Wed, 24 Jul 2024 18:16:03 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afeat=20=E7=94=B5=E9=87=8F=E6=9D=A1=E6=8E=A7=E4=BB=B6?=
 =?UTF-8?q?=20=E5=8F=98=E8=89=B2=E5=8A=9F=E8=83=BD=20=E3=80=90=E5=8E=9F=20?=
 =?UTF-8?q?=20=E5=9B=A0=E3=80=91=EF=BC=9A=E8=B5=B7=E8=AD=A6=E7=A4=BA?=
 =?UTF-8?q?=E4=BD=9C=E7=94=A8=20=E3=80=90=E8=BF=87=20=20=E7=A8=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=E5=BD=93=E5=89=8D=E7=94=B5=E9=87=8F=E8=B6=8A=E6=8E=A5?=
 =?UTF-8?q?=E8=BF=91=E8=BF=94=E8=88=AA=E6=89=80=E9=9C=80=E7=94=B5=E9=87=8F?=
 =?UTF-8?q?=20=E9=A2=9C=E8=89=B2=E8=B6=8A=E7=BA=A2=20=E3=80=90=E5=BD=B1=20?=
 =?UTF-8?q?=20=E5=93=8D=E3=80=91=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BatteryStatus.vue | 48 +++++++++++++++++++++++++++-----
 src/components/MapBox.vue        | 26 +++++++++++++++--
 2 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/src/components/BatteryStatus.vue b/src/components/BatteryStatus.vue
index a4336ae..3a33557 100644
--- a/src/components/BatteryStatus.vue
+++ b/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>
diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue
index 3c447d2..5cc5755 100644
--- a/src/components/MapBox.vue
+++ b/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>