vue-insagent-pc/src/views/HeadBar/HeadBar.vue

<template>
  <div class="headbar" :style="{ 'background': '#fff' }"
    :class="$store.state.app.collapse ? 'position-collapse-left' : 'position-left'">
    <!-- 导航收缩 -->
    <div class="navigation">
      <span class="hamburg">
        <el-menu class="el-menu-demo"  text-color="#333333 " :active-text-color="themeColor"
          mode="horizontal">
          <el-menu-item index="1" @click="onCollapse">
            <hamburger :isActive="collapse"></hamburger>
          </el-menu-item>
        </el-menu>
      </span>
      <!-- 导航菜单 -->
      <span class="navbar" style="text-align: justify;">
        <el-menu :default-active="menuIndex" class="el-menu-demo" style="overflow-x: hidden;border: none;font-weight: 400;  display: flex;"
           text-color="rgb(51,51,51,60%)" :active-text-color="themeColor" mode="horizontal"
          @select="selectNavBar">
          <el-menu-item style="font-size: 15px;" :index="item.id" v-for="item in leftNavItems" :key="item.id">{{ item.name }}</el-menu-item>
        </el-menu>
      </span>
      <!-- 收缩栏 -->
      <el-menu :default-active="menuIndex" class="el-menu-demo" mode="horizontal" @select="selectNavBar"
         active-text-color="#ffd04b" text-color="#fff">
        <el-submenu style="float:right;" class="right-item" v-if="Object.keys(rightNavItems).length === 0 ? false : true"
          index="10">
          <template slot="title">
            <i class="el-icon-s-fold" style="font-size:28px;color:#fff;"></i>
          </template>
          <el-menu-item :key="key" v-for="(item, key) in rightNavItems" :index="item.id" style="margin: 4px 0;">{{
            item.name }}</el-menu-item>
        </el-submenu>
      </el-menu>

    </div>

    <!-- 工具栏 -->
    <span class="toolbar" :class="{'active':toolbarActive}" v-popover:popover-personal>
      <el-popover
        placement="bottom"
        ref="reference"
        width="300px"
        trigger="click" @show="show" @hide="hide">
        <personal-panel :user="userData"></personal-panel>
        <img  slot="reference" :src="userData.headSculpture?userData.headSculpture:avatar" />
      </el-popover>
      <el-badge :is-dot="isDot">
        <div class="personalStyle">
          <span >{{ userData.roleName }} - {{ userData.name }}</span>
          <span style="color:rgba(51, 51, 51, 0.80) ">{{ userData.id }}</span>
        </div>
      </el-badge>
    </span>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Hamburger from "@/components/Hamburger"
import ThemePicker from "@/components/ThemePicker"
import LangSelector from "@/components/LangSelector"
import Action from "@/components/Toolbar/Action"
import NoticePanel from "@/views/Core/NoticePanel"
import MessagePanel from "@/views/Core/MessagePanel"
import PersonalPanel from "@/views/Core/PersonalPanel"
export default {
  components: {
    Hamburger,
    ThemePicker,
    LangSelector,
    Action,
    NoticePanel,
    MessagePanel,
    PersonalPanel
  },
  computed: {
    ...mapState({
      appName: state => state.app.appName,
      themeColor: state => state.app.themeColor,
      collapse: state => state.app.collapse,
      navTree: state => state.menu.navTree,
      leftTree: state => state.menu.leftTree,
    }),
    leftNavItems: function () {
      if (this.screenWidth<=1650 && this.sum > 0) {
        return this.navTree.slice(0, '-' + this.sum);
      } else {
        return this.navTree;
      }
    },
    rightNavItems: function () {
      if (this.screenWidth<=1650 && this.sum > 0) {
        return this.navTree.slice('-' + this.sum);
      } else {
        return {}
      }

    },
  },
  data() {
    return {
      isDot: false,
      toolbarActive:false,
      sum: null,
      datawidth: 1920,
      screenWidth: document.body.clientWidth,
      userData: {},
      activeIndex: '86',
      langVisible: false,
      avatar: "./../../assets/user1.png",
      menuIndex: localStorage.getItem("routerId"),
    }
  },
  created() {
    if(localStorage.getItem("routerId")){
        this.$store.commit('changeLeftTree', localStorage.getItem("routerId"));
      }
    if(!JSON.parse(localStorage.getItem('user_data'))){
      this.$api.user.getLoginUser().then((response) => {
        response.data.headSculpture = response.data.headSculpture?process.env.BASE_URL +response.data.headSculpture:response.data.headSculpture
        this.userData=response.data
      })
    }else{
      this.userData=JSON.parse(localStorage.getItem('user_data'))
    }
    if(this.screenWidth<=1260){
      this.sum = Math.ceil((this.datawidth - this.screenWidth) / 100)
    }
    else{
      this.sum = Math.ceil((this.datawidth - this.screenWidth) / 140)
    }
    if (!this.timer) {
      // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
      // this.screenWidth = newValue;
      this.timer = true;
      setTimeout(() => {
        this.timer = false;
      }, 400);
    }
    // if (this.leftNavItems.length > 8) {
    //   if (this.screenWidth < this.datawidth) {
    //     // if(this.screenWidth<=1260){
    //     //   this.sum = Math.ceil((this.datawidth - this.screenWidth) / 100)
    //     // }
    //     // else{
    //     //   this.sum = Math.ceil((this.datawidth - this.screenWidth) / 140)
    //     // }
    //     // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
    //     if (!this.timer) {
    //       // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
    //       // this.screenWidth = newValue;
    //       this.timer = true;
    //       setTimeout(() => {
    //         this.timer = false;
    //       }, 400);
    //     }
    //   }
    // }

  },
  watch: {
    navTree(newValue){
      if(localStorage.getItem("routerId") &&  newValue.length>0){
        this.$store.commit('changeLeftTree', localStorage.getItem("routerId"));
      }
    },
    screenWidth(newValue) {
      if(newValue<=1260){
        this.sum = Math.ceil((this.datawidth - newValue) / 100)
      }
      else{
        this.sum = Math.ceil((this.datawidth - newValue) / 140)
      }
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
          // this.screenWidth = newValue;
          this.timer = true;
          setTimeout(() => {
            this.timer = false;
          }, 400);

        }

    }
  },

  mounted() {
    window.onresize = () => {
      this.screenWidth = document.body.clientWidth
    }
    this.sysName = "Zgdd Platform";

    this.$store.commit('SET_TIMER', setInterval(() => {
      this.getMessage()
    }, 3000))

    // var user = sessionStorage.getItem("user")


    // if (user) {
    //   this.user.id = user;
    //   this.$api.user.findById(user).then((personRes) => {
    //     this.user.name = personRes.data.sysUser.name;
    //     this.user.avatar = require("@/assets/user.png")
    //     Cookies.set('name', personRes.data.sysUser.name) // 放置token到Cookie
    //     if (user != 'admin') {

    //       this.user.registeInfo = "入司时间：" + this.transformTime(personRes.data.esmUserInternal.intime);

    //       this.user.deptId = personRes.data.sysUser.deptId;
    //       this.user.jobCode = personRes.data.sysUser.jobCode;
    //       this.$api.dept.getDeptById(this.user.deptId).then(deptRes => {
    //         this.user.deptName = deptRes.data.name;
    //       });

    //       this.$api.dict.findByLableName("jobcode").then((response) => {
    //         var jobList = response.data; // 把获取到的数据赋给this.data
    //         for (let i = 0; i < jobList.length; i++) {
    //           if (jobList[i].value == this.user.jobCode) {
    //             this.user.jobName = jobList[i].label;
    //           }
    //         }
    //       })
    //     }
    //   })
    // }
  },
  methods: {
    getMessage() {
      let that = this
      that.$api.letter.getMessage({
        pageNum: 1,
        pageSize: 10
      }).then(res => {
        if(res.code === 200) {
          if(res.data.list&&res.data.list.length>0) {
            let list = res.data.list.filter(item => item.state === '0')
            if(list.length>0) {
              that.isDot = true
            } else {
              that.isDot = false
            }
          } else {
            that.isDot = false
          }
        }
      })
    },
    show(e){
      this.toolbarActive=true;
    },
    hide(){
      this.toolbarActive=false;

    },
    openWindow(url) {
      window.open(url)
    },
    selectNavBar(key, keyPath) {
      //切换左侧菜单
      this.$store.commit('changeLeftTree', key);
      localStorage.setItem('routerId', key) // 保存用户到本地会话

    },
    // 折叠导航栏
    onCollapse: function () {
      this.$store.commit('onCollapse')
    },
    // 切换主题
    onThemeChange: function (themeColor) {
      this.$store.commit('setThemeColor', themeColor)
    },
    // 语言切换
    changeLanguage(lang) {
      lang === '' ? 'zh_cn' : lang
      this.$i18n.locale = lang
      this.langVisible = false
    },
    transformTime(date) {
      var d = new Date(date);
      var strYear = d.getFullYear();
      var strMonth = d.getMonth() + 1;
      var strDay = d.getDate();
      var hh = d.getHours();
      if (hh < 10) {
        hh = "0" + hh;
      }
      if (strMonth < 10) {
        strMonth = "0" + strMonth;
      }
      if (strDay < 10) {
        strDay = "0" + strDay;
      }
      var datetime =
        strYear + "-" + strMonth + "-" + strDay + " " + hh + ":00:00";
      return datetime;
    },
  },
}
</script>
<style scoped lang="scss">
.personalStyle{
  font-size: 14px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  span{
    display: inline-block;
    line-height: 20px;
  }
}
.headbar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1030;
  height: 60px;
  line-height: 60px;
  border-color: rgba(180, 190, 190, 0.8);
  border-left-width: 0;
  border-left-style: solid;
  display: flex;
  justify-content: space-between;
  width: auto;
  box-shadow: 0 1px 4px #ccc;
}

.navigation {
  display: flex;
}

.hamburg,
.navbar {
  text-align: left;
}

.toolbar {
  float: right;
  display: flex;
  align-items: center;

  border-radius: 24px 24px 24px 24px;
  margin: 7px;
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 5px;
    float: right;
  }
}
.active {
  background: rgba(180, 180, 180, 0.12);
  border: 1px solid rgba(180, 180, 180, 0.12);

}
.el-menu-item {
  // padding: 0 15px!important;
  padding: 0 14px !important;
}

.lang-item {
  font-size: 16px;
  padding-left: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  cursor: pointer;
}

.lang-item:hover {
  font-size: 18px;
  background: #b0d6ce4d;
}

.user-info {
  font-size: 20px;
  color: #fff;
  cursor: pointer;

  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 10px 0px 10px 10px;
    float: right;
  }
}

.badge {
  line-height: 18px;
}

.position-left {
  left: 220px;
}

.position-collapse-left {
  left: 65px;
}

/deep/ {
  .el-submenu__icon-arrow {
    color: #fff;
  }
}
</style>