From 0d2c74bfed954af8d274904d50e354de09fe2c11 Mon Sep 17 00:00:00 2001
From: tk <szdot@live.com>
Date: Wed, 24 Jul 2024 16:45:05 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afix=20=E7=94=B5=E9=87=8F=E7=BB=84=E4=BB=B6=20=E6=9C=AA?=
 =?UTF-8?q?=E6=8B=BF=E5=88=B0=E9=A3=9E=E6=9C=BA=E6=95=B0=E6=8D=AE=E4=B9=8B?=
 =?UTF-8?q?=E5=89=8D=20=20=E6=B8=B2=E6=9F=93=E8=A7=86=E5=9B=BE=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99=20=E3=80=90=E5=8E=9F=20=20=E5=9B=A0=E3=80=91=EF=BC=9A?=
 =?UTF-8?q?=E6=B2=A1=E6=9C=89=E6=95=B0=E6=8D=AE=E4=B9=8B=E5=89=8D=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E8=A7=86=E5=9B=BE=20=E3=80=90=E8=BF=87=20=20=E7=A8=8B?=
 =?UTF-8?q?=E3=80=91=EF=BC=9A=E7=BB=99=E9=BB=98=E8=AE=A4=E5=80=BC=20=20?=
 =?UTF-8?q?=E6=8B=BF=E5=88=B0=E6=95=B0=E6=8D=AE=E5=9C=A8=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE=20=E3=80=90=E5=BD=B1=20=20=E5=93=8D=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动
---
 src/components/BatteryStatus.vue              | 53 +++++++++++++++----
 .../layout/components/main/planes/index.vue   |  6 +--
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/components/BatteryStatus.vue b/src/components/BatteryStatus.vue
index 2a84ed3..a4336ae 100644
--- a/src/components/BatteryStatus.vue
+++ b/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>
diff --git a/src/views/layout/components/main/planes/index.vue b/src/views/layout/components/main/planes/index.vue
index bf36d88..c109036 100644
--- a/src/views/layout/components/main/planes/index.vue
+++ b/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}')// 发送设置飞机状态主题 请求飞控返回 电池总容量
         }
       },