【类 型】：fix 电量组件 未拿到飞机数据之前 渲染视图报错

【原  因】：没有数据之前渲染视图
【过  程】：给默认值  拿到数据在渲染视图
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

src/components/BatteryStatus.vue

@@ -1,10 +1,12 @@
 <template>
-  <div class="w-100" style="position: absolute;">
-    <!-- <el-progress class="batteryBar" :percentage="plane.planeState.batteryRemaining" :show-text="false"
-      stroke-width="2"></el-progress> -->
-    <el-progress class="batteryBar" :percentage="80" :show-text="false" stroke-width="4"></el-progress>
-    <tooltip class="rtlMark" :horizontalPosition="'20%'" backgroundColor="#ff3333">
-      H
+  <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>
@@ -18,6 +20,37 @@ export default {
     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',
@@ -26,6 +59,8 @@ export default {
   },
   components: {
     Tooltip
+  },
+  created () {
   }
 }
 </script>
@@ -34,10 +69,6 @@ export default {
 @import "@/styles/theme.scss";
 
 .batteryBar {
-  z-index: 90;
-}
-
-.rtlMark {
-  z-index: 90;
+  position: absolute;
 }
 </style>

src/views/layout/components/main/planes/index.vue

@@ -3,7 +3,6 @@
     <map-box ref="mapbox" :key="mapBoxKey" class="ofh">
       <template #content>
         <BatteryStatus :plane="plane" />
-        <!-- <PlaneStatus :plane="plane" /> -->
         <ControllerTabs :plane="plane" @mapXOffset="mapXOffset" @makeRoute="makeRoute" @clearRoute="clearRoute" />
       </template>
     </map-box>
@@ -15,7 +14,6 @@ import mqtt from '@/utils/mqtt'
 import MapBox from '@/components/MapBox'
 import ControllerTabs from '@/components/ControllerTabs'
 import BatteryStatus from '@/components/BatteryStatus'
-// import PlaneStatus from '@/components/PlaneStatus'
 
 export default {
   name: 'Planes',
@@ -30,7 +28,6 @@ export default {
     MapBox,
     ControllerTabs,
     BatteryStatus
-    // PlaneStatus
   },
   computed: {
     plane () {
@@ -105,8 +102,7 @@ export default {
     plane: {
       handler (val) {
         this.makePlane(val)// 有飞机数据之后 在地图上创建飞机
-        if (val.planeState.battCapacity === null) {
-          console.log(val.planeState.battCapacity)
+        if (!val.planeState.battCapacity) {
           mqtt.publishFun(`cmd/${this.plane.macadd}`, '{"getBattCapacity":1}')// 发送设置飞机状态主题 请求飞控返回 电池总容量
         }
       },