From 12fd8f6b04b26ef02bccdf5fd0bcefb59541c7f6 Mon Sep 17 00:00:00 2001
From: “dzb” <2632970487@qq.com>
Date: 星期三, 02 十一月 2022 17:04:23 +0800
Subject: [PATCH] :预警研判
---
src/views/layout/components/Menu/index.vue | 178 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 126 insertions(+), 52 deletions(-)
diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue
index 8ad84aa..3599b9d 100644
--- a/src/views/layout/components/Menu/index.vue
+++ b/src/views/layout/components/Menu/index.vue
@@ -1,19 +1,63 @@
<template>
- <div class="Menu">
- <!-- 鑿滃崟鏍� -->
- <el-aside width="200px" class="menu">
+ <div>
+ <!-- 渚ц竟瀵艰埅鏍� -->
+ <el-aside width="200px">
<h2 class="siderbar-title">閬傛槍鎵ф硶骞冲彴</h2>
- <el-scrollbar class="MenuScroll">
+ <el-scrollbar>
<!-- 璺敱 -->
- <el-menu class="el-menu-vertical">
- <el-menu-item v-for="item in menu" :key="item.name" class="firstMenu" @click="Jump(item.index)">
- <template slot="title" class="firstSpan">
+ <el-menu router class="el-menu-vertical" :default-active="$route.path">
+ <el-submenu
+ :index="menu.url ? menu.url : menu.id.toString()"
+ v-for="menu in menuList"
+ :key="menu.id"
+ class="firstMenu"
+ >
+ <template slot="title">
<span slot="prefix" class="icon-padding fisrtSpan">
- <svg-icon :icon-class="item.icon"></svg-icon>
+ <svg-icon :icon-class="menu.icon"></svg-icon>
</span>
- <span class="fisrtSpan">{{item.name}}</span>
+ <span class="fisrtSpan">{{ menu.title }}</span>
</template>
- </el-menu-item>
+ <template v-if="menu.children.length > 0">
+ <template v-for="secondMenu in menu.children">
+ <el-submenu
+ :key="secondMenu.id"
+ v-if="secondMenu.children.length > 0"
+ :index="
+ secondMenu.url ? secondMenu.url : secondMenu.id.toString()
+ "
+ class="secondMenu"
+ >
+ <template slot="title">
+ <span class="secondSpan">{{ secondMenu.title }}</span>
+ </template>
+ <el-menu-item
+ v-for="thirdMenu in secondMenu.children"
+ :key="thirdMenu.id"
+ :index="`${thirdMenu.id}`"
+ :route="{ name: thirdMenu.url }"
+ >{{ thirdMenu.title }}</el-menu-item
+ >
+ </el-submenu>
+
+ <el-menu-item
+ v-else
+ :key="secondMenu.id"
+ :index="`${secondMenu.id}`"
+ :route="{ name: secondMenu.url }"
+ >{{ secondMenu.title }}</el-menu-item
+ >
+ </template>
+ </template>
+
+ <el-menu-item
+ v-else
+ :key="menu.id"
+ :index="`${menu.id}`"
+ :route="{ name: menu.url }"
+ >{{ menu.title }}</el-menu-item
+ >
+ </el-submenu>
</el-menu>
</el-scrollbar>
</el-aside>
@@ -24,36 +68,37 @@
export default {
data() {
return {
- menu: [
- {
- name: "绯荤粺璁剧疆", icon: "system", index: "/home/system",
- },
- {
- name: "杩愯惀绠＄悊", icon: "operate", index: "/home/operate",
- },
- {
- name: "瑙嗛宸℃煡", icon: "video", index: "/home/video",
- },
- {
- name: "娌圭儫淇℃伅鏌ヨ", icon: "intelligence", index: "/home/lampblack",
- },
- {
- name: "鎵ф硶绠＄悊", icon: "intelligence", index: "/home/law",
- },
- {
- name: "鏅鸿兘宸℃煡", icon: "intelligence", index: "/home/intellect",
- },
- {
- name: "骞冲彴鍩烘湰淇℃伅", icon: "intelligence", index: "/home/info",
- }
- ],
- }
+ menuList: [],
+ };
},
- methods:{
- Jump(url){
- this.$router.push(url);
- }
- }
+ created() {
+ // this.getMenuList();
+ this.loadMenu();
+ },
+ methods: {
+ loadMenu() {
+ const info = JSON.parse(sessionStorage.getItem("user"));
+ var timer;
+ if (info && info.menus) {
+ clearTimeout(timer);
+ this.menuList = info.menus;
+ } else {
+ timer = setInterval(() => {
+ this.loadMenu();
+ }, 1000);
+ }
+ },
+ // 鑾峰彇鑿滃崟鍒楄〃
+ getMenuList() {
+ let arr;
+ this.$axios({
+ method: "get",
+ url: "sccg/system/portal/menu/search_myself",
+ }).then((res) => {
+ console.log(res);
+ });
+ },
+ },
};
</script>
@@ -61,12 +106,14 @@
.icon-padding {
padding-right: 10px;
}
-.menu {
+
+.el-aside {
background: #07162e;
color: #e9eef3;
text-align: center;
box-sizing: border-box;
position: relative;
+
// 鍥哄畾鏍囬
.siderbar-title {
position: fixed;
@@ -78,35 +125,42 @@
top: 0;
left: 0;
z-index: 999;
- background-color: #08162f;
}
- .MenuScroll {
+ .el-scrollbar {
height: calc(100vh - 66px);
- box-sizing: border-box;
margin-top: 66px;
+ box-sizing: border-box;
+
.el-menu {
background: linear-gradient(#07162e, #0f2b56);
border: 0;
.firstMenu {
- background: #07162e;
+ background: #07162e;
text-align: left;
- &:hover .fisrtSpan {
- color: #fff;
+
+ &:hover > .el-submenu__title {
+ background-color: #092c4a;
}
+ &:hover .fisrtSpan {
+ color: #22d3eb;
+ }
+
+ span,
span {
color: #e9eef3;
}
.el-menu-item {
- color: #c3c3c4;
+ color: #e9eef3;
background-color: #07162e;
- &:hover {
- color: #fff;
- background-color: #0c2c4c;
- }
+ }
+
+ .el-menu-item:hover {
+ background-color: #092c4a;
+ color: #22d3eb;
}
.is-active {
@@ -115,8 +169,28 @@
}
}
+ .secondMenu {
+ &:hover > .el-submenu__title {
+ background-color: #092c4a;
+ }
+
+ &:hover .secondSpan {
+ color: #22d3eb;
+ }
+ }
+
+ .thirdMenu {
+ &:hover > .el-submenu__title {
+ background-color: #092c4a;
+ }
+
+ &:hover .thirdSpan {
+ color: #22d3eb;
+ }
+ }
+
.is-active {
- background-color: #07162e;
+ background-color: #092c4a;
}
}
--
Gitblit v1.8.0