testcase
This commit is contained in:
parent
dc0c6393a7
commit
5b1b94a4d6
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<a-layout class="layout">
|
||||
<a-layout-sider v-model:collapsed="collapsed" collapsible class="left-menu">
|
||||
<div class="logo">{{collapsed?"系统":"自动化系统监控"}}</div>
|
||||
<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>
|
||||
<pie-chart-outlined/>
|
||||
<span>{{ collapsed ? "监控" : "系统监控" }}</span>
|
||||
</a-menu-item>
|
||||
<a-sub-menu>
|
||||
<template #title>
|
||||
<span>
|
||||
<user-outlined />
|
||||
<user-outlined/>
|
||||
<span>用户</span>
|
||||
</span>
|
||||
</template>
|
||||
|
|
@ -21,23 +21,23 @@
|
|||
<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 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-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">
|
||||
|
||||
|
|
@ -59,8 +59,8 @@ import {
|
|||
FileOutlined,
|
||||
DownOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import {useRouter,useRoute} from "vue-router";
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import {useRouter, useRoute} from "vue-router";
|
||||
import {defineComponent, ref} from 'vue';
|
||||
import {useStore} from "@/store";
|
||||
import {storeToRefs} from "pinia";
|
||||
|
||||
|
|
@ -76,17 +76,18 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
setup() {
|
||||
const collapsed = ref(false)
|
||||
const collapsed = ref(false)
|
||||
const selectedKeys = ref(['1'])
|
||||
const {username} = storeToRefs(useStore())
|
||||
let container = {
|
||||
padding: '24px', background: '#fff', minHeight: '100%'}
|
||||
padding: '24px', background: '#fff', minHeight: '100%'
|
||||
}
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const goTopage=(item)=>{
|
||||
router.push('/'+item.key).catch((err)=>err)
|
||||
const goTopage = (item) => {
|
||||
router.push('/' + item.key).catch((err) => err)
|
||||
}
|
||||
const logout =()=>{
|
||||
const logout = () => {
|
||||
//清除cookie
|
||||
window.sessionStorage.clear()
|
||||
router.push("/login")
|
||||
|
|
@ -112,29 +113,35 @@ export default defineComponent({
|
|||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
font-size: 17px;
|
||||
font-weight:bold;
|
||||
font-weight: bold;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.layout{
|
||||
|
||||
.layout {
|
||||
height: 100vh;
|
||||
}
|
||||
.left-menu{
|
||||
|
||||
.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{
|
||||
|
||||
.headers {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
.down{
|
||||
|
||||
.down {
|
||||
margin-right: 45px;
|
||||
font-size: 15px;
|
||||
font-weight: bolder;
|
||||
|
|
@ -142,20 +149,22 @@ export default defineComponent({
|
|||
|
||||
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
|
||||
::-webkit-scrollbar {
|
||||
width:8px;
|
||||
height:16px;
|
||||
background-color: rgba(0, 9, 38, 0.69);
|
||||
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-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;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
||||
background-color: #42EBFF;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,7 +8,7 @@ const useStore = defineStore("store",{
|
|||
},
|
||||
//触发动作
|
||||
actions:{
|
||||
setuser(username){
|
||||
setUser(username){
|
||||
this.username = username
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -28,8 +28,6 @@
|
|||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -74,7 +72,7 @@ export default {
|
|||
};
|
||||
const store = useStore()
|
||||
const Check = (username) => {
|
||||
store.setuser(username)
|
||||
store.setUser(username)
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -138,7 +136,8 @@ export default {
|
|||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.text{
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
margin-top: 25px;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
<template>
|
||||
<div class="charts" style="background: #fff; padding: 15px">
|
||||
<a-card title="cpu使用率" :bordered="false" style="width: 350px;height:350px" >
|
||||
<echarts class="chart" :option="option" />
|
||||
</a-card>
|
||||
<div class="charts" style="background: #fff; padding: 15px">
|
||||
<a-card title="cpu使用率" :bordered="false" style="width: 350px;height:350px">
|
||||
<echarts class="chart" :option="option"/>
|
||||
</a-card>
|
||||
|
||||
<a-card title="memory使用率" :bordered="false" style="width: 350px;height:350px" >
|
||||
<echarts class="chart" :option="memory" />
|
||||
</a-card>
|
||||
<a-card title="memory使用率" :bordered="false" style="width: 350px;height:350px">
|
||||
<echarts class="chart" :option="memory"/>
|
||||
</a-card>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue";
|
||||
const option = ref( {
|
||||
|
||||
const option = ref({
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
|
|
@ -36,7 +37,7 @@ const option = ref( {
|
|||
]
|
||||
})
|
||||
|
||||
const memory = ref( {
|
||||
const memory = ref({
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
|
|
@ -64,12 +65,13 @@ const memory = ref( {
|
|||
|
||||
|
||||
<style scoped>
|
||||
.chart{
|
||||
.chart {
|
||||
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
.charts{
|
||||
|
||||
.charts {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue