【类型】：feat 返航子组件

【原因】：【过程】：获取home点坐标和飞机坐标算出返航距离算出返航时间和所需电量组件百分之显示到电量进度条上【影响】：
2024-08-15 15:37:46 +08:00 · 2024-08-15 15:37:46 +08:00 · e78c432de2
commit e78c432de2
parent 99cc2c193a
4 changed files with 55 additions and 112 deletions
--- a/src/components/BatteryStatus.vue
+++ b/src/components/BatteryStatus.vue
@ -1,7 +1,8 @@
 <template>
  <div class="w-100 batteryBar">
    <!-- 进度条显示剩余电量 -->
-    <el-progress class="z90" :percentage="batteryRemaining" :show-text="false" :stroke-width="3" :color="statusColor"></el-progress>
+    <el-progress class="z90" :percentage="batteryRemaining" :show-text="false" :stroke-width="3"
+      :color="statusColor"></el-progress>

    <!-- Tooltip 组件，用于显示电量或续航时间 -->
    <tooltip v-if="showTooltip" class="z90" :horizontalPosition="`${batteryRemaining}%`" :backgroundColor="statusColor">
@ -14,7 +15,7 @@
    </tooltip>

    <!-- 当返航剩余电量大于 5 时，显示返航提示 -->
-    <tooltip v-if="rtlRemaining > 5" class="z90" :horizontalPosition="`${rtlRemaining}%`" backgroundColor="#ff3333">
+    <tooltip v-if="rtlRemaining > 0" class="z90" :horizontalPosition="`${rtlRemaining}%`" backgroundColor="#ff3333">
      返
    </tooltip>
  </div>
@ -22,12 +23,12 @@

 <script>
 import Tooltip from '@/components/Tooltip'
+import geodist from 'geodist'

 export default {
  name: 'BatteryStatus',
  data () {
    return {
-      rtlRemainingPower: 0, // 返航所需电量
      showBattery: true, // 用于控制显示电量或续航时间
      interval: null // 用于存储定时器 ID
    }
@ -90,10 +91,48 @@ export default {
    },
    // 返航所需电量 (百分比)
    rtlRemaining () {
-      if (this.plane && this.plane.planeState && this.plane.planeState.battCapacity) {
-        return this.rtlRemainingPower / this.plane.planeState.battCapacity * 100
+      let rtlTime = 0 // 返航所需时间（秒）
+      if (this.planePosition && this.homePosition && this.wpnavSpeed) {
+        const planeLngLat = { lat: this.planePosition[1], lon: this.planePosition[0] }
+        const homeLngLat = { lat: this.homePosition.lat, lon: this.homePosition.lng }
+        const horizontalDistance = geodist(planeLngLat, homeLngLat, { unit: 'meters' }) // 水平距离
+        const verticalDistance = Math.abs(this.planePosition[2] - this.homePosition.alt) // 垂直距离
+        const rtlDistance = horizontalDistance + verticalDistance // 返航总距离 水平+高度
+        rtlTime = Math.floor(Number(rtlDistance) / Number(this.wpnavSpeed)) // 返航需要时间 单位：秒
      }
-      return 0
+      if (rtlTime <= 0) {
+        return 0
+      }
+      const currentBattery = this.plane.planeState.currentBattery // 电流 (安培)
+      const batteryCapacity = this.plane.planeState.battCapacity // 电池总容量 (mAh)
+      // 计算返航所需电量（mAh），假设电流与电量是线性关系
+      const rtlPowerRequired = rtlTime * currentBattery / 3.6 // 返航所需电量 (mAh)
+      console.log(rtlPowerRequired)
+      // 计算返航所需电量占总电量的百分比
+      const rtlPowerPercentage = (rtlPowerRequired / batteryCapacity) * 100
+      // 将百分比限制在 0 到 100 范围内
+      return Math.max(0, Math.min(100, rtlPowerPercentage))
+    },
+    // 返航点
+    homePosition () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.homePosition
+      }
+      return null
+    },
+    // 飞机当前位置
+    planePosition () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.position[0]
+      }
+      return null
+    },
+    // 飞机返航速度
+    wpnavSpeed () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.wpnavSpeed
+      }
+      return null
    }
  },
  props: {
--- a/src/components/PlaneStatus
+++ b/src/components/PlaneStatus
@ -1,103 +0,0 @@
-<template>
-  <div>
-    <el-row class="m-15" type="flex" justify="space-between">
-      <el-col :span="2">
-        <PublicTag icon="icon-weixing" :val="plane.planeState.satCount" unit="颗" state="normal" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-weixing" :val="plane.planeState.voltagBattery" unit="V" state="normal" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-weixing" :val="plane.planeState.loadweight" unit="克" state="normal" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-gaodu" :val="plane.planeState.state" unit="状" state="normal" />
-      </el-col>
-      <el-col :span="3">
-        <HeartTag :heartBeat="plane.planeState.heartBeat" :heartRandom="plane.planeState.heartRandom"
-          :getPlaneMode="plane.planeState.getPlaneMode" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-mianxingdiaogou" :val="plane.planeState.hookstatus" unit="" state="normal" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-gaodu" :val="plane.planeState.positionAlt" unit="米" state="normal" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-gaodu" :val="plane.planeState.currentBattery" unit="安" state="danger" />
-      </el-col>
-      <el-col :span="2">
-        <PublicTag icon="icon-gaodu" :val="plane.planeState.battCapacity" unit="%" state="danger" />
-      </el-col>
-    </el-row>
-    <div class="batteryBox">
-      <!-- <el-progress :percentage="plane.planeState.batteryRemaining" :show-text="false" stroke-width="2"></el-progress>
-      <tooltip :horizontalPosition="'80%'" backgroundColor="#ff3333">
-        H
-      </tooltip> -->
-    </div>
-  </div>
-
-</template>
-
-<script>
-import HeartTag from '@/components/Tag/HeartTag'
-import PublicTag from '@/components/Tag/PublicTag'
-// import Tooltip from '@/components/Tag/Tooltip'
-import geodist from 'geodist'
-
-export default {
-  name: 'PlaneStatus',
-  data () {
-    return {
-      distance: 0
-    }
-  },
-  props: {
-    plane: {
-      typeof: 'Object',
-      deep: true
-    }
-  },
-  components: {
-    HeartTag,
-    PublicTag
-    // Tooltip
-  },
-  computed: {
-  },
-  watch: {
-    distance (val) {
-      console.log(val + '米')
-    }
-  },
-  methods: {},
-  created () {
-    try {
-      const point1 = { lat: 52.518611, lon: 13.408056 }
-      const point2 = { lat: 51.507222, lon: -0.1275 }
-      this.distance = geodist(point1, point2, { unit: 'meters' })
-    } catch (error) {
-      console.error('Error calculating distance:', error)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "@/styles/theme.scss";
-
-.el-row {
-  z-index: 90;
-}
-
-.batteryBox {}
-
-.batteryBox .el-progress {
-  z-index: 90;
-}
-
-.batteryBox .el-tooltip {
-  z-index: 90;
-}
-</style>
--- a/src/store/index.js
+++ b/src/store/index.js
@ -274,7 +274,7 @@ const store = new Vuex.Store({
          voltagBattery: null, // 电压信息
          currentBattery: null, // 电流信息
          batteryRemaining: null, // 电池电量
-          positionAlt: null, // 高度信息
+          positionAlt: null, // 海拔高度信息
          groundSpeed: null, // 对地速度
          satCount: null, // 卫星数量
          latitude: null, // 纬度
@ -285,9 +285,10 @@ const store = new Vuex.Store({
          getPlaneMode: null, // 飞机模式
          loadweight: null, // 重量
          hookstatus: null, // 钩子状态
-          position: [], // [[经度，维度，海拔高度]]累计数组
+          position: [], // [[经度，维度，相对高度]]累计数组
          battCapacity: null, // 电池容量
-          homePosition: null // 返航点位置
+          homePosition: null, // 返航点位置
+          wpnavSpeed: null// 飞机返航速度 米/秒
        }
      })
      if (res.data.status === 1) {
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@ -103,6 +103,12 @@ export default {
                  if (plane.planeState.position.length > 1000) {
                    plane.planeState.position.shift() // 删除最早的经纬度
                  }
+                } else if (key === 'homePosition') {
+                  const homePosition = JSON.parse(jsonData.homePosition)// home点反序列化再赋值
+                  homePosition.lng = homePosition.lng / 10e6
+                  homePosition.lat = homePosition.lat / 10e6
+                  homePosition.alt = Number(homePosition.alt)
+                  plane.planeState[key] = homePosition
                } else if (key === 'statusText') {
                  /* 飞控信息 插入日志 */
                  this.$store.dispatch('fetchLog', { content: jsonData[key], color: '#f57c00' })