【类 型】：feat 飞机状态组件

【原  因】：调整到左侧数列 防止横线排列显示补全问题
【过  程】：
【影  响】：

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>

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 () {