148 lines
4.1 KiB
Plaintext
148 lines
4.1 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 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>
|