|
|
|
@ -3,16 +3,12 @@
@@ -3,16 +3,12 @@
|
|
|
|
|
<div class="menu-box"> |
|
|
|
|
<div class="logo"> |
|
|
|
|
<img :src="logoIcon" alt="" class="logo-icon" /> |
|
|
|
|
<span class="logo-label">设备管理平台</span> |
|
|
|
|
<span class="logo-label"> 储能边缘控制主机管理</span> |
|
|
|
|
</div> |
|
|
|
|
<el-scrollbar> |
|
|
|
|
<el-menu :default-active="activeMenu" class="menu" @select="menuClick"> |
|
|
|
|
<template v-for="(menu, idx) in menuData" :key="idx"> |
|
|
|
|
<el-menu-item |
|
|
|
|
:index="menu.path" |
|
|
|
|
class="menu-item" |
|
|
|
|
v-if="!menu?.children?.length" |
|
|
|
|
> |
|
|
|
|
<el-menu-item :index="menu.path" class="menu-item" v-if="!menu?.children?.length"> |
|
|
|
|
<Icon :size="16" v-if="menu.meta.icon" :icon="menu.meta.icon" /> |
|
|
|
|
<span class="menu-label">{{ menu.meta.title }}</span> |
|
|
|
|
</el-menu-item> |
|
|
|
@ -22,11 +18,7 @@
@@ -22,11 +18,7 @@
|
|
|
|
|
<span class="menu-label">{{ menu.meta.title }}</span> |
|
|
|
|
</template> |
|
|
|
|
<template v-for="(child, index) in menu.children" :key="index"> |
|
|
|
|
<el-menu-item |
|
|
|
|
class="menu-item" |
|
|
|
|
:index="`${menu.path}/${child.path}`" |
|
|
|
|
v-if="!child?.children?.length" |
|
|
|
|
> |
|
|
|
|
<el-menu-item class="menu-item" :index="`${menu.path}/${child.path}`" v-if="!child?.children?.length"> |
|
|
|
|
<Icon :size="16" v-if="child.meta.icon" :icon="child.meta.icon" /> |
|
|
|
|
|
|
|
|
|
{{ child.meta.title }} |
|
|
|
@ -38,19 +30,9 @@
@@ -38,19 +30,9 @@
|
|
|
|
|
|
|
|
|
|
{{ child.meta.title }} |
|
|
|
|
</template> |
|
|
|
|
<template |
|
|
|
|
v-for="(subChild, subIndex) in child.children" |
|
|
|
|
:key="subIndex" |
|
|
|
|
> |
|
|
|
|
<el-menu-item |
|
|
|
|
class="menu-item" |
|
|
|
|
:index="`${menu.path}/${child.path}/${subChild.path}`" |
|
|
|
|
> |
|
|
|
|
<Icon |
|
|
|
|
:size="16" |
|
|
|
|
v-if="subChild.meta.icon" |
|
|
|
|
:icon="subChild.meta.icon" |
|
|
|
|
/> |
|
|
|
|
<template v-for="(subChild, subIndex) in child.children" :key="subIndex"> |
|
|
|
|
<el-menu-item class="menu-item" :index="`${menu.path}/${child.path}/${subChild.path}`"> |
|
|
|
|
<Icon :size="16" v-if="subChild.meta.icon" :icon="subChild.meta.icon" /> |
|
|
|
|
|
|
|
|
|
{{ subChild.meta.title }} |
|
|
|
|
</el-menu-item> |
|
|
|
@ -69,10 +51,7 @@
@@ -69,10 +51,7 @@
|
|
|
|
|
{{ currentTime }} |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
<el-dropdown |
|
|
|
|
style="width: 100%; height: 100%" |
|
|
|
|
@command="command => handleCommand(command)" |
|
|
|
|
> |
|
|
|
|
<el-dropdown style="width: 100%; height: 100%" @command="command => handleCommand(command)"> |
|
|
|
|
<div class="user-avatar"> |
|
|
|
|
<img :src="Avatar" height="32" /> |
|
|
|
|
<div class="user-name" :title="userName">{{ userName }}</div> |
|
|
|
@ -89,7 +68,11 @@
@@ -89,7 +68,11 @@
|
|
|
|
|
</el-header> |
|
|
|
|
<main class="layout-main"> |
|
|
|
|
<el-config-provider :locale="zhCn"> |
|
|
|
|
<RouterView /> |
|
|
|
|
<RouterView v-slot="{ Component }"> |
|
|
|
|
<KeepAlive :include="['DeviceList']"> |
|
|
|
|
<component :is="Component" /> |
|
|
|
|
</KeepAlive> |
|
|
|
|
</RouterView> |
|
|
|
|
</el-config-provider> |
|
|
|
|
<!-- </div> --> |
|
|
|
|
</main> |
|
|
|
@ -235,7 +218,7 @@ async function loginOut() {
@@ -235,7 +218,7 @@ async function loginOut() {
|
|
|
|
|
}) |
|
|
|
|
await userStore.loginout() |
|
|
|
|
push('/login') |
|
|
|
|
} catch {} |
|
|
|
|
} catch { } |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onUnmounted(() => { |
|
|
|
@ -245,19 +228,20 @@ onUnmounted(() => {
@@ -245,19 +228,20 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
$header-height: 48px; |
|
|
|
|
|
|
|
|
|
.root { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.menu-box { |
|
|
|
|
max-width: 216px; |
|
|
|
|
height: 100%; |
|
|
|
|
position: relative; |
|
|
|
|
transition: width 0.3s ease; |
|
|
|
|
overflow: hidden; |
|
|
|
|
background-color: var(--layout-menu-bg); |
|
|
|
|
@include ResponsiveW(216); |
|
|
|
|
// @include ResponsiveW(168); |
|
|
|
|
width: 224px; |
|
|
|
|
|
|
|
|
|
.logo { |
|
|
|
|
height: 48px; |
|
|
|
@ -290,15 +274,18 @@ $header-height: 48px;
@@ -290,15 +274,18 @@ $header-height: 48px;
|
|
|
|
|
height: 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.el-menu) { |
|
|
|
|
background-color: var(--layout-menu-bg); |
|
|
|
|
border-right: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.menu { |
|
|
|
|
height: calc(100% - 48px); |
|
|
|
|
width: 100%; |
|
|
|
|
overflow: auto; |
|
|
|
|
background-color: var(--layout-menu-bg); |
|
|
|
|
|
|
|
|
|
:deep(.el-menu-item:hover), |
|
|
|
|
:deep(.el-sub-menu__title:hover) { |
|
|
|
|
background: #272b35; |
|
|
|
@ -314,10 +301,12 @@ $header-height: 48px;
@@ -314,10 +301,12 @@ $header-height: 48px;
|
|
|
|
|
height: 40px; |
|
|
|
|
border-left: 3px solid transparent; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.el-menu-item.is-active) { |
|
|
|
|
background-color: #2c342c; |
|
|
|
|
border-left: 3px solid #619925; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.mr-5px { |
|
|
|
|
margin-right: 5px; |
|
|
|
|
font-size: 26px; |
|
|
|
@ -379,6 +368,7 @@ $header-height: 48px;
@@ -379,6 +368,7 @@ $header-height: 48px;
|
|
|
|
|
outline: none; |
|
|
|
|
align-items: center; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
.user-name { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: var(--text-color); |
|
|
|
@ -404,15 +394,18 @@ $header-height: 48px;
@@ -404,15 +394,18 @@ $header-height: 48px;
|
|
|
|
|
background: var(--bg); |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
.layout-breadcrumb { |
|
|
|
|
height: 20px; |
|
|
|
|
margin-bottom: 14px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.layout-view { |
|
|
|
|
flex: 1; |
|
|
|
|
background: var(--bg); |
|
|
|
|
border-radius: 4px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// overflow: hidden; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|