【类 型】：feat 电量显示控件

【原  因】：显示电量总量 剩余量  返航点
【过  程】：
【影  响】：

src/components/BatteryStatus.vue

@@ -0,0 +1,43 @@
+<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
+    </tooltip>
+  </div>
+</template>
+
+<script>
+import Tooltip from '@/components/Tag/Tooltip'
+
+export default {
+  name: 'BatteryStatus',
+  data () {
+    return {
+    }
+  },
+  props: {
+    plane: {
+      typeof: 'Object',
+      deep: true
+    }
+  },
+  components: {
+    Tooltip
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/theme.scss";
+
+.batteryBar {
+  z-index: 90;
+}
+
+.rtlMark {
+  z-index: 90;
+}
+</style>

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

@@ -2,6 +2,7 @@
   <div class="h-100">
     <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>
@@ -13,6 +14,7 @@
 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 {
@@ -26,7 +28,8 @@ export default {
   },
   components: {
     MapBox,
-    ControllerTabs
+    ControllerTabs,
+    BatteryStatus
     // PlaneStatus
   },
   computed: {