<template>
|
<div class="left-nav">
|
<h1>
|
<img class="icon" :src="`${publicPath}images/shuohuang/railroad.png`" style="height: 40px;" />
|
<span v-show="!isCollapse" style="padding-left: 6px;">朔黄铁路机辆分公司</span>
|
</h1>
|
<el-menu
|
class="el-menu-vertical-demo"
|
@open="handleOpen"
|
@close="handleClose"
|
:collapse="isCollapse"
|
@select="handleSelect"
|
>
|
<el-menu-item index="1">
|
<i class="el-icon-menu"></i>
|
<span slot="title">首页</span>
|
</el-menu-item>
|
<el-menu-item index="searchForVideoAnalyze">
|
<i class="el-icon-menu"></i>
|
<span slot="title">视频分析检索</span>
|
</el-menu-item>
|
<el-menu-item index="taskManage">
|
<i class="el-icon-menu"></i>
|
<span slot="title">任务管理</span>
|
</el-menu-item>
|
<el-menu-item index="memberManage">
|
<i class="el-icon-menu"></i>
|
<span slot="title">人员管理</span>
|
</el-menu-item>
|
<el-menu-item index="configManage">
|
<i class="el-icon-menu"></i>
|
<span slot="title">配置管理</span>
|
</el-menu-item>
|
|
<el-submenu index="6">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span slot="title">转储管理</span>
|
</template>
|
<el-menu-item index="transferMemo">视频转储记录</el-menu-item>
|
<el-menu-item index="transferDeviceManage">转储设备管理</el-menu-item>
|
</el-submenu>
|
<el-submenu index="7">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span slot="title">可视化大屏</span>
|
</template>
|
<el-menu-item index="7-1">任务大屏</el-menu-item>
|
<el-menu-item index="7-2">隐患大屏</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
|
}
|
},
|
data () {
|
return {
|
publicPath: process.env.BASE_URL,
|
}
|
},
|
methods: {
|
handleSelect(index,indePath){
|
this.$emit('menuChange',index);
|
},
|
handleOpen () {
|
|
},
|
handleClose () {
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.left-nav {
|
background: #fff;
|
h1 {
|
display: flex;
|
align-items: center;
|
height: 65px;
|
padding: 0 20px;
|
border-bottom: 1px solid #eee;
|
color: rgb(0, 150, 250);
|
}
|
.el-menu-vertical-demo:not(.el-menu--collapse){
|
width: 250px;
|
}
|
.el-menu-item,
|
.el-submenu__title {
|
text-align: left;
|
}
|
height: 100vh;
|
}
|
</style>
|
