<template> <div class="proheader"> <el-container> <el-header :class="getStyle()"> <div class="logoSty"> <img src="../assets/logoG.png" alt=""> </div> </el-header> </el-container> </div> </template> <script> import { apiGetpersonalInformation } from '../api/api' import { removeToken } from '../api/auth' export default { name:'headerCom', data() { return { leftIndex: '1', currentTime: '', showRole: true, menuData: [], rainW: false, userName: '' } }, created() { this.menuData = [ { index: '/index', icon: 'Menu', name: '概要', showBac: true }, { index: '/panoramicPower', icon: 'Histogram', name: '全景功率' }, { index: '/powerPrediction', icon: 'TrendCharts', name: '功率预测' }, { index: '/batteryDiviner', icon: 'TrendCharts', name: '电量预测' }, { index: '/powerControl', icon: 'Platform', name: '功率管控' }, { index: '/weather', icon: 'PictureFilled', name: '天气预报' }, { index: '/statisticalSummary', icon: 'List', name: '统计汇总' }, { // index: 'http://120.46.129.85:7788/dashboard/marketBoundary', index: 'http://10.155.32.7:8084', icon: 'Connection', name: '智能营销' }, // { // index: '/datasExport', // icon: 'Download', // name: '数据导出' // }, { index: '/draggableTest', icon: 'Download', name: '拖拽测试' } ] }, mounted() { let that = this; 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.getUserMes(userMes.userId) }, watch:{ $route: { handler: function(route) { console.log(route) this.menuData.forEach(it =>{ if (it.index === route.path) { it.showBac = true } else { it.showBac = false } }) }, immediate: true } }, methods:{ changeRoute(item) { if (item.name === '智能营销') { let url = '' if (location.origin.indexOf('10.15.32.7') !== -1) { url = location.origin + '/#/dashboard/marketBoundary' + `?userid=uuu&markKey=YXSSO` } else { url = item.index } window.open(url, '_self') } else { this.$router.push({ path: item.index}) } }, async backLogin() { let loginName = this.userName if (loginName) { await this.LogoutInfor(loginName) } }, // 插入登出信息 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() } }, changeSetting() { this.$router.push({ path: '/systemSettings/Overview'}) }, changePersonRole() { this.$router.push({ path: '/personnelRole'}) }, 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; .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: 60px; height: 60px !important; .logoSty{ padding: 10px 0 0 0; img{ width: 310px; } } .proMenu{ display: flex; align-items: center; .el-button-group{ .changeBacksty{ background-color: #504bb5 !important; } .defaultBacksty{ background-color: #373590 !important; } .defaultweathersty{ background-color: #0d68bc !important; } .defaultweatherRainsty{ background-color: #4a5764 !important; } .el-button{ background-color: #373590; border-color: #8679df; padding: 0 20px; &:hover { background-color: #504bb5; } } } .userMsg{ margin-left: 150px; .el-icon{ cursor: pointer; } } .divider{ position: relative; top: -3px; } .settingStop{ .el-icon{ cursor: pointer; } } } } } </style>