<script>
|
import { isCollapse } from './isCollapse';
|
import { selectedName } from './selectName';
|
|
export default {
|
data() {
|
return {
|
menuHeight: '600px',
|
isCollapseAside: isCollapse,
|
selected: selectedName,
|
// optionClick: [
|
// '历史数据',
|
// '异常分析',
|
// '实时监控',
|
// '油烟数据',
|
// '统计分析',
|
// '统计数据',
|
// '油烟浓度日数据',
|
// '监测设备在线率',
|
// '净化器开启率',
|
// '油烟时段超标率',
|
// '油烟浓度均值',
|
// '获取数据'
|
// ],
|
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="#545c64"
|
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>在线监控</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-Histogram /></el-icon>
|
<span>分时段分析</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-DataLine /></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-Notebook /></el-icon>
|
<template #title>油烟浓度日数据</template>
|
</el-menu-item>
|
<el-menu-item index="monitor" @click="selected = optionClick[5]">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<template #title>监测设备在线率</template>
|
</el-menu-item>
|
<el-menu-item index="purifier" @click="selected = optionClick[6]">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<template #title>净化器开启率</template>
|
</el-menu-item>
|
|
<el-menu-item index="exceed" @click="selected = optionClick[7]">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<template #title>油烟时段超标率</template>
|
</el-menu-item>
|
|
<el-menu-item index="average" @click="selected = optionClick[8]">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<template #title>油烟浓度均值</template>
|
</el-menu-item>
|
</el-menu-item-group>
|
</el-sub-menu>
|
|
</el-sub-menu>
|
|
<!-- <el-sub-menu index="3">
|
<template #title>
|
<el-icon><i-ep-DataLine /></el-icon>
|
<span>分要素分析</span>
|
</template>
|
|
<el-menu-item-group>
|
|
<el-menu-item index="day">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<span @click="selected = optionClick[6]">油烟浓度日数据</span>
|
</el-menu-item>
|
<el-menu-item index="monitor">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<span @click="selected = optionClick[7]">监测设备在线率</span>
|
</el-menu-item>
|
<el-menu-item index="purifier">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<span @click="selected = optionClick[8]">净化器开启率</span>
|
</el-menu-item>
|
|
<el-menu-item index="exceed">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<span @click="selected = optionClick[9]">油烟时段超标率</span>
|
</el-menu-item>
|
|
<el-menu-item index="average">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<span @click="selected = optionClick[10]">油烟浓度均值</span>
|
</el-menu-item>
|
</el-menu-item-group>
|
</el-sub-menu> -->
|
|
|
|
<el-sub-menu index="4">
|
<template #title>
|
<el-icon><i-ep-Histogram /></el-icon>
|
<span>多源数据管理</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[9]">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<template #title>第三方数据获取</template>
|
</el-menu-item>
|
|
<el-menu-item index="hdata" @click="selected = optionClick[10]">
|
<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-sub-menu> -->
|
|
|
</el-scrollbar>
|
|
</el-menu>
|
</el-aside>
|
</template>
|
|
<style lang="scss" scoped>
|
.el-aside {
|
background-color: #545c64;
|
height: 100vh;
|
// background-color: rgb(41,45,62);
|
width: auto;
|
}
|
|
.el-menu {
|
// background-color: rgb(41,45,62);
|
background-color: #545c64;
|
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;
|
|
img {
|
width: 32px;
|
height: 32px;
|
}
|
}
|
// .el-menu-item {
|
// background-color: rgb(41,45,62);
|
// }
|
* {
|
color: white;
|
}
|
.slot-lable {
|
color: bisque;
|
}
|
</style>
|
