ele-usky-admin/src/layout/vab-avatar/index.vue

<template>
  <div class="vab-avatar" style="display: flex">
    <span class="weatherBlock">
      <!-- {{ time }} -->
      <!-- 天气预留位置 -->
    </span>

    <span class="goPanelBlock" v-if="$store.state.largeScreenUrl">
      <a @click="goPanel" target="_blank">
        <img src="/static/svgIcons/home.svg" alt="" width="12" />
        大屏
      </a>
    </span>

    <span class="bell">
      <img
        src="../../assets/images/bell.png"
        alt=""
        width="15"
        @click="goAlarmingPage"
      />
    </span>

    <a-dropdown>
      <span class="ant-dropdown-link">
        <!-- <a-avatar :src="avatar" /> -->

        <!-- <img
          src="https://i.gtimg.cn/club/item/face/img/2/15922_100.gif"
          alt=""
          style="
            background: #ccc;
            width: 32px;
            height: 32px;
            line-height:32px;
            border-radius:50%;
          "
        /> -->

        <span style="margin-right: 10px; display: inline-block">
          欢迎您，{{ username }}
        </span>

        <DownOutlined />
      </span>

      <template v-slot:overlay>
        <a-menu>
          <a-menu-item @click="goPerCenter">个人中心</a-menu-item>
          <a-menu-item @click="logout">退出登录</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>

    <!-- <span><img src="../../assets/images/switch.png" alt="" width="15" /></span> -->
  </div>
</template>

<script>
import { recordRoute } from '@/config'
import { DownOutlined } from '@ant-design/icons-vue'
import { useStore } from 'vuex'
import { mapActions, mapGetters } from 'vuex'
// import { mapGetters, } from 'vuex'
export default {
  name: 'VabAvatar',
  components: { DownOutlined },
  computed: {
    ...mapGetters({
      avatar: 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif',
      username: 'user/username',
    }),
  },
  data() {
    return {
      time: '',
    }
  },
  mounted() {
    const store = useStore()
    setInterval(() => {
      store.commit('getTimeAll')
      var time = store.state.Time_All
      this.time =
        time[0] +
        '年' +
        (time[1] < 9 ? '0' + (time[1] + 1) : time[1] + 1) +
        '月' +
        (time[2] < 10 ? '0' + time[2] : time[2]) +
        '日 ' +
        (time[3] < 10 ? '0' + time[3] : time[3]) +
        ':' +
        (time[4] < 10 ? '0' + time[4] : time[4]) +
        ':' +
        (time[5] < 10 ? '0' + time[5] : time[5])
    }, 0)
  },
  methods: {

     ...mapActions({
 
      delAllVisitedRoutes: 'tagsBar/delAllVisitedRoutes',

      // toggleCollapse: 'settings/toggleCollapse',
    }),
    goPerCenter() {
      this.$router.push('/perCenter/index')
    },

    goPanel() {
      if (window.location.host.indexOf('localhost') != -1) {
        window.open('http://localhost:8080/#/home')
      } else {
        var aa = this.$store.state.largeScreenUrl
        window.open(aa)
      }
    },
    goAlarmingPage() {
      this.$router.push('/alarmManage')
    },

     async closeAllTabs() {
      await this.delAllVisitedRoutes()
      if (this.affixTabs.some((tag) => tag.path === this.toThisTag().path))
        return
      this.toLastTag()
    },

    async logout() {
      await this.$store.dispatch('user/logout')
      if (recordRoute) {
        // const fullPath = this.$route.fullPath
        // this.$router.push(`/login?redirect=${fullPath}`)

        // this.$store.visitedRoutes=[]
   
        this.$store.state.homePageUrl=''

        this.closeAllTabs()

        this.$router.push('/login')
      } else {
        this.$router.push('/login')
      }
    },
  },
}
</script>


<style lang="less">
.vab-avatar {
  .weatherBlock,
  .goPanelBlock {
    height: @vab-header-height;
    line-height: @vab-header-height;
    margin-right: 30px;
    font-size: 14px;
  }
  .goPanelBlock a {
    text-align: center;
    width: 90px;
    line-height: 36px;
    // background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: inline-block;
    font-size: 14px;
    color: #fff;
    img {
      position: relative;
      top: -1px;
    }
  }
  .goPanelBlock a:hover {
    opacity: 0.7;
  }
  .bell {
    margin: 0 18px 0 18px;
    cursor: pointer;
    img {
      position: relative;
      top: -1px;
    }
  }
  .bell:hover {
    opacity: 0.7;
  }
  .ant-dropdown-link {
    font-size: 14px;
    display: block;
    min-height: @vab-header-height;
    cursor: pointer;
    line-height: @vab-header-height;
  }
}
</style>