优化布局
This commit is contained in:
parent
2fadecbc33
commit
e0fe4016af
|
|
@ -12,3 +12,4 @@ html,body,#app {
|
|||
margin-top: 15px;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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 theme="dark" v-model:selectedKeys="selectedKeys" mode="inline" @click="goPage">
|
||||
<a-menu-item key="monit">
|
||||
<pie-chart-outlined/>
|
||||
<span>{{ collapsed ? "监控" : "系统监控" }}</span>
|
||||
|
|
@ -83,7 +83,7 @@ export default defineComponent({
|
|||
}
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const goTopage = (item) => {
|
||||
const goPage = (item) => {
|
||||
router.push('/' + item.key).catch((err) => err)
|
||||
}
|
||||
const logout = () => {
|
||||
|
|
@ -95,7 +95,7 @@ export default defineComponent({
|
|||
collapsed,
|
||||
selectedKeys,
|
||||
container,
|
||||
goTopage,
|
||||
goPage,
|
||||
route,
|
||||
logout,
|
||||
username,
|
||||
|
|
@ -148,22 +148,21 @@ export default defineComponent({
|
|||
|
||||
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background-color: rgba(0, 9, 38, 0.69);
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
/*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;
|
||||
border-radius: 5px;
|
||||
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;
|
||||
}
|
||||
/*::-webkit-scrollbar-thumb {*/
|
||||
/* border-radius: 10px;*/
|
||||
/* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);*/
|
||||
/*}*/
|
||||
</style>
|
||||
|
|
@ -1,22 +1,30 @@
|
|||
<template>
|
||||
<div class="charts" style="background: #fff; padding: 15px">
|
||||
|
||||
<a-card title="系统信息" :bordered="false">
|
||||
<a-row justify="space-between" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
|
||||
<a-col :span="6">
|
||||
<a-card title="系统信息" :bordered="false" class="sys">
|
||||
<p>在线用户：{{ sysparams.name }}</p>
|
||||
<p>用户数量：{{ sysparams.count }}</p>
|
||||
<p>系统当前时间：{{ sysparams.current_time }}</p>
|
||||
<p>系统开机时间：{{ sysparams.start_time }}</p>
|
||||
</a-card>
|
||||
<a-card title="cpu使用率" :bordered="false">
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-card title="cpu使用率" :bordered="false" class="cpu">
|
||||
<echarts class="chart" :option="option"/>
|
||||
</a-card>
|
||||
|
||||
<a-card title="memory使用率" :bordered="false">
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-card title="内存使用率" :bordered="false" class="memory">
|
||||
<echarts class="chart" :option="memory"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-card title="磁盘分区" :bordered="false" class="disk">
|
||||
<a-table :columns="columns" :data-source="data" size="middle" :pagination="false"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
|
||||
</div>
|
||||
</a-row>
|
||||
|
||||
</template>
|
||||
|
||||
|
|
@ -76,6 +84,37 @@ const memory = ref({
|
|||
]
|
||||
})
|
||||
|
||||
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
}, {
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
}, {
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
},{
|
||||
|
||||
}
|
||||
];
|
||||
const data = [{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
}, {
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
}, {
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
}];
|
||||
|
||||
onMounted(()=>{
|
||||
QuerySys()
|
||||
QueryCpu()
|
||||
|
|
@ -118,15 +157,18 @@ const QueryCpu =()=>{
|
|||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
.a-card{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
.echarts{
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.charts {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap
|
||||
justify-content: space-around;
|
||||
justify-items: center;
|
||||
height: 85%;
|
||||
width: 100%;
|
||||
background-color: #42EBFF;
|
||||
overflow-x:scroll;
|
||||
}
|
||||
p{
|
||||
display: flex;
|
||||
|
|
@ -134,4 +176,29 @@ p{
|
|||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#components-table-demo-size h4 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.disk{
|
||||
background-color: lightblue;
|
||||
border: 1px;
|
||||
height:100%
|
||||
}
|
||||
.memory{
|
||||
background-color: aliceblue;
|
||||
border: 1px;
|
||||
height:100%;
|
||||
}
|
||||
.sys{
|
||||
background-color: mintcream;
|
||||
border: 1px solid #f5f5f5;
|
||||
height:100%
|
||||
|
||||
}
|
||||
.cpu{
|
||||
background-color: honeydew;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue