<template>
|
<el-menu
|
:default-active="homePage"
|
active-text-color="#ffd04b"
|
background-color="#545c64"
|
text-color="#fff"
|
class="el-menu-vertical-demo"
|
:collapse="collapse"
|
@open="handleOpen"
|
@close="handleClose"
|
router
|
>
|
<!-- 标题 -->
|
<el-row ref="headerRef" class="header">
|
<el-space>
|
<el-avatar size="default" icon="UserFilled" />
|
<div>{{ collapse ? '' : title }}</div>
|
</el-space>
|
</el-row>
|
<!-- 系统切换按钮 -->
|
<el-popover
|
ref="header2Ref"
|
placement="right"
|
trigger="click"
|
effect="dark"
|
:visible="popVisible"
|
>
|
<template #reference>
|
<div class="fy-button-div" @click="popVisible = !popVisible">
|
<div
|
v-show="!collapse"
|
style="font-size: 12px; color: gray; margin-left: 24px; margin-bottom: 4px;"
|
>
|
当前系统
|
</div>
|
<el-row justify="space-between" align="middle" style="flex-wrap: nowrap;">
|
<el-space>
|
<el-icon :size="16"><Open /></el-icon>
|
<span v-show="!collapse">{{ sysName }}</span>
|
</el-space>
|
<el-icon v-show="!collapse"><ArrowRight /></el-icon>
|
</el-row>
|
</div>
|
</template>
|
<div class="fy-button-div" v-for="(n, i) in sysNames" :key="i" @click="choseSys(i)">
|
{{ n.name }}
|
</div>
|
</el-popover>
|
<!-- 菜单 -->
|
<el-scrollbar :height="menuHeight" v-if="!collapse">
|
<MenuItems :routes="menus" @navPage="navPage"> </MenuItems>
|
</el-scrollbar>
|
|
<template v-else>
|
<MenuItems :routes="menus" @navPage="navPage"> </MenuItems>
|
</template>
|
|
<!-- 商标 -->
|
<!-- <el-row ref="subTitleRef" class="sub-title" justify="center">
|
<el-space>{{ collapse ? '' : subTitle }}</el-space>
|
</el-row> -->
|
</el-menu>
|
</template>
|
|
<script>
|
import { MENU_FYSP, MENU_FYTZ, MENU_FYPW } from '@/constants/index';
|
|
export default {
|
name: 'CoreSiderMenu',
|
props: {
|
collapse: {
|
type: Boolean,
|
default: false
|
}
|
},
|
emits: ['navPage'],
|
data() {
|
return {
|
popVisible: false,
|
menuHeight: '600px',
|
title: '生态环境线上监管',
|
subTitle: '©上海飞羽环保科技有限公司',
|
sysIndex: 0,
|
sysNames: [
|
{ name: '飞羽监管', des: '' },
|
{ name: '飞羽环境', des: '' },
|
{ name: '排污抽运', des: '' }
|
]
|
};
|
},
|
computed: {
|
homePage() {
|
const paths = this.menuPath(this.menus[0]);
|
return paths[paths.length - 1].path;
|
},
|
sysName() {
|
return this.sysNames[this.sysIndex].name;
|
},
|
menus() {
|
return [MENU_FYSP, MENU_FYTZ, MENU_FYPW][this.sysIndex];
|
}
|
},
|
methods: {
|
handleOpen() {},
|
handleClose() {},
|
choseSys(i) {
|
this.sysIndex = i;
|
const paths = this.menuPath(this.menus[0]);
|
this.navPage(...paths);
|
const p = paths[paths.length - 1].path;
|
this.$router.push(p);
|
this.popVisible = false;
|
},
|
navPage(...item) {
|
const titles = item.map((value) => {
|
return value.name;
|
});
|
this.$emit('navPage', titles);
|
},
|
calMenuHeight() {
|
const h1 = this.$refs.headerRef.$el.offsetHeight;
|
const h2 = this.$refs.header2Ref.$el.offsetHeight;
|
// const h3 = this.$refs.subTitleRef.$el.offsetHeight;
|
const h3 = 0;
|
return `calc(100vh - ${h1}px - ${h2}px - ${h3}px)`;
|
},
|
menuPath(m) {
|
if (m.children) {
|
const arr = this.menuPath(m.children);
|
arr.shift(m);
|
return arr;
|
} else {
|
return [m];
|
}
|
}
|
},
|
created() {
|
this.$router.push(this.homePage);
|
this.navPage(...this.menuPath(this.menus[0]));
|
},
|
mounted() {
|
this.menuHeight = this.calMenuHeight();
|
}
|
};
|
</script>
|
|
<style scoped>
|
.header {
|
color: white;
|
background-color: #454f5a;
|
padding: 10px;
|
/* margin-bottom: 10px; */
|
box-shadow: 0 0.4rem 0.7rem 0 #5d656e;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.sub-title {
|
/* background-color: aqua; */
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
color: white;
|
line-height: 40px;
|
font-size: 12px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
/* width: 200px; */
|
min-height: 100vh;
|
max-height: 100vh;
|
}
|
|
.el-menu--collapse {
|
min-height: 100vh;
|
}
|
|
.fy-button-div {
|
white-space: nowrap;
|
}
|
</style>
|
