106 lines
3.8 KiB
Plaintext
106 lines
3.8 KiB
Plaintext
<template>
|
|
<PageWrapper>
|
|
<div class="serverInfo-box">
|
|
<a-card title="CPU">
|
|
<a-table :dataSource="formData.cpuInfo" :columns="cpuColumns" :pagination="{hideOnSinglePage:true}"/>
|
|
</a-card>
|
|
<a-card title="内存">
|
|
<a-table :dataSource="formData.memoryInfo" :columns="memoryColumns" :pagination="{hideOnSinglePage:true}"/>
|
|
</a-card>
|
|
</div>
|
|
<a-card title="服务器信息">
|
|
<a-descriptions :column="2" bordered :labelStyle="{width:'150px'}">
|
|
<a-descriptions-item label="服务器名称">{{formData.systemInfo.computerName}}</a-descriptions-item>
|
|
<a-descriptions-item label="操作系统">{{formData.systemInfo.osName}}</a-descriptions-item>
|
|
<a-descriptions-item label="服务器IP">{{formData.systemInfo.computerIp}}</a-descriptions-item>
|
|
<a-descriptions-item label="系统架构">{{formData.systemInfo.osArch}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-card>
|
|
<a-card title="Java虚拟机信息" style="margin:20px 0;">
|
|
<a-descriptions :column="2" bordered :labelStyle="{width:'150px'}">
|
|
<a-descriptions-item label="Java名称">{{formData.jvmInfo.name}}</a-descriptions-item>
|
|
<a-descriptions-item label="Java版本">{{formData.jvmInfo.version}}</a-descriptions-item>
|
|
<a-descriptions-item label="启动时间">{{formData.jvmInfo.startTime}}</a-descriptions-item>
|
|
<a-descriptions-item label="运行时长">{{formData.jvmInfo.runTime}}</a-descriptions-item>
|
|
<a-descriptions-item label="项目路径" :span="3">{{formData.jvmInfo.home}}</a-descriptions-item>
|
|
<a-descriptions-item label="运行参数" :span="3">{{formData.jvmInfo.inputArgs}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-card>
|
|
<a-card title="磁盘状态">
|
|
<a-table :dataSource="formData.diskInfo" :columns="diskColumns" :pagination="{hideOnSinglePage:true}"/>
|
|
</a-card>
|
|
</PageWrapper>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted,ref,reactive } from 'vue';
|
|
import { getServerInfo} from '@/api/monitor/server';
|
|
import { cpuColumns } from './cpuColumns';
|
|
import { memoryColumns } from './memoryColumns';
|
|
import { diskColumns } from './diskColumns';
|
|
const tabledata = ref([{}])
|
|
const formData = reactive({
|
|
cpuInfo:[],
|
|
memoryInfo:[],
|
|
systemInfo:{},
|
|
jvmInfo:{},
|
|
diskInfo:[]
|
|
})
|
|
const loadServerInfo = async () => {
|
|
const result = await getServerInfo();
|
|
formData.cpuInfo.push({
|
|
name:'核心数',
|
|
value:result.cpuInfo.cpuNum
|
|
},{
|
|
name:'用户使用率',
|
|
value:result.cpuInfo.used+'%'
|
|
},{
|
|
name:'系统使用率',
|
|
value:result.cpuInfo.sys+'%'
|
|
},{
|
|
name:'当前空闲率',
|
|
value:result.cpuInfo.free+'%'
|
|
})
|
|
formData.memoryInfo.push({
|
|
name:'总内存',
|
|
value1:result.memoryInfo.total+'G',
|
|
value2:result.jvmInfo.total+'M'
|
|
},{
|
|
name:'已用内存',
|
|
value1:result.memoryInfo.used+'G',
|
|
value2:result.jvmInfo.used+'M'
|
|
},{
|
|
name:'剩余内存',
|
|
value1:result.memoryInfo.free+'G',
|
|
value2:result.jvmInfo.free+'M'
|
|
},{
|
|
name:'使用率',
|
|
value1:result.memoryInfo.usage+'%',
|
|
value2:result.jvmInfo.usage+'%',
|
|
})
|
|
formData.systemInfo = result.systemInfo
|
|
formData.jvmInfo = result.jvmInfo
|
|
formData.diskInfo = result.diskInfo
|
|
};
|
|
onMounted(() => {
|
|
loadServerInfo()
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.serverInfo-box {
|
|
display: flex;
|
|
margin-bottom:20px;
|
|
>.ant-card {
|
|
flex: 1;
|
|
&:nth-child(1) {
|
|
margin-right:20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style> |