food/src/components/BatteryStatus.vue

<template>
  <div class="w-100 batteryBar">
    <el-progress class="z90" :percentage="batteryRemaining" :show-text="false" :stroke-width="3"></el-progress>
    <tooltip v-if="batteryRemainingPower" class="z90" :horizontalPosition="`${batteryRemaining}%`"
      backgroundColor="#5cbb7a">
      {{ batteryRemainingPower }} mah
    </tooltip>
    <tooltip class="z90" :horizontalPosition="'20%'" backgroundColor="#ff3333">
      返
    </tooltip>
  </div>
</template>

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

export default {
  name: 'BatteryStatus',
  data () {
    return {
    }
  },
  computed: {
    // 电池剩余电量值 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
        }
      }
      // 如果上述检查未通过，返回 null
      return null
    },
    // 剩余电量 百分比
    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
    }

  },
  props: {
    plane: {
      typeof: 'Object',
      deep: true
    }
  },
  components: {
    Tooltip
  },
  created () {
  }
}
</script>

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

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