<template> <div class="proheader" :class="!switchTheme ? 'themeDarks' : 'themeLights'"> <el-container> <el-header :class="getStyle()"> <div class="logoSty"> <img src="../assets/logoGuo_DB.png" alt=""> </div> <div class="proMenu"> <!-- <el-button-group> <el-button type="primary" v-for="(item,index) in menuData" :key="index" :class="getColor(item.showBac)" @click="changeRoute(item)"> {{item.name}} </el-button> </el-button-group> --> <div class="proButton"> <div class="buttonItem" v-for="(item,index) in menuData" :key="index" :class="getColor(item.showBac)" @click="changeRoute(item)">{{item.name}}</div> </div> <div class="proSet"> <div class="settingStop"> <el-switch v-model="switchTheme" :active-action-icon="SunnyIcon" :inactive-action-icon="MoonIcon" @change="changSwith" /> <el-tooltip class="box-item" effect="light" content="自动填报工具"> <a href="http://172.16.12.103:9001/script/download"> <img :src="header_wendang" class="Settingitem downItem"> </a> </el-tooltip> <el-tooltip class="box-item" effect="light" content="系统设置"> <img :src="header_shezhi" class="Settingitem"> </el-tooltip> <el-tooltip class="box-item" effect="light" content="退出"> <img :src="header_dianyuan" class="Settingitem" @click="backLogin"> </el-tooltip> </div> </div> </div> </el-header> </el-container> </div> </template> <script> import httpRequest from '@/utils/request.js' import header_wendang from '@/assets/menuImg/header_wendang.png' import header_shezhi from '@/assets/menuImg/header_shezhi.png' import header_dianyuan from '@/assets/menuImg/header_dianyuan.png' import { Sunny, Moon } from '@element-plus/icons-vue' import { apiGetpersonalInformation } from '@/api/api' import { removeToken } from '@/utils/auth' export default { name: 'headerCom', data() { return { SunnyIcon: Sunny, MoonIcon: Moon, header_wendang: header_wendang, header_shezhi: header_shezhi, header_dianyuan: header_dianyuan, leftIndex: '1', currentTime: '', showRole: true, menuData: [], rainW: false, userName: '', switchTheme: false } }, created() { this.menuData = [ // { // index: '/home', // icon: 'Menu', // name: '首页', // showBac: true // }, { index: '/generatingCap/dataFilter/prepare', icon: 'Histogram', name: '发电能力分析' }, { index: '/intelligentReport/reporting', icon: 'PictureFilled', name: '智能报表' }, { index: '/powerPrediction/index', icon: 'TrendCharts', name: '功率预测' }, ] }, mounted() { let that = this; if (!JSON.parse(window.sessionStorage.getItem('theme'))) { // window.sessionStorage.setItem('theme', false) window.sessionStorage.setItem('theme', true) // 默认白色版本 } else { this.switchTheme = JSON.parse(window.sessionStorage.getItem('theme')) this.$store.state.theme = this.switchTheme this.$emit('swichFn', this.switchTheme) } let userMes = JSON.parse(window.sessionStorage.getItem('userMessage')) that.userName = userMes ? userMes.role : 'administrator' if (this.$route.query.markKey) { that.userName = that.$route.query.userid } if (userMes && userMes.role === 'ordinaryUser') { that.showRole = false } that.showHeader(that.$route) }, watch: { $route: { handler: function (route) { console.log('route', route) this.showHeader(route) }, immediate: true } }, methods: { changSwith(val) { this.$emit('swichFn', val) window.sessionStorage.setItem('theme', JSON.stringify(this.switchTheme)) this.$store.state.theme = this.switchTheme }, showHeader(route) { this.menuData.forEach(it => { if (route.path.indexOf('powerPrediction') > -1) { if (it.name === '功率预测') { it.showBac = true } else { it.showBac = false } } else if (route.path.indexOf('intelligentReport') > -1) { if (it.name === '智能报表') { it.showBac = true } else { it.showBac = false } } else if (route.path.indexOf('generatingCap') > -1) { if (it.name === '发电能力分析') { it.showBac = true } else { it.showBac = false } } else if (route.path === '/home') { if (it.name === '首页') { it.showBac = true } else { it.showBac = false } } else { it.showBac = false } }) }, changeRoute(item) { window.sessionStorage.setItem('headerRoute', item.index) this.$router.push({ path: item.index }) this.$emit('headerName', item.name) }, // async backLogin() { // let loginName = this.userName // if (loginName) { // await this.LogoutInfor(loginName) // } // }, backLogin() { window.sessionStorage.clear() this.$router.push({ path: "/login" }) }, // 插入登出信息 LogoutInfor(name) { let that = this let onlyData = JSON.parse(window.sessionStorage.getItem('userDatamsg')) let loginData = JSON.parse(window.sessionStorage.getItem('loginMsg')) if (onlyData) { let paramsLogin = onlyData ? onlyData.identifier : loginData.identific let params = { identifier: paramsLogin, loginName: name } apiGetinsertLogoutInformation(params).then(datas => { if (datas) { let url = location.origin + '/#/login' window.open(url, '_self') location.reload() removeToken() } }) } else { let url = location.origin + '/#/login' window.open(url, '_self') location.reload() removeToken() } }, getStyle() { if (this.$route.path === '/weather') { if (this.rainW) { return 'weatherSty' } else { return 'headerSty' } } }, getColor(val) { let strWea = '' if (val) { strWea = 'changeBacksty' } else { strWea = 'defaultBacksty' } return strWea }, //获取个人信息 getUserMes(id) { let params = { userId: id } apiGetpersonalInformation(params).then(datas => { window.sessionStorage.setItem('userInfo', JSON.stringify(datas.data.user)) }) }, changeDate(date) { var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? ('0' + m) : m; var d = date.getDate(); d = d < 10 ? ('0' + d) : d; var h = date.getHours(); h = h < 10 ? ('0' + h) : h; var minute = date.getMinutes(); minute = minute < 10 ? ('0' + minute) : minute; var second = date.getSeconds(); second = second < 10 ? ('0' + second) : second; return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second }, nowTime() { let that = this; let date = new Date() this.statusTimer = setInterval(function () { var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? ('0' + m) : m; var d = date.getDate(); d = d < 10 ? ('0' + d) : d; var h = date.getHours(); h = h < 10 ? ('0' + h) : h; var minute = date.getMinutes(); minute = minute < 10 ? ('0' + minute) : minute; var second = date.getSeconds(); second = second < 10 ? ('0' + second) : second; that.currentTime = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second; }, 1000) }, handleSelect(index) { if (this.leftIndex === index) return this.leftIndex = index // this.$router.push({path: index}) console.log(index) } } } </script> <style lang="less"> .proheader { // position: fixed; // top: 0; width: 100%; z-index: 1999; height: 55px; .weatherSty { background: rgb(74, 87, 100); } .el-header { padding: 0 10px; display: flex; justify-content: space-between; // background: rgb(13, 104, 188); // background: rgba(96,103,105,.75); color: #fff; line-height: 55px; height: 55px !important; .logoSty { padding: 10px 0 0 0; img { width: 310px; } } .proMenu { .proButton { display: flex; .buttonItem { cursor: pointer; width: 130px; height: 52px; line-height: 52px; font-size: 14px; text-align: center; } } .proSet { display: flex; justify-content: center; width: 260px; .settingStop { display: flex; width: 260px; align-items: center; justify-content: center; .el-switch { margin-left: 10px; .el-switch__core { min-width: 50px; height: 20px; .el-switch__action { width: 25px; height: 16px; border-radius: 10px; } } } .el-switch--small.is-checked .el-switch__core .el-switch__action { width: 25px; height: 16px; border-radius: 10px; left: calc(100% - 25px) !important; } .Settingitem { color: #fff; margin-left: 20px; width: 25px; height: 25px; cursor: pointer; } .downItem { position: relative; top: 5px; } } } } } } .themeDarks { border-bottom: 1px solid #3a3a3a; .proMenu { display: flex; align-items: center; .proButton { border-right: 1px solid #3a3a3a !important; .buttonItem { border-left: 1px solid #3a3a3a !important; } .changeBacksty { border-bottom: 3px solid #1C99FF !important; color: #1C99FF !important; } .defaultBacksty { color: #A2A3A4 !important; } .defaultweathersty { background-color: #0d68bc !important; } .defaultweatherRainsty { background-color: #4a5764 !important; } } .el-switch { .el-switch__core { background: #000; .el-switch__action { .el-icon { // background: #1C99FF; // border-radius: 5px; color: #000; } } } } } } .themeLights { border-bottom: 1px solid #7899ff; .proMenu { display: flex; align-items: center; .proButton { border-right: 1px solid #7899ff !important; .buttonItem { border-left: 1px solid #7899ff !important; } .changeBacksty { border-bottom: 3px solid #3dc2d3 !important; color: #fff !important; } .defaultBacksty { color: #B7C6FF !important; } .defaultweathersty { background-color: #0d68bc !important; } .defaultweatherRainsty { background-color: #4a5764 !important; } } .el-switch { .el-switch__core { background: #373590; .el-switch__action { .el-icon { // background: #373590; color: #373590; } } } } } } </style>