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

<template>
<div class="flex">
  <div class="flex-align-center">
    <el-popover
        placement="top"
        width="400">
        <div class="app-flex flex-between">
          <p class="appLink" v-for="app in menuApp" :key="app.index">{{app.systemappname}}</p>
        </div>
        <div slot="reference" class="search_panel">
          <input placeholder="输入搜索内容"/>
          <i class="el-icon-search"></i>
        </div>
      </el-popover>
    
    <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>
  </div>
  <div class="right-operation">
    <el-dropdown>
      <span class="el-dropdown-link">
        <div class="flex">
          {{siteinfo.enterprisename}}<i class="el-icon-arrow-down el-icon--right"></i>
        </div>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="$router.replace({path:'/user_center'})">个人中心</el-dropdown-item>
        <el-dropdown-item v-if="canChangeSite" @click.native="$router.replace({path:'/accounts'})">切换账号</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:{}
    }
  },
  computed:{
    ...mapGetters({
      siteinfo:'siteinfo',
      menuApp:'menuApp'
    }),
    canChangeSite () {
      let accounts = JSON.parse(sessionStorage.getItem('account_list'))
      if (accounts.length > 1) return true
    }
  },
  methods:{
    async getWeather () {
      const res = await axios.get(this.url)
      console.log(res)
      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(() => {
        this.$router.push('/')
        sessionStorage.clear()
        // location.reload(true);
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
      
    },
    changeAccount () {
      this.$router.push('/accounts')
    }
  },
  mounted () {
    this.siteInfos()
    this.getWeather()
    this.accountInfo = JSON.parse(sessionStorage.getItem('active_account'))
  },
}

</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: none;
  height: 30px;
  line-height: 30px;
  width: 400px;
  padding: 0 30px 0 10px;
  border: 1px solid #f1f2f3;
  border-radius: 5px;
  outline: none;
}
.search_panel input::placeholder{
  color:#fff;
} 
.search_panel input:focus{
  background: #fff;
}
.search_panel input:focus::placeholder{
  color:#333;
} 
</style>
<style scoped>
.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  color:#fff
}
.logo{
}
.right-operation{
  padding: 0 20px;
}
.search_panel{
  margin: 16px 0;
}
.weather{
  font-size: 14px;
  margin-left:16px;
  color:#f1f2f3
}
.appLink{
  padding:2px 5px;
  border:1px solid #f1f2f3;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
}
.app-flex{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}
</style>