gitadmin/wms-elevue
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

服务监控

Browse Source
This commit is contained in:
陈红丽 2024-08-05 11:12:46 +08:00
parent 3ee85454a6
commit 4d8ede82b7
5 changed files with 193 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/api/monitor/caches.ts Normal file
View File

@ -0,0 +1,31 @@
import { http } from '@/utils/http/axios';
/**
* @description: 缓存名称列表
*/
export function getCacheNames(params?) {
return http.request({
url: '/cache/getNames',
method: 'GET',
params,
});
}
/**
* @description: 缓存key列表
*/
export function getCacheKeys(cacheName) {
return http.request({
url: '/cache/getKeys/'+cacheName,
method: 'get',
});
}
/**
* @description: 缓存value列表
*/
export function getCacheValue(params?) {
return http.request({
url: '/cache/getValue',
method: 'get',
params
});
}

11
src/api/monitor/server.ts Normal file
View File

@ -0,0 +1,11 @@
import { http } from '@/utils/http/axios';
/**
* @description: 获取服务监控信息
*/
export function getServerInfo() {
return http.request({
url: '/server/info',
method: 'GET'
});
}

2
src/utils/lib/echarts.ts
View File

@ -7,6 +7,7 @@ import {
MapChart,
PictorialBarChart,
RadarChart,
GaugeChart,
} from 'echarts/charts';
import {
@ -40,6 +41,7 @@ echarts.use([
PieChart,
MapChart,
RadarChart,
GaugeChart,
SVGRenderer,
PictorialBarChart,
RadarComponent,

6
src/views/monitor/caches/index.vue
View File

@ -10,7 +10,7 @@
<el-table-column show-overflow-tooltip align="center" label="备注" prop="message"></el-table-column>
<el-table-column align="center" label="操作" width="60" fixed="right">
<template #default="{ row}">
<el-icon :color="`var(--el-color-danger)`" size="16" @click="handleDelete(row)" style="cursor: pointer;"><Delete /></el-icon>
<el-icon :color="`var(--el-color-danger)`" size="16" @click.stop="handleDelete(row)" style="cursor: pointer;"><Delete /></el-icon>
</template>
</el-table-column>
</el-table>
@ -22,7 +22,7 @@
<el-table-column show-overflow-tooltip align="center" label="缓存键名" prop="cacheKey" min-width="100"></el-table-column>
<el-table-column align="center" label="操作" width="60" fixed="right">
<template #default="{ row}">
<el-icon :color="`var(--el-color-danger)`" size="16" @click="handleDelete(row)" style="cursor: pointer;"><Delete /></el-icon>
<el-icon :color="`var(--el-color-danger)`" size="16" @click.stop="handleDelete(row)" style="cursor: pointer;"><Delete /></el-icon>
</template>
</el-table-column>
</el-table>
@ -47,7 +47,7 @@
<script lang="ts" setup>
import { ref, onMounted,nextTick,reactive } from 'vue';
import { getCacheNames, getCacheKeys, getCacheValue } from '@/api/monitor/cache';
import { getCacheNames, getCacheKeys, getCacheValue } from '@/api/monitor/caches';
import { message, confirm } from "@/utils/auth";
const cacheNameTable = ref()

146
src/views/monitor/server/index.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<PageWrapper>
<div class="serverInfo-box">
<el-card :bordered="false" 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 :bordered="false" 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 :bordered="false" 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 :bordered="false" 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 :bordered="false" 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';
import { message, confirm } from "@/utils/auth";
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>