性能监控

src/views/monitor/server/cpuColumns.ts

@@ -0,0 +1,12 @@
+import { h } from 'vue';
+
+export const cpuColumns = [
+  {
+    title: '属性',
+    key: 'name',
+  },
+  {
+    title: '值',
+    key: 'value',
+  },
+];

src/views/monitor/server/diskColumns.ts

@@ -0,0 +1,35 @@
+import { h } from 'vue';
+
+export const diskColumns = [
+  {
+    title: '盘符路径',
+    key: 'dirName',
+  },
+  {
+    title: '文件系统',
+    key: 'sysTypeName',
+  },
+  {
+    title: '盘符类型',
+    key: 'typeName',
+  },
+  {
+    title: '总大小',
+    key: 'total',
+  },
+  {
+    title: '可用大小',
+    key: 'free',
+  },
+  {
+    title: '已用大小',
+    key: 'used',
+  },
+  {
+    title: '已用百分比',
+    key: 'usage',
+    render(record) {
+      return h('span', record.usage + '%');
+    },
+  },
+];

src/views/monitor/server/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <PageWrapper>
+    <div class="serverInfo-box">
+      <n-card title="CPU">
+        <n-data-table
+          :data="formData.cpuInfo"
+          :columns="cpuColumns"
+          :paginate-single-page="false"
+        />
+      </n-card>
+      <n-card title="内存">
+        <n-data-table
+          :data="formData.memoryInfo"
+          :columns="memoryColumns"
+          :paginate-single-page="false"
+        />
+      </n-card>
+    </div>
+    <n-card title="服务器信息">
+      <n-descriptions :column="2" label-placement="left" bordered :labelStyle="{ width: '150px' }">
+        <n-descriptions-item label="服务器名称">{{
+          formData.systemInfo.computerName
+        }}</n-descriptions-item>
+        <n-descriptions-item label="操作系统">{{ formData.systemInfo.osName }}</n-descriptions-item>
+        <n-descriptions-item label="服务器IP">{{
+          formData.systemInfo.computerIp
+        }}</n-descriptions-item>
+        <n-descriptions-item label="系统架构">{{ formData.systemInfo.osArch }}</n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+    <n-card title="Java虚拟机信息" style="margin: 20px 0">
+      <n-descriptions :column="2" label-placement="left" bordered :labelStyle="{ width: '150px' }">
+        <n-descriptions-item label="Java名称">{{ formData.jvmInfo.name }}</n-descriptions-item>
+        <n-descriptions-item label="Java版本">{{ formData.jvmInfo.version }}</n-descriptions-item>
+        <n-descriptions-item label="启动时间">{{ formData.jvmInfo.startTime }}</n-descriptions-item>
+        <n-descriptions-item label="运行时长">{{ formData.jvmInfo.runTime }}</n-descriptions-item>
+        <n-descriptions-item label="项目路径" :span="3">{{
+          formData.jvmInfo.home
+        }}</n-descriptions-item>
+        <n-descriptions-item label="运行参数" :span="3">{{
+          formData.jvmInfo.inputArgs
+        }}</n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+    <n-card title="磁盘状态">
+      <n-data-table
+        :data="formData.diskInfo"
+        :columns="diskColumns"
+        :paginate-single-page="false"
+      />
+    </n-card>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, reactive } from 'vue';
+  import { getServerInfo } from '@/api/monitor/server';
+  import { cpuColumns } from './cpuColumns';
+  import { memoryColumns } from './memoryColumns';
+  import { diskColumns } from './diskColumns';
+
+  /**
+   * 定义表单数据
+   */
+  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="less" scoped>
+  .serverInfo-box {
+    display: flex;
+    margin-bottom: 20px;
+    > .ant-card {
+      flex: 1;
+      &:nth-child(1) {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

src/views/monitor/server/memoryColumns.ts

@@ -0,0 +1,16 @@
+import { h } from 'vue';
+
+export const memoryColumns = [
+  {
+    title: '属性',
+    key: 'name',
+  },
+  {
+    title: '内存',
+    key: 'value1',
+  },
+  {
+    title: 'JVM',
+    key: 'value2',
+  },
+];