diff --git a/src/components/VideoBox.vue b/src/components/VideoBox.vue
new file mode 100644
index 0000000..7392a2f
--- /dev/null
+++ b/src/components/VideoBox.vue
@@ -0,0 +1,258 @@
+<template>
+  <div class="mainBox flex column no-select">
+    <!-- 心跳 ps:黑色只网络通 绿色飞控有效心跳-->
+    <div class="flex">
+      <div class="tag flex mac mc iconfont" :class="[heartIconClass, usefulHeartClass]"></div>
+    </div>
+    <!-- 解锁状态 -->
+    <div class="flex">
+      <div class="tag flex mac mc iconfont" :class="isUnlock ? 'icon-jiesuo' : 'icon-suoding'"></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" v-if="hookstatus || loadweight">
+          {{ hookstatus || '' }} {{ loadweight ? 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 // 控制心跳动画图标
+    }
+  },
+  props: {
+    plane: {
+      type: Object,
+      deep: true
+    }
+  },
+  components: {
+  },
+  computed: {
+    // 飞机在线状态
+    online () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.online
+      }
+      return false
+    },
+    // 心跳随机数
+    heartRandom () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.heartRandom
+      }
+      return null
+    },
+    heartIconClass () {
+      if (!this.online) {
+        return 'icon-xinsui offline'
+      }
+      return this.heartAnimation ? 'icon-heart online' : 'icon-heart1 online'
+    },
+    usefulHeartClass () {
+      return this.online && this.plane.planeState.heartBeat ? 'useful-heart' : ''
+    },
+    // 解锁状态
+    isUnlock () {
+      if (this.plane && this.plane.planeState) {
+        return this.plane.planeState.isUnlock
+      }
+      return false
+    },
+    // 飞机模式
+    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 () {
+        // 心跳动画
+        this.heartAnimation = true
+        setTimeout(() => {
+          this.heartAnimation = false
+        }, 500)
+      }
+    }
+  },
+  methods: {
+
+  },
+  created () {
+  },
+  destroyed () {
+  }
+
+}
+</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;
+  /* 防止内容换行 */
+}
+
+.useful-heart {
+  color: $success-color;
+}
+</style>