352 lines
8.7 KiB
Vue
352 lines
8.7 KiB
Vue
<template>
|
|
<!-- 废弃 -->
|
|
<div class="fullHeight jyjzPage">
|
|
<div class="headerBox">
|
|
<div class="left fullHeight">
|
|
<h1>安全管理</h1>
|
|
<div class="topMenuBox">
|
|
<ul>
|
|
<li :class="$store.state.secondMenuIndex==index?'active':''" @click="selectSecondMenu(index,item)" v-for="(item,index) in moduleList[$store.state.mouduleIndex].menuList" :key="item.menuId">
|
|
<span>{{item.menuName}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<!-- <span class="backBtn">
|
|
<i class="el-icon-arrow-left"></i>
|
|
返回
|
|
</span> -->
|
|
<a
|
|
href="javascript:window.opener=null;window.close();"
|
|
class="closeBtn"
|
|
>
|
|
<img src="../assets/images/icon-close.png" alt="" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="jyjzPageContent">
|
|
<div class="leftMenu fullHeight">
|
|
<!-- <ul>
|
|
<li v-for="(item, index) in moduleList[$store.state.mouduleIndex].menuList[$store.state.secondMenuIndex].menuList" :key="index">
|
|
<i class="icon-arrow"></i>{{ item.menuName }}
|
|
</li>
|
|
</ul> -->
|
|
<el-menu ref="menu"
|
|
:default-active="$route.path"
|
|
class="el-menu-vertical"
|
|
text-color="#fff"
|
|
background-color="transparent"
|
|
active-text-color="#88E7F0"
|
|
router
|
|
>
|
|
<template v-for="(item, index) in moduleList[$store.state.mouduleIndex].menuList[$store.state.secondMenuIndex].menuList">
|
|
<el-menu-item v-if="!hasSubMenu(item.menuList)" :index="item.path" :key="index" :route="data.path">
|
|
<i class="icon-arrow"></i>{{ item.menuName }}
|
|
</el-menu-item>
|
|
<el-submenu v-else :index="item.path" :key="index">
|
|
<template slot="title"><i class="icon-arrow"></i>{{ item.menuName }}</template>
|
|
<el-menu-item
|
|
:index="data.path" :route="data.path"
|
|
v-for="(data, i) in item.menuList"
|
|
:key="i+'child'"
|
|
>{{ data.menuName }}</el-menu-item>
|
|
</el-submenu>
|
|
</template>
|
|
</el-menu>
|
|
</div>
|
|
<div class="jyjzDataContent">
|
|
<router-view></router-view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
moduleList:[
|
|
{
|
|
menuList:[
|
|
{menuList:[
|
|
{
|
|
menuList:[]
|
|
}
|
|
]}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
},
|
|
watch:{
|
|
$route(to,from){
|
|
console.log(from)
|
|
console.log(to.path);
|
|
}
|
|
},
|
|
mounted(){
|
|
let arr = this.$store.state.userInfo.menuAuthority.moduleList;
|
|
let arr2 = []
|
|
arr.forEach((element) => {
|
|
if (element.moduleType == 2) {
|
|
arr2.push(element);
|
|
}
|
|
});
|
|
this.moduleList=arr2
|
|
},
|
|
methods:{
|
|
hasSubMenu(list) {
|
|
//用于判断有没有下级菜单
|
|
let onoff = false;
|
|
if (list && list.length > 0) {
|
|
list.forEach((element) => {
|
|
if (element.menuName) {
|
|
onoff = true;
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
return onoff;
|
|
},
|
|
selectSecondMenu(index,item){
|
|
this.$store.commit("changeSecondMenuIndex", index);
|
|
let url = ''
|
|
if(item.path){
|
|
url=item.path
|
|
}else if(item.menuList[0].path.indexOf('/')!=-1&&item.menuList[0].path!=''){
|
|
url=item.menuList[0].path
|
|
}else if(item.menuList[0].menuList[0].path!=''&&item.menuList[0].menuList[0].path.indexOf('/')!=-1){
|
|
url=item.menuList[0].menuList[0].path
|
|
}
|
|
|
|
if( url.indexOf('http')!=-1){
|
|
routeUrl=url
|
|
window.open(routeUrl, "_blank");
|
|
}else if(url.indexOf('/')!=-1){
|
|
// this.$refs.menu.open(url)
|
|
this.$router.push(url)
|
|
}
|
|
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import "../assets/css/common.less";
|
|
.jyjzPage {
|
|
background-color: #0d1a34;
|
|
color: white;
|
|
}
|
|
.headerBox {
|
|
height: 63px;
|
|
background: linear-gradient(rgba(17, 36, 70, 0.5), rgba(21, 49, 95, 0.5));
|
|
position: relative;
|
|
&::after{
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #234469;
|
|
}
|
|
.left{
|
|
position: relative;
|
|
z-index: 2;
|
|
width: auto;
|
|
display: inline-block;
|
|
padding-right: 25px;
|
|
&::after{
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #122648;
|
|
}
|
|
}
|
|
h1 {
|
|
font-size: 20px;
|
|
width: 219px;
|
|
background: url("../assets/images/h1BG.png") center no-repeat;
|
|
height: 100%;
|
|
padding-left: 30px;
|
|
line-height: 63px;
|
|
font-weight: normal;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
}
|
|
.right {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 48px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
.backBtn {
|
|
border-radius: 3px;
|
|
border: 1px solid rgba(135, 230, 239, 1);
|
|
height: 30px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
padding: 0 12px;
|
|
margin-right: 36px;
|
|
cursor: pointer;
|
|
.el-icon-arrow-left {
|
|
color: #87e6ef;
|
|
margin-right: 10px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.topMenuBox {
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
position: relative;
|
|
&::after{
|
|
content: "";
|
|
position: absolute;
|
|
top: -10px;
|
|
left: -50px;
|
|
width: calc(100% + 25px);
|
|
height: 1px;
|
|
background: linear-gradient(to right,#0F203F,#234469);
|
|
}
|
|
&::before{
|
|
content: "";
|
|
position: absolute;
|
|
top: -20px;
|
|
right: 0px;
|
|
width: 1px;
|
|
height: calc(100% + 30px);
|
|
background: #234469;
|
|
transform: rotateZ(-45deg);
|
|
}
|
|
ul {
|
|
margin-left: -10px;
|
|
}
|
|
li {
|
|
display: inline-block;
|
|
padding: 10px 30px;
|
|
position: relative;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
&.active{
|
|
color: #88E7F0;
|
|
&::after{
|
|
background: linear-gradient(#153E7D,#17274A);
|
|
box-shadow: 0px 3px 1px 0px rgba(13, 26, 52, 1);
|
|
|
|
}
|
|
}
|
|
span {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(rgba(17, 36, 70, 1), rgba(21, 49, 95, 1));
|
|
transform: skew(45deg, 0);
|
|
}
|
|
}
|
|
}
|
|
.jyjzPageContent {
|
|
height: calc(100% - 63px - 40px - 2px);
|
|
overflow: hidden;
|
|
margin: 20px 35px;
|
|
border: 1px solid rgba(18, 41, 79, 1);
|
|
}
|
|
.leftMenu {
|
|
width: 224px;
|
|
float: left;
|
|
border-right: 1px solid rgba(18, 41, 79, 1);
|
|
.icon-arrow {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url("../assets/images/dataCenter/titleImg.png") no-repeat;
|
|
margin-right: 10px;
|
|
display: inline-block;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
}
|
|
.el-menu-vertical{
|
|
border-right: none;
|
|
.is-active{
|
|
/deep/.el-submenu__title{
|
|
background-color: transparent!important;
|
|
color: #88E7F0!important;
|
|
}
|
|
.icon-arrow{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.el-menu-item{
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
&:hover,&.is-active{
|
|
background-color: transparent!important;
|
|
color: #88E7F0!important;
|
|
.icon-arrow{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
/deep/.el-submenu__title{
|
|
font-size: 16px;
|
|
border-bottom: none;
|
|
&:hover{
|
|
background-color: transparent!important;
|
|
color: #88E7F0!important;
|
|
.icon-arrow{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.el-submenu__icon-arrow{
|
|
display: none;
|
|
}
|
|
}
|
|
/deep/.el-submenu{
|
|
margin-bottom: 8px;
|
|
li{
|
|
font-size: 14px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 0 0 50px!important;
|
|
margin-bottom: 2px;
|
|
&:hover,&.is-active{
|
|
background: linear-gradient(to right,rgba(136, 231, 240, 0.2),rgba(21, 49, 95, 0.2));
|
|
&::after{
|
|
background: linear-gradient(rgba(136, 231, 240, 1),rgba(21, 49, 95, 1));
|
|
}
|
|
}
|
|
&::after{
|
|
content: "";
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 100%;
|
|
background: transparent;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.jyjzDataContent {
|
|
float: left;
|
|
width: calc(100% - 226px);
|
|
height: 100%;
|
|
}
|
|
</style>
|