This commit is contained in:
shilixia 2021-08-11 15:20:42 +08:00
parent ffc0a36c63
commit a976780c23
3 changed files with 276 additions and 0 deletions

View File

@ -0,0 +1,25 @@
import { getToken } from "@/utils/auth"
import request from '@/utils/request'
//查看日志列表
export function getlogList(query) {
return request({
url: '/monitor/log/',
method: 'get'
})
}
//查看日志详情
export function getLog(name) {
return request({
url: `/monitor/log/${name}/`,
method: 'get'
})
}
//获取服务器状态信息
export function getServerList() {
return request({
url: '/monitor/server/',
method: 'get'
})
}

View File

@ -129,6 +129,21 @@ export const asyncRoutes = [
}
]
},
{
path: '/monitor',
component: Layout,
redirect: '/monitor/service',
name: 'Monitor',
meta: { title: '系统监控', icon: 'example', perms: ['monitor_set'] },
children: [
{
path: 'service',
name: 'service',
component: () => import('@/views/monitor/service'),
meta: { title: '服务监控', icon: 'example', perms: ['service_manage'] }
}
]
},
{
path: '/develop',
component: Layout,

View File

@ -0,0 +1,236 @@
<template>
<div class="app-container">
<div class="box-card">
<el-row :gutter="12">
<el-col :span="8">
<el-card shadow="always">
<div slot="header" class="clearfix">
<span>CPU</span>
</div>
<el-row class="row">
<el-col :span="8">
属性
</el-col>
<el-col :span="8">
</el-col>
</el-row>
<el-row class="rowlist">
<el-col :span="8">
逻辑核心数
</el-col>
<el-col :span="8">
{{cpuData.count}}
</el-col>
</el-row>
<el-row class="rowlist">
<el-col :span="8">
物理核心数
</el-col>
<el-col :span="8">
{{cpuData.lcount}}
</el-col>
</el-row>
<el-row class="rowlist">
<el-col :span="8">
当前使用率
</el-col>
<el-col :span="8">
{{cpuData.percent}}%
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="always">
<div slot="header" class="clearfix">
<span>内存</span>
</div>
<el-row class="row">
<el-col :span="8">
属性
</el-col>
<el-col :span="8">
</el-col>
</el-row>
<el-row class="rowlist">
<el-col :span="8">
使用率
</el-col>
<el-col :span="8">
{{memoryData.percent}}%
</el-col>
</el-row>
<el-row class="rowlist">
<el-col :span="8">
总内存
</el-col>
<el-col :span="8">
{{memoryData.total}}
</el-col>
</el-row>
<el-row class="rowlist">
<el-col :span="8">
已用内存
</el-col>
<el-col :span="8">
{{memoryData.used}}
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="always">
<div slot="header" class="clearfix">
<span>硬盘</span>
</div>
<el-row class="row">
<el-col :span="8">
属性
</el-col>
<el-col :span="8">
</el-col>
</el-row>
<el-row class="rowlist">
<el-col :span="8">
已用百分比
</el-col>
<el-col :span="8">
{{diskData.percent}}%
</el-col>
</el-row>
<el-row class="rowlist">
<el-col :span="8">
总大小
</el-col>
<el-col :span="8">
{{diskData.total}}
</el-col>
</el-row>
<el-row class="rowlist">
<el-col :span="8">
已用大小
</el-col>
<el-col :span="8">
{{diskData.used}}
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
</div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>日志列表</span>
</div>
<el-table
:data="tableData"
style="width: 100%;height:400px">
<el-table-column
prop="name"
label="日志名称"
>
</el-table-column>
<el-table-column
prop="size"
label="日志大小"
>
</el-table-column>
<el-table-column
prop="filepath"
label="查看详情">
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
import {getlogList,getLog,getServerList} from "@/api/moritor";
const defaultCMA = {
}
export default {
components: { },
data() {
return {
tableData:[],
cpuData:[],
diskData:[],
memoryData:[],
};
},
computed: {},
watch: {},
created() {
this.getlogList();
this.getServerList();
},
methods: {
getlogList() {
getlogList().then((response) => {
if(response.data) {
this.tableData=response.data;
}
});
},
getServerList() {
getServerList().then((response) => {
if (response.data) {
this.cpuData = response.data.cpu;
this.diskData = response.data.disk;
this.memoryData = response.data.memory;
}
});
},
},
};
</script>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 90%;
margin:0 auto;
margin-top:30px;
}
.row{border-bottom: 1px solid #dfe6ec;color: #909399;font-weight: 500;padding: 10px;}
.rowlist{
border-bottom: 1px solid #dfe6ec;color:#606266;font-weight: 500;padding: 10px;
}
</style>