169 lines
4.0 KiB
Vue
169 lines
4.0 KiB
Vue
<template>
|
|
<a-layout class="layout">
|
|
<a-layout-sider v-model:collapsed="collapsed" collapsible class="left-menu">
|
|
<div class="logo">{{ collapsed ? "系统" : "自动化系统监控" }}</div>
|
|
<a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline" @click="goTopage">
|
|
<a-menu-item key="monit">
|
|
<pie-chart-outlined/>
|
|
<span>{{ collapsed ? "监控" : "系统监控" }}</span>
|
|
</a-menu-item>
|
|
<a-sub-menu>
|
|
<template #title>
|
|
<span>
|
|
<user-outlined/>
|
|
<span>用户</span>
|
|
</span>
|
|
</template>
|
|
<a-menu-item key="user">用户列表</a-menu-item>
|
|
</a-sub-menu>
|
|
</a-menu>
|
|
</a-layout-sider>
|
|
<a-layout>
|
|
<a-layout-header style="background: #fff; padding: 0" class="headers">
|
|
<a-dropdown style="margin-right: 20px" class="down">
|
|
<a class="ant-dropdown-link" @click.prevent>
|
|
{{ username }}
|
|
<DownOutlined/>
|
|
</a>`
|
|
<template #overlay>
|
|
<a-menu>
|
|
<a-menu-item>
|
|
<a href="javascript:" @click="logout">注销</a>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
</a-layout-header>
|
|
<a-layout-content style="margin: 0 16px">
|
|
<a-breadcrumb style="margin: 16px 0">
|
|
<a-breadcrumb-item v-if="route.meta.module">{{ route.meta.module }}</a-breadcrumb-item>
|
|
<a-breadcrumb-item>{{ route.meta.title }}</a-breadcrumb-item>
|
|
</a-breadcrumb>
|
|
<div :style="container">
|
|
<router-view></router-view>
|
|
</div>
|
|
</a-layout-content>
|
|
<a-layout-footer style="text-align: center">
|
|
Copyright ©2022 研发部-自动化测试
|
|
</a-layout-footer>
|
|
</a-layout>
|
|
</a-layout>
|
|
</template>
|
|
<script>
|
|
import {
|
|
PieChartOutlined,
|
|
DesktopOutlined,
|
|
UserOutlined,
|
|
TeamOutlined,
|
|
FileOutlined,
|
|
DownOutlined,
|
|
} from '@ant-design/icons-vue';
|
|
import {useRouter, useRoute} from "vue-router";
|
|
import {defineComponent, ref} from 'vue';
|
|
import {useStore} from "@/store";
|
|
import {storeToRefs} from "pinia";
|
|
|
|
export default defineComponent({
|
|
name: "layout",
|
|
components: {
|
|
PieChartOutlined,
|
|
DesktopOutlined,
|
|
UserOutlined,
|
|
TeamOutlined,
|
|
FileOutlined,
|
|
DownOutlined,
|
|
},
|
|
|
|
setup() {
|
|
const collapsed = ref(false)
|
|
const selectedKeys = ref(['1'])
|
|
const {username} = storeToRefs(useStore())
|
|
let container = {
|
|
padding: '24px', background: '#fff', minHeight: '100%',
|
|
}
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const goTopage = (item) => {
|
|
router.push('/' + item.key).catch((err) => err)
|
|
}
|
|
const logout = () => {
|
|
//清除cookie
|
|
window.sessionStorage.clear()
|
|
router.push("/login")
|
|
}
|
|
return {
|
|
collapsed,
|
|
selectedKeys,
|
|
container,
|
|
goTopage,
|
|
route,
|
|
logout,
|
|
username,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style>
|
|
.layout .logo {
|
|
height: 32px;
|
|
margin: 16px;
|
|
line-height: 32px;
|
|
color: #fff;
|
|
text-align: center;
|
|
letter-spacing: 2px;
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.layout {
|
|
height: 100vh;
|
|
}
|
|
|
|
.left-menu {
|
|
overflow-y: scroll;
|
|
height: 100vh;
|
|
|
|
|
|
}
|
|
|
|
.site-layout .site-layout-background {
|
|
background: #fff;
|
|
}
|
|
|
|
[data-theme='dark'] .site-layout .site-layout-background {
|
|
background: #141414;
|
|
}
|
|
|
|
.headers {
|
|
display: flex;
|
|
justify-content: right;
|
|
}
|
|
|
|
.down {
|
|
margin-right: 45px;
|
|
font-size: 15px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 16px;
|
|
background-color: rgba(0, 9, 38, 0.69);
|
|
}
|
|
|
|
/*定义滚动条轨道内阴影+圆角*/
|
|
::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
background-color: rgba(17, 16, 16, 1);
|
|
}
|
|
|
|
/*定义滑块内阴影+圆角*/
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
|
background-color: #42EBFF;
|
|
}
|
|
</style> |