<script>
|
import { isCollapse } from './isCollapse';
|
|
export default {
|
data() {
|
return {
|
menuHeight: '600px',
|
isCollapseAside: isCollapse,
|
};
|
},
|
methods:{
|
calMenuHeight() {
|
const h1 = this.$refs.headerRef.$el.offsetHeight;
|
return `calc(100vh - ${h1}px - 8px`;
|
},
|
},
|
mounted(){
|
this.menuHeight = this.calMenuHeight();
|
console.log('meta:',this.$route.matched);
|
}
|
};
|
</script>
|
|
<template>
|
<el-aside>
|
|
<el-menu
|
active-text-color="#F7BA1E"
|
background-color="#2876aa"
|
class="el-menu-vertical-demo"
|
default-active="2"
|
text-color="#fff"
|
router
|
:collapse="isCollapseAside"
|
>
|
<el-row ref="headerRef" class="header">
|
<el-link href="/hdata" class="logo" >
|
<h1>在线监测数据质量评估与风险分析</h1>
|
</el-link>
|
|
</el-row>
|
|
<hr/>
|
<el-scrollbar :height="menuHeight">
|
|
<el-sub-menu index="1">
|
<template #title>
|
<el-icon><i-ep-Monitor /></el-icon>
|
<span class="parent-title">风险评估</span>
|
</template>
|
|
<el-menu-item index="avgDay" >
|
<el-icon><i-ep-Stopwatch /></el-icon>
|
数据风险模型
|
</el-menu-item>
|
<el-menu-item index="analysis" >
|
<el-icon><i-ep-Stopwatch /></el-icon>
|
数据排名清单
|
</el-menu-item><el-menu-item index="riskrank" >
|
<el-icon><i-ep-Stopwatch /></el-icon>
|
综合风险排名
|
</el-menu-item>
|
|
|
</el-sub-menu>
|
|
|
<el-sub-menu index="2">
|
<template #title>
|
<el-icon><i-ep-Histogram /></el-icon>
|
<span class="parent-title">线上巡检</span>
|
</template>
|
<el-menu-item index="edata" >
|
<el-icon><i-ep-Bell /></el-icon>
|
飞行巡检
|
</el-menu-item>
|
|
<el-menu-item index="testData">
|
<el-icon><i-ep-Bell /></el-icon>
|
站点审核辅助
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
<el-sub-menu index="3">
|
<template #title>
|
<el-icon><i-ep-DataLine /></el-icon>
|
<span class="parent-title">数据管理</span>
|
</template>
|
|
|
<el-menu-item index="hdata" >
|
<el-icon><i-ep-Histogram /></el-icon>
|
历史数据管理
|
</el-menu-item>
|
|
<!-- <el-menu-item index="management" >
|
<el-icon><i-ep-Histogram /></el-icon>
|
数据接入管理
|
</el-menu-item>
|
<el-menu-item index="report" >
|
<el-icon><i-ep-Histogram /></el-icon>
|
业务报表
|
</el-menu-item> -->
|
|
</el-sub-menu>
|
|
<el-sub-menu index="4">
|
<template #title>
|
<el-icon><i-ep-DataLine /></el-icon>
|
<span class="parent-title">配置管理</span>
|
</template>
|
|
<el-menu-item index="setting" >
|
<el-icon><i-ep-Histogram /></el-icon>
|
数据接入配置
|
</el-menu-item>
|
</el-sub-menu>
|
</el-scrollbar>
|
|
</el-menu>
|
</el-aside>
|
</template>
|
|
<style lang="scss" scoped>
|
.el-aside {
|
background-color: #2876aa;
|
height: 100vh;
|
width: auto;
|
}
|
|
.el-menu {
|
background-color: #2876aa;
|
|
width: 220px;
|
border-right: none;
|
&.el-menu--collapse {
|
//侧边栏折叠时的样式
|
width: 65px;
|
& h1 {
|
//折叠时隐藏h1文字
|
display: none;
|
}
|
& span {
|
display: none;
|
}
|
& hr {
|
display: none;
|
}
|
}
|
}
|
|
.logo {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 60px;
|
text-decoration: none;
|
color: black;
|
margin-left: 20px;
|
margin-right: 20px;
|
// img {
|
// width: 32px;
|
// height: 32px;
|
// }
|
}
|
|
|
* {
|
color: #f7f8fa;
|
}
|
.slot-lable {
|
color: #f7f8fa;
|
}
|
.parent-title {
|
font-weight: bold;
|
font-size: 18px;
|
}
|
|
</style>
|
