IIoT/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <div class="sys-name">
      <!-- <img id="nav-logo" :src="logo" alt="logo"> -->
      <h2>工业物联网平台</h2>
      <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)"
        >
          <template v-if="sideMenuTabIndex===tab.id">
            <img :src="tab.iconSelectEd" :alt="tab.name">
          </template>
          <template v-else>
            <img :src="tab.icon" :alt="tab.name">
          </template>
          <p>{{ tab.name }}</p>
        </div>
      </div>

      <div class="right-menu-item" @click="navToPage('/message')">
        <el-badge :is-dot="false" class="nav-icon">
          <img class="icon" src="@/assets/images/Navbar/notice.png" alt="">
          <span class="name">预警信息</span>
        </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" /> -->
          <img class="icon" src="@/assets/images/Navbar/user.png" alt="">
          <span class="name">{{ userData&&userData.userName||'--' }}</span>
          <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: 'iiot-eq',
      sideMenuTabList: [
        { name: '设备', icon: require('@/assets/images/Navbar/sensor.png'), iconSelectEd: require('@/assets/images/Navbar/sensor_selected.png'), path: '/iiot-eq-overview/index', id: 'iiot-eq', permit: 'aqpt_system' },
        { name: '传感器', icon: require('@/assets/images/Navbar/warn.png'), iconSelectEd: require('@/assets/images/Navbar/warn_selected.png'), path: '/iiot-sensor/index', id: 'iiot-sensor', permit: 'aqpt_system' },
        { name: '系统管理', icon: require('@/assets/images/Navbar/sys.png'), iconSelectEd: require('@/assets/images/Navbar/sys_selected.png'), path: '/aqpt/account', permit: 'aqpt_system', id: 9 },
        { name: '数字全景', icon: require('@/assets/images/Navbar/bigscreen.png'), iconSelectEd: require('@/assets/images/Navbar/bigscreen_selected.png'), path: '/bigScreen', permit: 'aqpt_panorama', id: 10 }
      ]
    }
  },
  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()
    if (this.sideMenuTabList.length > 0) {
      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 = 'iiot-eq'
      if (this.isNotNull(localStorage.getItem('tabIndex'))) {
        if (isNaN(localStorage.getItem('tabIndex'))) {
          index = localStorage.getItem('tabIndex')
        } else {
          index = parseFloat(localStorage.getItem('tabIndex'))
        }
      }
      const paths = this.sideMenuTabList.filter(item => item.id === index)[0]
      const path = paths.length > 0 ? paths[0].path : this.sideMenuTabList[0].path
      const fullPath = this.$route.fullPath
      this.sideTabChange(index, { path: fullPath.includes('404') ? path : 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) {
      this.sideMenuTabIndex = index
      if (index === 10) {
        this.$router.push({
          path: item.path
        })
        return
      } else {
        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;
      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 {
        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;}
         img{
            display: block;
            width:  28px;
          }
        .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;
        }
        &[class*="active-"]{
          p{
            color: #1890FF;
          }
        }
      }
    }
  }
  .nav-icon,.avatar-wrapper{
    display: flex;
    align-items: center;
    .iocn{
      display: block;
      width: 24px;
    }
    .name{
      color:rgba(255, 255, 255, 0.76);
      font-size:14px;
      margin-left:5px;
    }
  }
}
</style>