food/src/views/layout/components/headbar.vue

<template>
  <div>
    <!-- 订单音效 -->
    <audio controls="controls" hidden src="@/assets/sound/newMsg.mp3" ref="newMsg"></audio>
    <audio controls="controls" hidden src="@/assets/sound/rebackMsg.mp3" ref="rebackMsg"></audio>
    <!-- menu缩进按钮 -->
    <div class="w-50px h-50px fc l" id="menuTabB" @click="handleCollapse">
      <i class="iconfont f-s-26" :class="isCollapse ? 'icon-a-yousuojin3x' : 'icon-a-zuosuojin3x'"></i>
    </div>
    <!-- 面包屑 -->
    <Breadcrumb class="l l-h-50 m-l-5" />
    <!-- 头像 -->
    <div class="right-menu m-r-5">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <img v-if="avatar.indexOf('.jpg') !== -1 || avatar.indexOf('.gif') !== -1 || avatar.indexOf('.png') !== -1"
            :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar">
          <el-avatar v-else size="medium" icon="el-icon-user-solid"></el-avatar>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <el-dropdown-item divided>
            <RouterLink to="/">
              主控
            </RouterLink>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 页面刷新 -->
    <div class="l-h-50 p-r-15 r">
      <el-button size="small" icon="iconfont icon-shuaxin" @click="refreshPage" circle></el-button>
    </div>
    <!-- 订单信息按钮 -->
    <el-badge :hidden="orderCount == 0 ? true : false" :value="orderCount" class="navbarBadge l-h-50 p-r-15 r">
      <el-button :type="orderCount !== 0 ? 'primary' : ''" @click="drawer = true" size="small" :icon="orderIcon"
        circle></el-button>
    </el-badge>
    <el-drawer title="待处理订单" :visible.sync="drawer" size="40%" :append-to-body="true" :modal-append-to-body="false">
      <el-tabs type="card">
        <el-tab-pane label="未接订单">
          <QuestTabs :fil='0' />
        </el-tab-pane>
        <el-tab-pane label="已接订单">
          <QuestTabs :fil='1' />
        </el-tab-pane>
        <el-tab-pane label="申请退款订单">
          <QuestTabs :fil='2' />
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
    <!-- mqtt状态灯 -->
    <div class="l-h-50 p-r-15 r">
      <el-button size="small" :type="mqttState === true ? 'success' : 'danger'"
        :icon="mqttState === true ? 'iconfont icon-yaokong2' : 'iconfont icon-yaokong2-copy'" circle
        @click="mqttState === true ? $message.success('指令服务器链接正常') : $message.error('未链接到指令服务器')"></el-button>
    </div>
  </div>
</template>

<script>
import mqtt from '@/utils/mqtt'
import Breadcrumb from '@/components/Breadcrumb'
import QuestTabs from '@/components/QuestTabs'

export default {
  name: 'Headbar',
  data () {
    return {
      orderCount: null, // 订单总数
      rebackCount: null, // 退款订单总数
      drawer: false,
      getQuestInterval: null, // 用于销毁时间轴
      animationTrumpet: true // 喇叭动画
    }
  },
  components: {
    Breadcrumb,
    QuestTabs
  },
  computed: {
    /**
     * @description: 侧边栏显隐
     */
    isCollapse () {
      return this.$store.state.app.isCollapse
    },
    /**
     * @description: mqtt服务器连接状态
     */
    mqttState () {
      return this.$store.state.app.mqttState
    },
    /**
     * @description: 用户头像地址
     */
    avatar () {
      return this.$store.state.settings.host + this.$store.state.user.photo
    },
    /**
     * @description: 获取订单列表 ps:待发货及待收货 并没有发起退款和正在退款状态
     */
    questList () {
      return this.$store.state.questList
    },
    /**
     * @description: 面包条 订单图标动画
     * @return {*} 图标样式
     */
    orderIcon () {
      if (this.orderCount === 0) {
        return 'iconfont icon-meiyoudingdan-01'
      } else {
        if (this.animationTrumpet) {
          return 'iconfont icon-tongzhi'
        } else {
          return 'iconfont icon-jinjidingdan'
        }
      }
    }
  },
  methods: {
    /**
     * @description: 切换侧边栏 显隐
     */
    handleCollapse () {
      this.$store.commit('app/setCollapse')
    },
    /**
     * @description: 计算订单数量 订单变化播放声音 显示在图标右上角小红圈内
     * @param {*} list 要处理的订单列表
     */
    computeQuestList (list) {
      if (this.getQuestInterval !== null) {
        clearInterval(this.getQuestInterval)
      }
      const waitShip = list.filter(item => item.status === '20')// 过滤待处理订单
      if (this.orderCount < waitShip.length && this.orderCount != null) { // 有新的数据 播放提示声音
        this.playMusic('newMsg')// 新消息 声音播放
      }
      this.orderCount = waitShip.length// 待处理订单总数（待发货订单总数）
      const reBack = list.filter(item => item.back === '1')// 过滤退款订单
      if (this.rebackCount < reBack.length && this.rebackCount != null) { // 有新的数据 播放提示声音
        this.playMusic('rebackMsg')// 退款 声音播放
      }
      this.rebackCount = reBack.length// 待处理订单总数（待发货订单总数）
      this.getQuestInterval = setInterval(() => {
        this.animationTrumpet = !this.animationTrumpet// 面包条订单图标跳动
      }, 500)
    },
    // 新消息 声音播放
    playMusic (domId) {
      const audioElement = this.$refs[domId]
      if (!audioElement) {
        console.error(`音频元素 ${domId} 不存在`)
        return
      }
      audioElement.currentTime = 0 // 从头开始播放
      audioElement.play()
        .then(() => {
          console.log('音频播放成功')
        })
        .catch(error => {
          console.error('音频播放失败', error)
        })
      setTimeout(() => {
        audioElement.pause() // 停止
      }, 11000)
    },
    /**
     * @description: 刷新当前页面
     */
    refreshPage () {
      mqtt.mqttDestroy()// 断开mqtt
      this.$router.go(0)// 刷新页面
    },
    /**
     * @description: 登出
     */
    logout () {
      this.$store.dispatch('user/destroyUserAsync').then(
        this.$router.push('/login')
      )
    }
  },
  watch: {
    questList (val) {
      this.computeQuestList(val)
    }
  }
}
</script>

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

#menuTabB:hover {
  background-color: $border4-color;
  cursor: pointer;
}

.el-dropdown-menu {
  span {
    color: $maintext-color;
  }
}

.right-menu {
  float: right;
  height: 100%;
  line-height: 50px;

  &:focus {
    outline: none;
  }

  .right-menu-item {
    display: inline-block;
    padding: 0 8px;
    height: 100%;
    font-size: 18px;
    vertical-align: text-bottom;

    &.hover-effect {
      cursor: pointer;
      transition: background .3s;

      &:hover {
        background: rgba(0, 0, 0, .025)
      }
    }
  }

  .avatar-container {
    margin-right: 30px;

    .avatar-wrapper {
      margin-top: 5px;
      position: relative;

      .user-avatar {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }

      .el-icon-caret-bottom {
        cursor: pointer;
        position: absolute;
        right: -20px;
        top: 25px;
        font-size: 12px;
      }
    }
  }
}
</style>