<script setup>
|
import {computed, ref, watchEffect} from "vue";
|
import usePageMenuStore from "@/store/usePageMenuStore";
|
import FlexLayout from "@/components/FlexLayout.vue";
|
const pageMenuStore = usePageMenuStore();
|
|
const isCollapse = computed(()=>{
|
return pageMenuStore.isCollapse;
|
});
|
|
const isOpen = ref(!isCollapse.value);
|
const menuActive = ref("/");
|
const menuData = ref([]);
|
menuData.value = [
|
{
|
title: "首页",
|
path: "/",
|
icon: "HomeFilled"
|
},
|
{
|
title: "门禁",
|
path: "/accessControl",
|
icon: "Checked",
|
},
|
{
|
title: "视频监控",
|
path: "/video",
|
icon: "VideoCameraFilled",
|
},
|
{
|
title: "空调",
|
path: "/airConditioning",
|
icon: "Postcard",
|
},
|
{
|
title: "用户管理",
|
path: "/userManagement",
|
icon: "UserFilled"
|
},
|
];
|
|
const handleOpen = ()=>{
|
isOpen.value = true;
|
};
|
|
watchEffect(()=>{
|
if(isCollapse.value) {
|
isOpen.value = false;
|
}
|
});
|
</script>
|
|
<template>
|
<flex-layout no-bg>
|
<template #header>
|
<div class="sys-logo">
|
<div class="logo-img">
|
<img src="@/assets/images/logo.png" alt="" />
|
</div>
|
<div class="sys-name" v-if="isOpen">
|
环境监控系统
|
</div>
|
</div>
|
</template>
|
<div class="menu-wrapper">
|
<el-menu
|
:router="true"
|
text-color="#4ba1fa"
|
active-text-color="#00fefe"
|
background-color="#021a64"
|
:default-active="menuActive"
|
:unique-opened="true"
|
class="el-menu-vertical"
|
:collapse="isCollapse"
|
@open="handleOpen">
|
<template v-for="menu in menuData" :key="menu.path">
|
<el-sub-menu :index="menu.path" v-if="menu.children">
|
<template #title>
|
<el-icon>
|
<component :is="menu.icon"></component>
|
</el-icon>
|
<span>{{menu.title}}</span>
|
</template>
|
<el-menu-item
|
v-for="children in menu.children"
|
:key="children.path"
|
:index="children.path">{{children.title}}</el-menu-item>
|
</el-sub-menu>
|
<el-menu-item :index="menu.path" v-else>
|
<el-icon>
|
<component :is="menu.icon"></component>
|
</el-icon>
|
<template #title>{{menu.title}}</template>
|
</el-menu-item>
|
</template>
|
</el-menu>
|
</div>
|
</flex-layout>
|
</template>
|
|
<style lang="less" scoped>
|
.menu-wrapper {
|
height: 100%;
|
overflow-y: auto;
|
background-color: #021a64;
|
&.min-width {
|
min-width: 240px;
|
}
|
}
|
.el-menu-vertical {
|
border-right: 0;
|
.el-menu-item.is-active{
|
background-color: rgb(4, 32, 119);
|
}
|
}
|
|
.el-menu-vertical:not(.el-menu--collapse) {
|
width: 200px;
|
min-height: 400px;
|
}
|
.sys-logo {
|
padding: 6px 0 6px 16px;
|
.logo-img {
|
display: inline-block;
|
height: 28px;
|
vertical-align: bottom;
|
img {
|
width: auto;
|
height: 100%;
|
}
|
}
|
.sys-name {
|
display: inline-block;
|
margin-left: 6px;
|
font-weight: bold;
|
color: @font-color-primary;
|
}
|
}
|
</style>
|
