145 lines
6.5 KiB
Vue
145 lines
6.5 KiB
Vue
<template>
|
|
<PageWrapper>
|
|
<div class="serverInfo-box">
|
|
<el-card header="CPU">
|
|
<el-table empty-text="暂无数据" :data="formData.cpuInfo">
|
|
<el-table-column show-overflow-tooltip align="center" width="250" label="属性" prop="name"></el-table-column>
|
|
<el-table-column show-overflow-tooltip align="center" label="值" prop="value"></el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
<el-card header="内存">
|
|
<el-table empty-text="暂无数据" :data="formData.memoryInfo">
|
|
<el-table-column show-overflow-tooltip align="center" label="属性" prop="name"></el-table-column>
|
|
<el-table-column show-overflow-tooltip align="center" label="内存" prop="value1"></el-table-column>
|
|
<el-table-column show-overflow-tooltip align="center" label="JVM" prop="value2"></el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</div>
|
|
<el-card header="服务器信息">
|
|
<el-table :data="tabledata" :show-header="false">
|
|
<el-table-column width="250" align="center">服务器名称</el-table-column>
|
|
<el-table-column>{{formData.systemInfo.computerName}}</el-table-column>
|
|
<el-table-column width="150" align="center">操作系统</el-table-column>
|
|
<el-table-column align="center">{{formData.systemInfo.osName}}</el-table-column>
|
|
</el-table>
|
|
<el-table :data="tabledata" :show-header="false">
|
|
<el-table-column width="250" align="center">服务器IP</el-table-column>
|
|
<el-table-column>{{formData.systemInfo.computerIp}}</el-table-column>
|
|
<el-table-column width="150" align="center">系统架构</el-table-column>
|
|
<el-table-column align="center">{{formData.systemInfo.osArch}}</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
<el-card header="Java虚拟机信息" style="margin:20px 0;">
|
|
<el-table :data="tabledata" :show-header="false">
|
|
<el-table-column width="250" align="center">Java名称</el-table-column>
|
|
<el-table-column>{{formData.jvmInfo.name}}</el-table-column>
|
|
<el-table-column width="150" align="center">Java版本</el-table-column>
|
|
<el-table-column align="center">{{formData.jvmInfo.version}}</el-table-column>
|
|
</el-table>
|
|
<el-table :data="tabledata" :show-header="false">
|
|
<el-table-column width="250" align="center">启动时间</el-table-column>
|
|
<el-table-column>{{formData.jvmInfo.startTime}}</el-table-column>
|
|
<el-table-column width="150" align="center">运行时长</el-table-column>
|
|
<el-table-column align="center">{{formData.jvmInfo.runTime}}</el-table-column>
|
|
</el-table>
|
|
<!-- <el-table :data="tabledata" :show-header="false">
|
|
<el-table-column width="150" align="center">安装路径</el-table-column>
|
|
<el-table-column align="center">{{formData.jvmInfo.computerIp}}</el-table-column>
|
|
</el-table> -->
|
|
<el-table :data="tabledata" :show-header="false">
|
|
<el-table-column width="250" align="center">项目路径</el-table-column>
|
|
<el-table-column>{{formData.jvmInfo.home}}</el-table-column>
|
|
</el-table>
|
|
<el-table :data="tabledata" :show-header="false">
|
|
<el-table-column width="250" align="center">运行参数</el-table-column>
|
|
<el-table-column>{{formData.jvmInfo.inputArgs}}</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
<el-card header="磁盘状态">
|
|
<el-table empty-text="暂无数据" :data="formData.diskInfo">
|
|
<el-table-column show-overflow-tooltip align="center" label="盘符路径" prop="dirName"></el-table-column>
|
|
<el-table-column show-overflow-tooltip align="center" label="文件系统" prop="sysTypeName"></el-table-column>
|
|
<el-table-column show-overflow-tooltip align="center" label="盘符类型" prop="typeName"></el-table-column>
|
|
<el-table-column show-overflow-tooltip align="center" label="总大小" prop="total"></el-table-column>
|
|
<el-table-column show-overflow-tooltip align="center" label="可用大小" prop="free"></el-table-column>
|
|
<el-table-column show-overflow-tooltip align="center" label="已用大小" prop="used"></el-table-column>
|
|
<el-table-column show-overflow-tooltip align="center" label="已用百分比" prop="usage">
|
|
<template #default="{ row}">
|
|
<span>{{ row.usage+'%' }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</PageWrapper>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted,ref,reactive } from 'vue';
|
|
import { getServerInfo} from '@/api/monitor/server';
|
|
|
|
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="scss" scoped>
|
|
.serverInfo-box {
|
|
display: flex;
|
|
margin-bottom:20px;
|
|
>.el-card {
|
|
flex: 1;
|
|
&:nth-child(1) {
|
|
margin-right:20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style> |