BusinessBenchmark/src/components/commonHeaders.vue

<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>