<template>
|
<div class="left-nav" :class="{ short: isCollapse }">
|
<img class="icon" src="/images/shuohuang/railroad.png" />
|
<h1>
|
<span v-show="!isCollapse" style="padding-left: 6px"
|
>乘务员安全行为识别系统</span
|
>
|
</h1>
|
<el-menu
|
class="el-menu-vertical-demo"
|
@open="handleOpen"
|
@close="handleClose"
|
:default-active="activeIndex"
|
@select="handleSelect"
|
>
|
<el-menu-item index="guideIndex" v-show="isAdmin">
|
<i class="iconfont iconshouye"></i>
|
<span slot="title">首页</span>
|
</el-menu-item>
|
<el-menu-item index="searchForVideoAnalyze">
|
<i class="iconfont iconshipin2"></i>
|
<span slot="title">视频分析检索</span>
|
</el-menu-item>
|
<el-menu-item index="taskManage" v-if="isAdmin">
|
<i class="iconfont iconrenwu1"></i>
|
<span slot="title">任务管理</span>
|
</el-menu-item>
|
<el-menu-item index="memberManage" v-if="isAdmin">
|
<i class="iconfont iconrenyuanguanli"></i>
|
<span slot="title">人员管理</span>
|
</el-menu-item>
|
<el-menu-item index="configManage" v-if="isAdmin">
|
<i class="iconfont iconicon-test4"></i>
|
<span slot="title">配置管理</span>
|
</el-menu-item>
|
|
<el-submenu index="6">
|
<template slot="title">
|
<i class="iconfont iconcunchu"></i>
|
<span slot="title">转储管理</span>
|
</template>
|
<el-menu-item index="transferMemo">视频转储记录</el-menu-item>
|
<el-menu-item index="transferDeviceManage">转储设备管理</el-menu-item>
|
<el-menu-item index="lkgManage">LKJ数据管理</el-menu-item>
|
</el-submenu>
|
<el-submenu index="7" v-if="isAdmin">
|
<template slot="title">
|
<i class="iconfont iconkeshihua"></i>
|
<span slot="title">可视化大屏</span>
|
</template>
|
<el-menu-item index="taskscreen">任务大屏</el-menu-item>
|
<el-menu-item index="hiddendangerscreen">隐患大屏</el-menu-item>
|
</el-submenu>
|
</el-menu>
|
</div>
|
</template>
|
|
<script>
|
//import railroadImg from '/images/shuohuang/railroad.png';
|
export default {
|
props: {
|
isCollapse: {
|
type: Boolean,
|
default: true,
|
},
|
menuChange: {
|
type: Function,
|
},
|
},
|
computed: {
|
isAdmin() {
|
if (
|
sessionStorage.getItem("userInfo") &&
|
sessionStorage.getItem("userInfo") !== ""
|
) {
|
let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
|
return loginName === "admin" || loginName === "basic";
|
}
|
return false;
|
},
|
},
|
data() {
|
return {
|
publicPath: process.env.BASE_URL,
|
activeIndex: "guideIndex",
|
};
|
},
|
mounted() {
|
// if (this.isAdmin) {
|
// if (!!sessionStorage.getItem('leftNavAct')) {
|
// console.log("leftNavAct")
|
// this.activeIndex = sessionStorage.getItem('leftNavAct');
|
// }
|
// }
|
this.activeIndex = this.isAdmin ? "guideIndex" : "searchForVideoAnalyze";
|
|
this.$emit("menuChange", this.activeIndex);
|
},
|
methods: {
|
handleSelect(index, indePath) {
|
this.activeIndex = index;
|
sessionStorage.setItem("leftNavAct", this.activeIndex);
|
this.$emit("menuChange", index);
|
},
|
handleOpen() {},
|
handleClose() {},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.left-nav {
|
background-image: url(/images/shuohuang/背景.png);
|
height: 100vh;
|
width: 250px;
|
img {
|
margin-top: 80px;
|
margin-bottom: 10px;
|
height: 96px;
|
width: 96px;
|
}
|
h1 {
|
height: 65px;
|
padding: 0 20px;
|
border-bottom: 1px solid #eee;
|
border: none;
|
span {
|
color: #fff;
|
}
|
}
|
.iconfont {
|
padding-right: 10px;
|
}
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
border: none;
|
padding-right: 0;
|
padding-left: 50px;
|
width: 250px;
|
background: none;
|
}
|
.el-menu.el-menu--inline {
|
background: none;
|
}
|
.el-menu-item,
|
.el-submenu__title {
|
text-align: left;
|
font-weight: 700;
|
color: #fff;
|
|
span {
|
color: #fff;
|
}
|
i {
|
color: #fff;
|
}
|
&:hover {
|
color: #0b41a7;
|
|
span {
|
color: #0b41a7;
|
}
|
i {
|
color: #0b41a7;
|
}
|
}
|
border-radius: 10px 0 0 10px;
|
}
|
.el-menu-item.is-active {
|
background-color: #ecf0fc;
|
color: #0b41a7;
|
|
span {
|
color: #0b41a7;
|
}
|
}
|
}
|
|
.short {
|
width: 0;
|
overflow: hidden;
|
}
|
</style>
|
