food/src/components/PlaneStatus.vue

<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) {
        return this.plane.planeState.position[0][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)
        // 在线状态
        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>