<script>
|
import { isCollapse } from './isCollapse';
|
import { selectedName } from './selectName';
|
|
export default {
|
data() {
|
return {
|
menuHeight: '600px',
|
isCollapseAside: isCollapse,
|
selected: selectedName,
|
optionClick: [
|
' 数据风险模型',
|
'数据风险排名',
|
'飞行巡检',
|
'历史数据管理',
|
'数据接入管理',
|
'业务报表',
|
'数据接入配置',
|
]
|
};
|
},
|
methods:{
|
calMenuHeight() {
|
const h1 = this.$refs.headerRef.$el.offsetHeight;
|
return `calc(100vh - ${h1}px `;
|
},
|
},
|
mounted(){
|
this.menuHeight = this.calMenuHeight();
|
}
|
};
|
</script>
|
|
<template>
|
<el-aside>
|
|
<el-menu
|
active-text-color="#F7BA1E"
|
background-color="#0093E9"
|
class="el-menu-vertical-demo"
|
default-active="2"
|
text-color="#fff"
|
@open="handleOpen"
|
@close="handleClose"
|
router
|
:collapse="isCollapseAside"
|
>
|
<el-row ref="headerRef" class="header">
|
<el-space>
|
<el-link href="/hdata" class="logo" >
|
<!-- <img src="@/assets/companylogo.png" alt="" /> -->
|
<h1>在线监测数据质量评估与风险分析</h1>
|
|
</el-link>
|
</el-space>
|
</el-row>
|
|
<el-scrollbar :height="menuHeight">
|
|
<el-sub-menu index="1">
|
<template #title>
|
<el-icon><i-ep-Monitor /></el-icon>
|
<span>分险评估</span>
|
</template>
|
|
<el-menu-item index="avgDay" @click="selected = optionClick[0]">
|
<el-icon><i-ep-Stopwatch /></el-icon>
|
数据风险模型
|
</el-menu-item>
|
<el-menu-item index="analysis" @click="selected = optionClick[1]">
|
<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>线上巡检</span>
|
</template>
|
<el-menu-item index="edata" @click="selected = optionClick[2]">
|
<el-icon><i-ep-Bell /></el-icon>
|
飞行巡检
|
</el-menu-item>
|
|
<el-menu-item index="testdata" @click="selected = optionClick[2]">
|
<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>数据管理</span>
|
</template>
|
|
|
<el-menu-item index="hdata" @click="selected = optionClick[3]">
|
<el-icon><i-ep-Histogram /></el-icon>
|
历史数据管理
|
</el-menu-item>
|
<el-menu-item index="1" @click="selected = optionClick[4]">
|
<el-icon><i-ep-Histogram /></el-icon>
|
数据接入管理
|
</el-menu-item>
|
<el-menu-item index="2" @click="selected = optionClick[5]">
|
<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>配置管理</span>
|
</template>
|
|
<el-menu-item index="setting" @click="selected = optionClick[6]">
|
<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: #0093E9;
|
|
|
height: 100vh;
|
width: auto;
|
}
|
|
.el-menu {
|
background-color: #0093E9;
|
|
width: 220px;
|
border-right: none;
|
|
&.el-menu--collapse {
|
//侧边栏折叠时的样式
|
width: 65px;
|
|
& h1 {
|
//折叠时隐藏h1文字
|
display: none;
|
}
|
& span {
|
display: none;
|
}
|
}
|
}
|
|
.logo {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 60px;
|
text-decoration: none;
|
color: black;
|
margin-left: 20px;
|
img {
|
width: 32px;
|
height: 32px;
|
}
|
}
|
|
|
* {
|
color: #f7f8fa;
|
}
|
.slot-lable {
|
color: #f7f8fa;
|
}
|
</style>
|
