food/src/components/PlaneStatus.vue

<template>
  <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>

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

  }
}
</script>

<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>