gxjh-ywtb/src/components/header/Header.vue

<template>
<div id="header">
  <div class="header_left">
      <span v-for="item in headerArr.slice(0,3)" :key="item.id" class="title">
          <span class="role_button" :role_button_code="item.role_button_code"  :class="[item.chosen?'title_min_chosen':'title_min']"  @click="clickFn(item.component)">{{item.name}}</span>
        </span>
  </div>
  <div  class="header_mid">
    <div class="center_title" @click="clickFn('/origion/home')">
      市住建委“一网通办”管理门户
    </div>
  </div>
  <div class="header_right">
 <span v-for="item in headerArr.slice(3)" :key="item.id" class="title">
          <span class="role_button" :class="[item.chosen?'title_min_chosen':'title_min']" :role_button_code="item.role_button_code"   @click="clickFn(item.component)">{{item.name}}</span>
        </span>
    <span class="title role_title" @click="loginOut">{{userName}} ,退出</span>
  </div>
</div>
</template>

<script>
import {mapMutations, mapState} from "vuex";
import {mapEletricCardMutations, mapEvaluateMutations} from "@/units/map-units";
import selectConfigModuleByRole from "@/role_button";
import {userExit} from "@/commomUse";
export default {
  name: "Header",
  data(){
    return{
      userName:'',
      headerArr:[
        {
          id:'1',
          name:'办件情况',
          component:'/origion/handleSituation',
          chosen:false,
            role_button_code:'354'
        },
        {
          id:'2',
          name:'办件分析',
          component:'/origion/handleAnalysis',
          chosen:false,
            role_button_code:'355'
        },
        {
          id:'3',
          name:'事项和指南',
          component:'/origion/mattersGuidance/mainBody',
          chosen:false,
          role_button_code:'353'
        },
        {
          id:'4',
          name:'好差评',
          component:'/origion/evaluate',
          chosen:false,
            role_button_code:'356'
        },
        {
          id:'5',
          name:'电子证照',
          component:'/origion/electricCard',
          chosen:false,
            role_button_code:'357'
        },
        {
          id:'6',
          name:'驾驶舱',
          component:'/origion/controlCabin',
          chosen:false,
            role_button_code:'358'
        },
      ]
    }
  },
  computed:{
    ...mapState({
      reFresh:'analysisRefresh',
      // firstLevel:'analysisFirstLevel',
      // secondLevel:'analysisSecondLevel',
      // thirdLevel:'analysisThirdLevel',
      // forthLevel:'analysisForthLevel',
      // dayCount:'analysisTimer'
    })
  },
  mounted(){
    this.userName =localStorage.getItem("ywtb_username")
    selectConfigModuleByRole(this);
    console.log(this.$route.path);
    for(let i=0;i<this.headerArr.length;i++){
      if(this.headerArr[i].component.indexOf(this.$route.path.substring(1,this.$route.path.length)) > -1){
        this.setChosen(this.headerArr[i]);
        this.headerArr[i].chosen=true;
      }else{
        this.headerArr[i].chosen=false;
      }
    }
  },
  methods:{
    loginOut:function (){
      userExit(this);
    },
    clickFn:function(component){
      this.$router.push(''+ component +'');
      this.matterGuidanceRefresh(true);

      this.matterGuidance({
        "matterGuidanceFirstLevel":'1',
        "matterGuidanceSecondLevel":'',
        "matterGuidanceThirdLevel":'',

      })
      this.handleSituationRefresh(true);

      this.handleSituation({
        "handleSituationFirstLevel":'',
        "handleSituationSecondLevel":'',
        "handleSituationThirdLevel":'1',
        "handleSituationForthLevel":'',   //事项编码
        "handleSituationFifthLevel":'',   //情形编码
        "handleSituationSixthLevel":'',   //办件状态
        "handleSituationSeventhLevel":'',   //办件类型
        "handleSituationSortTime":'',  //时间排序查询
        "handleSituationOptimize":'',  //可优化查询
      })

      this.analysisRefresh(true);
      this.analysis({
        "analysisFirstLevel":'',
        "analysisSecondLevel":'',
        "analysisThirdLevel":'',
        "analysisForthLevel":'',
        "analysisFifthLevel":'',
        "analysisTimer":'30',
        "analysisUnit":'',
        "analysisUrgeType":'SL_TX', //提醒,督办
        "analysisOptimizeType":'',
      })
      this.evaluateThirdLevel('');
      this.eletricCardRefresh(true);
      this.eletricCardCurrentId('');
      this.evaluateCurrentId('ana');
      for(let i=0;i<this.headerArr.length;i++){
        if(component==this.headerArr[i].component){
          this.headerArr[i].chosen=true;
        }else{
          this.headerArr[i].chosen=false;
        }
      }
    },
    onclickFn:function (component){
      for(let i=0;i<this.headerArr.length;i++){
        if(component==this.headerArr[i].component){
          this.headerArr[i].chosen=true;
        }else{
          this.headerArr[i].chosen=false;
        }
      }
    },
    setChosen:function (){

    },
    ...mapMutations(['matterGuidance','matterGuidanceRefresh','matterGuidanceSingleChange','handleSituationRefresh','handleSituation','analysis','analysisRefresh','analysisSingleChange']),
    ...mapEvaluateMutations(['evaluateCurrentId','evaluateFirstLevel','evaluateSecondLevel','evaluateThirdLevel','evaluateTimer']),
    ...mapEletricCardMutations(['eletricCardRefresh','eletricCardCurrentId']),
  },
  watch:{
    $route(to,from){
      console.log(to,from);
      this.onclickFn(to.path);
    }
  }



}
</script>

<style scoped lang="scss">
#header{
  margin-bottom: 10px;
  background-image: url("../../assets/imgs/title.png");
  background-size:100%;
  background-repeat: no-repeat,no-repeat;
  display: flex;
  height:10%;
  width:100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .header_left{
    width:25%;
    height:60%;
    display: flex;
    flex-direction: row;
    align-items: center;
    .title{
      display: flex;
      flex-direction: row;
      justify-content: center;
      .title_min{
        font-size: 20px;
        cursor: pointer;
        text-decoration : none;
        font-weight: 700;
        color: #71d7ff;
      }
      .title_min_chosen{
        font-size: 20px;
        cursor: pointer;
        text-decoration : none;
        font-weight: 700;
        color: #fdbf00;
      }
      width: 50%;
      text-align: center;
    }
  }
  .header_mid{
    width: 50%;
    font-weight: bold;
    font-size: 34px;
    cursor: pointer;
    box-sizing: border-box;
    color:#2aaef2;
    display: flex;
    justify-content: center;
    letter-spacing: 15px;
    .center_title{
      text-align-last:justify;

      text-align:justify;

      text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器
    }
    background-image:-webkit-linear-gradient(left,#0173ff,#00e3ff,#0173ff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
  }
  .header_right{
    width:25%;
    height:60%;
    display: flex;
    flex-direction: row;
    align-items: center;
    .title{
      display: flex;
      flex-direction: row;
      justify-content: center;
      .title_min{
        font-size: 20px;
        cursor: pointer;
        text-decoration : none;
        font-weight: 700;
        color: #71d7ff;
      }
      .title_min_chosen{
        font-size: 20px;
        cursor: pointer;
        text-decoration : none;
        font-weight: 700;
        color: #fdbf00;
      }
      width: 50%;
      text-align: center;
    }
    .role_title{
      font-size: 16px;
      cursor: pointer;
      color:#2aaef2;
    }
  }
}
</style>