IDCOL/webConfig/src/components/header.vue

<template>
	<div class="headers">
        <div class="left_nav_btn">
            <div class="nav_box">
                <div class="nav_open">
                    <i class="iconfont icon-zhudaohang"></i>
                </div>
                <div class="nav_main">
                    <div class="nav_left">
                        <div class="nav_ul">
                            <div class="nav_title"><span class="span">Control Deck</span></div>
                            <div class="nav_li" @click="linkToFun('/dashboard')" :class="{'select':routerStr == '/dashboard'}"><i class="iconfont icon-daohangjiantou"></i><span class="span">Dashboard</span></div>
                            <div class="nav_li" @click="linkToFun('/projectManagement')" :class="{'select':routerStr == '/projectManagement'}"><i class="iconfont icon-daohangjiantou"></i><span class="span">Project management</span></div>
                            <!-- <div class="nav_li"><i class="iconfont icon-daohangjiantou"></i><span class="span">Group Configuration</span></div>
                            <div class="nav_li"><i class="iconfont icon-daohangjiantou"></i><span class="span">Video Surveillance</span></div>
                            <div class="nav_li"><i class="iconfont icon-daohangjiantou"></i><span class="span">Weather Monitoring</span></div> -->
                            <div class="nav_li" @click="linkToFun('/GIS')" :class="{'select':routerStr == '/GIS'}"><i class="iconfont icon-daohangjiantou"></i><span class="span">GIS map</span></div>
                        </div>
                        <div class="nav_ul">
                            <div class="nav_title"><span class="span">Maintain</span></div> 
                            <div class="nav_li" @click="linkToFun('/alarmMaintenance')" :class="{'select':routerStr == '/alarmMaintenance'}"><i class="iconfont icon-daohangjiantou"></i><span class="span">Alarm</span></div>
                            <div class="nav_li" @click="linkToFun('/historicalData')" :class="{'select':routerStr == '/historicalData'}"><i class="iconfont icon-daohangjiantou"></i><span class="span">Historical data</span></div>
                        </div>
                        <div class="nav_ul">
                            <div class="nav_title"><span class="span">Set Up</span></div>
                            <div class="nav_li" @click="linkToFun('/userManagement')" :class="{'select':routerStr == '/userManagement'}"><i class="iconfont icon-daohangjiantou"></i><span class="span">User management</span></div>
                            <!-- <div class="nav_li"><i class="iconfont icon-daohangjiantou"></i><span class="span">User Management</span></div> -->
                            <div class="nav_li" @click="linkToFun('/operationLog')" :class="{'select':routerStr == '/operationLog'}"><i class="iconfont icon-daohangjiantou"></i><span class="span">Operation log</span></div>
                            <div class="nav_li" @click="linkToFun('/companyManagement')" :class="{'select':routerStr == '/companyManagement'}" v-if="username == 'admin'"><i class="iconfont icon-daohangjiantou"></i><span class="span">Company management</span></div>
                        </div>
                    </div>
                    <div class="nav_right">
                        <p class="p1">Complex background</p>
                        <p class="p2">simple operation</p>
                        <div class="btn"><span class="span">About more</span></div>
                        <img src="../img/nav_bg.png" class="img">
                    </div>
                </div>
            </div>
        </div>
        <div class="center_logo">
            <img src="../img/header_logo.png"><i></i><span>Solar Street Light Management System</span>
        </div>
        <div class="right_btn_box">
            <span class="img_box">
                <img :src="avatar" @click="linkToFun('/userManagement')" :onError="imgErrorSrc">
            </span>
            <el-popover
                placement="top-start"
                popper-class="btn_signOut_box"
                trigger="hover">
                <span class="btn_signOut" @click="signOutFun()">Sign Out</span>
                <span slot="reference"><span class="span">{{username}}</span><i class="el-icon-caret-bottom"></i></span>
            </el-popover>
        </div>
    </div>
</template>

<script type="text/javascript">
    // import allUrl from '../api/allUrl.js'
    // import base from '../api/base.js'
    import { mapGetters } from 'vuex'

	export default {
		name:'headers',
		data(){
			return{
                imgErrorSrc:'',
			}
		},
        computed:{
            ...mapGetters({
				token:'token',
				client_key:'client_key',
				username:'username',
				version:'version',
                role:'role',

                routerStr:'routerStr',

                avatar:'avatar',

            }),
        },
		mounted(){
            this.imgErrorSrc = 'this.src="' + require('../img/user.jpg') + '"';
		},
		methods:{
            linkToFun(val){
                if(val != this.routerStr){
                    this.$router.push({path:val});
                    this.$store.commit('ROUTERSTRFUN',{
                        routerStr:val,
                    })
                    document.title = 'IDCOL-'+val.split('/')[1]
                }
            },
            signOutFun(){
                var storage = window.localStorage;
                storage.setItem('userData','');
                storage.setItem('projectId','');
                storage.setItem('companyId','');
                storage.setItem('searchType',0);
                this.$store.commit('ROUTERSTRFUN',{
                  routerStr:'/login',
                })
                this.$router.push({path:'/login'})
                document.title = 'Inhealth-logo'
            },
        },
        watch:{

        }
	}
</script>

<style type="text/css" lang="less">
    .btn_signOut_box{
        &.el-popover{
            padding: 0;
            .btn_signOut{
                margin: 0 1rem;
                width: 10rem;height: 3.33rem;line-height: 3.33rem;
                text-align:center;
                font-family: AlibabaPuHuiTiM;
                font-size: 1rem;
                cursor: pointer;
            }
        }
    }
	.headers{
        height: 4.1rem;line-height: 4.1rem;
        background:rgba(252,137,64,1);
        box-shadow:0rem 0.17rem 0.5rem 0rem rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left_nav_btn{
            width: 15rem;
            .nav_box{
                width:4.83rem;
                position: relative;
                &:hover{
                    .nav_main{
                        display: flex;
                    }
                }
                .nav_open{
                    width:4.83rem;
                    background:rgba(240,126,53,1);
                    box-shadow:0rem 0.17rem 0.5rem 0rem rgba(0,0,0,0.05);
                    text-align: center;
                    cursor: pointer;
                    i{
                        color: #fff;
                    }
                }
                .nav_main{
                    display: none;
                    // display: flex;
                    z-index: 10000;
                    justify-content: space-between;
                    position: fixed;
                    top: 4.1rem;left: 0;
                    background: #fff;
                    width: 100%;height: 22.6rem;
                    background:rgba(255,255,255,1);
                    box-shadow:0rem 0.17rem 0.5rem 0rem rgba(0,0,0,0.05);
                    border:0.08rem solid rgba(240,240,240,1);
                    .nav_left{
                        display: flex;
                        padding-left: 3rem;
                        .nav_ul{
                            margin: 2rem 7rem 0 0;
                            .nav_title{
                                width:12.5rem;
                                height:2.5rem;line-height:2.5rem;
                                background:rgba(246,248,250,1);
                                border-top-right-radius: 2.5rem;
                                border-bottom-right-radius: 2.5rem;
                                margin-bottom: 0.6rem;
                                padding-left: 1rem;
                                .span{
                                    padding: 0.5rem;
                                    font-size:1.17rem;
                                    font-family:PingFangSC-Semibold,PingFang SC;
                                    font-weight:600;
                                    color:rgba(51,51,51,1);
                                }
                            }
                            .nav_li{
                                height:2.8rem;line-height:2.8rem;
                                .span{
                                    padding: 0.5rem;
                                    margin-left: 1rem;
                                    font-size:1rem;
                                    font-family:AlibabaPuHuiTiR;
                                    color:rgba(101,112,133,1);
                                    cursor: pointer;
                                }
                                i{
                                    display: none;
                                }
                                &.select{
                                    display: flex;
                                    align-items: center;
                                    .span{
                                        margin-left: 0;
                                        font-size:1rem;
                                        font-family:AlibabaPuHuiTiM;
                                        color:rgba(252,132,64,1);
                                    }
                                    i{
                                        display: inline-block;
                                        color: rgba(252,132,64,1);
                                        font-size: 1rem;
                                    }
                                }
                            }
                        }
                    }
                    .nav_right{
                        margin: 1.8rem 2.5rem 0 0;
                        width:35rem;
                        height:19rem;
                        background:rgba(255,255,255,1);
                        border-radius:0.33rem;
                        border:0.08rem solid rgba(240,240,240,1);
                        padding-left: 2.5rem;
                        position: relative;
                        .p1{
                            margin-top: 2.6rem;
                            font-size:1.33rem;
                            font-family:AlibabaPuHuiTiB;
                            color:rgba(55,62,76,1);
                        }
                        .p2{
                            margin-top: -1rem;
                            font-size:3.17rem;
                            font-family:AlibabaPuHuiTiH;
                            color:rgba(55,62,76,1);
                        }
                        .btn{
                            margin-top: 5rem;
                            width:8rem;
                            height:2.5rem;line-height:2.5rem;
                            background:linear-gradient(134deg,rgba(252,169,64,1) 0%,rgba(252,132,64,1) 100%);
                            border-radius:0.17rem;
                            border:0.08rem solid rgba(240,240,240,1);
                            text-align: center;
                            .span{
                                font-size:1rem;
                                font-family:AlibabaPuHuiTiR;
                                color:rgba(255,255,255,1);
                            }
                        }
                        .img{
                            position: absolute;
                            height: 8rem;
                            right: 1.8rem;bottom: 1.2rem;
                        }
                    }
                }
            }
        }
        .center_logo{
            display: flex;
            align-items: center;
            img{
                height: 2rem;
            }
            i{
                display: inline-block;
                width:0.1rem;
                height:1.5rem;
                background: #fff;
                margin: 0 0.6rem;
            }
            span{
                font-size:1.33rem;
                font-family:DINAlternate-Bold,DINAlternate;
                font-weight:bold;
                color:rgba(255,255,255,1);
            }
        }
        .right_btn_box{
            width: 15rem;
            padding-right: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .img_box{
                width: 2.2rem;height: 2.2rem;line-height: 2.2rem;
                border-radius: 50%;
                overflow: hidden;
                img{
                    width: 100%;height: 100%;
                }
            }
            .el-popover__reference{
                font-size:1rem;
                font-family:HiraginoSansGB-W3,HiraginoSansGB;
                font-weight:normal;
                color:rgba(255,255,255,1);
                .span{
                    margin: 0 0.6rem;
                }
            }
        }
	}
</style>