From be664d7c011a473002c1b413bac8303f7905d160 Mon Sep 17 00:00:00 2001
From: dongyukun <1208714201@qq.com>
Date: 星期四, 29 五月 2025 14:26:36 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/infra/monitor/components/MonitorMem.vue | 138 ++++++++++++++++++++++++++++++---------------
1 files changed, 92 insertions(+), 46 deletions(-)
diff --git a/src/views/infra/monitor/components/MonitorMem.vue b/src/views/infra/monitor/components/MonitorMem.vue
index 768af0e..efd95cd 100644
--- a/src/views/infra/monitor/components/MonitorMem.vue
+++ b/src/views/infra/monitor/components/MonitorMem.vue
@@ -8,32 +8,35 @@
:inline="true"
label-width="68px"
>
-<!-- <el-form-item label="主机名称" prop="hostName">-->
-<!-- <el-input-->
-<!-- v-model="queryParams.hostName"-->
-<!-- placeholder="请输入主机名称"-->
-<!-- clearable-->
-<!-- @keyup.enter="handleQuery"-->
-<!-- class="!w-120px"-->
-<!-- />-->
-<!-- </el-form-item>-->
+ <el-form-item label="主机名称" prop="hostName">
+ <el-select v-model="queryParams.hostName" placeholder="请选择" class="!w-180px" @change="getDataList">
+ <el-option
+ v-for="(host, index) in hosts"
+ :key="index"
+ :label="host"
+ :value="host"
+ />
+ </el-select>
+ </el-form-item>
<el-form-item label="服务器IP" prop="hostIp">
- <el-input
- v-model="queryParams.hostIp"
- placeholder="请输入服务器IP"
- clearable
- @keyup.enter="handleQuery"
- class="!w-120px"
- />
+ <el-select v-model="queryParams.hostIp" clearable placeholder="请选择" class="!w-160px" @change="getDataList">
+ <el-option
+ v-for="(ip, index) in ips"
+ :key="index"
+ :label="ip"
+ :value="ip"
+ />
+ </el-select>
</el-form-item>
<el-form-item label="服务名" prop="serverName">
- <el-input
- v-model="queryParams.serverName"
- placeholder="请输入服务名"
- clearable
- @keyup.enter="handleQuery"
- class="!w-120px"
- />
+ <el-select v-model="queryParams.serverName" placeholder="请选择" class="!w-160px" @change="getDataList">
+ <el-option
+ v-for="(server, index) in servers"
+ :key="index"
+ :label="server"
+ :value="server"
+ />
+ </el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
@@ -112,13 +115,13 @@
<!-- 列表 -->
<ContentWrap v-if="showType == 'data'">
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
- <el-table-column label="主机名称" align="center" prop="hostName"/>
- <el-table-column label="服务器ip" align="center" prop="hostIp"/>
+ <el-table-column label="主机名称" align="center" prop="hostName" width="160"/>
+ <el-table-column label="服务器ip" align="center" prop="hostIp" width="150"/>
<el-table-column label="服务名" align="center" prop="serverName" width="120"/>
<el-table-column label="总内存" align="center" prop="physicalTotal"/>
<el-table-column label="已用内存" align="center" prop="physicalUsed"/>
<el-table-column label="空闲内存" align="center" prop="physicalFree"/>
- <el-table-column label="内存使用率" align="center" prop="physicalUsage" width="100"/>
+ <el-table-column label="内存使用率" align="center" prop="physicalUsage"/>
<el-table-column label="JVM占用内存" align="center" prop="runtimeTotal"/>
<el-table-column label="JVM最大内存" align="center" prop="runtimeMax"/>
<el-table-column label="JVM可用内存" align="center" prop="runtimeUsed"/>
@@ -131,7 +134,7 @@
:formatter="dateFormatter"
width="180px"
/>
- <el-table-column label="操作" align="center">
+ <el-table-column label="操作" align="center" width="120">
<template #default="scope">
<el-button
link
@@ -182,6 +185,9 @@
const loading = ref(true) // 列表的加载中
const list = ref<MonitorMemVO[]>([]) // 列表的数据
+const hosts = ref<String[]>([]) // 主机列表
+const ips = ref<String[]>([]) // ip列表
+const servers = ref<String[]>([]) // 服务列表
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
@@ -217,19 +223,65 @@
}
}
+/** 查询所有主机名 */
+const getAllHost = async () => {
+ const data = await MonitorMemApi.getAllHost()
+ // 确保 data 存在且非空后，设置默认选中第一个
+ if (data.length > 0) {
+ queryParams.hostName = data[0];
+ }
+ hosts.value = data
+}
+
+/** 查询所有ip */
+const getAllIp = async () => {
+ const data = await MonitorMemApi.getAllIp()
+ ips.value = data
+}
+
+/** 查询所有服务名 */
+const getAllServer = async () => {
+ const data = await MonitorMemApi.getAllServer()
+ servers.value = data
+}
+
+/** 封装接口调用 */
+const getDataList = async () => {
+ if(showType.value == 'data') {
+ await getList()
+ } else {
+ dealDate()
+ await getMonitorMemDataList()
+ }
+}
+
+/** 处理查询时间段 */
+const dealDate = async () => {
+ const currentDate = new Date();
+ const previousDate = new Date(currentDate);
+ previousDate.setDate(currentDate.getDate() - 1);
+ queryParams.createTime = []
+ queryParams.createTime[0] = formatDate(previousDate, 'YYYY-MM-DD HH:mm:ss');
+ queryParams.createTime[1] = formatDate(currentDate, 'YYYY-MM-DD HH:mm:ss');
+}
+
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
- if(showType.value == 'data') {
- getList()
- } else {
- getMonitorMemDataList()
- }
+ getDataList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
+ if (hosts.value.length > 0) {
+ queryParams.hostName = hosts.value[0];
+ }
+ if(showType.value != 'data') {
+ if (servers.value.length > 0) {
+ queryParams.serverName = servers.value[0];
+ }
+ }
handleQuery()
}
@@ -432,11 +484,10 @@
/** 切换展示方式 */
const switchShow = (type: String) => {
showType.value = type
- if(showType.value == 'data') {
- getList()
- } else {
- getMonitorMemDataList()
+ if (queryParams.serverName == null && servers.value.length > 0) {
+ queryParams.serverName = servers.value[0];
}
+ getDataList()
}
/** 导出按钮操作 */
@@ -458,17 +509,12 @@
/** 初始化 **/
onMounted(() => {
showType.value = 'data';
- const currentDate = new Date();
- const previousDate = new Date(currentDate);
- previousDate.setDate(currentDate.getDate() - 1);
- queryParams.createTime[0] = formatDate(previousDate, 'YYYY-MM-DD HH:mm:ss');
- queryParams.createTime[1] = formatDate(currentDate, 'YYYY-MM-DD HH:mm:ss');
+ getAllHost();
+ getAllIp();
+ getAllServer();
+ getDataList()
intervalId = setInterval(() => {
- if(showType.value == 'data') {
- getList()
- } else {
- getMonitorMemDataList()
- }
+ getDataList()
}, 60000);
})
--
Gitblit v1.9.3