mt-ck-wms-ui/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <hamburger v-if="showhome" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <div v-if="showTitle" style="font-size: 20px; float: left; font-weight: bold; padding-left: 20px; color: #606266">
      <img src="../../assets/img/cnbm.png" style="width: 1.6em; height: 1.6em; position: relative; top: .4em" alt="">
      {{ 'title' | i18nFilter }}
    </div>

    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />

    <div class="right-menu">

      <div v-if="showhome" class="right-menu-back" @click="toHome">
        <svg-icon class="item-icon" icon-class="home" />
        {{ 'navbar.homepage' | i18nFilter }}
      </div>

      <template>
        <lang-select class="right-menu-item hover-effect" />
      </template>
      <div v-if="showhome" class="right-menu-back">
        <a href="Lodap.zip"><i class="el-icon-download" /></a>
      </div>
      <!-- <div class="right-menu-back">
        <i class="el-icon-alarm-clock" />
        {{ formatTime }}
      </div> -->

      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="require('@/assets/img/head.png')" class="user-avatar">
          <!-- <div class="avatar-username">{{ username }}</div> -->
          <!-- <i class="el-icon-caret-bottom" /> -->
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="logout">
            <svg-icon class="item-icon" icon-class="logout" />
            {{ 'navbar.logOut' | i18nFilter }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- <div class="right-menu-back" @click="toHome">
        <svg-icon class="item-icon" icon-class="help" />
        {{ 'navbar.help' | i18nFilter }}
      </div>

      <div class="right-menu-back" @click="logout">
        <svg-icon class="item-icon" icon-class="logout" />
        {{ 'navbar.logOut' | i18nFilter }}
      </div> -->
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import LangSelect from '@/components/LangSelect'
import moment from 'moment'

let logoutInterval = null

export default {
  components: {
    Breadcrumb,
    Hamburger,
    LangSelect
  },
  props: {
    showhome: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    showTitle: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      logoutTime: 1800000,
      alarmList: [],
      blurTime: null
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'username',
      'choicepart'
    ]),
    formatTime() {
      return moment(this.logoutTime - 28800000).format('HH:mm:ss')
    }
  },
  watch: {
    logoutTime: function(val) {
      if (val <= 0) {
        this.logout()
      }
    }
  },
  mounted() {
    addEventListener('click', this.logoutTimeReset)
    addEventListener('keydown', this.logoutTimeReset)
    addEventListener('visibilitychange', this.visibilitychangeListener)
  },
  destroyed() {
    clearInterval(logoutInterval)
    removeEventListener('click', this.logoutTimeReset)
    removeEventListener('keydown', this.logoutTimeReset)
    removeEventListener('visibilitychange', this.visibilitychangeListener)
  },
  methods: {
    // 浏览器失去焦点
    winBlur() {
      this.blurTime = new Date()
      clearInterval(logoutInterval)
    },
    // 浏览器获取焦点
    winFocus() {
      if (this.logoutTime - (new Date() - this.blurTime).valueOf() <= 0) {
        this.logout()
      } else {
        this.logoutTime -= (new Date() - this.blurTime).valueOf()
        logoutInterval = setInterval(() => {
          this.logoutTime -= 1000
        }, 1000)
      }
    },
    // 重置退出时间
    logoutTimeReset() {
      this.logoutTime = 1800000
    },
    visibilitychangeListener() {
      if (document.hidden) {
        this.winBlur()
      } else {
        this.winFocus()
      }
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      console.log("sessionStorage.getItem('loginspc')", sessionStorage.getItem('loginspc'))
      if (sessionStorage.getItem('loginspc') === 'login') {
        const spcUrl = `/spc/upms/userinfo/logoutUser?account=${'ZJCadmin'}`
        axios.get(spcUrl).then(res => {
          if (res.data.code !== 'OK') {
            this.$message.error(this.$t('module.quality.spc.error'))
          }
          sessionStorage.setItem('loginspc', 'logout')
        })
      }
      await this.$store.dispatch('user/logout')
      console.log('`/login?redirect=${this.$route.fullPath}`', `/login?redirect=${this.$route.fullPath}`)
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      clearInterval(logoutInterval)
    },
    async toHome() {
      this.$store.dispatch('app/setChoicepart')
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;

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

  .breadcrumb-container {
    float: left;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;
    position: relative;
    &:focus {
      outline: none;
    }

    .right-menu-back{
      display: inline-block;
      vertical-align: text-bottom;
      font-size: 14px;
      padding: 0 8px;
      text-align: center;
      cursor: pointer;
      color: #606266;
    }

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

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

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

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

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

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

        .avatar-username {
          display: inline-block;
          position: relative;
          top: -14px;
        }

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