From 43c2f5b94d87263cf189f7ba51c8dc6c5e6144c8 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 23 十一月 2023 08:52:22 +0800
Subject: [PATCH] 1.修改了雷达图传入的数据 2.数据指标排名一进来按日均值倒序排列 3.修改了一些局部的样式
---
src/components/layout/AppAside.vue | 176 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 119 insertions(+), 57 deletions(-)
diff --git a/src/components/layout/AppAside.vue b/src/components/layout/AppAside.vue
index 184e19d..41853ac 100644
--- a/src/components/layout/AppAside.vue
+++ b/src/components/layout/AppAside.vue
@@ -1,24 +1,15 @@
<script>
import { isCollapse } from './isCollapse';
-import { selectedName } from './selectName';
export default {
data() {
return {
menuHeight: '600px',
isCollapseAside: isCollapse,
- selected: selectedName,
- optionClick: [
- ' 鏁版嵁椋庨櫓妯″瀷',
- '鏁版嵁椋庨櫓鎺掑悕',
- '绔欑偣缁煎悎椋庨櫓鎺掑悕',
- '椋炶宸℃',
- '绔欑偣瀹℃牳杈呭姪',
- '鍘嗗彶鏁版嵁绠＄悊',
- '鏁版嵁鎺ュ叆绠＄悊',
- '涓氬姟鎶ヨ〃',
- '鏁版嵁鎺ュ叆閰嶇疆',
- ]
+ // 鍥炬爣棰滆壊鍒囨崲
+ menu:[ { avalue:true},{ avalue:true},{ avalue:true},{ avalue:true},{ avalue:true},{ avalue:true},{ avalue:true}]
+
+
};
},
methods:{
@@ -26,18 +17,26 @@
const h1 = this.$refs.headerRef.$el.offsetHeight;
return `calc(100vh - ${h1}px - 8px`;
},
+ changeIcon(i){
+ this.menu[i].avalue = !this.menu[i].avalue
+
+ // 鍏朵粬鐨勭疆涓洪粯璁ょ姸鎬�
+ for(let j = 0;j<this.menu.length;j++){
+ if( j!=i){
+ // 寮�濮嬫椂鏄剧ず鐨勬槸鏈�変腑鐘舵��
+ this.menu[j].avalue = true
+ }
+ }
+ }
},
mounted(){
this.menuHeight = this.calMenuHeight();
- console.log('meta:',this.$route.matched);
-
}
};
</script>
<template>
<el-aside>
-
<el-menu
active-text-color="#F7BA1E"
background-color="#2876aa"
@@ -49,48 +48,73 @@
>
<el-row ref="headerRef" class="header">
<el-link href="/hdata" class="logo" >
- <h1>鍦ㄧ嚎鐩戞祴鏁版嵁璐ㄩ噺璇勪及涓庨闄╁垎鏋�</h1>
+ <div class="title-text">
+ <div class="title-text-one">鏁版嵁璐ㄩ噺璇勪及</div>
+ <div class="title-text-one">涓庨闄╁垎鏋愮郴缁�</div>
+ </div>
</el-link>
-
- </el-row>
+ </el-row>
- <hr/>
+ <div class="horizontal-line"></div>
<el-scrollbar :height="menuHeight">
<el-sub-menu index="1">
<template #title>
- <el-icon><i-ep-Monitor /></el-icon>
+ <img src="@/assets/risk.png" height="23">
<span class="parent-title">椋庨櫓璇勪及</span>
</template>
-
- <el-menu-item index="avgDay" @click="selected = optionClick[0]">
- <el-icon><i-ep-Stopwatch /></el-icon>
+ <!-- 鏈�変腑 -->
+ <el-menu-item index="/avgDay" v-show="menu[0].avalue" @click="changeIcon(0)" >
+ <img src="@/assets/generalModel.png" height="23">
鏁版嵁椋庨櫓妯″瀷
</el-menu-item>
- <el-menu-item index="analysis" @click="selected = optionClick[1]">
- <el-icon><i-ep-Stopwatch /></el-icon>
- 鏁版嵁椋庨櫓鎺掑悕
- </el-menu-item><el-menu-item index="riskrank" @click="selected = optionClick[2]">
- <el-icon><i-ep-Stopwatch /></el-icon>
- 绔欑偣缁煎悎椋庨櫓鎺掑悕
+ <!-- 鐏扮殑 -->
+ <el-menu-item index="/avgDay" v-show="!menu[0].avalue" @click="changeIcon(0)">
+ <img src="@/assets/generalModel2.png" height="23">
+ 鏁版嵁椋庨櫓妯″瀷
</el-menu-item>
+ <el-menu-item index="/riskrank" v-show="menu[2].avalue" @click="changeIcon(2)">
+ <img src="@/assets/generalModel.png" height="23">
+ 鏁版嵁椋庨櫓鎺掑悕
+ </el-menu-item>
+ <el-menu-item index="/riskrank" v-show="!menu[2].avalue" @click="changeIcon(2)">
+ <img src="@/assets/generalModel2.png" height="23">
+ 鏁版嵁椋庨櫓鎺掑悕
+ </el-menu-item>
+ <el-menu-item index="/analysis" v-show="menu[1].avalue" @click="changeIcon(1)">
+ <img src="@/assets/generalModel.png" height="23">
+ 鏁版嵁鎸囨爣鎺掑悕
+ </el-menu-item>
+ <el-menu-item index="/analysis" v-show="!menu[1].avalue" @click="changeIcon(1)">
+ <img src="@/assets/generalModel2.png" height="23">
+ 鏁版嵁鎸囨爣鎺掑悕
+ </el-menu-item>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
- <el-icon><i-ep-Histogram /></el-icon>
+ <img src="@/assets/onlineInspection.png" height="23">
<span class="parent-title">绾夸笂宸℃</span>
</template>
- <el-menu-item index="edata" @click="selected = optionClick[3]">
- <el-icon><i-ep-Bell /></el-icon>
+ <el-menu-item index="/edata" v-show="menu[3].avalue" @click="changeIcon(3)">
+ <img src="@/assets/generalModel.png" height="23">
+ 椋炶宸℃
+ </el-menu-item>
+ <el-menu-item index="/edata" v-show="!menu[3].avalue" @click="changeIcon(32)">
+ <img src="@/assets/generalModel2.png" height="23">
椋炶宸℃
</el-menu-item>
- <el-menu-item index="testData" @click="selected = optionClick[4]">
- <el-icon><i-ep-Bell /></el-icon>
+
+ <el-menu-item index="/testData" v-show="menu[4].avalue" @click="changeIcon(4)">
+ <img src="@/assets/generalModel.png" height="23">
+ 绔欑偣瀹℃牳杈呭姪
+ </el-menu-item>
+ <el-menu-item index="/testData" v-show="!menu[4].avalue" @click="changeIcon(4)">
+ <img src="@/assets/generalModel2.png" height="23">
绔欑偣瀹℃牳杈呭姪
</el-menu-item>
@@ -98,39 +122,51 @@
<el-sub-menu index="3">
<template #title>
- <el-icon><i-ep-DataLine /></el-icon>
+ <img src="@/assets/dataManagement.png" height="23">
<span class="parent-title">鏁版嵁绠＄悊</span>
</template>
- <el-menu-item index="hdata" @click="selected = optionClick[4]">
- <el-icon><i-ep-Histogram /></el-icon>
+ <el-menu-item index="/hdata" v-show="menu[5].avalue" @click="changeIcon(5)">
+ <img src="@/assets/generalModel.png" height="23">
鍘嗗彶鏁版嵁绠＄悊
</el-menu-item>
- <el-menu-item index="management" @click="selected = optionClick[5]">
+ <el-menu-item index="/hdata" v-show="!menu[5].avalue" @click="changeIcon(5)" >
+ <img src="@/assets/generalModel2.png" height="23">
+ 鍘嗗彶鏁版嵁绠＄悊
+ </el-menu-item>
+
+ <!-- <el-menu-item index="/management" >
<el-icon><i-ep-Histogram /></el-icon>
鏁版嵁鎺ュ叆绠＄悊
- </el-menu-item>
- <el-menu-item index="report" @click="selected = optionClick[6]">
+ </el-menu-item> -->
+
+
+ <!-- <el-menu-item index="report" >
<el-icon><i-ep-Histogram /></el-icon>
涓氬姟鎶ヨ〃
- </el-menu-item>
+ </el-menu-item> -->
</el-sub-menu>
- <el-sub-menu index="4">
+ <!-- <el-sub-menu index="4">
<template #title>
- <el-icon><i-ep-DataLine /></el-icon>
+ <img src="@/assets/configurationManagement.png" height="23">
<span class="parent-title">閰嶇疆绠＄悊</span>
</template>
- <el-menu-item index="setting" @click="selected = optionClick[7]">
- <el-icon><i-ep-Histogram /></el-icon>
+ <el-menu-item index="setting" v-show="menu[6].avalue" @click="changeIcon(6)">
+ <img src="@/assets/generalModel.png" height="23">
鏁版嵁鎺ュ叆閰嶇疆
</el-menu-item>
- </el-sub-menu>
+ <el-menu-item index="setting" v-show="!menu[6].avalue" @click="changeIcon(6)">
+ <img src="@/assets/generalModel2.png" height="23">
+ 鏁版嵁鎺ュ叆閰嶇疆
+ </el-menu-item>
+
+ </el-sub-menu> -->
+
</el-scrollbar>
-
</el-menu>
</el-aside>
</template>
@@ -148,10 +184,10 @@
width: 220px;
border-right: none;
&.el-menu--collapse {
- //渚ц竟鏍忔姌鍙犳椂鐨勬牱寮�
+ /* //渚ц竟鏍忔姌鍙犳椂鐨勬牱寮� */
width: 65px;
- & h1 {
- //鎶樺彔鏃堕殣钘廻1鏂囧瓧
+ & .title-text {
+ /* //鎶樺彔鏃堕殣钘廻1鏂囧瓧 */
display: none;
}
& span {
@@ -170,12 +206,9 @@
height: 60px;
text-decoration: none;
color: black;
- margin-left: 20px;
+ margin-left: 40px;
margin-right: 20px;
- // img {
- // width: 32px;
- // height: 32px;
- // }
+ font-size:16px
}
@@ -187,7 +220,36 @@
}
.parent-title {
font-weight: bold;
- font-size: 18px;
+ font-size: 16px;
}
+img {
+ margin-right: 6px;
+}
+.el-menu-item {
+ font-size: 16px;
+}
+.hr {
+ color: rgb(0,0,0);
+}
+.title-text{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.horizontal-line {
+ position: relative;
+ height: 1px;
+}
+.horizontal-line::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background-color: rgb(221, 217, 217,0.2);
+ /* // width: 180px; */
+}
</style>
--
Gitblit v1.9.3