CKQ/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <div class="sys-name">
      <img id="nav-logo" :src="logo" alt="logo">
      <hamburger v-if="!hideMenuBt" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
      <!-- <span v-if="userData.ocName" class="tag">/{{ userData.ocName }}</span> -->
    </div>

    <!-- 隐藏标签 -->
    <breadcrumb v-if="0" id="breadcrumb-container" class="breadcrumb-container" />
    <div class="right-menu">
      <template v-if="device!=='mobile'">
        <search v-if="false" id="header-search" class="right-menu-item" />

        <error-log class="errLog-container right-menu-item hover-effect" />

        <screenfull v-if="false" id="screenfull" class="right-menu-item hover-effect" />

        <el-tooltip v-if="false" content="Global Size" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip>
      </template>
      <div class="sideMenuTab">
        <div
          v-for="(tab,index) in sideMenuTabList"
          :key="'sideMenuTab'+index"
          class="item"
          :class="sideMenuTabIndex===tab.id?'active-'+sideMenuTabIndex:''"
          @click="sideTabChange(tab.id,tab)"
        >
          <i class="iconfont" :class="tab.icon" />
          <p>{{ tab.name }}</p>
        </div>
      </div>

      <div class="right-menu-item" @click="navToPage('/message')">
        <el-badge :is-dot="false" class="nav-icon">
          <i class="el-icon-message-solid" />
        </el-badge>
      </div>
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <el-avatar v-if="userData" :src="userData.userAvatar" />
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/profile/index">
            <el-dropdown-item>
              个人中心
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Breadcrumb, Hamburger, ErrorLog, Screenfull, SizeSelect, Search } from '@/components'
import { getUnReadCounter } from '@/api/system/msgApi'
export default {
  name: 'NaveBarComponent',
  components: {
    Breadcrumb,
    Hamburger,
    ErrorLog,
    Screenfull,
    SizeSelect,
    Search
  },
  data() {
    return {
      logo: require('@/assets/images/logo/logo.png'),
      sideMenuTabIndex: 0,
      sideMenuTabList: [
        // { name: '数字全景', icon: 'el-icon-s-platform', path: '/', permit: 'aqpt_panorama', id: 0 },
        // { name: '预警中心', icon: 'icon-common_saving', path: '/alert', permit: 'aqpt_alert_center', id: 1 },
        // { name: '工作台', icon: 'icon-common_task', path: '/task', permit: 'aqpt_task_center', id: 2 },
        // { name: '双重预防', icon: 'icon-common_quality', path: '/aqpt/scene', permit: 'aqpt_workflow', id: 3 },
        // { name: '设备管理', icon: 'icon-common_equipment', path: '/aqpt/equipment', permit: 'aqpt_equipment', id: 4 },
        // { name: '作业票', icon: 'icon-common_satisfaction', path: '/aqpt/ticket', permit: 'aqpt_ticket', id: 5 },
        // { name: '奖惩考核', icon: 'icon-common_quality', path: '/aqpt/kpi/regulation', permit: 'aqpt_kpi', id: 6 },
        // { name: '安全智库', icon: 'icon-common_knowledge', path: '/aqpt/art', permit: 'aqpt_art_center', id: 7 },
        // { name: '文件中心', icon: 'icon-common_file', path: '/aqpt/doc', permit: 'aqpt_doc_center', id: 8 },
        // { name: '系统管理', icon: 'icon iconfont icon-common_configuration', path: '/aqpt/account', permit: 'aqpt_system', id: 9 },

        /** ckq */
        { name: '数字全景', icon: 'el-icon-s-platform', href: 'http://localhost:8080/', permit: 'aqpt_panorama', id: 0 },
        { name: '双重预防【采空区信息&人员巡检】', icon: 'icon-common_quality', path: '/aqpt/scene', permit: 'aqpt_workflow', id: 3 },
        { name: '设备管理【传感器】', icon: 'icon-common_equipment', path: '/aqpt/equipment', permit: 'aqpt_equipment', id: 4 },
        { name: '预警中心', icon: 'icon-common_saving', path: '/alert', permit: 'aqpt_alert_center', id: 1 },
        { name: '工作台', icon: 'icon-common_task', path: '/task', permit: 'aqpt_task_center', id: 2 },
        // { name: '作业票', icon: 'icon-common_satisfaction', path: '/aqpt/ticket', permit: 'aqpt_ticket', id: 5 },
        // { name: '奖惩考核', icon: 'icon-common_quality', path: '/aqpt/kpi/regulation', permit: 'aqpt_kpi', id: 6 },
        { name: '安全智库', icon: 'icon-common_knowledge', path: '/aqpt/art', permit: 'aqpt_art_center', id: 7 },
        { name: '文件中心', icon: 'icon-common_file', path: '/aqpt/doc', permit: 'aqpt_doc_center', id: 8 },
        { name: '系统管理', icon: 'icon iconfont icon-common_configuration', path: '/aqpt/account', permit: 'aqpt_system', id: 9 }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'device',
      'sidebar',
      'avatar',
      'userData',
      'permission_routes',
      'menuSiderTab',
      'permits'
    ]),
    hideMenuBt() {
      return this.permission_routes.filter(item => !item.hidden).length < 1
    }
  },
  watch: {
    menuSideTab(val) {
      const item = this.sideMenuTabList[val]
      this.sideTabChange(val, item)
    }
  },
  mounted() {
    this.getUnReadMsg()
    this.initSideMenu()
    this.initsideTab()
  },
  methods: {
    getUnReadMsg() {
      getUnReadCounter().then((resp) => {
        this.unReadCount = resp.data
      })
    },
    initSideMenu() {
      const permits = JSON.parse(JSON.stringify(this.permits))
      let sideMenuTabList = JSON.parse(JSON.stringify(this.sideMenuTabList))
      sideMenuTabList = sideMenuTabList.filter(item => permits.includes(item.permit))
      this.sideMenuTabList = sideMenuTabList
    },
    initsideTab() {
      let index = 0
      if (this.isNotNull(localStorage.getItem('tabIndex'))) {
        index = parseFloat(localStorage.getItem('tabIndex'))
      }
      this.sideTabChange(index, {
        path: this.$route.fullPath
      })
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },

    navToPage(path) {
      this.$emit('initMessage')
    },

    async logout() {
      localStorage.clear() // 垃圾数据清除
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    sideTabChange(index, item) {
      if (item.href) {
        window.open(item.href)
        return
      }
      this.sideMenuTabIndex = index
      this.$router.replace({
        path: item.path
      })
      localStorage.setItem('tabIndex', index)
      var permission_routes = localStorage.getItem('permission_routes')
      if (permission_routes) { permission_routes = JSON.parse(permission_routes) } else {
        permission_routes = this.permission_routes
        localStorage.setItem('permission_routes', JSON.stringify(permission_routes))
      }
      // 获取权限路由，根据groupId进行过滤
      const filterRoutes = permission_routes.filter((item) => {
        if (item.groupId) {
          return item.groupId.includes(index)
        }
        return item
      })
      this.$store.state.permission.routes = filterRoutes
    },
    isNotNull(value) {
      if (value !== undefined && value !== 'undefined' && value !== null && value !== '') return true
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: var(--navHeight);
  overflow: hidden;
  background: unset;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  border-bottom: 1px solid #457486;
  position: fixed;
  width: 100%;
  z-index: 999;
  left: 0;
  box-sizing: border-box;
  background-color: var(--menuBg, #113144);
  top: 0;
.sys-name{
  height: 100%;
  display: flex;
  align-items: center;
  float: left;
  padding-left: 10px;
  color: #fff;
  flex: 1;
  #nav-logo{
      display: block;
      width: 200px;
      height: 32px;
  }
  .tag{
    font-size: 18px;
    line-height: 18px;
    font-weight: 300;
    padding-left: 10px;
    margin-top: 10px;
  }
}
  .hamburger-container {
    padding: 3px 6px;
    margin-left: 10px;
    line-height: var(--navHeight);
    height: 100%;
    font-size: 16px;
    float: left;
    color: rgb(219, 204, 204) !important;
    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: var(--navHeight);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #fff;
      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: 12px;
        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: 14px;
        }
      }
    }
    .sideMenuTab{
        height: 100%;
        display: flex;
        justify-content: flex-start;
        padding-right: 20px;
      .item{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #fff;
        line-height: 1;
        padding: 0 15px;
        cursor: pointer;
        transition: 0.2s;
        &.active-0{color: #1890ff;font-weight: 600;}
        &.active-1{color: #b97741;font-weight: 600;}
        &.active-2{color: #97cd38;font-weight: 600;}
        &.active-3 {color: #dc5a2c;font-weight: 600;}
        &.active-4{color: #414ab9;font-weight: 600;}
        &.active-5{color: #c13ac9;font-weight: 600;}
        &.active-6{color: #29c761;font-weight: 600;}
        &.active-7 {color: #c7795c;font-weight: 600;}
        &.active-8{color: #bd966f;font-weight: 600;}
        &.active-9{color: #832188;font-weight: 600;}
        &.active-10{color: #66db8f;font-weight: 600;}
        .iconfont{
          color: inherit;
        }
        .iconfont{
          font-size: 36px;
          &.el-icon-s-platform{
                font-family: "element-icons" !important;
          }
          &.icon-common_health{
            font-size: 28px;
          }
        }
        p{
          padding-top: 3px;
          margin: 2px 0px;
          font-size: 14px;
          color: #fff;
        }
      }
    }
  }
}
</style>