From 172d73cbe737c04b3d2c3fe8908db2460c241543 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期一, 14 八月 2023 17:11:48 +0800
Subject: [PATCH] 油烟监测系统 Vue代码
---
src/components/layout/AppAside.vue | 355 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 194 insertions(+), 161 deletions(-)
diff --git a/src/components/layout/AppAside.vue b/src/components/layout/AppAside.vue
index a725a6e..9cbde1f 100644
--- a/src/components/layout/AppAside.vue
+++ b/src/components/layout/AppAside.vue
@@ -1,206 +1,239 @@
-<script >
-import { isCollapse } from './isCollapse'
-import { selectedName } from './selectName'
+<script>
+import { isCollapse } from './isCollapse';
+import { selectedName } from './selectName';
export default {
-
- data() {
- return {
- isCollapseAside: isCollapse,
- selected: selectedName,
- optionClick:['鍘嗗彶鏁版嵁','寮傚父鍒嗘瀽','瀹炴椂鐩戞祴','娌圭儫鏁版嵁','缁熻鍒嗘瀽','缁熻鏁版嵁','娌圭儫娴撳害鏃ユ暟鎹�','鐩戞祴璁惧鍦ㄧ嚎鐜�','鍑�鍖栧櫒寮�鍚巼','娌圭儫鏃舵瓒呮爣鐜�','娌圭儫娴撳害鍧囧��']
- }
+ 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>
- <el-scrollbar>
- <el-menu active-text-color="#ffd04b"
- background-color="#545c64"
+ <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"
- 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>
+ @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-menu-item index="hdata" >
- <el-icon><i-ep-Histogram /></el-icon>
- <scan @click="selected = optionClick[0]">鍘嗗彶鏁版嵁</scan>
- </el-menu-item>
+ </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="edata">
- <el-icon><i-ep-Bell /></el-icon>
- <scan @click="selected = optionClick[1]">寮傚父鍒嗘瀽</scan>
- </el-menu-item>
+ <el-menu-item index="ndata" @click="selected = optionClick[0]">
+ <el-icon><i-ep-Stopwatch /></el-icon>
+ <template #title >瀹炴椂鐩戞帶</template>
- <el-menu-item index="ndata">
- <el-icon><i-ep-Stopwatch /></el-icon>
- <scan @click="selected = optionClick[2]">瀹炴椂鐩戞祴</scan>
- </el-menu-item>
+ </el-menu-item>
- <!-- <el-menu-item index="rdata">
- <el-icon><i-ep-Stopwatch /></el-icon>
- <scan>瀹炴椂鏁版嵁搴�</scan>
- </el-menu-item> -->
- </el-sub-menu>
+ <el-menu-item index="edata" @click="selected = optionClick[1]">
+ <el-icon><i-ep-Bell /></el-icon>
+ <template #title>寮傚父鍒嗘瀽</template>
+ </el-menu-item>
+
- <!-- <el-sub-menu index=2>
- <template #title>
- <el-icon><i-ep-Bell/></el-icon> <scan>娴嬭瘯</scan>
- </template>
+ <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-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-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="origin">
- <el-icon><i-ep-List /></el-icon>
- <scan @click="selected = optionClick[3]">娌圭儫鏁版嵁</scan>
- </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="analysisOrigin">
- <el-icon><i-ep-Search /></el-icon>
- <scan @click="selected = optionClick[4]">缁熻鍒嗘瀽</scan>
- </el-menu-item>
- </el-sub-menu>
+ <!-- <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-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 index="getdata" @click="selected = optionClick[8]">
+ <el-icon><i-ep-TrendCharts /></el-icon>
+ <template #title>绗笁鏂规暟鎹幏鍙�</template>
+ </el-menu-item>
- <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="hdata" @click="selected = optionClick[9]">
+ <el-icon><i-ep-Histogram /></el-icon>
+ <template #title>鍘嗗彶鏁版嵁</template>
+ </el-menu-item>
+ </el-sub-menu>
- <el-menu-item index="exceed">
- <el-icon><i-ep-Notebook /></el-icon>
- <scan @click="selected = optionClick[9]">娌圭儫鏃舵瓒呮爣鐜�</scan>
- </el-menu-item>
+ <!-- <el-sub-menu index="5">
+ <template #title>
+ <el-icon><i-ep-Histogram /></el-icon>
+ <span>娴嬭瘯</span>
+ </template>
- <el-menu-item index="average">
- <el-icon><i-ep-Notebook /></el-icon>
- <scan @click="selected = optionClick[10]">娌圭儫娴撳害鍧囧��</scan>
- </el-menu-item>
+ <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-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 index="test1">
+ <el-icon><i-ep-Bell/></el-icon> <span>娴嬭瘯3</span>
</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-sub-menu> -->
- </el-menu>
- </el-scrollbar>
- </el-aside>
+ </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;
-
+ // background-color: #013335;
+ background-color: rgb(50,155,185);
+ height: 100vh;
+
+ width: auto;
}
.el-menu {
- // background-color: rgb(41,45,62);
- background-color:#545c64;
- width: 220px;
- border-right: none;
+ // background-color: rgb(41,45,62);
+ background-color: rgb(50,155,185);
+ width: 200px;
+ border-right: none;
- &.el-menu--collapse {
- //渚ц竟鏍忔姌鍙犳椂鐨勬牱寮�
- width: 65px;
-
- & h1 {
- //鎶樺彔鏃堕殣钘廻1鏂囧瓧
- display: none;
- }
- & scan {
- display: none;
- }
+ &.el-menu--collapse {
+ //渚ц竟鏍忔姌鍙犳椂鐨勬牱寮�
+ width: 65px;
+
+ & h1 {
+ //鎶樺彔鏃堕殣钘廻1鏂囧瓧
+ display: none;
}
+ & span {
+ display: none;
+ }
+ }
}
.logo {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 60px;
- text-decoration: none;
- color: black;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 60px;
+ text-decoration: none;
+ color: black;
- img {
- width: 32px;
- height: 32px;
- }
+ img {
+ width: 32px;
+ height: 32px;
+ }
}
-// .el-menu-item {
-// background-color: rgb(41,45,62);
-// }
+
* {
- color: white;
+ color: rgb(252, 255, 255);
}
.slot-lable {
- color: bisque;
+ color: bisque;
+ // color: rgb(13, 193, 224);
}
-</style>
\ No newline at end of file
+.menu-text {
+ font-size: 16px;
+}
+</style>
--
Gitblit v1.9.3