fe.ems.vue3/src/views/monitor/system/info.vue

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { PageContainer } from '@ant-design-vue/pro-layout';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { getSystemInfo } from '@/api/monitor/system';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';

/**加载状态 */
let loading = ref<boolean>(true);

/**磁盘信息表格字段列 */
let diskTableColumns: ColumnsType = [
  {
    title: '路径盘符',
    dataIndex: 'target',
    align: 'center',
  },
  {
    title: '总大小',
    dataIndex: 'size',
    align: 'center',
  },

  {
    title: '剩余大小',
    dataIndex: 'avail',
    align: 'center',
  },
  {
    title: '已使用大小',
    dataIndex: 'used',
    align: 'center',
  },
  {
    title: '空间使用率(%)',
    dataIndex: 'pcent',
    align: 'center',
  },
];

/**数据参数类型 */
type ServerType = {
  /**CPU */
  cpu: Record<string, string | number>;
  /**磁盘 */
  disk: Record<string, string>[];
  /**内存 */
  memory: Record<string, string | number>;
  /**网络 */
  network: Record<string, string>;
  /**项目 */
  project: Record<string, string>;
  /**系统 */
  system: Record<string, string | number>;
  /**时间 */
  time: Record<string, string | number>;
};

let server: ServerType = reactive({
  cpu: {},
  disk: [],
  memory: {},
  network: {},
  project: {},
  system: {},
  time: {},
});

onMounted(() => {
  getSystemInfo().then(res => {
    if (res.code === RESULT_CODE_SUCCESS && res.data) {
      // CPU信息
      let cpu = res.data.cpu;
      cpu.coreUsed = cpu.coreUsed.map((item: string) => item).join(' / ');
      server.cpu = cpu;
      // 磁盘信息
      server.disk = res.data.disk;
      // 内存信息
      server.memory = res.data.memory;
      // 网络信息
      server.network = res.data.network;
      // 项目信息
      server.project = res.data.project;
      // 系统信息
      server.system = res.data.system;
      // 时间信息
      server.time = res.data.time;
      // 加载状态
      loading.value = false;
    }
  });
});
</script>

<template>
  <PageContainer :loading="loading">
    <a-card
      title="系统信息"
      :bordered="false"
      :body-style="{ marginBottom: '24px', padding: 0 }"
    >
      <a-descriptions
        size="middle"
        layout="horizontal"
        :label-style="{ width: '140px' }"
        :column="{ lg: 2, md: 2, xs: 1 }"
        :bordered="true"
      >
        <a-descriptions-item label="运行平台">
          {{ server.system.platform }}
        </a-descriptions-item>
        <a-descriptions-item label="平台版本">
          {{ server.system.platformVersion }}
        </a-descriptions-item>
        <a-descriptions-item label="系统平台">
          {{ server.system.os }}
        </a-descriptions-item>
        <a-descriptions-item label="系统架构">
          {{ server.system.arch }}
        </a-descriptions-item>
        <a-descriptions-item label="主机名称">
          {{ server.system.hostname }}
        </a-descriptions-item> 
        <a-descriptions-item label="运行时长">
          {{ server.system.bootTime }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card
      title="CPU信息"
      :bordered="false"
      :body-style="{ marginBottom: '24px', padding: 0 }"
    >
      <a-descriptions
        size="middle"
        layout="horizontal"
        :label-style="{ width: '140px' }"
        :column="1"
        :bordered="true"
      >
        <a-descriptions-item label="型号">
          {{ server.cpu.model }}
        </a-descriptions-item>
        <a-descriptions-item label="速率Hz">
          {{ server.cpu.speed }}
        </a-descriptions-item>
        <a-descriptions-item label="核心数">
          {{ server.cpu.core }}
        </a-descriptions-item>
        <a-descriptions-item label="使用率(%)">
          {{ server.cpu.coreUsed }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card
      title="内存信息"
      :bordered="false"
      :body-style="{ marginBottom: '24px', padding: 0 }"
    >
      <a-descriptions
        size="middle"
        layout="horizontal"
        :label-style="{ width: '140px' }"
        :column="{ lg: 2, md: 2, xs: 1 }"
        :bordered="true"
      >
        <a-descriptions-item label="总内存">
          {{ server.memory.totalmem }}
        </a-descriptions-item>
        <a-descriptions-item label="剩余内存">
          {{ server.memory.freemem }}
        </a-descriptions-item>
        <a-descriptions-item label="使用率(%)">
          {{ server.memory.usage }}
        </a-descriptions-item>
        <a-descriptions-item label="进程总内存">
          {{ server.memory.rss }}
        </a-descriptions-item>
        <a-descriptions-item label="堆的总大小">
          {{ server.memory.heapTotal }}
        </a-descriptions-item>
        <a-descriptions-item label="堆已分配">
          {{ server.memory.heapUsed }}
        </a-descriptions-item>
        <a-descriptions-item label="链接库占用">
          {{ server.memory.external }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card
      title="时间信息"
      :bordered="false"
      :body-style="{ marginBottom: '24px', padding: 0 }"
    >
      <a-descriptions
        size="middle"
        layout="horizontal"
        :label-style="{ width: '140px' }"
        :column="{ lg: 3, md: 3, xs: 1 }"
        :bordered="true"
      >
        <a-descriptions-item label="时间">
          {{ server.time.current }}
        </a-descriptions-item>
        <a-descriptions-item label="时区">
          {{ server.time.timezone }}
        </a-descriptions-item>
        <a-descriptions-item label="时区名称">
          {{ server.time.timezoneName }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card
      title="网络信息"
      :bordered="false"
      :body-style="{ marginBottom: '24px', padding: 0 }"
    >
      <a-descriptions
        size="middle"
        layout="horizontal"
        :label-style="{ width: '140px' }"
        :column="1"
        :bordered="true"
      >
        <a-descriptions-item
          :label="name"
          v-for="(value, name) in server.network"
          :key="name"
        >
          {{ value }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card title="磁盘信息" :bordered="false" :body-style="{ padding: 0 }">
      <a-table
        class="disk"
        row-key="target"
        size="middle"
        :columns="diskTableColumns"
        :data-source="server.disk"
        :pagination="false"
        :scroll="{ x: true }"
      >
      </a-table>
    </a-card>
  </PageContainer>
</template>

<style lang="less" scoped></style>