food/src/components/PlaneStatus.vue

<template>
  <div class="mainBox flex ofh 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 class="tag flex mac mc iconfont icon-moshixuanze">
      </div>
    </div>
    <!-- 卫星 -->
    <div class="flex">
      <div class="tag flex mac mc iconfont icon-weixing">
      </div>
      <!-- <div class=" tag flex mac mc f-s-16">
        {{ satCount }}颗
      </div> -->
    </div>
    <!-- 电池电压 -->
    <div class="flex">
      <div class="tag flex mac mc iconfont icon-dianya1">
      </div>
    </div>
    <!-- 电池电流 -->
    <div class="flex">
      <div class="tag flex mac mc iconfont icon-dianliu">
      </div>
    </div>
    <!-- 飞机高度 -->
    <div class="flex">
      <div class="tag flex mac mc iconfont icon-gaodu">
      </div>
    </div>
    <!-- 飞机对地速度 -->
    <div class="flex">
      <div class="tag flex mac mc iconfont icon-sudu">
      </div>
    </div>
    <!-- 钩子状态 1px solid #ddd-->
    <div class="flex">
      <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: {
      typeof: '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
    },
    // 卫星数
    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 () {

  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.mainBox {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 90;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  border-radius: 4px;
}

.mainBox .flex:not(:first-child) {
  border-top: 1px solid #ddd;
}

.tag {
  height: 29px;
  min-width: 29px;
  background-color: white;
  cursor: pointer;
  border: 0;
  overflow: hidden;
  font-size: 22px;
}
</style>