windLifecontrolPro/src/components/commonHeaders.vue

<template>
    <div class="proheader">
        <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" :icon="item.icon"
                            :class="getColor(item.showBac)" @click="changeRoute(item)">
                            {{item.name}}
                        </el-button>
                    </el-button-group>
                    <div class="userMsg">
                        <!-- <span style="margin-right: 10px">{{userName}}</span> -->
                        <el-tooltip class="box-item" effect="light" content="用户设置">
                            <el-icon :size="size" :color="color" @click="changePersonRole">
                                <Avatar />
                            </el-icon>
                        </el-tooltip>
                    </div>
                    <div class="divider" style="margin: 0 20px">|</div>
                    <div class="settingStop">
                        <!-- @click="changeSetting" -->
                        <el-tooltip class="box-item" effect="light" content="系统设置">
                            <el-icon size="small" :color="color" @click="changeSetting">
                                <Setting />
                            </el-icon>
                        </el-tooltip>
                        <el-tooltip class="box-item" effect="light" content="退出">
                            <el-icon :size="size" :color="color" @click="backLogin" style="margin: 0 15px">
                                <SwitchButton />
                            </el-icon>
                        </el-tooltip>
                    </div>
                </div>
            </el-header>
        </el-container>
    </div>
</template>

<script>
    import httpRequest from '@/utils/request.js'
    import {
        apiGetpersonalInformation
    } from '@/api/api'
    import {
        removeToken
    } from '@/utils/auth'
    export default {
        name: 'headerCom',
        data() {
            return {
                leftIndex: '1',
                currentTime: '',
                showRole: true,
                menuData: [],
                rainW: false,
                userName: ''
            }
        },
        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;
            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)
            debugger
            that.showHeader(that.$route)
        },
        watch: {
            $route: {
                handler: function (route) {
                    console.log('route', route)
                    this.showHeader(route)
                },
                immediate: true
            }
        },
        methods: {
            showHeader(route) {
                this.menuData.forEach(it => {
                    if (route.path.indexOf('powerPrediction') > -1) {
                        httpRequest.defaults.baseURL = process.env.VUE_APP_BASE_URL;
                        if (it.name === '功率预测') {
                            it.showBac = true
                        } else {
                            it.showBac = false
                        }
                    } else if (route.path.indexOf('intelligentReport') > -1) {
                        httpRequest.defaults.baseURL = process.env.VUE_APP_REPORT_URL;
                        if (it.name === '智能报表') {
                            it.showBac = true
                        } else {
                            it.showBac = false
                        }
                    } else if (route.path.indexOf('generatingCap') > -1) {
                        httpRequest.defaults.baseURL = process.env.VUE_APP_GENERAT_URL;
                        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)
                }
            },
            // 插入登出信息
            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;
        height: 60px;

        .weatherSty {
            background: rgb(74, 87, 100);
        }

        .headerSty {
            // background: rgb(13, 104, 188);
            // background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#373590), to(#645fef));
        }

        .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: linear-gradient(0deg, transparent, #000);
                    }

                    .defaultBacksty {
                        background-color: #000 !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>