diff --git a/.gitignore b/.gitignore
index cdc1cb2..57494a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 /node_modules
 /dist
 /package-lock.json
+/src/components/statistics.vue
diff --git a/src/components/Statistics.vue b/src/components/Statistics.vue
new file mode 100644
index 0000000..30c9342
--- /dev/null
+++ b/src/components/Statistics.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="mainBox flex column no-select">
+    <!-- 心跳 -->
+    <div class="flex">
+      <div class="tag flex mac mc iconfont"
+        :class="online ? heartAnimation ? 'icon-heart online' : 'icon-heart1 online' : 'icon-xinsui offline'">
+      </div>
+    </div>
+    <!-- 锁定状态 -->
+    <div class="flex">
+      <div class="tag flex mac mc iconfont" :class="isLockState ? 'icon-suoding' : 'icon-jiesuo'">
+      </div>
+    </div>
+    <!-- 飞机模式 -->
+    <div class="flex">
+      <div v-if="getPlaneMode" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ getPlaneMode }}</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>
+    <!-- 飞机高度 -->
+    <div class="flex">
+      <div v-if="positionAlt" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ positionAlt }}米</font>
+      </div>
+      <div class="tag flex mac mc iconfont icon-gaodu">
+      </div>
+    </div>
+    <!-- 飞机对地速度 -->
+    <div class="flex">
+      <div v-if="groundSpeed" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{ groundSpeed }}米/秒</font>
+      </div>
+      <div class="tag flex mac mc iconfont icon-sudu">
+      </div>
+    </div>
+    <!-- 飞机载重 钩子状态 -->
+    <div class="flex">
+      <div v-if="loadweight" class="plane-mode p-l-5 p-r-5 mc mac">
+        <font class="plane-mode-text">{{hookstatus}} {{ loadweight }}克</font>
+      </div>
+      <div class="tag flex mac mc iconfont icon-mianxingdiaogou">
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  name: 'PlaneStatus',
+  data () {
+    return {
+      /* 心跳 */
+      heartAnimation: false, // 控制心跳动画图标
+      online: false,
+      isOnlineSetTimeout: null
+    }
+  },
+  props: {
+    plane: {
+      type: Object,
+      deep: true
+    }
+  },
+  components: {
+  },
+  computed: {
+    // 心跳随机数
+    heartRandom () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.heartRandom
+      }
+      return null
+    },
+    // 锁定状态
+    isLockState () {
+      if (this.plane && this.plane.planeState) {
+        if (Number(this.plane.planeState.heartBeat) & 128) {
+          return false
+        }
+      }
+      return true
+    },
+    // 飞机模式
+    getPlaneMode () {
+      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 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
+    },
+    // 飞机高度
+    positionAlt () {
+      if (this.plane && this.plane.planeState && this.plane.planeState.position.length > 0) {
+        const posLen = this.plane.planeState.position.length
+        return this.plane.planeState.position[posLen - 1][2]
+      }
+      return null
+    },
+    // 飞机对地速度
+    groundSpeed () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.groundSpeed
+      }
+      return null
+    },
+    // 钩子状态
+    hookstatus () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.hookstatus
+      }
+      return null
+    },
+    // 飞机载重
+    loadweight () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.loadweight
+      }
+      return null
+    }
+  },
+  watch: {
+    heartRandom: {
+      handler () {
+        console.log('心跳：', this.plane.heartBeat)
+        // 心跳动画
+        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 () {
+  },
+  destroyed () {
+    if (this.isOnlineSetTimeout) {
+      clearInterval(this.isOnlineSetTimeout)
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/theme.scss";
+
+.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;
+}
+
+.mainBox .flex:not(:first-child) {
+  border-top: 1px solid #ddd;
+}
+
+.tag {
+  height: 29px;
+  min-width: 29px;
+  cursor: pointer;
+  border: 0;
+  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/components/main/home/index.vue b/src/views/layout/components/main/home/index.vue
index 4edb614..a5f796f 100644
--- a/src/views/layout/components/main/home/index.vue
+++ b/src/views/layout/components/main/home/index.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="h-100">
-    <map-box ref="mapbox"/>
+    <map-box ref="mapbox">
+      <template #content>
+        <PlaneStatus :plane="plane" />
+      </template>
+    </map-box>
   </div>
 </template>