服务监控

src/api/monitor/caches.ts

@@ -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
+  });
+}

src/api/monitor/server.ts

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

src/utils/lib/echarts.ts

@@ -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,

src/views/monitor/caches/index.vue

@@ -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()

src/views/monitor/server/index.vue

@@ -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>