<template>
<nav class="site
-navbar" :class="'site
-navbar
--' + navbarLayoutType" id="navbar" style="height:38px;" >
<!
-- 背景颜色#FF7F00 rgba(126, 203, 252, 1)
-->
<div class="site
-navbar__body clearfix" style="height:38px;margin
-left:0px;
background-color:rgb(13, 143, 224)">
<el
-menu
class="site
-navbar__menu"
mode="horizontal" style="height:38px;"><!
-- background-color:#409EFF;width:230px;
-->
<el
-menu
-item v
-if="sidebarIsShow" class="site
-navbar__switch" id="myzhed
ie" index="0" @click="sidebarFold = !sidebarFold" style="width:64px;">
<icon
-svg name="zhed
ie"></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"></icon
-svg>
</el
-menu
-item>
<!
-- @click="openHomeHandle"
-->
<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">
<!
-- <el
-menu
-item class="site
-navbar__switch" index="0" @click="$router.push({ name: 'home' })">
-->
<!
-- <img src="~@/assets/img/logoNew5.png" style="width:160px;margin
-top:1px">
-->
<!
-- font
-style: italic;
-->
<!
-- <span style="font
-size:22px;"><font
color="#db9e3f" style="font
-weight: bold;font
-style: normal;">欣动能源</font></span>
-->
<!
-- </el
-menu
-item>
-->
<!
-- openSideMenusHandle () $router.push({ name: 'home' }) traditionMenuHandle
-->
<!
-- '31,118,150,153,214'
-->
<!
-- openSideMenusHandle('31,118,150,153,214,1,46,32,67,
-1') 里面的数字是父类为0的菜单ID（menu_id），即在此点击后显示
-->
<!
-- @click="openHomeHandle"
-->
<el
-menu
-item v
-if="isAuth('battery:bmsbatteryinfo:monitornavbar')" style="margin
-left:
-1%;font
-size: 14px;" index="home" @click="openHomeHandle">
<icon
-svg name="chezidingyi" class="site
-sidebar__menu
-icon"></icon
-svg>
<span slot="title">实时查询</span>
</el
-menu
-item>
<el
-menu
-item v
-if="isAuth('battery:bmsbatteryinfo:traditionnavbar')" style="margin
-left:
-1%;font
-size: 14px;" index="tradition"
@click="openSideMenusHandle('31,118,150,153,214,1,46,32,67,
-100')">
<icon
-svg name="system" class="site
-sidebar__menu
-icon"></icon
-svg>
<span slot="title">数据管理中心</span>
</el
-menu
-item>
<!
-- <el
-menu
-item v
-if="isAuth('battery:bmsbatteryinfo:reportnavbar')" style="margin
-left:
-1%;font
-size: 14px;" index="report"
@click="openSideMenusHandle('330,339,341,429,
-2')">
<icon
-svg name="tubiao" class="site
-sidebar__menu
-icon"></icon
-svg>
<span slot="title">数据中心1</span>
</el
-menu
-item>
<el
-menu
-item v
-if="isAuth('battery:bmsbatteryinfo:statisticsnavbar')" style="margin
-left:
-1%;font
-size: 14px;" index="statistics"
@click="openSideMenusHandle('400,404,
-1')">
<icon
-svg name="shouye" class="site
-sidebar__menu
-icon"></icon
-svg>
<span slot="title">安全中心1</span>
</el
-menu
-item>
-->
<el
-menu
-item v
-if="isAuth('battery:bmsbatteryinfo:reportnavbar')" style="margin
-left:
-1%;font
-size: 14px;" index="report"
@click="openSideMenusHandle('445,453,458,459,462,
-2')">
<icon
-svg name="tubiao" class="site
-sidebar__menu
-icon"></icon
-svg>
<span slot="title">统计分析</span>
</el
-menu
-item>
<el
-menu
-item v
-if="isAuth('battery:bmsbatteryinfo:statisticsnavbar')" style="margin
-left:
-1%;font
-size: 14px;" index="statistics"
@click="openSideMenusHandle('465,470,471,475,
-1')">
<icon
-svg name="shouye" class="site
-sidebar__menu
-icon"></icon
-svg>
<span slot="title">安全中心</span>
</el
-menu
-item>
<!
-- openSideMenusHandle('118,150,214,1,
-3')
-->
<el
-menu
-item v
-if="isAuth('battery:bmsbatteryinfo:managenavbar')" style="margin
-left:
-1%;font
-size: 14px;" index="manage"
@click="openSideMenusHandle('405,384,1,
-3')">
<icon
-svg name="config" class="site
-sidebar__menu
-icon"></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: 14px;" index="largescreen">
<template slot="title" style="margin
-left:
-1%;font
-size: 14px;">
<icon
-svg name="dashujukeshihua" class="site
-sidebar__menu
-icon"></icon
-svg>
<span slot="title" style="margin
-left:
-1%;font
-size: 14px;">驾驶舱</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"></icon
-svg>
<span slot="title">欣动电池大屏</span>
</el
-menu
-item>
<!
-- <el
-menu
-item index="2
-2">选项2</el
-menu
-item>
<el
-menu
-item index="2
-3">选项3</el
-menu
-item>
<el
-submenu index="2
-4">
<template slot="title">选项4</template>
<el
-menu
-item index="2
-4
-1">选项1</el
-menu
-item>
<el
-menu
-item index="2
-4
-2">选项2</el
-menu
-item>
<el
-menu
-item index="2
-4
-3">选项3</el
-menu
-item>
</el
-submenu>
-->
</el
-submenu>
</el
-menu>
<el
-menu
class="site
-navbar__menu site
-navbar__menu
--right"
mode="horizontal">
<!
-- @click="$router.push({ name: 'echart' })"
-->
<el
-menu
-item index="1" id="mydaping" @click="openEchartInNewWindow" v
-if="isAuth('mqtt:mtbatteryinfolastest:largeDatalist')">
<template slot="title">
<el
-badge value="大屏">
<icon
-svg name="dashujukeshihua" class="el
-icon
-rank"></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="设置">
<icon
-svg name="shezhi" class="el
-icon
-setting"></icon
-svg>
</el
-badge>
</template>
</el
-menu
-item>
<!
-- <el
-menu
-item index="2">
<el
-badge value="hot">
<a href="https://www.renren.io/" target="_blank" rel="noopener noreferrer">官方社区</a>
</el
-badge>
</el
-menu
-item>
<el
-submenu index="3">
<template slot="title">Git源码</template>
<el
-menu
-item index="2
-1"><a href="https://github.com/renrenio/renren
-fast
-vue" target="_blank" rel="noopener noreferrer">前端</a></el
-menu
-item>
<el
-menu
-item index="2
-2"><a href="https://gitee.com/renrenio/renren
-fast" target="_blank" rel="noopener noreferrer">后台</a></el
-menu
-item>
<el
-menu
-item index="2
-3"><a href="https://gitee.com/renrenio/renren
-generator" target="_blank" rel="noopener noreferrer">代码生成器</a></el
-menu
-item>
</el
-submenu>
-->
<el
-menu
-item class="site
-navbar__avatar" index="3" id="myhuichu">
<el
-dropdown :show
-timeout="0" placement="bottom">
<span class="el
-dropdown
-link">
<img src="~@/assets/img/avatar1.png" style="width:30px;height:30px;margin
-bottom:2px;" :alt="userName">{{ userName }}
</span>
<el
-dropdown
-menu slot="dropdown">
<el
-dropdown
-item @click.native="updatePasswordHandle()">
修改密码</el
-dropdown
-item>
<el
-dropdown
-item @click.native="logoutHandle()">退出</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) }
},
// 顶部菜单的点击
// activeMenuIndex() {
// return this.activeMenu.toString(); // 转换为字符串，以匹配模板中的index
// }
},
created() {
// 刚登录进来，多点击监控中心，防止左侧缓存的菜单出现
---20241217 this.firstLogin &&
----------------------------------
if(localStorage.getItem('firstLogin')===null){
localStorage.clear();
console.log('本地存储已清除');
localStorage.setItem('firstLogin', '1');
this.firstLogin = false;
// alert('第一次进来，firstLogin='+localStorage.getItem('firstLogin'))
// 显示左侧菜单隐藏
this.openHomeHandle ()
setTimeout(() => {
// alert('延时加载')
this.openHomeHandle ();
}, 1);
setTimeout(() => {
// alert('延时加载')
this.openHomeHandle ();
}, 100);
}else{
// 显示左侧菜单显示
// alert('firstLogin='+localStorage.getItem('firstLogin'))
// this.$store.state.common.sidebarIsShow = true
}
//
------------------------------------------------------------------------------------------------------------
this.openHomeHandle ()
setTimeout(() => {
// alert('延时加载')
this.openHomeHandle ();
}, 10);
setTimeout(() => {
// alert('延时加载')
this.openHomeHandle ();
}, 100);
setTimeout(() => {
// alert('延时加载')
this.openHomeHandle ();
}, 120);
setTimeout(() => {
// alert('延时加载')
this.openHomeHandle ();
}, 180);
// 页面加载时尝试恢复之前的选中状态。刷新时一直保持点击颜色
this.activeMenu = sessionStorage.getItem('activeMenu') || this.activeMenu;
},
methods: {
handleSelect(key, keyPath) {
// 菜单项被点击时保存选中状态
sessionStorage.setItem('activeMenu', key); // vue刷新页面数据不丢失
-localStorage或sessionStorage保存数据
},
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) {
// alert(parentMenuIds)
this.mainTabs = [] //清除打开的tab菜单
this.menuActiveName = ''
// 左侧菜单显示
this.$store.state.common.sidebarIsShow = true
// 折叠打开
this.$store.state.common.sidebarFold = false
// 这里调用左侧菜单的方法
EventBus.$emit('callMethod',parentMenuIds);
// 再次调用，防止点击监控中心
--然后跳转到其他菜单时无反应
setTimeout(() => {
// alert('延时加载')
EventBus.$emit('callMethod',parentMenuIds);
}, 150);
setTimeout(() => {
// alert('延时加载')
EventBus.$emit('callMethod',parentMenuIds);
}, 100);
setTimeout(() => {
// alert('延时加载')
EventBus.$emit('callMethod',parentMenuIds);
}, 220);
setTimeout(() => {
// alert('延时加载')
EventBus.$emit('callMethod',parentMenuIds);
}, 120);
// this.$router.push({ name: 'center' }) // center home
},
openHomeHandle () {
// alert("jianko")
// this.mainTabs = [] //清除打开的tab菜单
// this.menuActiveName = ''
// this.isHomePage = true
// 折叠关闭
this.$store.state.common.sidebarFold = true
// 左侧菜单显示关闭
this.$store.state.common.sidebarIsShow = false
this.$router.push({ name: 'home' })
},
//
---------------------------------------------------------------------------------------------------
// tabs, 关闭全部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()
params: this.$http.adornParams({
'parentMenuIds': parentMenuIds
})
}).then(({data}) => {
if (data && data.code === 0) {
// alert("获取导航菜单成功")
this.fnAddDynamicMenuRoutes(data.menuList)
this.$router.options.isAddDynamicMenuRoutes = true
sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
// sessionStorage.setItem('menuList', '[]')
// sessionStorage.setItem('permissions', '[]')
// alert("添加菜单")
// 这里调用左侧菜单的方法
EventBus.$emit('callMethod',parentMenuIds);
this.tabsCloseAllHandle ();
// 折叠打开
this.$store.state.common.sidebarFold = false
this.$router.push({ name: 'home' })
// next({ ...to, replace: true })
// 刷新
// location.reload()
// alert("前往首页")
} else {
sessionStorage.setItem('menuList', '[]')
sessionStorage.setItem('permissions', '[]')
// 折叠缩进
this.$store.state.common.sidebarFold = true
next()
}
}).catch((e) => {
// alert("请求菜单列表和权限失败
-to.path="+to.path)
console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, '
color:blue')
// alert("权限失败login")
// this.$router.push({ name: 'login' })
})
},
/**
* 添加动态(菜单)路由
* @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: ''
}
}
// url以http[s]://开头, 通过
iframe展示
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: '/'
}
// mainRoutes.name = 'main
-dynamic'
// mainRoutes.children = routes
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 = []
// alert("添加动态(菜单)路由
--"+menuList.length)
for (var i = 0; i < menuList.length; i++) {
// alert("添加动态URL
----"+menuList[i].url)
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: ''
}
}
// alert("添加动态=isTab==="+route['meta']['isTab'])
// url以http[s]://开头, 通过
iframe展示
if (isURL(menuList[i].url)) {
route['path'] = `i
-${menuList[i].menuId}`
route['name'] = `i
-${menuList[i].menuId}`
route['meta']['
iframeUrl'] = menuList[i].url
// alert("添加动态=isTab==="+route['meta']['isTab'])
} 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: '/'
}
// mainRoutes.name = 'main
-dynamic'
// mainRoutes.children = routes
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>
#myNavbar .el
-menu
-item:hover {
background-color: transparent !important;
color: inherit !important;
}
/* 顶部菜单点击后的背景颜色 */
#myNavbar .el
-menu
-item.is
-active {
background-color:rgb(15, 89, 164) !important;
color:rgb(235, 184, 17); /*选中颜色*/
span {
color: #fff !important;
}
}
/* 驾驶舱鼠标悬浮时 样式文件或组件内样式 */
#myNavbar .el
-submenu__title:hover {
background-color:rgb(15, 89, 164) !important; /* 使用!important确保覆盖默认样式 */
}
.site
-navbar__menu .el
-menu
-item, .site
-navbar__menu .el
-submenu > .el
-submenu__title {
height: 38px;
line
-height: 38px;
}
/* 左侧菜单选中与悬停样式 */
#myzhed
ie:hover {
background-color: #409EFF !important; /* 使用!important确保覆盖默认样式 */
color: inherit !important;
}
#myzhed
ie.is
-active {
background-color: rgba(126, 203, 252, 1) !important; /* 使用!important确保覆盖默认样式 */
}
#myhome1:hover {
background-color: rgba(126, 203, 252, 1) !important; /* 使用!important确保覆盖默认样式 */
color: inherit !important;
}
#myhome1.is
-active {
background-color: rgba(126, 203, 252, 1) !important; /* 使用!important确保覆盖默认样式 */
}
#myshezhi:hover {
background-color: #409EFF !important; /* 使用!important确保覆盖默认样式 */
color: inherit !important;
}
#myshezhi.is
-active {
background-color: rgba(126, 203, 252, 1) !important; /* 使用!important确保覆盖默认样式 */
}
#mydaping:hover {
background-color: #409EFF !important; /* 使用!important确保覆盖默认样式 */
color: inherit !important;
}
#mydaping.is
-active {
background-color: rgba(126, 203, 252, 1) !important; /* 使用!important确保覆盖默认样式 */
}
#myhuichu:hover {
background-color: #409EFF !important; /* 使用!important确保覆盖默认样式 */
color: inherit !important;
}
#myhuichu.is
-active {
background-color: rgba(126, 203, 252, 1) !important; /* 使用!important确保覆盖默认样式 */
}
/* 加载表头颜色设置 */
/* rgba(126, 203, 252, 1) rgba(211, 236, 255, 255) #cdccd9 #87CEEB; rgba(211, 236, 255, 255); rgba(137, 207, 240); */
/* .el
-table thead th {
color: #909399;
background-color: rgba(211, 236, 255, 255);
font
-weight: 800;
color: #1D3124;
} */
</style>
修改驾驶舱下拉框的背景颜色和当前菜单颜色风格一致
本文介绍了如何在Internet Explorer浏览器中解决iframe背景透明的问题。通过设置allowtransparency属性为true，可以使iframe在Firefox、Safari及IE等浏览器中正常显示透明背景。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1331
