<template>
<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType" id="navbar" style="height:38px;" >
<!-- 修改背景为深蓝色渐变 -->
<div class="site-navbar__body clearfix" style="height:48px;margin-left:0px;background: linear-gradient(135deg, #1a2b5f 0%, #2a3a7a 100%);">
<el-menu
class="site-navbar__menu"
mode="horizontal" style="height:38px;">
<!-- 折叠按钮 -->
<el-menu-item v-if="sidebarIsShow" class="site-navbar__switch" id="myzhedie" index="0" @click="sidebarFold = !sidebarFold" style="width:64px;">
<icon-svg name="zhedie" style="color: #fff;"></icon-svg>
</el-menu-item>
<el-menu-item v-else class="site-navbar__switch" index="0" id="myhome1" style="width:64px;">
<icon-svg name="home" style="color: #fff;"></icon-svg>
</el-menu-item>
<!-- 公司Logo -->
<el-menu-item class="site-navbar__switch" index="0" style="padding:0 0px;background-color:transparent;color:inherit;margin-left:-10px">
<img src="~@/assets/img/logoNew6.png" style="width:160px;height:28px;">
</el-menu-item>
</el-menu>
<!-- 主菜单 - 修改字体和悬停效果 -->
<el-menu id="myNavbar"
:default-active="activeMenu"
@select="handleSelect"
class="site-navbar__menu"
mode="horizontal"
style="margin-left:21px;"
default-active="home"
background-color="transparent"
text-color="#e6f7ff"
active-text-color="#ffffff">
<!-- 菜单项 -->
<el-menu-item v-if="isAuth('battery:bmsbatteryinfo:monitornavbar')" style="margin-left:-1%;font-size: 15px;font-weight: 500;" index="home" @click="openHomeHandle">
<icon-svg name="chezidingyi" class="site-sidebar__menu-icon" style="color: #e6f7ff;"></icon-svg>
<span slot="title">实时查询</span>
</el-menu-item>
<el-menu-item v-if="isAuth('battery:bmsbatteryinfo:traditionnavbar')" style="margin-left:-1%;font-size: 15px;font-weight: 500;" index="tradition"
@click="openSideMenusHandle('31,118,150,153,214,1,46,32,67,-100')">
<icon-svg name="system" class="site-sidebar__menu-icon" style="color: #e6f7ff;"></icon-svg>
<span slot="title">数据管理中心</span>
</el-menu-item>
<el-menu-item v-if="isAuth('battery:bmsbatteryinfo:reportnavbar')" style="margin-left:-1%;font-size: 15px;font-weight: 500;" index="report"
@click="openSideMenusHandle('445,453,458,459,462,-2')">
<icon-svg name="tubiao" class="site-sidebar__menu-icon" style="color: #e6f7ff;"></icon-svg>
<span slot="title">统计分析</span>
</el-menu-item>
<el-menu-item v-if="isAuth('battery:bmsbatteryinfo:statisticsnavbar')" style="margin-left:-1%;font-size: 15px;font-weight: 500;" index="statistics"
@click="openSideMenusHandle('465,470,471,475,-1')">
<icon-svg name="shouye" class="site-sidebar__menu-icon" style="color: #e6f7ff;"></icon-svg>
<span slot="title">安全中心</span>
</el-menu-item>
<el-menu-item v-if="isAuth('battery:bmsbatteryinfo:managenavbar')" style="margin-left:-1%;font-size: 15px;font-weight: 500;" index="manage"
@click="openSideMenusHandle('405,384,1,-3')">
<icon-svg name="config" class="site-sidebar__menu-icon" style="color: #e6f7ff;"></icon-svg>
<span slot="title">管理中心</span>
</el-menu-item>
<!-- 驾驶舱子菜单 -->
<el-submenu id="myWindow" v-if="isAuth('battery:bmsbatteryinfo:largescreennavbar')" style="margin-left:-1%;font-size: 15px;font-weight: 500;" index="largescreen">
<template slot="title" style="margin-left:-1%;">
<icon-svg name="dashujukeshihua" class="site-sidebar__menu-icon" style="color:rgb(21, 162, 227);"></icon-svg>
<span slot="title" style="margin-left:-1%;">驾驶舱</span>
</template>
<el-menu-item index="2-1" @click="openEchartInNewWindow" v-if="isAuth('mqtt:mtbatteryinfolastest:largedep')">
<icon-svg name="dashujukeshihua" class="site-sidebar__menu-icon" style="color: #1a2b5f;"></icon-svg>
<span slot="title">欣动电池大屏</span>
</el-menu-item>
</el-submenu>
</el-menu>
<!-- 右侧菜单 -->
<el-menu
class="site-navbar__menu site-navbar__menu--right"
mode="horizontal"
background-color="transparent"
text-color="#e6f7ff"
active-text-color="#ffffff">
<el-menu-item index="1" id="mydaping" @click="openEchartInNewWindow" v-if="isAuth('mqtt:mtbatteryinfolastest:largeDatalist')">
<template slot="title">
<el-badge value="大屏" type="primary">
<icon-svg name="dashujukeshihua" class="el-icon-rank" style="color: #e6f7ff;"></icon-svg>
</el-badge>
</template>
</el-menu-item>
<el-menu-item index="2" id="myshezhi" @click="$router.push({ name: 'theme' })">
<template slot="title">
<el-badge value="设置" type="primary">
<icon-svg name="shezhi" class="el-icon-setting" style="color: #e6f7ff;"></icon-svg>
</el-badge>
</template>
</el-menu-item>
<el-menu-item class="site-navbar__avatar" index="3" id="myhuichu">
<el-dropdown :show-timeout="0" placement="bottom">
<span class="el-dropdown-link" style="color: #fff; font-weight: 500;">
<img src="~@/assets/img/avatar1.png" style="width:30px;height:30px;margin-bottom:2px; border: 1px solid #4a9eff; border-radius: 50%;" :alt="userName">
{{ userName }}
</span>
<el-dropdown-menu slot="dropdown" style="background-color: #1a2b5f; border: 1px solid #4a9eff;">
<el-dropdown-item @click.native="updatePasswordHandle()" style="color: #e6f7ff;">修改密码</el-dropdown-item>
<el-dropdown-item @click.native="logoutHandle()" style="color: #e6f7ff;">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu-item>
</el-menu>
</div>
<!-- 弹窗, 修改密码 -->
<update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
</nav>
</template>
<script>
import UpdatePassword from './main-navbar-update-password'
import { clearLoginInfo,EventBus } from '@/utils'
import Router from 'vue-router'
import http from '@/utils/httpRequest'
import { isURL } from '@/utils/validate'
export default {
data () {
return {
firstLogin: true,
updatePassowrdVisible: false,
activeMenu: 'tradition' // 默认激活的菜单项ID
}
},
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) }
},
menuActiveName: {
get () { return this.$store.state.common.menuActiveName },
set (val) { this.$store.commit('common/updateMenuActiveName', val) }
},
userName: {
get () { return this.$store.state.user.name }
},
isHomePage(){
return this.$route.path === '/home'
},
// 左侧菜单显示
sidebarIsShow: {
get () { return this.$store.state.common.sidebarIsShow },
set (val) { this.$store.commit('common/updateSidebarIsShow', val) }
},
},
created() {
// 刚登录进来,多点击监控中心,防止左侧缓存的菜单出现
if(localStorage.getItem('firstLogin')===null){
localStorage.clear();
localStorage.setItem('firstLogin', '1');
this.firstLogin = false;
// 显示左侧菜单隐藏
this.openHomeHandle ()
setTimeout(() => {
this.openHomeHandle ();
}, 1);
setTimeout(() => {
this.openHomeHandle ();
}, 100);
}else{
}
this.openHomeHandle ()
setTimeout(() => {
this.openHomeHandle ();
}, 10);
setTimeout(() => {
this.openHomeHandle ();
}, 100);
setTimeout(() => {
this.openHomeHandle ();
}, 120);
setTimeout(() => {
this.openHomeHandle ();
}, 180);
// 页面加载时尝试恢复之前的选中状态。刷新时一直保持点击颜色
this.activeMenu = sessionStorage.getItem('activeMenu') || this.activeMenu;
},
methods: {
handleSelect(key, keyPath) {
// 菜单项被点击时保存选中状态
sessionStorage.setItem('activeMenu', key);
},
openEchartInNewWindow() {
const routeData = this.$router.resolve({ name: 'echart' });
window.open(routeData.href, '_blank');
},
// 修改密码
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(() => {})
},
openSideMenusHandle (parentMenuIds) {
this.mainTabs = [] //清除打开的tab菜单
this.menuActiveName = ''
// 左侧菜单显示
this.$store.state.common.sidebarIsShow = true
// 折叠打开
this.$store.state.common.sidebarFold = false
// 这里调用左侧菜单的方法
EventBus.$emit('callMethod',parentMenuIds);
// 再次调用,防止点击监控中心--然后跳转到其他菜单时无反应
setTimeout(() => {
EventBus.$emit('callMethod',parentMenuIds);
}, 150);
setTimeout(() => {
EventBus.$emit('callMethod',parentMenuIds);
}, 100);
setTimeout(() => {
EventBus.$emit('callMethod',parentMenuIds);
}, 220);
setTimeout(() => {
EventBus.$emit('callMethod',parentMenuIds);
}, 120);
},
openHomeHandle () {
this.$store.state.common.sidebarFold = true
// 左侧菜单显示关闭
this.$store.state.common.sidebarIsShow = false
this.$router.push({ name: 'home' })
},
//关闭全部tab
tabsCloseAllHandle () {
this.mainTabs = []
this.menuActiveName = ''
this.$router.push({ name: 'home' })
},
reloadMenus(parentMenuIds){
this.$http({
url: this.$http.adornUrl('/sys/menu/navappoint'),
method: 'get',
params: this.$http.adornParams({
'parentMenuIds': parentMenuIds
})
}).then(({data}) => {
if (data && data.code === 0) {
this.fnAddDynamicMenuRoutes(data.menuList)
this.$router.options.isAddDynamicMenuRoutes = true
sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
EventBus.$emit('callMethod',parentMenuIds);
this.tabsCloseAllHandle ();
// 折叠打开
this.$store.state.common.sidebarFold = false
this.$router.push({ name: 'home' })
} else {
sessionStorage.setItem('menuList', '[]')
sessionStorage.setItem('permissions', '[]')
// 折叠缩进
this.$store.state.common.sidebarFold = true
next()
}
}).catch((e) => {
console.log(`%c${e} 请求菜单列表和权限失败,跳转至登录页!!`, 'color:blue')
})
},
/**
* 添加动态(菜单)路由
* @param {*} menuList 菜单列表
* @param {*} routes 递归创建的动态(菜单)路由
*/
fnAddDynamicMenuRoutes (menuList = [], routes = []) {
var temp = []
for (var i = 0; i < menuList.length; i++) {
if (menuList[i].list && menuList[i].list.length >= 1) {
temp = temp.concat(menuList[i].list)
} else if (menuList[i].url && /\S/.test(menuList[i].url)) {
menuList[i].url = menuList[i].url.replace(/^\//, '')
var route = {
path: menuList[i].url.replace('/', '-'),
component: null,
name: menuList[i].url.replace('/', '-'),
meta: {
menuId: menuList[i].menuId,
title: menuList[i].name,
isDynamic: true,
isTab: true,
iframeUrl: ''
}
}
if (isURL(menuList[i].url)) {
route['path'] = `i-${menuList[i].menuId}`
route['name'] = `i-${menuList[i].menuId}`
route['meta']['iframeUrl'] = menuList[i].url
} else {
try {
route['component'] = _import(`modules/${menuList[i].url}`) || null
} catch (e) {}
}
routes.push(route)
}
}
if (temp.length >= 1) {
this.fnAddDynamicMenuRoutes(temp, routes)
} else {
var mainRoutes = {
name: 'main-dynamic',
children: routes,
path: '/'
}
this.$router.addRoutes([
mainRoutes,
{ path: '*', redirect: { name: '404' } }
])
sessionStorage.setItem('dynamicMenuRoutes', JSON.stringify(mainRoutes.children || '[]'))
console.log('\n')
console.log('%c!<-------------------- 动态(菜单)路由 s -------------------->', 'color:blue')
console.log(mainRoutes.children)
console.log('%c!<-------------------- 动态(菜单)路由 e -------------------->', 'color:blue')
}
},
/**
* 添加动态(菜单)路由
* @param {*} menuList 菜单列表
* @param {*} routes 递归创建的动态(菜单)路由
*/
fnAddDynamicMenuRoutes2 (menuList) {
var routes = []
var temp = []
for (var i = 0; i < menuList.length; i++) {
if (menuList[i].list && menuList[i].list.length >= 1) {
temp = temp.concat(menuList[i].list)
} else if (menuList[i].url && /\S/.test(menuList[i].url)) {
menuList[i].url = menuList[i].url.replace(/^\//, '')
var route = {
path: menuList[i].url.replace('/', '-'),
component: null,
name: menuList[i].url.replace('/', '-'),
meta: {
menuId: menuList[i].menuId,
title: menuList[i].name,
isDynamic: true,
isTab: true,
iframeUrl: ''
}
}
if (isURL(menuList[i].url)) {
route['path'] = `i-${menuList[i].menuId}`
route['name'] = `i-${menuList[i].menuId}`
route['meta']['iframeUrl'] = menuList[i].url
} else {
try {
route['component'] = _import(`modules/${menuList[i].url}`) || null
} catch (e) {}
}
routes.push(route)
}
}
if (temp.length >= 1) {
this.fnAddDynamicMenuRoutes(temp, routes)
} else {
var mainRoutes = {
name: 'main-dynamic',
children: routes,
path: '/'
}
this.$router.addRoutes([
mainRoutes,
{ path: '*', redirect: { name: '404' } }
])
sessionStorage.setItem('dynamicMenuRoutes', JSON.stringify(mainRoutes.children || '[]'))
console.log('\n')
console.log('%c!<-------------------- 动态(菜单)路由 s -------------------->', 'color:blue')
console.log(mainRoutes.children)
console.log('%c!<-------------------- 动态(菜单)路由 e -------------------->', 'color:blue')
}
}
}
}
</script>
<style scoped>
/* 全局导航栏样式 */
.site-navbar {
font-family: 'Microsoft YaHei', Arial, sans-serif;
}
/* 菜单项悬停效果 */
#myNavbar .el-menu-item:hover {
background-color: rgba(42, 139, 242, 0.3) !important;
color: #fff !important;
}
/* 顶部菜单点击后的背景颜色 */
#myNavbar .el-menu-item.is-active {
background: linear-gradient(90deg, #2a8bf2 0%, #1e62c7 100%) !important;
color: #fff !important;
border-bottom: 2px solid #4affff;
box-shadow: 0 2px 8px rgba(0, 120, 255, 0.3);
}
/* 驾驶舱菜单样式 */
#myWindow .el-submenu__title {
color: #e6f7ff !important;
font-weight: 500;
}
#myWindow .el-submenu__title:hover {
background-color: rgba(42, 139, 242, 0.3) !important;
}
/* 右侧菜单项样式 */
.site-navbar__menu--right .el-menu-item {
height: 38px !important;
line-height: 38px !important;
}
.site-navbar__menu--right .el-menu-item:hover {
background-color: rgba(42, 139, 242, 0.3) !important;
}
/* 用户头像区域 */
.site-navbar__avatar {
padding: 0 10px !important;
}
.site-navbar__avatar:hover {
background-color: rgba(42, 139, 242, 0.3) !important;
}
/* 下拉菜单样式 */
.el-dropdown-menu__item {
font-size: 14px;
padding: 8px 20px;
}
.el-dropdown-menu__item:hover {
background-color: #2a8bf2 !important;
color: #fff !important;
}
/* 折叠按钮样式 */
#myzhedie:hover, #myhome1:hover {
background-color: rgba(42, 139, 242, 0.3) !important;
}
</style>驾驶舱子菜单字体看不清,改哪里
最新发布