<script >
|
import { isCollapse } from './isCollapse'
|
import { selectedName } from './selectName'
|
|
export default {
|
|
data() {
|
return {
|
isCollapseAside: isCollapse,
|
selected: selectedName,
|
optionClick:['历史数据','异常分析','实时监测','油烟数据','统计分析','统计数据','油烟浓度日数据','监测设备在线率','净化器开启率','油烟时段超标率','油烟浓度均值']
|
}
|
},
|
|
}
|
</script>
|
|
<template>
|
<el-aside>
|
<el-scrollbar>
|
<el-menu active-text-color="#ffd04b"
|
background-color="#545c64"
|
class="el-menu-vertical-demo"
|
default-active="2"
|
text-color="#fff"
|
@open="handleOpen"
|
@close="handleClose"
|
router :collapse="isCollapseAside">
|
<!-- :collapse="isCollapse" -->
|
<a href="/" class="logo">
|
<img src="@/assets/companylogo.png" alt="" />
|
<h1>油烟在线监测</h1>
|
</a>
|
<el-sub-menu index="1">
|
<template #title>
|
<el-icon><i-ep-Monitor /></el-icon>
|
<scan >监测数据管理</scan>
|
<!-- @click="handleClick(optionClick[0])" -->
|
</template>
|
|
<el-menu-item index="hdata" >
|
<el-icon><i-ep-Histogram /></el-icon>
|
<scan @click="selected = optionClick[0]">历史数据</scan>
|
</el-menu-item>
|
|
<el-menu-item index="edata">
|
<el-icon><i-ep-Bell /></el-icon>
|
<scan @click="selected = optionClick[1]">异常分析</scan>
|
</el-menu-item>
|
|
<el-menu-item index="ndata">
|
<el-icon><i-ep-Stopwatch /></el-icon>
|
<scan @click="selected = optionClick[2]">实时监测</scan>
|
</el-menu-item>
|
|
<!-- <el-menu-item index="rdata">
|
<el-icon><i-ep-Stopwatch /></el-icon>
|
<scan>实时数据库</scan>
|
</el-menu-item> -->
|
|
</el-sub-menu>
|
|
<!-- <el-sub-menu index=2>
|
<template #title>
|
<el-icon><i-ep-Bell/></el-icon> <scan>测试</scan>
|
</template>
|
|
<el-menu-item index="tdata">
|
<el-icon><i-ep-Bell/></el-icon> <scan>超标数据</scan>
|
</el-menu-item>
|
</el-sub-menu> -->
|
<el-sub-menu index="2">
|
<template #title>
|
<el-icon><i-ep-Histogram /></el-icon>
|
<scan >油烟数据分析</scan>
|
</template>
|
|
<el-menu-item index="origin">
|
<el-icon><i-ep-List /></el-icon>
|
<scan @click="selected = optionClick[3]">油烟数据</scan>
|
</el-menu-item>
|
|
<el-menu-item index="analysisOrigin">
|
<el-icon><i-ep-Search /></el-icon>
|
<scan @click="selected = optionClick[4]">统计分析</scan>
|
</el-menu-item>
|
</el-sub-menu>
|
|
<el-sub-menu index="3">
|
<template #title>
|
<el-icon><i-ep-DataLine /></el-icon>
|
<scan>统计数据折线图</scan>
|
</template>
|
<el-menu-item-group>
|
<template #title>
|
<span class="slot-lable"> 整体数据</span>
|
</template>
|
<el-menu-item index="allData">
|
<el-icon><i-ep-TrendCharts /></el-icon>
|
<scan @click="selected = optionClick[5]">统计数据</scan>
|
</el-menu-item>
|
</el-menu-item-group>
|
|
<el-menu-item-group >
|
<template #title>
|
<span class="slot-lable"> 详细数据</span>
|
</template>
|
<el-menu-item index="day">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<scan @click="selected = optionClick[6]">油烟浓度日数据</scan>
|
</el-menu-item>
|
<el-menu-item index="monitor">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<scan @click="selected = optionClick[7]">监测设备在线率</scan>
|
</el-menu-item>
|
<el-menu-item index="purifier">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<scan @click="selected = optionClick[8]">净化器开启率</scan>
|
</el-menu-item>
|
|
<el-menu-item index="exceed">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<scan @click="selected = optionClick[9]">油烟时段超标率</scan>
|
</el-menu-item>
|
|
<el-menu-item index="average">
|
<el-icon><i-ep-Notebook /></el-icon>
|
<scan @click="selected = optionClick[10]">油烟浓度均值</scan>
|
</el-menu-item>
|
|
</el-menu-item-group>
|
</el-sub-menu>
|
|
<!-- <el-sub-menu index="4">-->
|
|
<!-- 测试单独项模块 -->
|
<!-- <el-menu-item index="tdata">
|
<el-icon><i-ep-Bell/></el-icon> <scan>函数测试</scan>
|
</el-menu-item>
|
|
<el-menu-item index="abc">
|
<el-icon><i-ep-Bell/></el-icon> <scan>抽屉</scan>
|
</el-menu-item> -->
|
|
<!-- <el-menu-item index="analysis">
|
<el-icon><i-ep-Bell/></el-icon> <scan>原始数据分析</scan>
|
</el-menu-item> -->
|
|
|
</el-menu>
|
</el-scrollbar>
|
</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;
|
}
|
& scan {
|
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>
|
