From c4f06be21d8dfc2a3299a8751200d08811bb8d9a Mon Sep 17 00:00:00 2001
From: tk <szdot@live.com>
Date: Wed, 24 Jul 2024 20:50:34 +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=9Afeat=20=E9=A3=9E=E6=9C=BA=E7=8A=B6=E6=80=81=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20=E3=80=90=E5=8E=9F=20=20=E5=9B=A0=E3=80=91=EF=BC=9A?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=88=B0=E5=B7=A6=E4=BE=A7=E6=95=B0=E5=88=97?=
 =?UTF-8?q?=20=E9=98=B2=E6=AD=A2=E6=A8=AA=E7=BA=BF=E6=8E=92=E5=88=97?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E8=A1=A5=E5=85=A8=E9=97=AE=E9=A2=98=20?=
 =?UTF-8?q?=E3=80=90=E8=BF=87=20=20=E7=A8=8B=E3=80=91=EF=BC=9A=20=E3=80=90?=
 =?UTF-8?q?=E5=BD=B1=20=20=E5=93=8D=E3=80=91=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PlaneStatus.vue                | 69 ++++++++++++++++++-
 .../layout/components/main/planes/index.vue   |  5 +-
 2 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/src/components/PlaneStatus.vue b/src/components/PlaneStatus.vue
index ed09c49..2038559 100644
--- a/src/components/PlaneStatus.vue
+++ b/src/components/PlaneStatus.vue
@@ -1,6 +1,15 @@
 <template>
-  <div>
-
+  <div class="mainBox flex column ofh">
+    <!-- 心跳 -->
+    <div class="tag flex mac mc">
+      <div :class="online ? heartAnimation ? 'icon-heart online' : 'icon-heart1 online' : 'icon-xinsui offline'"
+        class="iconfont f-s-24"></div>
+    </div>
+    <!-- 卫星 -->
+    <div class="tag flex mac">
+      <div class="iconfont icon-weixing f-s-24"></div>
+      <div>{{ satCount }}颗</div>
+    </div>
   </div>
 
 </template>
@@ -11,6 +20,10 @@ export default {
   name: 'PlaneStatus',
   data () {
     return {
+      /* 心跳 */
+      heartAnimation: false, // 控制心跳动画图标
+      online: false,
+      isOnlineSetTimeout: null
     }
   },
   props: {
@@ -20,11 +33,41 @@ export default {
     }
   },
   components: {
-
   },
   computed: {
+    // 心跳随机数
+    heartRandom () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.heartRandom
+      }
+      return 0
+    },
+    // 卫星数
+    satCount () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.satCount
+      }
+      return 0
+    }
   },
   watch: {
+    heartRandom: {
+      handler (val) {
+        // 心跳动画
+        this.heartAnimation = true
+        setTimeout(() => {
+          this.heartAnimation = false
+        }, 500)
+        // 在线状态
+        if (this.isOnlineSetTimeout) { // 进入本次心跳 删除掉线计时 既以下会重新计时
+          clearInterval(this.isOnlineSetTimeout)
+        }
+        this.online = true
+        this.isOnlineSetTimeout = setTimeout(() => { // 计时10秒后 掉线
+          this.online = false
+        }, 10000)
+      }
+    }
   },
   methods: {},
   created () {
@@ -35,4 +78,24 @@ export default {
 
 <style lang="scss" scoped>
 @import "@/styles/theme.scss";
+
+.mainBox {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 90;
+  background-color: white;
+  border-radius: 4px;
+}
+
+.tag {
+  height: 29px;
+  min-width: 29px;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  border: 0;
+  overflow: hidden;
+}
 </style>
diff --git a/src/views/layout/components/main/planes/index.vue b/src/views/layout/components/main/planes/index.vue
index c109036..a61ad72 100644
--- a/src/views/layout/components/main/planes/index.vue
+++ b/src/views/layout/components/main/planes/index.vue
@@ -3,6 +3,7 @@
     <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>
@@ -14,6 +15,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 {
   name: 'Planes',
@@ -27,7 +29,8 @@ export default {
   components: {
     MapBox,
     ControllerTabs,
-    BatteryStatus
+    BatteryStatus,
+    PlaneStatus
   },
   computed: {
     plane () {