<template>
|
<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
|
<!-- <div class="site-navbar__header">
|
<h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
|
<div class="mytext">
|
<a href="javascript:;" style="margin-left:40px;color: white;font-size:22px">智慧路灯大数据管理监控平台</a>
|
</div>
|
</h1>
|
</div> -->
|
<el-row>
|
<el-col :span="24" class="my_navbar_body">
|
<div>
|
<el-row>
|
<el-col :span="16" :offset="4">
|
<center style="margin-top:2%">
|
<img src="~@/assets/img/navbar/navbar_streetlight_icon.png" height="40px" style="margin-top:-20px">
|
<span style="color:white;font-size:40px">智慧路灯大数据监控平台</span>
|
</center>
|
</el-col>
|
<el-col style="margin-top:1.5%" :span="4">
|
<img width="40px" src="~@/assets/img/user.png" :alt="userName">
|
<!-- <span style="color:white;">您好，{{ userName }}</span> -->
|
<el-dropdown>
|
<span class="el-dropdown-link" style="font-size:17px;color:white">
|
{{ userName }}
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item>
|
<el-button @click="updatePasswordHandle()" type="text" style="color:black">修改密码</el-button>
|
</el-dropdown-item>
|
<el-dropdown-item>
|
<el-button @click="logoutHandle()" type="text" style="color:black">退出</el-button>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- <div>
|
<div>
|
<span class="el-dropdown-link">
|
<span style="color:white">您好，{{ userName }}</span>
|
<img src="~@/assets/img/user.png" :alt="userName">
|
</span> -->
|
<!-- <button type="text" class="btn-logout" @click="logoutHandle()" style="color:red">退出<icon-svg name="run"></icon-svg></button> -->
|
<!-- </div>
|
</div> -->
|
</el-col>
|
|
<el-col :span="24" style="background-color:white;height:61px;width:100%">
|
<!-- <el-col :span="4">
|
<div class="btn-route" :class="{'btn-route-active': activeIndex==0}" @click="activeIndex=0,$router.push({ name: 'home' })"><icon-svg name="nav-home"></icon-svg><div class="btn-text">系统首页</div></div>
|
</el-col>
|
<el-col :span="4">
|
<div class="btn-route" :class="{'btn-route-active': activeIndex==1}" @click="activeIndex=1,$router.push({ name: 'streetlight' })"><icon-svg name="nav-streetlight"></icon-svg><div class="btn-text">路灯管理</div></div>
|
</el-col>
|
<el-col :span="4">
|
<div class="btn-route" :class="{'btn-route-active': activeIndex==2}" @click="activeIndex=2,$router.push({ name: 'led' })"><icon-svg name="nav-led"></icon-svg><div class="btn-text">LED管理</div></div>
|
</el-col>
|
<el-col :span="4">
|
<div class="btn-route" :class="{'btn-route-active': activeIndex==3}" @click="activeIndex=3,$router.push({ name: 'charge' })"><icon-svg name="nav-charge"></icon-svg><div class="btn-text">充电桩管理</div></div>
|
</el-col>
|
<el-col :span="4">
|
<div class="btn-route" :class="{'btn-route-active': activeIndex==4}" @click="activeIndex=4,$router.push({ name: 'camera' })"><icon-svg name="nav-camera"></icon-svg><div class="btn-text">摄像头管理</div></div>
|
</el-col>
|
<el-col :span="4">
|
<div class="btn-route" :class="{'btn-route-active': activeIndex==5}" @click="activeIndex=5,$router.push({ name: 'weather' })"><icon-svg name="nav-weather"></icon-svg><div class="btn-text">大气数据管理</div></div>
|
</el-col> -->
|
<el-menu style="height:50px" :default-active="activeIndex" background-color="white" active-text-color="#3BEED7" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
<el-menu-item style="margin-left:8%" index="1">
|
<span style="font-size:17px;color:#4D4D4D">系统首页</span>
|
</el-menu-item>
|
<el-menu-item style="margin-left:8%" index="2">
|
<span style="font-size:17px;color:#4D4D4D">路灯管理</span>
|
</el-menu-item>
|
<el-menu-item style="margin-left:8%" index="3">
|
<span style="font-size:17px;color:#4D4D4D">LED管理</span>
|
</el-menu-item>
|
<el-menu-item style="margin-left:8%" index="4">
|
<span style="font-size:17px;color:#4D4D4D">充电桩管理</span>
|
</el-menu-item>
|
<el-menu-item style="margin-left:8%" index="5">
|
<span style="font-size:17px;color:#4D4D4D">摄像头管理</span>
|
</el-menu-item>
|
<el-menu-item style="margin-left:8%" index="6">
|
<span style="font-size:17px;color:#4D4D4D">大气数据管理</span>
|
</el-menu-item>
|
</el-menu>
|
</el-col>
|
</el-row>
|
<!-- 弹窗, 修改密码 -->
|
<update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
|
</nav>
|
</template>
|
|
<script>
|
import UpdatePassword from './main-navbar-update-password'
|
import { clearLoginInfo } from '@/utils'
|
export default {
|
data () {
|
return {
|
updatePassowrdVisible: false,
|
activeIndex: '1'
|
}
|
},
|
components: {
|
UpdatePassword
|
},
|
computed: {
|
navbarLayoutType: {
|
get () { return this.$store.state.common.navbarLayoutType }
|
},
|
sidebarFold: {
|
get () { return this.$store.state.common.sidebarFold },
|
set (val) { this.$store.commit('common/updateSidebarFold', val) }
|
},
|
mainTabs: {
|
get () { return this.$store.state.common.mainTabs },
|
set (val) { this.$store.commit('common/updateMainTabs', val) }
|
},
|
userName: {
|
get () { return this.$store.state.user.name }
|
}
|
},
|
mounted () {
|
},
|
methods: {
|
handleSelect (key, keyPath) {
|
switch (key) {
|
case '1': {
|
this.$router.push({ name: 'home' })
|
break
|
}
|
case '2': {
|
this.$router.push({ name: 'streetlight' })
|
break
|
}
|
case '3': {
|
this.$router.push({ name: 'led' })
|
break
|
}
|
case '4': {
|
this.$router.push({ name: 'charge' })
|
break
|
}
|
case '5': {
|
this.$router.push({ name: 'camera' })
|
break
|
}
|
case '6': {
|
this.$router.push({ name: 'weather' })
|
break
|
}
|
}
|
},
|
// 修改密码
|
updatePasswordHandle () {
|
this.updatePassowrdVisible = true
|
this.$nextTick(() => {
|
this.$refs.updatePassowrd.init()
|
})
|
},
|
// 退出
|
logoutHandle () {
|
this.$confirm(`确定进行[退出]操作?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$http({
|
url: this.$http.adornUrl('/sys/logout'),
|
method: 'post',
|
data: this.$http.adornData()
|
}).then(({data}) => {
|
if (data && data.code === 0) {
|
clearLoginInfo()
|
this.$router.push({ name: 'login' })
|
}
|
})
|
}).catch(() => {})
|
},
|
// 获取时间，实现电子钟
|
getTime () {
|
let time = new Date()
|
let hours = time.getHours()
|
let minutes = time.getMinutes()
|
var year = time.getFullYear() // 年
|
var month = time.getMonth() + 1 // 月
|
var day = time.getDate() // 日
|
this.time = hours + ':' + minutes
|
this.date = year + '-' + month + '-' + day
|
this.week = '星期' + '日一二三四五六'.charAt(time.getDay())
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.my_navbar_body {
|
height: 100px;
|
background:url(~@/assets/img/navbar/navbar_bg.png);
|
background-size: 100% 100%;
|
}
|
</style>
|
