windLifecontrolPro/src/components/commonHeaders.vue

<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">
                    <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" @change="changSwith">
                                <template #active-action>
                                    <!-- <span class="custom-active-action">T</span> -->
                                    <img :src="moon_B" alt="" v-if="!switchTheme">
                                    <img :src="sun_W" alt="" v-else>
                                </template>
                                <template #inactive-action>
                                    <!-- <span class="custom-inactive-action">F</span> -->
                                    <img :src="moon_B" alt="" v-if="!switchTheme">
                                    <img :src="sun_B" alt="" v-else>
                                </template>
                            </el-switch>

                            <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 rightIm" @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/images/headerCom/zidongtianbao.png'
    import header_shezhi from '@/assets/images/headerCom/shezhi.png'
    import header_dianyuan from '@/assets/images/headerCom/guanji.png'
    import sun_W from '@/assets/images/headerCom/sun_W.png'
    import moon_B from '@/assets/images/headerCom/moon_B.png'
    import sun_B from '@/assets/images/headerCom/sun_B.png'
    import moon_W from '@/assets/images/headerCom/moon_W.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,
                sun_W: sun_W,
                sun_B: sun_B,
                moon_B: moon_B,
                moon_W: moon_W,
                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/gkjlb?name=xinzhuang',
                    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: 50px;

        .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: 50px;
            height: 50px !important;

            .logoSty {
                padding: 8px 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: 26px;
                            width: 88px;
                            height: 25px;

                            .el-switch__input {
                                width: 88px;
                                height: 25px;
                            }

                            .el-switch__core {
                                width: 88px;
                                height: 25px;
                                border-radius: 13px;


                                .el-switch__action {
                                    width: 41px;
                                    height: 21px;
                                    border-radius: 11px;

                                    img {
                                        width: 15px;
                                        height: 15px;
                                    }
                                }
                            }
                        }

                        .el-switch--small.is-checked .el-switch__core .el-switch__action {
                            width: 41px;
                            height: 21px;
                            border-radius: 10px;
                            left: calc(100% - 41px) !important;
                        }

                        .Settingitem {
                            color: #fff;
                            margin-left: 30px;
                            width: 25px;
                            height: 25px;
                            cursor: pointer;
                        }

                        .rightIm {
                            margin-right: 30px;
                        }

                        .downItem {
                            position: relative;
                            top: 7px;
                        }
                    }
                }


            }
        }
    }

    .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;
                    background-image: url('@/assets/images/headerCom/sun_B.png');
                    background-repeat: no-repeat;
                    background-position: 58px 2px;
                    background-size: 20px;

                    .el-switch__action {
                        background: #1C99FF;
                    }
                }
            }


        }
    }

    .themeLights {
        background: linear-gradient(90deg, #1f53b1, #6962b1) !important;
        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: #1E3F9A;
                    background-image: url('@/assets/images/headerCom/moon_W.png');
                    background-repeat: no-repeat;
                    background-position: 8px 2px;
                    background-size: 20px;

                    .el-switch__action {
                        background: #fff;
                    }
                }
            }

        }
    }
</style>