<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;
|
// const h2 = this.$refs.subTitleRef.$el.offsetHeight;
|
return `calc(100vh - ${h1}px `;
|
},
|
},
|
mounted(){
|
this.menuHeight = this.calMenuHeight();
|
}
|
};
|
</script>
|
|
<template>
|
<el-aside>
|
<!-- text-color="#fff" -->
|
<el-menu
|
background-color="rgb(50,155,185)"
|
active-text-color="rgb(255, 242, 0)"
|
class="el-menu-vertical-demo"
|
default-active="2"
|
@open="handleOpen"
|
@close="handleClose"
|
router
|
:collapse="isCollapseAside"
|
>
|
<el-row ref="headerRef" class="header">
|
<el-space>
|
<!-- :collapse="isCollapse" -->
|
<a href="/hdata" class="logo" >
|
<!-- <img src="@/assets/companylogo.png" alt="" /> -->
|
<h1 style="margin-left: 30px;">餐饮油烟在线监测</h1>
|
</a>
|
</el-space>
|
|
</el-row>
|
<el-scrollbar :height="menuHeight">
|
<el-sub-menu index="1">
|
<template #title>
|
<el-icon><i-ep-Monitor /></el-icon>
|
<span class="menu-text">在线监控</span>
|
<!-- @click="handleClick(optionClick[0])" -->
|
</template>
|
|
<el-menu-item index="ndata" @click="selected = optionClick[0]">
|
<el-icon><i-ep-Stopwatch /></el-icon>
|
<template #title >实时监控</template>
|
|
</el-menu-item>
|
|
|
<el-menu-item index="edata" @click="selected = optionClick[1]">
|
<el-icon><i-ep-Bell /></el-icon>
|
<template #title>异常分析</template>
|
</el-menu-item>
|
|
|
<el-menu-item index="analysisOrigin" @click="selected = optionClick[2]">
|
<el-icon><i-ep-Search /></el-icon>
|
<template #title>数据质量分析</template>
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
|
<el-sub-menu index="2">
|
<template #title>
|
<el-icon><i-ep-DataAnalysis /></el-icon>
|
<span class="menu-text">分时段分析</span>
|
</template>
|
|
<el-menu-item index="allData" @click="selected = optionClick[3]">
|
<el-icon><i-ep-Help /></el-icon>
|
<template #title>全要素分析</template>
|
</el-menu-item>
|
<el-sub-menu index="3">
|
<template #title>
|
<el-icon><i-ep-DataBoard /></el-icon>
|
<span>分要素分析</span>
|
</template>
|
|
<el-menu-item-group>
|
<!-- <template #title>
|
<span class="slot-lable"> 详细数据</span>
|
</template> -->
|
<el-menu-item index="day" @click="selected = optionClick[4]">
|
<el-icon><i-ep-TrendCharts /></el-icon>
|
<template #title>油烟浓度分析</template>
|
</el-menu-item>
|
<el-menu-item index="monitor" @click="selected = optionClick[5]">
|
<el-icon><i-ep-TrendCharts /></el-icon>
|
<template #title>监测设备在线率</template>
|
</el-menu-item>
|
<el-menu-item index="purifier" @click="selected = optionClick[6]">
|
<el-icon><i-ep-TrendCharts /></el-icon>
|
<template #title>净化器开启率</template>
|
</el-menu-item>
|
|
<el-menu-item index="exceed" @click="selected = optionClick[7]">
|
<el-icon><i-ep-TrendCharts /></el-icon>
|
<template #title>油烟时段超标率</template>
|
</el-menu-item>
|
|
<!-- <el-menu-item index="average" @click="selected = optionClick[8]">
|
<el-icon><i-ep-TrendCharts /></el-icon>
|
<template #title>油烟浓度均值</template>
|
</el-menu-item> -->
|
</el-menu-item-group>
|
</el-sub-menu>
|
|
</el-sub-menu>
|
<el-sub-menu index="4">
|
<template #title>
|
<el-icon><i-ep-DataLine /></el-icon>
|
<span class="menu-text">多源数据管理</span>
|
</template>
|
|
|
<!-- <el-menu-item index="abc">
|
<el-icon><i-ep-Bell/></el-icon> <span>数据获取TestWa</span>
|
</el-menu-item> -->
|
|
<el-menu-item index="getdata" @click="selected = optionClick[8]">
|
<el-icon><i-ep-TrendCharts /></el-icon>
|
<template #title>第三方数据获取</template>
|
</el-menu-item>
|
|
<el-menu-item index="hdata" @click="selected = optionClick[9]">
|
<el-icon><i-ep-Histogram /></el-icon>
|
<template #title>历史数据</template>
|
</el-menu-item>
|
</el-sub-menu>
|
|
<!-- <el-sub-menu index="5">
|
<template #title>
|
<el-icon><i-ep-Histogram /></el-icon>
|
<span>测试</span>
|
</template>
|
|
<el-menu-item index="tdata">
|
<el-icon><i-ep-Bell/></el-icon> <span>测试1</span>
|
</el-menu-item>
|
<el-menu-item index="tsdata">
|
<el-icon><i-ep-Bell/></el-icon> <span>测试2</span>
|
</el-menu-item>
|
|
<el-menu-item index="test1">
|
<el-icon><i-ep-Bell/></el-icon> <span>测试3</span>
|
</el-menu-item>
|
|
|
</el-sub-menu> -->
|
|
|
</el-scrollbar>
|
|
</el-menu>
|
</el-aside>
|
</template>
|
|
<style lang="scss" scoped>
|
.el-aside {
|
// background-color: #013335;
|
background-color: rgb(50,155,185);
|
height: 100vh;
|
|
width: auto;
|
}
|
|
.el-menu {
|
// background-color: rgb(41,45,62);
|
background-color: rgb(50,155,185);
|
width: 200px;
|
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;
|
|
img {
|
width: 32px;
|
height: 32px;
|
}
|
}
|
|
* {
|
color: rgb(252, 255, 255);
|
}
|
.slot-lable {
|
color: bisque;
|
// color: rgb(13, 193, 224);
|
}
|
.menu-text {
|
font-size: 16px;
|
}
|
</style>
|
