thoth-frontend-test/src/components/newLayout/Head.vue

<template>
  <div class="head-wrapper">
    <div class="head-logo">
      <svg-icon icon-class="zhihui-logo" @click="topHome()" />
    </div>
    <div v-for="item in headList" :key="item.path" class="nav-tag" :class="{'active-nav-tag':activeNavTag === item.name}" @click="changeNavTag(item)">
      <div v-if="item.icon" class="icon">
        <div v-show="notice && item.name.search(/个人工作台/)>=0" class="if-notice" />
        <svg-icon :icon-class="item.icon" />
      </div>
      <div class="name">{{ item.name }}</div>
    </div>
    <div @mouseleave="target = true">
      <div :class="[target ? 'nav-div1' : 'nav-div2']">
        <el-tooltip v-if="!target" class="item" effect="dark" content="工具集合" placement="right">
          <div class="div-child" @click="$router.push({ name: 'Interface' })"><svg-icon icon-class="tool-enter" /></div>
        </el-tooltip>
        <el-tooltip v-if="!target" class="item" effect="dark" content="环境平台" placement="right">
          <div class="div-child" @click="$router.push({ name: 'env' })"><svg-icon icon-class="env-enter" /></div>
        </el-tooltip>
      </div>
      <div class="nav-div3 nav-circular" />
      <div class="nav-div4 nav-circular" @mouseenter="target = false" />
    </div>
    <!-- <div v-show="navTagType === 2" class="nav-tag-type" @click="setNavTagType(1)">
      <i class="el-icon-notebook-2" style="transform: rotate(90deg);" />
    </div>
    <div v-show="navTagType === 1" class="nav-tag-type" @click="setNavTagType(2)">
      <i class="el-icon-notebook-2" />
    </div> -->
    <el-tooltip class="item" effect="dark" content="用户指导手册" placement="right">
      <el-link class="user-tip" href="https://base3.xiaojukeji.com/docs/zhihui/" target="_blank">
        <svg-icon style="width: 24px; height: 24px;" icon-class="question" />
      </el-link>
    </el-tooltip>
    <div v-if="userInfo" class="user-info">
      <a-popover placement="rightBottom" overlay-class-name="head-popover">
        <template #content>
          <div class="user-control">
            <div class="user-name">{{ userInfo.name }}</div>
            <div class="line" />
            <div class="user-logout">
              <el-button v-if="navTagType === 1" type="primary" plain size="small" @click="setNavTagType(2)">顶部导航</el-button>
              <el-button v-if="navTagType === 2" type="primary" plain size="small" @click="setNavTagType(1)">侧边导航</el-button>
            </div>
            <div class="line" />
            <div class="user-logout">
              <el-button type="primary" plain size="small" @click="layout()">退出登录</el-button>
            </div>
          </div>
        </template>
        <img :src="userInfo.phoneUrl">
      </a-popover>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import routes from '@/router/newRouter'
import websocket from '@/views/workbench/mixins/websocket'
import { memberGetLoginInMemberInfoByLdap } from '@/api/projectIndex'
import { logoutUrl } from '@/apiConfig/requestIP.js'
export default {
  mixins: [websocket],
  data() {
    return {
      headList: routes.filter(item => item.name !== '业务线'),
      userInfo: null,
      target: true
    }
  },
  computed: {
    ...mapGetters(['activeNavTag', 'navTagType', 'notice'])
  },
  watch: {
    $route: {
      handler(to) {
        this.findRoute(to.name)
      },
      immediate: true
    }
  },
  created() {
    this.getLoginUser()
  },
  methods: {
    getTarget() {
      this.target = !this.target
    },
    findRoute(routeName) {
      for (const element of routes) {
        if (element.name === routeName) {
          // 先对父元素进行查找
          this.$store.dispatch('global/setActiveNavTag', element.name)
        } else if (element.children) {
          const child = element.children.find(item => item.name === routeName) // 对子元素进行查找
          child ? this.$store.dispatch('global/setActiveNavTag', element.name) : '' // 父元素的名字设为路径
        }
      }
    },
    // 切换二级导航
    changeNavTag(nav) {
      this.$store.dispatch('global/setActiveNavTag', nav.name) // 设置二级导航的类别
      this.$router.push({ name: nav.name }) // 跳转
    },
    // 设置二级导航类型
    setNavTagType(type) {
      this.$store.dispatch('global/setNavTagType', type)
      localStorage.setItem('navTagType', type)
    },
    // 获取登录人员信息
    async getLoginUser() {
      const res = await memberGetLoginInMemberInfoByLdap()
      if (res && res.data) this.userInfo = res.data || null
    },
    // 退出登录
    layout() {
      window.location.href = logoutUrl
    },
    topHome() {
      this.$router.push({ path: '/' })
    },
    // websocket数据接收
    websocketonmessage(e) {
      const { hasReminding } = JSON.parse(e.data)
      if (hasReminding) {
        this.$store.dispatch('data/setNotice', true)
        const link = document.querySelector('link')
        link.href = link.href.replace(/favicon.ico/, 'favicon-tips.ico')
      } else {
        this.$store.dispatch('data/setNotice', false)
        const link = document.querySelector('link')
        link.href = link.href.replace(/favicon-tips.ico/, 'favicon.ico')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.head-wrapper {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 99;
  width: 80px;
  align-items: center;
  background: #409eff;
  font-size: 20px;
  color: #333;
  padding-top: 17px;
}
.head-logo {
  height: 40px;
  width: 40px;
  margin-bottom: 42px;
  .svg-icon {
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
}
.nav-tag {
  width: 100%;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
  padding: 5px 0 9px 0;
  cursor: pointer;
  .icon {
    position: relative;
    color: #ffffff;
    height: 27px;
    width: 33px;
    margin: 7px auto;
    font-size: 32px;
  }
  .svg-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .if-notice {
    position: absolute;
    z-index: 1;
    height: 8px;
    width: 8px;
    background-color: #E02020;
    border-radius: 50%;
    top: 0;
    right: 0;
    transform: translateY(-50%);
  }
}
.active-nav-tag {
  background-color: #1E89F7;
}
.nav-tag-type {
  margin-top: auto;
  color: #ffffff;
  cursor: pointer;
}
.user-tip {
  margin-top: auto;
  margin-bottom: 20px;
}
.user-info {
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  // margin-top: auto;
  margin-bottom: 30px;
  img {
    height: 30px;
  }
}
.user-control {
  height: 143px;
  width: 95px;
  display: flex;
  flex-direction: column;
  display: grid;
  grid-template-rows: 47px 1px 47px 1px 47px;
  justify-items: center;
  align-items: center;
  .line {
    width: 100%;
    height: 1px;
    background-color: rgba(112, 112, 112, 0.2);
  }
}
</style>
<style lang="scss" scoped>
.head-popover {
  box-shadow: 10px 0px 11px #dedede;
  /deep/ .ant-popover-inner-content {
    padding: 0;
  }
}
.nav-div1 {
  width:25px;height:50px;border-radius: 0 50px 50px 0;line-height:50px;background: #FFF; position: absolute; bottom: 172px; left: 0;border: 1px solid #333;opacity: 0.8;animation:myfirsts 0.5s;
}
.nav-div2 {
  bottom: 122px; width:70px; height:150px; line-height:150px;border-radius: 0 80px 80px 0;;background: rgb(255, 255, 255); position: absolute; left: 0;opacity: 0.8;animation:myfirst 1s;
}
@keyframes myfirst
{
	from {bottom: 172px; width:25px; height:50px; line-height:50px;}
	to {bottom: 122px; width:70px; height:150px; line-height:150px;}
}

@keyframes myfirsts
{
	from {bottom: 122px; width:70px; height:150px; line-height:150px;}
  to {bottom: 172px; width:25px; height:50px; line-height:50px;}
}

.nav-div3 {
  width:25px;
  height:50px;
  line-height:50px;
  background: #FFF;
  bottom: 172px;
  border: 1px solid #eee;
  opacity: 0.63;
}
.nav-div4 {
  width:20px;
  height:40px;
  line-height:45px;
  background: #FFF;
  bottom: 177px;
  border: 1px solid #eee;
}
.div-child {
  text-align: right;
  margin-right: 24px;
  line-height: 75px;
  cursor: pointer;
  opacity: 1;
  animation:myfirs 4s;
}
@keyframes myfirs
{
	from {opacity: 0}
  to {opacity: 1}
}
.nav-circular {
  position: absolute;
  left: 0;
  border-radius: 0 50px 50px 0;
  cursor: pointer;
}
</style>