From 76ea908a1cf645f8ec88ff68e8029cfe2a93e5c0 Mon Sep 17 00:00:00 2001
From: tk <szdot@live.com>
Date: Wed, 7 Aug 2024 20:04:57 +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=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=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=20=E9=A3=9E=E6=9C=BA=E5=90=84=E4=B8=AA?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E7=9A=84=E6=98=BE=E7=A4=BA=20=E3=80=90?=
 =?UTF-8?q?=E8=BF=87=20=20=E7=A8=8B=E3=80=91=EF=BC=9A=20=E3=80=90=E5=BD=B1?=
 =?UTF-8?q?=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 | 70 ++++++++++++++++++++++++++++++----
 src/views/layout/index.vue     |  2 +-
 2 files changed, 64 insertions(+), 8 deletions(-)

diff --git a/src/components/PlaneStatus.vue b/src/components/PlaneStatus.vue
index aeadded..17105bf 100644
--- a/src/components/PlaneStatus.vue
+++ b/src/components/PlaneStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mainBox flex ofh column no-select">
+  <div class="mainBox flex column no-select">
     <!-- 心跳 -->
     <div class="flex">
       <div class="tag flex mac mc iconfont"
@@ -13,21 +13,33 @@
     </div>
     <!-- 飞机模式 -->
     <div class="flex">
+      <div v-if="planeMode" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ planeMode }}</font>
+      </div>
       <div class="tag flex mac mc iconfont icon-moshixuanze">
       </div>
     </div>
     <!-- 卫星 -->
     <div class="flex">
+      <div v-if="satCount" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ fixType  }} {{ satCount }}颗</font>
+      </div>
       <div class="tag flex mac mc iconfont icon-weixing">
       </div>
     </div>
     <!-- 电池电压 -->
     <div class="flex">
+      <div v-if="voltagBattery" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ voltagBattery }}V</font>
+      </div>
       <div class="tag flex mac mc iconfont icon-dianya1">
       </div>
     </div>
     <!-- 电池电流 -->
     <div class="flex">
+      <div v-if="currentBattery " class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ currentBattery }}A</font>
+      </div>
       <div class="tag flex mac mc iconfont icon-dianliu">
       </div>
     </div>
@@ -87,12 +99,44 @@ export default {
       }
       return true
     },
+    // 飞机模式
+    planeMode () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.getPlaneMode
+      }
+      return null
+    },
     // 卫星数
     satCount () {
       if (this.plane && this.plane.planeState) {
         return this.plane.planeState.satCount
       }
-      return 0
+      return null
+    },
+    // 定位状态
+    fixType () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.fixType
+      }
+      return null
+    },
+    // 电池电压
+    voltagBattery () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.voltagBattery
+      }
+      return null
+    },
+    // 电池电流
+    currentBattery () {
+      if (this.plane && this.plane.planeState) {
+        if (Number(this.plane.planeState.currentBattery) > 0) {
+          return this.plane.planeState.currentBattery
+        } else {
+          return 0
+        }
+      }
+      return null
     }
   },
   watch: {
@@ -118,9 +162,6 @@ export default {
 
   },
   created () {
-    setInterval(() => {
-      console.log(this.plane.planeState)
-    }, 2000)
   }
 }
 </script>
@@ -130,10 +171,12 @@ export default {
 
 .mainBox {
   position: absolute;
+  width: 29px;
   top: 40px;
   left: 10px;
   z-index: 90;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+  background-color: white;
   border-radius: 4px;
 }
 
@@ -144,10 +187,23 @@ export default {
 .tag {
   height: 29px;
   min-width: 29px;
-  background-color: white;
   cursor: pointer;
   border: 0;
-  overflow: hidden;
   font-size: 22px;
 }
+
+.plane-mode {
+  position: absolute;
+  left: 29px;
+  height: 29px;
+  display: flex;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.plane-mode-text {
+  display: inline-block;
+  white-space: nowrap; /* 防止内容换行 */
+}
 </style>
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 2fd1987..8ad1d4d 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -89,7 +89,7 @@ export default {
               for (const key in jsonData) {
                 if (key === 'heartBeat') {
                   plane.planeState.heartRandom = Math.random()// 每次接收到心跳 heartRandom属性 创建一个随机数 用于watch监听
-                  plane.planeState[key] = jsonData[key] // 按订阅信息 刷新飞机状态
+                  plane.planeState.heartBeat = jsonData.heartBeat // 按订阅信息 刷新飞机状态
                 } else if (key === 'position') {
                   // 如果是飞机位置信息 则不是直接刷新状态 而是累计 到数组 以便于画出飞机路径
                   const position = JSON.parse(jsonData.position)