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" :style="{width: item.name === '质量月报' ? '31px' : '100%', height: item.name === '质量月报' ? '25px' : '100%'}" />
      </div>
      <div class="name">{{ item.name }}</div>
    </div>
    <HeaderMenu />
    <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-admin-one">
            <div class="title line">
              <svg-icon icon-class="setting" class="icon" />
              <span class="label">设置</span>
            </div>
            <div class="item mb16">
              <div class="label line">
                <el-switch
                  :value="navTagType === 1"
                  :size="size"
                  class="mr10"
                  @change="setNavTagType(navTagType === 2 ? 1 : 2)"
                />
                <span class="label-text">左侧导航</span>
                <el-tooltip
                  effect="dark"
                  content="可设置为“左侧导航”或“顶部导航”"
                  placement="top-start"
                >
                  <i class="el-icon-info" style="vertical-align: text-bottom" />
                </el-tooltip>
              </div>
              <div class="label line">
                <el-switch
                  :value="openPageHandle === 'blank'"
                  :size="size"
                  class="mr10"
                  @change="
                    setOpenPageHandle(
                      openPageHandle === 'blank' ? 'self' : 'blank'
                    )
                  "
                />
                <span class="label-text">详情页新标签页打开</span>
                <el-tooltip
                  effect="dark"
                  content="可设置详情页在“新标签页打开“，或”当前标签页“打开。"
                  placement="top-start"
                >
                  <i class="el-icon-info" style="vertical-align: text-bottom" />
                </el-tooltip>
              </div>
            </div>
            <div class="title line clickText" @click="administratorsJump()">
              <span v-if="memberCheck">
                <svg-icon icon-class="admin" class="icon" />
                <span class="label">管理员</span>
              </span>
            </div>
            <div class="item">
              <div class="label fontSize14">
                {{ userInfo.name }} {{ userInfo.idap }}
              </div>
              <div class="label">
                <span class="outLogin" @click="layout()">
                  <i
                    class="el-icon-switch-button icon"
                    style="margin-right: 4px"
                  />
                  <span class="label">退出</span>
                </span>
              </div>
            </div>
          </div>
        </template>
        <img :src="userInfo.phoneUrl">
      </a-popover>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import routes from '@/router/newRouter'
import HeaderMenu from './components/menu'
import websocket from '@/views/workbench/mixins/websocket'
import { memberGetLoginInMemberInfoByLdap } from '@/api/projectIndex'
import { logoutUrl, envUrl } from '@/apiConfig/requestIP.js'
import { verifyIsAdmin } from '@/api/configure.js'

export default {
  components: {
    HeaderMenu
  },
  mixins: [websocket],
  data() {
    return {
      size: 'small',
      headList: routes.filter((item) => item.name !== '业务线'),
      userInfo: null,
      memberCheck: false,
      target: true,
      openPageHandle: localStorage.getItem('openPageHandle') || 'blank'
    }
  },
  computed: {
    ...mapGetters(['activeNavTag', 'navTagType', 'notice'])
  },
  watch: {
    $route: {
      handler(to) {
        this.findRoute(to.name)
      },
      immediate: true
    }
  },
  created() {
    this.getLoginUser()
    this.verifyIsAdmin()
  },
  methods: {
    goto(name) {
      window.log({ c: 'project', d: `goto_${name}` })
      // this.$router.push({ name })
      if (name === 'env') {
        window.open(envUrl, '_self')
      } else {
        this.$router.push({ name })
      }
    },
    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) {
      window.log({ c: 'entry', d: nav.key })
      this.$store.dispatch('global/setActiveNavTag', nav.name) // 设置二级导航的类别
      this.$router.push({ name: nav.name }) // 跳转
    },
    // 设置二级导航类型
    setNavTagType(type) {
      if (type === 2) {
        window.log({ c: 'sys_setting', d: 'change_nav_bar_top' })
      } else {
        window.log({ c: 'sys_setting', d: 'change_nav_bar_side' })
      }
      this.$store.dispatch('global/setNavTagType', type)
      localStorage.setItem('navTagType', type)
    },
    setOpenPageHandle(type) {
      this.openPageHandle = type
      localStorage.setItem('openPageHandle', type)
    },
    // 获取登录人员信息
    async getLoginUser() {
      const res = await memberGetLoginInMemberInfoByLdap()
      if (res && res.data) this.userInfo = res.data || null
    },
    // 查看是否为管理员
    async verifyIsAdmin() {
      const res = await verifyIsAdmin()
      if (res.code === 200) this.memberCheck = res.data
    },
    // 退出登录
    layout() {
      window.location.href = logoutUrl
    },
    topHome() {
      this.$router.push({ path: '/' })
    },
    administratorsJump() {
      if (this.memberCheck) {
        this.$router.push({ name: '管理员' })
      }
    },
    // 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="less" scoped>
.mr10 {
  margin-right: 10px;
}

.mb16 {
  margin-bottom: 16px;
}

.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: 20px;

  .svg-icon {
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
}

.nav-tag {
  width: 100%;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 10px;
  padding: 10px 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: 5px;
  margin-bottom: 8px;
}

.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: 20px;
  img {
    height: 30px;
    width: 30px;
  }
}

.user-admin-one {
  // height: 190px;
  .title {
    cursor: no-drop;

    .icon {
      margin-right: 5px;
      font-size: 12px;
      color: #409eff;
    }

    .label {
      color: #444;
      font-size: 14px;
    }
  }

  .line {
    margin-bottom: 10px;
    min-height: 21px;

    &.clickText {
      cursor: pointer;
      margin-bottom: 16px;

      .label {
        color: #409eff;
      }
    }
  }

  .item {
    margin-left: 18px;
    cursor: pointer;

    .label {
      color: #444;
      font-size: 12px;

      .label-text {
        display: inline-block;
        vertical-align: bottom;
        margin-right: 4px;
      }
    }

    .fontSize14 {
      font-size: 14px;
    }
  }

  .outLogin {
    display: inline-block;
    margin-top: 5px;

    .icon {
      display: inline-block;
      color: #409eff;
      font-size: 14px;
    }

    .label {
      color: #409eff;
      font-size: 14px;
    }
  }

  // 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);
  // }
}

// .user-control {
//   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="less" 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: #6cb5ff;
  position: absolute;
  bottom: 172px;
  left: 0;
  border: 1px solid #6cb5ff;
  animation: myfirsts 0.5s;
}

.nav-div2 {
  bottom: 137px;
  width: 60px;
  height: 120px;
  line-height: 120px;
  border-radius: 0 80px 80px 0;
  background: #6cb5ff;
  position: absolute;
  left: 0;
  animation: myfirst 1s;
}

@keyframes myfirst {
  from {
    bottom: 172px;
    width: 25px;
    height: 50px;
    line-height: 50px;
  }
  to {
    bottom: 137px;
    width: 60px;
    height: 120px;
    line-height: 120px;
  }
}

@keyframes myfirsts {
  from {
    bottom: 137px;
    width: 60px;
    height: 120px;
    line-height: 120px;
  }
  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 #fff;
  opacity: 0.63;
}

.nav-div4 {
  width: 20px;
  height: 40px;
  line-height: 45px;
  background: #fff;
  bottom: 177px;
  border: 1px solid #fff;
}

.div-child {
  text-align: right;
  margin-right: 19px;
  line-height: 61px;
  cursor: pointer;
  opacity: 1;
  animation: myfirs 3s;
}

@keyframes myfirs {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.nav-circular {
  position: absolute;
  left: 0;
  border-radius: 0 50px 50px 0;
  cursor: pointer;
}
</style>