【类 型】：feat 飞机状态标签

【原  因】：调整 飞机各个状态的显示
【过  程】：
【影  响】：

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>

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)