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="服务器IP" prop="hostIp">
        <el-input
          v-model="queryParams.hostIp"
          placeholder="请输入服务器IP"
          clearable
          @keyup.enter="handleQuery"
          class="!w-120px"
      <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-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);
})