|
@@ -18,7 +18,8 @@
|
|
|
router
|
|
|
:style="collapse ? 'width:84px' : 'width:220px'"
|
|
|
>
|
|
|
- <template v-for="item in thisMenuList">
|
|
|
+ <menu-tree :menuList="thisMenuList" :collapse="collapse" :openArray="openArray"></menu-tree>
|
|
|
+ <!-- <template v-for="item in thisMenuList">
|
|
|
<template v-if="item.children">
|
|
|
<el-submenu :index="item.linkPath" :key="item.linkPath">
|
|
|
<template slot="title">
|
|
@@ -52,14 +53,13 @@
|
|
|
</template>
|
|
|
</el-submenu>
|
|
|
</template>
|
|
|
- <!-- 一级菜单 -->
|
|
|
<template v-else>
|
|
|
<el-menu-item :index="item.linkPath" :key="item.linkPath">
|
|
|
<img :src="envConfig.baseImgApi + item.menuImage" style="width: 14px; height: 14px; margin-right: 10px" />
|
|
|
<span slot="title">{{ item.name }}</span>
|
|
|
</el-menu-item>
|
|
|
</template>
|
|
|
- </template>
|
|
|
+ </template> -->
|
|
|
</el-menu>
|
|
|
</div>
|
|
|
<div class="menu-footer" :class="theme == 'dark' ? 'dark' : 'light'" :style="collapse ? 'width:84px' : 'width:220px'">
|
|
@@ -77,6 +77,7 @@
|
|
|
|
|
|
<script>
|
|
|
import envConfig from '@/config';
|
|
|
+import MenuTree from './MenuTree.vue';
|
|
|
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
|
|
|
const darkTheme = new Set(['/dispatchCenter', '/waterSupplyMap', '/operation/video', '/operation/pipe-network']);
|
|
|
const collapsePages = new Set(['/viewDetail', '/installplanView']);
|
|
@@ -86,14 +87,19 @@ export default {
|
|
|
envConfig: envConfig,
|
|
|
siderMenuList: [],
|
|
|
btnCollpaseright: require('@assets/img/btn_collpaseright.png'),
|
|
|
- btnCollpaseleft: require('@assets/img/btn_collpaseleft.png')
|
|
|
+ btnCollpaseleft: require('@assets/img/btn_collpaseleft.png'),
|
|
|
+ openList: []
|
|
|
};
|
|
|
},
|
|
|
+ components: {
|
|
|
+ MenuTree
|
|
|
+ },
|
|
|
computed: {
|
|
|
thisMenuList() {
|
|
|
return this.$store.getters['getThisMenuList'];
|
|
|
},
|
|
|
onRoutes() {
|
|
|
+ return this.$route.path;
|
|
|
if (this.$route.path) {
|
|
|
let theme = darkTheme.has(this.$route.path) ? 'dark' : 'light';
|
|
|
this.$store.commit('setTheme', darkTheme.has(this.$route.path) ? 'dark' : 'light');
|
|
@@ -107,6 +113,9 @@ export default {
|
|
|
},
|
|
|
theme() {
|
|
|
return this.$store.getters.getTheme;
|
|
|
+ },
|
|
|
+ openArray() {
|
|
|
+ return this.openList;
|
|
|
}
|
|
|
},
|
|
|
|
|
@@ -114,14 +123,39 @@ export default {
|
|
|
// 侧边栏折叠
|
|
|
collapseChage() {
|
|
|
this.$store.dispatch('collapse', !this.collapse);
|
|
|
+ },
|
|
|
+ thisfindMen(arr, indexPath) {
|
|
|
+
|
|
|
+ let status = [];
|
|
|
+ arr.map((v) => {
|
|
|
+ if (v.children) {
|
|
|
+ v.children.map((s) => {
|
|
|
+ if ('/' + s.linkPath === indexPath) {
|
|
|
+ status.push(v.linkPath, s.linkPath);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if ('/' + v.linkPath === indexPath) {
|
|
|
+ status.push(v.linkPath);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return status;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route(newValue, oldValue) {
|
|
|
+ this.openList = this.thisfindMen(this.thisMenuList, newValue.path);
|
|
|
}
|
|
|
},
|
|
|
- created() {}
|
|
|
+ created() {
|
|
|
+ this.openList = this.thisfindMen(this.thisMenuList, this.$route.path);
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
+
|
|
|
<style lang="scss">
|
|
|
-@import '@assets/css/public-style.scss';
|
|
|
.sidebar {
|
|
|
width: 220px;
|
|
|
display: flex;
|
|
@@ -129,7 +163,6 @@ export default {
|
|
|
background: #171f32;
|
|
|
border-radius: 0px 30px 30px 0px;
|
|
|
z-index: 2;
|
|
|
- // background: #222B41 url('../../assets/img/bg_img.png') no-repeat bottom right;
|
|
|
.logo {
|
|
|
width: 100%;
|
|
|
height: 110px;
|
|
@@ -171,16 +204,13 @@ export default {
|
|
|
overflow: auto;
|
|
|
flex: 1;
|
|
|
scrollbar-width: 0;
|
|
|
- // background: #171F32;
|
|
|
}
|
|
|
.menu-footer.dark {
|
|
|
- // position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 220px;
|
|
|
height: 30px;
|
|
|
- // border-radius: 0px 30px 30px 0px;
|
|
|
- // background-color: #f4f7f9;
|
|
|
+
|
|
|
div {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
@@ -192,27 +222,12 @@ export default {
|
|
|
background-color: #070f22 !important;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
- // div{
|
|
|
- // width: 100%;
|
|
|
- // height: 100%;
|
|
|
- // border-radius: 0px 30px 30px 0px;
|
|
|
- // background: #171F32;
|
|
|
- // border: none;
|
|
|
- // }
|
|
|
- // }
|
|
|
+
|
|
|
&.light {
|
|
|
background-color: #f4f7f9 !important;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
}
|
|
|
- // .menu-footer.light{
|
|
|
- // bottom: 0;
|
|
|
- // left: 0;
|
|
|
- // width: 220px;
|
|
|
- // height: 30px;
|
|
|
- // background-color: #f4f7f9 !important;
|
|
|
- // z-index: 1;
|
|
|
- // }
|
|
|
.footer {
|
|
|
position: absolute;
|
|
|
bottom: 30px;
|
|
@@ -226,20 +241,13 @@ export default {
|
|
|
height: 24px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .expandhover:hover {
|
|
|
- background: url('../../assets/img/btn_collpaseright.png') no-repeat;
|
|
|
- // background-color: rgba(39, 135, 241,0.4);
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- .packuphover:hover {
|
|
|
- background: url('../../assets/img/btn_collpaseleft.png') no-repeat;
|
|
|
- // background-color: rgba(39, 135, 241,0.4);
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
+.el-menu {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
|
|
|
-.sidebar-el-menu > .el-submenu.is-opened > .el-submenu__title {
|
|
|
+.sidebar-el-menu .el-submenu.is-opened > .el-submenu__title {
|
|
|
//设置一级菜单点开后的状态
|
|
|
color: #fff !important;
|
|
|
background: rgb(44, 53, 74);
|
|
@@ -248,28 +256,27 @@ export default {
|
|
|
.sidebar-el-menu > .el-submenu.is-opened > .el-menu--inline > .el-submenu.is-opened > .el-submenu__title {
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
-.sidebar-el-menu > .el-submenu.is-opened.is-active > .el-submenu__title {
|
|
|
+.sidebar-el-menu > div > .el-submenu.is-opened.is-active > .el-submenu__title {
|
|
|
background: #2c354a !important;
|
|
|
border-radius: 32px 0px 0px 32px;
|
|
|
- color: $mainTextColor !important;
|
|
|
-
|
|
|
- border-right: 2px solid $mainTextColor;
|
|
|
+ color: rgb(39, 135, 241) !important;
|
|
|
+ border-right: 2px solid #2787f1;
|
|
|
.el-submenu__icon-arrow::before {
|
|
|
- color: $mainTextColor;
|
|
|
+ color: rgb(39, 135, 241);
|
|
|
}
|
|
|
}
|
|
|
.el-menu-item.is-active {
|
|
|
- // color:rgb(39, 135, 241);
|
|
|
- color: $mainTextColor;
|
|
|
+ color: rgb(39, 135, 241);
|
|
|
}
|
|
|
-// .el-submenu.is-active > div > span {
|
|
|
-// color: rgb(39, 135, 241);
|
|
|
-// }
|
|
|
+.el-submenu.is-active > div > span {
|
|
|
+ color: rgb(39, 135, 241);
|
|
|
+}
|
|
|
+
|
|
|
.sidebar .logo.shrink {
|
|
|
display: flex;
|
|
|
font-size: 16px;
|
|
|
justify-content: center;
|
|
|
- color: $mainTextColor;
|
|
|
+ // color: $mainTextColor;
|
|
|
border-bottom: 2px solid #2a335c;
|
|
|
margin-bottom: 20px;
|
|
|
align-items: flex-start;
|
|
@@ -283,19 +290,35 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// .sidebar .logo.shrink {
|
|
|
+// display: flex;
|
|
|
+// justify-content: center;
|
|
|
+// color: #2787f1;
|
|
|
+// border-bottom: 2px solid #2a335c;
|
|
|
+// margin-bottom: 20px;
|
|
|
+// align-items: flex-start;
|
|
|
+// .text {
|
|
|
+// width: 48px;
|
|
|
+// height: 48px;
|
|
|
+// background: rgba(255, 255, 255, 0.1);
|
|
|
+// border-radius: 4px;
|
|
|
+// border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
+// text-align: center;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
.el-menu--collapse > .is-active {
|
|
|
- color: $mainTextColor;
|
|
|
+ color: #2787f1;
|
|
|
+
|
|
|
background: #2c354a;
|
|
|
border-radius: 32px 0px 0px 32px;
|
|
|
- // margin:0;
|
|
|
}
|
|
|
+
|
|
|
.el-menu--collapse > .is-active > .el-submenu__title {
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
.el-submenu > .el-submenu__title:hover {
|
|
|
//设置一级菜单的鼠标经过时候的样式
|
|
|
- // background: linear-gradient(to right, rgba(39,135,241,0.2) 20%, black 100%);
|
|
|
- // border-radius: 0;
|
|
|
background: rgb(44, 53, 74) !important;
|
|
|
border-radius: 32px 0px 0px 32px !important;
|
|
|
}
|