yos_web/src/components/newLayout/modules/header.vue

<template>
<div class="flex">
  <el-popover
    placement="top"
    width="300">
    <div class="app-flex">
      <p class="appLink" v-for="app in menuApp" :key="app.index" @click="handelMenuAppClick(app,'app')">{{app.systemappname}}</p>
    </div>
    <div slot="reference" class="search_panel">
      <input @focus="colorWhite = false" @blur="colorWhite = true" placeholder="输入搜索内容" v-model="searchValue"/>
      <i class="el-icon-search" :style="colorWhite?'color:#fff':'color:#000'"></i>
    </div>
  </el-popover>
  <div class="right-operation flex-align-center">
    <div class="weather">
      <p>今日天气:{{weather.daily?weather.daily[0].dayText:""}}</p>
      <p>{{weather.daily?weather.daily[0].low:""}}℃ ~ {{weather.daily?weather.daily[0].high:""}}℃</p>
    </div>
    <el-dropdown>
      <span class="el-dropdown-link">
        <div class="flex">
          {{accountInfo.sitename}}<i class="el-icon-arrow-down el-icon--right"></i>
        </div>
      </span>
      <el-dropdown-menu style="width:200px;text-align:center" slot="dropdown">
        <el-dropdown-item @click.native="$router.push({path:'/user_center'})">个人中心</el-dropdown-item>
        <!-- <el-dropdown-item v-if="canChangeSite" @click.native="$router.replace({path:'/accounts'})">切换账号</el-dropdown-item> -->
        <el-dropdown-item v-for="item in accountList" :key="item.index" divided @click.native="selectAccount(item)">
          <div class="flex-align-center flex-between">
            <p><span class="avatar-mini">{{item.enterprisename?item.enterprisename.substr(0, 1):item.sitename.substr(0, 1)}}</span><span>{{item.enterprisename?item.enterprisename:item.sitename}}</span></p>
            <small>{{item.name}}</small>
        </div>
        </el-dropdown-item>
        <el-dropdown-item divided @click.native="loginOut()">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</div>
</template>

<script>
import {mapGetters} from 'vuex'
import axios from 'axios'
export default {
  data () {
    return {
      accountInfo:{},
      url:"http://weather.cma.cn/api/weather/view?stationid=",
      weather:{},
      searchValue:'',
      accountList:[],
      colorWhite:true
    }
  },
  computed:{
    ...mapGetters({
      siteinfo:'siteinfo',
      menuApp:'menuApp'
    }),
    canChangeSite () {
      let accounts = JSON.parse(sessionStorage.getItem('account_list'))
      if (accounts.length > 1) return true
    }
  },
  methods:{
    // 选择登录账号
    selectAccount (item) {
      let arr = ['module_info','activeApp','active_modules','folderid']
      arr.forEach(key=>{
        sessionStorage.removeItem(key)
      })

      sessionStorage.setItem('active_account',JSON.stringify(item))

      this.basicData.query_userauth().then(()=>{
        this.basicData.querySite_Parameter()
        this.$router.replace({path:'/home'})
      })
    },
    async getWeather () {
      const res = await axios.get(this.url)
      this.weather = res.data.data
    },
    siteInfos () {
      this.$store.dispatch('querySiteInfo',{
        "classname": "webmanage.site.site",
        "method": "querySite",
        "content": {}
      })
    },
    loginOut () {
      this.$confirm('是否要退出当前账号?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sessionStorage.clear()
        this.$router.push('/')
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
      
    },
    changeAccount () {
      this.$router.push('/accounts')
    },

    //跳转到应用,并设设置激活模块
    handelMenuAppClick (app,type) {
      let system = JSON.parse(sessionStorage.getItem('module_info'))
      
      let mod = system.filter(e=>{return e.systemid === app.systemid})[0].modules.filter(e=>{return e.systemmoduleid === app.systemmoduleid})[0]
      
      let clickApp = mod.apps.filter(e=>{return e.systemappid === app.systemappid})

      sessionStorage.setItem('active_modules',JSON.stringify(mod))

      this.$emit('getModules',system.filter(e=>{return e.systemid === app.systemid})[0].modules,type)

      this.$store.dispatch('setActiveApp',{name:app.systemappname,app:clickApp[0],val:this.searchValue})
      
      this.$router.push({path:clickApp[0].path})
    },
  },
  mounted () {
    this.siteInfos()
    // this.getWeather()
    
    this.accountInfo = JSON.parse(sessionStorage.getItem('active_account'))
    this.accountList = JSON.parse(sessionStorage.getItem('account_list')).filter(e=>{
      return e.siteid !== this.accountInfo.siteid
    })
  },
}

</script>
<style>
.el-header{
  height: 50px !important;
}
.search_panel{
  position: relative;
}
.search_panel i{
  position: absolute;
  right:0px;
  height: 30px;
  width: 30px;
  text-align: center;
  line-height: 30px;
  color:#333
}
.search_panel input{
  background: rgba(255, 255, 255, .2);
  height: 30px;
  line-height: 30px;
  width: 300px;
  padding: 0 30px 0 20px;
  border:none;
  border-radius: 30px;
  color:#fff;
  outline: none;
}
.search_panel input::placeholder{
  color:#fff;
} 
.search_panel input:focus{
  background: #fff;
  color:#333
}
.search_panel input:focus::placeholder{
  color:#333;
} 
</style>
<style scoped>
.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  color:#fff
}
.right-operation{
  padding: 0 20px;
}
.search_panel{
  margin: 16px 0;
}
.weather{
  font-size: 12px;
  margin-right:16px;
  color:#f1f2f3;
  transition: .2s linear;
  border-radius: 4px;
  padding: 5px 40px;
}
.weather:hover{
  background-color: rgba(255 ,255,255,.2) !important;
 
}
.appLink{
  padding:2px 5px;
  border:1px solid #f1f2f3;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-left:5px;
  cursor: pointer;
  font-size: 12px;
}
.app-flex{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.avatar-mini{
  display: inline-block;
  position: relative;
  height:20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  margin-right: 5px;
  color:#fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 100%;
  background: #3874F6;
}
</style>