food/src/components/BatteryStatus.vue

<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
    </tooltip>
    <tooltip v-if="rtlRemaining > 5" class="z90" :horizontalPosition="`${rtlRemaining}%`" backgroundColor="#ff3333">
      返
    </tooltip>
  </div>
</template>

<script>
import Tooltip from '@/components/Tag/Tooltip'

export default {
  name: 'BatteryStatus',
  data () {
    return {
      rtlRemainingPower: 0
    }
  },
  computed: {
    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) {
        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
    },
    // 剩余电量 百分比
    batteryRemaining () {
      if (this.plane && this.plane.planeState && this.plane.planeState.batteryRemaining !== undefined) {
        const remaining = this.plane.planeState.batteryRemaining
        if (remaining < 0) {
          return 0
        } else if (remaining > 100) {
          return 100
        } else {
          return Number(remaining)
        }
      }
      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: {
      typeof: 'Object',
      deep: true
    }
  },
  components: {
    Tooltip
  },
  created () {
    setInterval(() => {
      this.rtlRemainingPower += 0
    }, 1)
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.batteryBar {
  position: absolute;
}
</style>