【类 型】：feat 电量显示组件 有大电流时 显示剩余续航

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

src/components/BatteryStatus.vue

@@ -1,11 +1,19 @@
 <template>
   <div class="w-100 batteryBar">
-    <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="statusColor">
-      {{ batteryRemainingPower }} mAh
+    <!-- 进度条显示剩余电量 -->
+    <el-progress class="z90" :percentage="batteryRemaining" :show-text="false" :stroke-width="3" :color="statusColor"></el-progress>
+
+    <!-- Tooltip 组件，用于显示电量或续航时间 -->
+    <tooltip v-if="showTooltip" class="z90" :horizontalPosition="`${batteryRemaining}%`" :backgroundColor="statusColor">
+      <template v-if="showBattery">
+        {{ batteryRemainingPower }} mAh
+      </template>
+      <template v-else>
+        {{ endurance }} 分钟
+      </template>
     </tooltip>
+
+    <!-- 当返航剩余电量大于 5 时，显示返航提示 -->
     <tooltip v-if="rtlRemaining > 5" class="z90" :horizontalPosition="`${rtlRemaining}%`" backgroundColor="#ff3333">
       返
     </tooltip>
@@ -19,7 +27,9 @@ export default {
   name: 'BatteryStatus',
   data () {
     return {
-      rtlRemainingPower: 0
+      rtlRemainingPower: 0, // 返航所需电量
+      showBattery: true, // 用于控制显示电量或续航时间
+      interval: null // 用于存储定时器 ID
     }
   },
   computed: {
@@ -29,7 +39,7 @@ export default {
       const rtl = this.rtlRemaining
       // 计算剩余电量与返航电量的差值
       const percentage = remaining - rtl
-      // 将百分比值限制在0到100范围内
+      // 将百分比值限制在 0 到 100 范围内
       const normalizedPercentage = Math.max(0, Math.min(100, percentage))
       // 定义起始和结束的色相值 (0 - 360)
       const startHue = 200 // 代表 #00C8C8
@@ -39,24 +49,32 @@ export default {
       // 设置饱和度和亮度（可以根据需要调整）
       const saturation = 90 // 饱和度保持不变
       const lightness = 50 // 亮度保持不变
-      // 返回HSL颜色值
+      // 返回 HSL 颜色值
       return `hsl(${hue}, ${saturation}%, ${lightness}%)`
     },
-    // 电池剩余电量值 ma
+    // 电池剩余电量值 (mAh)
     batteryRemainingPower () {
-      // 检查 this.plane 是否存在，以及 this.plane.planeState 是否存在
       if (this.plane && this.plane.planeState) {
         const battCapacity = this.plane.planeState.battCapacity
         const batteryRemaining = this.plane.planeState.batteryRemaining
-        // 检查 battCapacity 和 batteryRemaining 是否有效
         if (battCapacity !== undefined && batteryRemaining !== undefined) {
           return (battCapacity / 100) * batteryRemaining
         }
       }
-      // 如果上述检查未通过，返回 0
       return 0
     },
-    // 剩余电量 百分比
+    // 剩余飞行时间 (分钟)
+    endurance () {
+      if (this.plane && this.plane.planeState && this.plane.planeState.currentBattery > 2) {
+        return Math.floor(this.batteryRemainingPower / 1000 / this.plane.planeState.currentBattery * 60)
+      }
+      return 0
+    },
+    // 控制 Tooltip 显示的条件
+    showTooltip () {
+      return this.batteryRemainingPower || this.endurance
+    },
+    // 剩余电量 (百分比)
     batteryRemaining () {
       if (this.plane && this.plane.planeState && this.plane.planeState.batteryRemaining !== undefined) {
         const remaining = this.plane.planeState.batteryRemaining
@@ -70,11 +88,7 @@ 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
@@ -84,17 +98,54 @@ export default {
   },
   props: {
     plane: {
-      typeof: 'Object',
+      type: Object,
       deep: true
     }
   },
   components: {
     Tooltip
   },
-  created () {
-    setInterval(() => {
-      this.rtlRemainingPower += 0
-    }, 1)
+  methods: {
+    /**
+     * 剩余电量与剩余续航时间轮播
+     */
+    startInterval () {
+      this.interval = setInterval(() => {
+        this.showBattery = !this.showBattery
+      }, 3000)
+    },
+    clearInterval () {
+      if (this.interval) {
+        clearInterval(this.interval)
+        this.interval = null
+      }
+    },
+    checkDisplayConditions () {
+      this.clearInterval()
+      // 如果存在剩余电量和剩余续航时间，则启动轮播
+      if (this.batteryRemainingPower > 0 && this.endurance > 0) {
+        this.startInterval()
+      }
+    }
+  },
+  watch: {
+    batteryRemainingPower () {
+      this.checkDisplayConditions()
+    },
+    endurance (val) {
+      this.checkDisplayConditions()
+      if (val === 0) {
+        this.showBattery = true
+      }
+    }
+  },
+  mounted () {
+    // 在组件挂载时检查显示条件
+    this.checkDisplayConditions()
+  },
+  beforeDestroy () {
+    // 在组件销毁前清除定时器
+    this.clearInterval()
   }
 }
 </script>