mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-26 06:19:04 +00:00
发布v2.0.0分支
This commit is contained in:
zhangtao
+300
-245
@@ -1,196 +1,248 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<a-tabs>
|
||||
<el-tabs type="border-card">
|
||||
<!-- 监控信息 Tab -->
|
||||
<a-tab-pane key="monitor" tab="监控信息">
|
||||
<a-row :gutter="16">
|
||||
<el-tab-pane class="monitor" label="监控信息">
|
||||
<el-row :gutter="16">
|
||||
<!-- 基本信息 -->
|
||||
<a-col :span="24">
|
||||
<a-card>
|
||||
<template #title>
|
||||
<MonitorOutlined class="icon" />
|
||||
<span class="title">Redis监控信息</span>
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
<span>Redis监控信息</span>
|
||||
<el-tooltip content="展示Redis监控信息详情">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<a-table :dataSource="[cache.info || {}]" :pagination="false" :bordered="true">
|
||||
<a-table-column key="redis_version" title="Redis版本" :customRender="({record}) => record?.redis_version || '-'" />
|
||||
<a-table-column key="redis_mode" title="运行模式" :customRender="({record}) => record?.redis_mode === 'standalone' ? '单机' : '集群'" />
|
||||
<a-table-column key="tcp_port" title="端口" :customRender="({record}) => record?.tcp_port || '-'" />
|
||||
<a-table-column key="connected_clients" title="客户端数" :customRender="({record}) => record?.connected_clients || 0" />
|
||||
<a-table-column key="uptime_in_days" title="运行时间(天)" :customRender="({record}) => record?.uptime_in_days || 0" />
|
||||
<a-table-column key="used_memory_human" title="使用内存" :customRender="({record}) => record?.used_memory_human || '-'" />
|
||||
<a-table-column key="used_cpu" title="使用CPU" :customRender="({record}) => record?.used_cpu_user_children ? parseFloat(record.used_cpu_user_children).toFixed(2) : '-'" />
|
||||
<a-table-column key="maxmemory_human" title="内存配置" :customRender="({record}) => record?.maxmemory_human || '-'" />
|
||||
<a-table-column key="aof_enabled" title="AOF是否开启" :customRender="({record}) => record?.aof_enabled === '0' ? '否' : '是'" />
|
||||
<a-table-column key="rdb_status" title="RDB是否成功" :customRender="({record}) => record?.rdb_last_bgsave_status || '-'" />
|
||||
<a-table-column key="dbSize" title="Key数量" :customRender="() => cache.db_size || 0" />
|
||||
<a-table-column key="network" title="网络入口/出口" :customRender="({record}) => `${record?.instantaneous_input_kbps || 0}kps/${record?.instantaneous_output_kbps || 0}kps`" />
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<el-descriptions :column=12 border :direction="'vertical'">
|
||||
<el-descriptions-item label="Redis版本">
|
||||
{{ cache.info?.redis_version || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="运行模式">
|
||||
{{ cache.info?.redis_mode === 'standalone' ? '单机' : '集群' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="端口">
|
||||
{{ cache.info?.tcp_port || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="客户端数">
|
||||
{{ cache.info?.connected_clients || 0 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="运行时间(天)">
|
||||
{{ cache.info?.uptime_in_days || 0 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="使用内存">
|
||||
{{ cache.info?.used_memory_human || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="使用CPU">
|
||||
{{ cache.info?.used_cpu_user_children ? parseFloat(cache.info.used_cpu_user_children).toFixed(2) : '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="内存配置">
|
||||
{{ cache.info?.maxmemory_human || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="AOF是否开启">
|
||||
{{ cache.info?.aof_enabled === '0' ? '否' : '是' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="RDB是否成功">
|
||||
{{ cache.info?.rdb_last_bgsave_status || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Key数量">
|
||||
{{ cache.db_size || 0 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="网络入口/出口">
|
||||
{{ `${cache.info?.instantaneous_input_kbps || 0}kps/${cache.info?.instantaneous_output_kbps || 0}kps` }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 监控图表 -->
|
||||
<a-col :span="12" class="mt-4">
|
||||
<a-card>
|
||||
<template #title>
|
||||
<PieChartOutlined class="icon" />
|
||||
<span class="title">命令统计</span>
|
||||
<el-col :span="12" class="mt-4">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon><Stopwatch /></el-icon>
|
||||
<span class="title">命令统计</span>
|
||||
<el-tooltip content="展示命令统计详情">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<div ref="commandstats" class="chart-container" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12" class="mt-4">
|
||||
<a-card>
|
||||
<template #title>
|
||||
<DashboardOutlined class="icon" />
|
||||
<span class="title">内存信息</span>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mt-4">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon><Stopwatch /></el-icon>
|
||||
<span>内存信息</span>
|
||||
<el-tooltip content="展示内存信息详情">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<div ref="usedmemory" class="chart-container" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 缓存管理 Tab -->
|
||||
<a-tab-pane key="cache" tab="缓存管理">
|
||||
<a-row :gutter="16">
|
||||
<el-tab-pane class="cache" label="缓存管理">
|
||||
<el-row :gutter="16">
|
||||
<!-- 缓存列表 -->
|
||||
<a-col :span="8">
|
||||
<a-card :bodyStyle="{ height: tableContainerHeight, minHeight: '430px' }">
|
||||
<template #title>
|
||||
<SolutionOutlined class="icon" />
|
||||
<span class="title">缓存列表</span>
|
||||
<el-col :span="8">
|
||||
<el-card :loading="loading" shadow="hover">
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon><Tickets /></el-icon>
|
||||
<span class="flex items-center gap-2">缓存列表</span>
|
||||
<el-tooltip content="展示缓存列表详情">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" link icon="RefreshRight" @click="refreshCacheNames" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-button type="link" @click="refreshCacheNames">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
</a-button>
|
||||
</template>
|
||||
<a-table
|
||||
<el-table
|
||||
:loading="loading"
|
||||
:dataSource="cacheNames"
|
||||
:pagination="false"
|
||||
:scroll="{ y: 460 }"
|
||||
rowKey="cache_name"
|
||||
:data="cacheNames"
|
||||
row-key="cache_name"
|
||||
height="600"
|
||||
border
|
||||
>
|
||||
<a-table-column key="cache_name" title="缓存名称" align="center" :ellipsis="true">
|
||||
<template #default="{ record }">
|
||||
<a @click="getCacheKeyList(record)">{{ record.cache_name }}</a>
|
||||
<template #empty>
|
||||
<el-empty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
<el-table-column prop="cache_name" label="缓存名称" align="center" :ellipsis="true">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="getCacheKeyList(row)">{{ row.cache_name }}</el-button>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column key="remark" title="备注" align="center" :ellipsis="true" dataIndex="remark" />
|
||||
<a-table-column key="action" title="操作" width="60" align="center">
|
||||
<template #customRender="{ record }">
|
||||
<a-button type="link" danger @click.stop="handleClearCacheName(record)">
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
</a-button>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" align="center" :ellipsis="true" />
|
||||
<el-table-column label="操作" width="60" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button type="danger" size="small" link icon="delete" @click="handleClearCacheName(row)" />
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 键名列表 -->
|
||||
<a-col :span="8">
|
||||
<a-card :bodyStyle="{ height: tableContainerHeight, minHeight: '430px' }">
|
||||
<template #title>
|
||||
<KeyOutlined class="icon" />
|
||||
<span class="title">键名列表</span>
|
||||
<el-col :span="8">
|
||||
<el-card :loading="loading" shadow="hover">
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon><Key /></el-icon>
|
||||
<span class="flex items-center gap-2">键名列表</span>
|
||||
<el-tooltip content="展示键名列表详情">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" link icon="RefreshRight" @click="refreshCacheKeys" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-button type="link" @click="refreshCacheKeys">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
</a-button>
|
||||
</template>
|
||||
<a-table
|
||||
<el-table
|
||||
:loading="subLoading"
|
||||
:dataSource="cacheKeys.map(key => ({ cacheKey: key }))"
|
||||
:pagination="false"
|
||||
:scroll="{ y: 480 }"
|
||||
rowKey="cacheKey"
|
||||
:data="cacheKeys.map(key => ({ cacheKey: key }))"
|
||||
height="600"
|
||||
row-key="cacheKey"
|
||||
border
|
||||
>
|
||||
<a-table-column key="cacheKey" title="缓存键名" align="center" :ellipsis="true">
|
||||
<template #default="{ record }">
|
||||
<a @click="handleCacheValue(record.cacheKey)">{{ record.cacheKey }}</a>
|
||||
<template #empty>
|
||||
<el-empty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
<el-table-column prop="cacheKey" label="缓存键名" align="center" :ellipsis="true">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleCacheValue(row.cacheKey)">{{ row.cacheKey }}</el-button>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column key="action" title="操作" width="60" align="center">
|
||||
<template #customRender="{ record }">
|
||||
<a-button type="link" danger @click.stop="handleClearCacheKey(record.cacheKey)">
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
</a-button>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="60" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button type="danger" size="small" link icon="delete" @click="handleClearCacheKey(row.cacheKey)" />
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 缓存内容 -->
|
||||
<a-col :span="8">
|
||||
<a-card :bodyStyle="{ height: tableContainerHeight, minHeight: '430px' }">
|
||||
<template #title>
|
||||
<FileOutlined class="icon" />
|
||||
<span class="title">缓存内容</span>
|
||||
<el-col :span="8">
|
||||
<el-card :loading="loading" shadow="hover">
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon><Key /></el-icon>
|
||||
<span class="flex items-center gap-2">缓存内容</span>
|
||||
<el-tooltip content="展示缓存内容详情">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="danger" link icon="delete" @click="handleClearCacheAll">清理全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-button type="link" danger @click="handleClearCacheAll">清理全部</a-button>
|
||||
</template>
|
||||
<a-form :model="cacheForm" layout="vertical">
|
||||
<a-form-item label="缓存名称:" name="cache_name">
|
||||
<a-input v-model:value="cacheForm.cache_name" readonly />
|
||||
</a-form-item>
|
||||
<a-form-item label="缓存键名:" name="cache_key">
|
||||
<a-input v-model:value="cacheForm.cache_key" readonly />
|
||||
</a-form-item>
|
||||
<a-form-item label="缓存内容:" name="cache_value">
|
||||
<a-textarea
|
||||
v-model:value="cacheForm.cache_value"
|
||||
:rows="17"
|
||||
<el-form :model="cacheForm" label-position="top">
|
||||
<el-form-item label="缓存名称:">
|
||||
<el-input v-model="cacheForm.cache_name" readonly />
|
||||
</el-form-item>
|
||||
<el-form-item label="缓存键名:">
|
||||
<el-input v-model="cacheForm.cache_key" readonly />
|
||||
</el-form-item>
|
||||
<el-form-item label="缓存内容:">
|
||||
<el-input
|
||||
v-model="cacheForm.cache_value"
|
||||
type="textarea"
|
||||
:rows="18"
|
||||
readonly
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import { DeleteOutlined, RedoOutlined, SolutionOutlined, KeyOutlined, FileOutlined, MonitorOutlined, PieChartOutlined, DashboardOutlined } from '@ant-design/icons-vue';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { getCacheInfo, getCacheNames, getCacheKeys, getCacheValue, deleteCacheName, deleteCacheKey, deleteCacheAll } from "@/api/monitor/cache";
|
||||
import CacheAPI, {type CacheInfo, type CacheForm, type CacheMonitor, type RedisInfo } from "@/api/monitor/cache";
|
||||
import * as echarts from 'echarts';
|
||||
import type { CacheInfo, CacheForm, CacheMonitor, RedisInfo } from './types';
|
||||
|
||||
// 响应式状态定义
|
||||
const cacheNames = ref<CacheInfo[]>([]);
|
||||
const cacheKeys = ref<string[]>([]);
|
||||
const cacheForm = ref<CacheForm>({
|
||||
cache_name: '',
|
||||
cache_key: '',
|
||||
cache_value: ''
|
||||
});
|
||||
const loading = ref(true);
|
||||
const subLoading = ref(false);
|
||||
const nowCacheName = ref('');
|
||||
const commandstats = ref<HTMLElement | null>(null);
|
||||
const usedmemory = ref<HTMLElement | null>(null);
|
||||
const cache = ref<CacheMonitor>({
|
||||
info: {} as RedisInfo,
|
||||
command_stats: [],
|
||||
db_size: 0
|
||||
});
|
||||
const commandstats = ref<HTMLElement | null>(null);
|
||||
const usedmemory = ref<HTMLElement | null>(null);
|
||||
const cacheForm = ref<CacheForm>({
|
||||
cache_name: '',
|
||||
cache_key: '',
|
||||
cache_value: ''
|
||||
});
|
||||
|
||||
let commandstatsInstance: echarts.ECharts | null = null;
|
||||
let usedmemoryInstance: echarts.ECharts | null = null;
|
||||
|
||||
// 计算属性
|
||||
const tableContainerHeight = computed(() => `calc(100vh - 260px)`);
|
||||
|
||||
const resetCacheForm = () => {
|
||||
cacheKeys.value = [];
|
||||
cacheForm.value = {
|
||||
@@ -201,19 +253,17 @@ const resetCacheForm = () => {
|
||||
};
|
||||
|
||||
// 缓存名称相关方法
|
||||
const getCacheNameList = () => {
|
||||
loading.value = true;
|
||||
getCacheNames()
|
||||
.then(({ data: result }) => {
|
||||
cacheNames.value = result.data || [];
|
||||
resetCacheForm();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取缓存列表出错:', error);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
const getCacheNameList = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const response = await CacheAPI.getCacheNames()
|
||||
cacheNames.value = response.data.data;
|
||||
resetCacheForm();
|
||||
} catch (error) {
|
||||
console.error('获取缓存列表出错:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 刷新缓存列表
|
||||
@@ -223,43 +273,46 @@ const refreshCacheNames = () => {
|
||||
|
||||
// 清理缓存名称
|
||||
const handleClearCacheName = (row: CacheInfo) => {
|
||||
Modal.confirm({
|
||||
title: '确认清理',
|
||||
content: `确定要清理缓存名称[${row.cache_name}]吗？`,
|
||||
onOk() {
|
||||
deleteCacheName(row.cache_name)
|
||||
.then(() => {
|
||||
getCacheNameList();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('清理缓存失败:', error);
|
||||
});
|
||||
ElMessageBox.confirm(
|
||||
`确定要清理缓存名称[${row.cache_name}]吗？`,
|
||||
'确认清理',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
await CacheAPI.deleteCacheName(row.cache_name);
|
||||
getCacheNameList();
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error !== 'cancel') {
|
||||
console.error('清理缓存失败:', error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 缓存键名相关方法
|
||||
const getCacheKeyList = (row?: CacheInfo) => {
|
||||
const cacheName = row?.cache_name || nowCacheName.value;
|
||||
if (!cacheName) return;
|
||||
|
||||
subLoading.value = true;
|
||||
getCacheKeys(cacheName)
|
||||
.then(({ data: result }) => {
|
||||
cacheKeys.value = result.data || [];
|
||||
nowCacheName.value = cacheName;
|
||||
cacheForm.value = {
|
||||
cache_name: cacheName,
|
||||
cache_key: '',
|
||||
cache_value: ''
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取缓存键名列表失败:', error);
|
||||
})
|
||||
.finally(() => {
|
||||
subLoading.value = false;
|
||||
});
|
||||
const getCacheKeyList = async (row?: CacheInfo) => {
|
||||
try {
|
||||
const cacheName = row?.cache_name || nowCacheName.value;
|
||||
if (!cacheName) return;
|
||||
|
||||
subLoading.value = true;
|
||||
const response = await CacheAPI.getCacheKeys(cacheName);
|
||||
cacheKeys.value = response.data.data;
|
||||
nowCacheName.value = cacheName;
|
||||
cacheForm.value = {
|
||||
cache_name: cacheName,
|
||||
cache_key: '',
|
||||
cache_value: ''
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('获取缓存键名列表出错:', error);
|
||||
} finally {
|
||||
subLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 刷新键名列表
|
||||
@@ -269,63 +322,79 @@ const refreshCacheKeys = () => {
|
||||
|
||||
// 清理缓存键名
|
||||
const handleClearCacheKey = (cacheKey: string) => {
|
||||
Modal.confirm({
|
||||
title: '确认清理',
|
||||
content: `确定要清理缓存键名[${cacheKey}]吗？`,
|
||||
onOk() {
|
||||
deleteCacheKey(cacheKey)
|
||||
.then(() => {
|
||||
getCacheKeyList();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('清理缓存键名失败:', error);
|
||||
});
|
||||
ElMessageBox.confirm(
|
||||
`确定要清理缓存键名[${cacheKey}]吗？`,
|
||||
'确认清理',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
CacheAPI.deleteCacheKey(cacheKey);
|
||||
getCacheKeyList();
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error !== 'cancel') {
|
||||
console.error('清理缓存键名失败:', error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 缓存内容相关方法
|
||||
const handleCacheValue = (cacheKey: string) => {
|
||||
getCacheValue(nowCacheName.value, cacheKey)
|
||||
.then(({ data: result }) => {
|
||||
cacheForm.value = result.data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取缓存内容失败:', error);
|
||||
});
|
||||
const handleCacheValue = async (cacheKey: string) => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const response = await CacheAPI.getCacheValue(nowCacheName.value, cacheKey)
|
||||
cacheForm.value = response.data.data;
|
||||
} catch (error) {
|
||||
console.error('获取缓存内容失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 清理全部缓存
|
||||
const handleClearCacheAll = () => {
|
||||
Modal.confirm({
|
||||
title: '确认清理',
|
||||
content: '确定要清理全部缓存吗？',
|
||||
onOk() {
|
||||
deleteCacheAll()
|
||||
.then(() => {
|
||||
getCacheNameList();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('清理全部缓存失败:', error);
|
||||
});
|
||||
const handleClearCacheAll = async () => {
|
||||
ElMessageBox.confirm(
|
||||
'确定要清理全部缓存吗？',
|
||||
'确认清理',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
return CacheAPI.deleteCacheAll();
|
||||
})
|
||||
.then(() => {
|
||||
getCacheNameList();
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error !== 'cancel') {
|
||||
console.error('清理全部缓存失败:', error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 监控数据获取
|
||||
const getInfo = () => {
|
||||
getCacheInfo()
|
||||
.then(({ data: result }) => {
|
||||
cache.value = result.data || {
|
||||
info: {},
|
||||
command_stats: [],
|
||||
dbSize: 0
|
||||
};
|
||||
initCharts();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取缓存监控数据失败:', error);
|
||||
});
|
||||
const getInfo = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const response = await CacheAPI.getCacheInfo()
|
||||
cache.value = response.data.data || {
|
||||
info: {},
|
||||
command_stats: [],
|
||||
dbSize: 0
|
||||
};
|
||||
initCharts();
|
||||
} catch (error) {
|
||||
console.error('获取缓存监控数据失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 图表初始化
|
||||
@@ -388,21 +457,7 @@ onUnmounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.title {
|
||||
vertical-align: middle;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
<style scoped lang="scss">
|
||||
|
||||
.chart-container {
|
||||
height: 365px;
|
||||
|
||||
-38
@@ -1,38 +0,0 @@
|
||||
export interface CacheForm {
|
||||
cache_name: string;
|
||||
cache_key: string;
|
||||
cache_value: string;
|
||||
}
|
||||
|
||||
export interface CacheInfo {
|
||||
cache_key: string;
|
||||
cache_name: string;
|
||||
cache_value: string;
|
||||
remark: string;
|
||||
}
|
||||
|
||||
export interface CommandStats {
|
||||
name: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface RedisInfo {
|
||||
redis_version: string;
|
||||
redis_mode: string;
|
||||
tcp_port: number;
|
||||
connected_clients: number;
|
||||
uptime_in_days: number;
|
||||
used_memory_human: string;
|
||||
used_cpu_user_children: string;
|
||||
maxmemory_human: string;
|
||||
aof_enabled: string;
|
||||
rdb_last_bgsave_status: string;
|
||||
instantaneous_input_kbps: number;
|
||||
instantaneous_output_kbps: number;
|
||||
}
|
||||
|
||||
export interface CacheMonitor {
|
||||
command_stats: CommandStats[];
|
||||
db_size: number;
|
||||
info: RedisInfo;
|
||||
}
|
||||
@@ -1,166 +1,217 @@
|
||||
<!-- 在线用户 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-form ref="queryFormRef" :model="queryFormData" :inline="true">
|
||||
<el-form-item prop="ipaddr" label="IP地址">
|
||||
<el-input v-model="queryFormData.ipaddr" placeholder="请输入IP地址" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item prop="name" label="用户名">
|
||||
<el-input v-model="queryFormData.name" placeholder="请输入用户名" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item prop="login_location" label="登录位置">
|
||||
<el-input v-model="queryFormData.login_location" placeholder="请输入登录位置" clearable />
|
||||
</el-form-item>
|
||||
<!-- 查询、重置、展开/收起按钮 -->
|
||||
<el-form-item class="search-buttons">
|
||||
<el-button type="primary" icon="search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<el-card shadow="hover" class="data-table">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>
|
||||
<el-tooltip content="在线用户列表">
|
||||
<QuestionFilled class="w-4 h-4 mx-1" />
|
||||
</el-tooltip>
|
||||
在线用户列表
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 搜索表单 -->
|
||||
<div class="table-search-wrapper">
|
||||
<a-card >
|
||||
<a-form :model="queryState" @finish="onFinish" >
|
||||
<a-flex wrap="wrap" gap="middle">
|
||||
<a-form-item name="ipaddr" label="主机" >
|
||||
<a-input v-model:value="queryState.ipaddr" placeholder="请输入主机地址" allowClear style="width: 200px;"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="user_name" label="用户名" >
|
||||
<a-input v-model:value="queryState.name" placeholder="请输入登陆用户名称" allowClear style="width: 200px;"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="login_location" label="登陆地点" >
|
||||
<a-input v-model:value="queryState.login_location" placeholder="请输入登陆地点" allowClear style="width: 200px;"></a-input>
|
||||
</a-form-item>
|
||||
<a-button type="primary" html-type="submit" :loading="loading">查询</a-button>
|
||||
<a-button @click="resetQuery">重置</a-button>
|
||||
</a-flex>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<a-card title="在线用户列表"
|
||||
|
||||
>
|
||||
<a-table
|
||||
:rowKey="record => record.session_id"
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
@change="handlePageChange"
|
||||
:pagination="pagination"
|
||||
:scroll="{ x: 500, y: 'calc(100vh - 490px)' }"
|
||||
:style="{ minHeight: 'calc(100vh - 430px)' }"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'index'">
|
||||
<span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'operation'">
|
||||
<a-button type="link" @click="handleForceLogout(record)" danger>
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
强退
|
||||
<!-- 功能区域 -->
|
||||
<div class="data-table__toolbar">
|
||||
<div class="data-table__toolbar--actions">
|
||||
<el-button :disabled="selectIds.length === 0" type="danger" icon="delete"
|
||||
@click="handleSubmit()">批量强退</el-button>
|
||||
</div>
|
||||
<div class="data-table__toolbar--tools">
|
||||
<el-tooltip content="刷新">
|
||||
<el-button type="primary" icon="refresh" circle @click="handleRefresh" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="列表筛选">
|
||||
<el-dropdown trigger="click">
|
||||
<el-button type="default" icon="operation" circle />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
|
||||
<el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域：系统配置列表 -->
|
||||
<el-table ref="dataTableRef" v-loading="loading" :data="pageTableData" highlight-current-row
|
||||
class="data-table__content" height="450" border stripe @selection-change="handleSelectionChange">
|
||||
<template #empty>
|
||||
<el-empty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" width="55"
|
||||
align="center" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号"
|
||||
width="60" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'session_id')?.show" key="session_id" label="会话编号"
|
||||
prop="session_id" min-width="80" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'ipaddr')?.show" key="ipaddr" label="IP地址"
|
||||
prop="ipaddr" min-width="80" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'name')?.show" key="name" label="用户名" prop="name"
|
||||
min-width="80" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'user_name')?.show" key="user_name" label="用户姓名"
|
||||
prop="user_name" min-width="80" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'login_location')?.show" key="login_location"
|
||||
label="登录位置" prop="login_location" min-width="80" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'os')?.show" key="os" label="操作系统" prop="os"
|
||||
min-width="80" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'login_time')?.show" key="login_time" label="登录时间"
|
||||
prop="login_time" min-width="80" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" key="operation" fixed="right"
|
||||
label="操作" min-width="60">
|
||||
<template #default="scope">
|
||||
<el-button type="danger" size="small" link icon="delete" @click="handleSubmit(scope.row.session_id)">强退
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<template #footer>
|
||||
<pagination v-model:total="total" v-model:page="queryFormData.page_no" v-model:limit="queryFormData.page_size"
|
||||
@pagination="loadingData" />
|
||||
</template>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { getOnlineList, deleteOnline} from "@/api/monitor/online";
|
||||
import type { searchType, OnlineUser } from './types';
|
||||
defineOptions({
|
||||
name: "Notice",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
const dataSource = ref<OnlineUser[]>([]);
|
||||
import OnlineAPI, { type OnlineUserPageQuery, type OnlineUserTable } from "@/api/monitor/online";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
|
||||
const queryFormRef = ref();
|
||||
const total = ref(0);
|
||||
const selectIds = ref<number[]>([]);
|
||||
const loading = ref(false);
|
||||
const queryState = reactive<searchType>({});
|
||||
|
||||
const columns = [
|
||||
{ title: '会话编号', width: 320, dataIndex: 'session_id', key: 'sessionId', ellipsis: true },
|
||||
{ title: '登录名称', width: 80, dataIndex: 'name', key: 'name', align: 'center', ellipsis: true },
|
||||
{ title: '用户账号', width: 80, dataIndex: 'user_name', key: 'userName', align: 'center', ellipsis: true },
|
||||
{ title: '主机', width: 130, dataIndex: 'ipaddr', key: 'ipaddr', align: 'center', ellipsis: true },
|
||||
{ title: '登录地点', dataIndex: 'login_location', key: 'loginLocation', align: 'center', ellipsis: true },
|
||||
{ title: '操作系统', dataIndex: 'os', key: 'os', align: 'center', ellipsis: true },
|
||||
{ title: '登录时间', dataIndex: 'login_time', key: 'loginTime', align: 'center', ellipsis: true, width: 180 },
|
||||
{ title: '操作', dataIndex: 'operation', key: 'operation', align: 'center', width: 120 }
|
||||
];
|
||||
// 分页表单
|
||||
const pageTableData = ref<OnlineUserTable[]>([]);
|
||||
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: true,
|
||||
total: dataSource.value.length,
|
||||
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条 / 总共 ${total} 条`
|
||||
})
|
||||
|
||||
const onFinish = () => {
|
||||
pagination.current = 1;
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: '选择框', prop: 'selection', show: true },
|
||||
{ label: '序号', prop: 'index', show: true },
|
||||
{ label: '会话编号', prop: 'session_id', show: true },
|
||||
{ label: '登录名称', prop: 'name', show: true },
|
||||
{ label: '用户账号', prop: 'user_name', show: true },
|
||||
{ label: '主机', prop: 'ipaddr', show: true },
|
||||
{ label: '登录地点', prop: 'login_location', show: true },
|
||||
{ label: '操作系统', prop: 'os', show: true },
|
||||
{ label: '登录时间', prop: 'login_time', show: true },
|
||||
{ label: '操作', prop: 'operation', show: true }
|
||||
]);
|
||||
|
||||
// 分页查询参数
|
||||
const queryFormData = reactive<OnlineUserPageQuery>({
|
||||
page_no: 1,
|
||||
page_size: 10,
|
||||
name: undefined,
|
||||
login_location: undefined,
|
||||
ipaddr: undefined
|
||||
});
|
||||
|
||||
// 刷新数据(防抖)
|
||||
const handleRefresh = useDebounceFn(() => {
|
||||
loadingData();
|
||||
};
|
||||
ElMessage.success("刷新成功");
|
||||
}, 1000);
|
||||
|
||||
const loadingData = async () => {
|
||||
// 加载表格数据
|
||||
async function loadingData() {
|
||||
loading.value = true;
|
||||
|
||||
let params = {};
|
||||
|
||||
if (queryState.ipaddr) {
|
||||
params['ipaddr'] = queryState.ipaddr
|
||||
try {
|
||||
const response = await OnlineAPI.getOnlineList(queryFormData);
|
||||
pageTableData.value = response.data.data.items;
|
||||
total.value = response.data.data.total;
|
||||
}
|
||||
|
||||
if (queryState.name) {
|
||||
params['name'] = queryState.name
|
||||
catch (error: any) {
|
||||
ElMessage.error(error.message);
|
||||
}
|
||||
|
||||
if (queryState.login_location) {
|
||||
params['login_location'] = queryState.login_location
|
||||
}
|
||||
|
||||
params['page_no'] = pagination.current;
|
||||
params['page_size'] = pagination.pageSize;
|
||||
|
||||
getOnlineList(params).then(response => {
|
||||
const result = response.data;
|
||||
dataSource.value = result.data.items;
|
||||
pagination.total = result.data.total;
|
||||
pagination.current = result.data.page_no;
|
||||
pagination.pageSize = result.data.page_size;
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
}).finally(() => {
|
||||
finally {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
Object.keys(queryState).forEach((key: string) => {
|
||||
delete queryState[key];
|
||||
});
|
||||
pagination.current = 1;
|
||||
// 查询（重置页码后获取数据）
|
||||
async function handleQuery() {
|
||||
queryFormData.page_no = 1;
|
||||
loadingData();
|
||||
};
|
||||
}
|
||||
|
||||
const handleForceLogout = (row: OnlineUser) => {
|
||||
if (!row?.session_id) return;
|
||||
Modal.confirm({
|
||||
title: '确认提示',
|
||||
content: `是否确认强退名称为"${row.user_name}"的用户?`,
|
||||
async onOk() {
|
||||
// 重置查询
|
||||
async function handleResetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
queryFormData.page_no = 1;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 行复选框选中项变化
|
||||
async function handleSelectionChange(selection: any) {
|
||||
selectIds.value = selection.map((item: any) => item.id);
|
||||
}
|
||||
|
||||
// 强制退出
|
||||
async function handleSubmit(id?: number) {
|
||||
if (!id && !selectIds.value.length) {
|
||||
ElMessageBox.confirm("确认强制退出选中项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(async () => {
|
||||
try {
|
||||
await deleteOnline(row.session_id);
|
||||
await loadingData();
|
||||
} catch (error) {
|
||||
console.error('强退失败:', error);
|
||||
loading.value = true;
|
||||
await OnlineAPI.deleteOnline({ id: id ? id : selectIds.value });
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}).catch(() => {
|
||||
ElMessage.info('已取消强退');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const handlePageChange = (values: any) => {
|
||||
pagination.current = values.current;
|
||||
pagination.pageSize = values.pageSize;
|
||||
onMounted(() => {
|
||||
loadingData();
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => loadingData());
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-search-wrapper {
|
||||
margin-block-end: 16px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
export interface searchType {
|
||||
ipaddr?: string;
|
||||
name?: string;
|
||||
login_location?: string;
|
||||
}
|
||||
|
||||
export interface OnlineUser {
|
||||
session_id: string;
|
||||
user_id: number;
|
||||
name: string;
|
||||
user_name: string;
|
||||
ipaddr: string;
|
||||
login_location: string;
|
||||
os: string;
|
||||
browser: string;
|
||||
login_time: string;
|
||||
}
|
||||
@@ -1,263 +1,239 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12" class="mb-4">
|
||||
<a-card :loading="loading" class="shadow-sm" :bodyStyle="{ height: '360px' }">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<DesktopOutlined class="text-primary text-lg mr-2" />
|
||||
<span class="font-medium">CPU使用情况</span>
|
||||
<a-tooltip title="展示CPU核心数及使用率">
|
||||
<QuestionCircleOutlined class="ml-2 text-gray-400" />
|
||||
</a-tooltip>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12" class="mb-4">
|
||||
<el-card :loading="loading" shadow="hover">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon><Cpu/></el-icon>
|
||||
<span class="flex items-center gap-2">CPU使用情况</span>
|
||||
<el-tooltip content="展示CPU核心数及使用率">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-lg font-bold">CPU核心数</div>
|
||||
<a-tooltip title="CPU核心数">
|
||||
<a-progress type="circle" :percent="100" :format="() => server.cpu?.cpu_num || 0" status="normal"/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span>用户使用率:</span>
|
||||
<span class="font-medium">{{ (server.cpu?.used || 0).toFixed(1) }}%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>系统使用率:</span>
|
||||
<span class="font-medium">{{ (server.cpu?.sys || 0).toFixed(1) }}%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>当前空闲率:</span>
|
||||
<span class="font-medium">{{ (server.cpu?.free || 0).toFixed(1) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-lg font-bold">CPU使用率</div>
|
||||
<a-tooltip title="CPU使用率">
|
||||
<a-progress type="circle" :percent="server.cpu?.used || 0" :status="server.cpu?.used > 80 ? 'exception' : 'normal'"/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span>总核心数:</span>
|
||||
<span class="font-medium">{{ server.cpu?.cpu_num || 0 }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>已用核心:</span>
|
||||
<span class="font-medium">{{ Math.floor((server.cpu?.used || 0) * server.cpu?.cpu_num / 100) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>空闲核心:</span>
|
||||
<span class="font-medium">{{ Math.floor((server.cpu?.free || 0) * server.cpu?.cpu_num / 100) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<el-row :gutter="16">
|
||||
<!-- CPU核心数卡片 -->
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<span>核心数</span>
|
||||
<el-tooltip :content="(server.cpu?.cpu_num || 0).toFixed(1)">
|
||||
<div class="text-center mb-4">
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="100"
|
||||
:format="() => `${server.cpu?.cpu_num || 0}`"
|
||||
/>
|
||||
|
||||
<a-col :span="12" class="mb-4">
|
||||
<a-card :loading="loading" class="shadow-sm" :bodyStyle="{ height: '360px' }">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<FileTextOutlined class="text-primary text-lg mr-2" />
|
||||
<span class="font-medium">内存使用情况</span>
|
||||
<a-tooltip title="展示系统内存和Python程序内存使用情况">
|
||||
<QuestionCircleOutlined class="ml-2 text-gray-400" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="总核心数" >{{server.cpu?.cpu_num || 0}}</el-descriptions-item>
|
||||
<el-descriptions-item label="已用核心" >{{Math.floor((server.cpu?.used || 0) * server.cpu?.cpu_num / 100)}}</el-descriptions-item>
|
||||
<el-descriptions-item label="空闲核心" >{{Math.floor((server.cpu?.free || 0) * server.cpu?.cpu_num / 100)}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- CPU使用率卡片 -->
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" class="h-full">
|
||||
<span>使用率</span>
|
||||
<el-tooltip :content="(server.cpu?.used || 0).toFixed(1) + '%'">
|
||||
<div class="text-center mb-4">
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="server.cpu?.used || 0"
|
||||
:status="server.cpu?.used > 80 ? 'exception' : server.cpu?.used > 60 ? 'warning' : 'success'"
|
||||
/>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="用户使用率" >{{(server.cpu?.used || 0).toFixed(1) + '%'}}</el-descriptions-item>
|
||||
<el-descriptions-item label="系统使用率" >{{(server.cpu?.sys || 0).toFixed(1) + '%'}}</el-descriptions-item>
|
||||
<el-descriptions-item label="当前空闲率" >{{(server.cpu?.free || 0).toFixed(1) + '%'}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb-4">
|
||||
<el-card :loading="loading" shadow="hover">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon><Memo /></el-icon>
|
||||
<span>内存使用情况</span>
|
||||
<el-tooltip content="展示系统内存和Python程序内存使用情况">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-lg font-bold">系统内存</div>
|
||||
<a-tooltip title="系统内存">
|
||||
<a-progress type="circle" :percent="server.mem?.usage || 0" :status="server.mem?.usage > 80 ? 'exception' : 'normal'"/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span>总内存:</span>
|
||||
<span class="font-medium">{{ server.mem?.total }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>已用内存:</span>
|
||||
<span class="font-medium">{{ server.mem?.used }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>空闲内存:</span>
|
||||
<span class="font-medium">{{ server.mem?.free }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<!-- 系统内存卡片 -->
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" class="h-full">
|
||||
<span>系统内存</span>
|
||||
<el-tooltip :content="(server.mem?.usage || 0).toFixed(1) + '%'">
|
||||
<div class="text-center mb-4">
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="server.mem?.usage || 0"
|
||||
:status="server.mem?.usage > 80 ? 'exception' : server.mem?.usage > 60 ? 'warning' : 'success'"
|
||||
/>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="总内存" >{{server.mem?.total}}</el-descriptions-item>
|
||||
<el-descriptions-item label="已用内存" >{{server.mem?.used}}</el-descriptions-item>
|
||||
<el-descriptions-item label="空闲内存" >{{server.mem?.free}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- Python内存卡片 -->
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" class="h-full">
|
||||
<span>Python内存</span>
|
||||
<el-tooltip :content="(server.py?.memory_usage || 0).toFixed(1) + '%'">
|
||||
<div class="text-center mb-4">
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="server.py?.memory_usage || 0"
|
||||
:status="server.py?.memory_usage > 80 ? 'exception' : server.py?.memory_usage > 60 ? 'warning' : 'success'"
|
||||
/>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="总内存" >{{server.py?.memory_total}}</el-descriptions-item>
|
||||
<el-descriptions-item label="已用内存" >{{server.py?.memory_used}}</el-descriptions-item>
|
||||
<el-descriptions-item label="空闲内存" >{{server.py?.memory_free}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
</div>
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-lg font-bold">Python内存</div>
|
||||
<a-tooltip title="Python内存">
|
||||
<a-progress type="circle" :percent="server.py?.memory_usage || 0" :status="server.py?.memory_usage > 80 ? 'exception' : 'normal'" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span>总内存:</span>
|
||||
<span class="font-medium">{{ server.py?.memory_total }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>已用内存:</span>
|
||||
<span class="font-medium">{{ server.py?.memory_used }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>空闲内存:</span>
|
||||
<span class="font-medium">{{ server.py?.memory_free }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24" class="mb-4">
|
||||
<a-card :loading="loading" class="shadow-sm">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<MonitorOutlined class="text-primary text-lg mr-2" />
|
||||
<el-col :span="24" class="mb-4">
|
||||
<el-card :loading="loading" >
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
<span class="font-medium">服务器基本信息</span>
|
||||
<a-tooltip title="展示服务器基本配置信息">
|
||||
<QuestionCircleOutlined class="ml-2 text-gray-400" />
|
||||
</a-tooltip>
|
||||
<el-tooltip content="展示服务器基本配置信息">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<a-descriptions :column="2" bordered>
|
||||
<a-descriptions-item label="服务器名称">{{ server.sys?.computer_name || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="操作系统">{{ server.sys?.os_name || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="服务器IP">{{ server.sys?.computer_ip || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="系统架构">{{ server.sys?.os_arch || '-' }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="服务器名称">{{ server.sys?.computer_name || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="操作系统">{{ server.sys?.os_name || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="服务器IP">{{ server.sys?.computer_ip || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="系统架构">{{ server.sys?.os_arch || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<a-col :span="24" class="mb-4">
|
||||
<a-card :loading="loading" class="shadow-sm">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<CodeOutlined class="text-primary text-lg mr-2" />
|
||||
<el-col :span="24" class="mb-4">
|
||||
<el-card :loading="loading" class="shadow-sm">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon><Dish /></el-icon>
|
||||
<span class="font-medium">Python运行环境</span>
|
||||
<a-tooltip title="展示Python环境配置及运行状态">
|
||||
<QuestionCircleOutlined class="ml-2 text-gray-400" />
|
||||
</a-tooltip>
|
||||
<el-tooltip content="展示Python环境配置及运行状态">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<a-descriptions :column="3" bordered>
|
||||
<a-descriptions-item label="Python名称">{{ server.py?.name || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="Python版本">{{ server.py?.version || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="启动时间">{{ server.py?.start_time || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="运行时长">{{ server.py?.run_time || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="安装路径">{{ server.py?.home || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="项目路径">{{ server.sys?.user_dir || '-' }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<el-descriptions :column="3" border>
|
||||
<el-descriptions-item label="Python名称">{{ server.py?.name || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Python版本">{{ server.py?.version || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="启动时间">{{ server.py?.start_time || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="运行时长">{{ server.py?.run_time || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="安装路径">{{ server.py?.home || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="项目路径">{{ server.sys?.user_dir || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<a-card :loading="loading" class="shadow-sm" >
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<HddOutlined class="text-primary text-lg mr-2" />
|
||||
<el-col :span="24">
|
||||
<el-card :loading="loading">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon>
|
||||
<Files />
|
||||
</el-icon>
|
||||
<span class="font-medium">磁盘使用情况</span>
|
||||
<a-tooltip title="展示磁盘空间使用详情">
|
||||
<QuestionCircleOutlined class="ml-2 text-gray-400" />
|
||||
</a-tooltip>
|
||||
<el-tooltip content="展示磁盘空间使用详情">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<a-table
|
||||
:dataSource="server.disks"
|
||||
:pagination="false"
|
||||
:bordered="true"
|
||||
:scroll="{ x: 500 }"
|
||||
:rowKey="(record) => record.dir_name"
|
||||
<el-table
|
||||
:data="server.disks"
|
||||
border
|
||||
|
||||
>
|
||||
<a-table-column
|
||||
key="dir_name"
|
||||
title="盘符路径"
|
||||
dataIndex="dir_name"
|
||||
:ellipsis="true"
|
||||
:width="100"
|
||||
<el-table-column
|
||||
label="盘符路径"
|
||||
prop="dir_name"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<a-table-column
|
||||
key="sys_type_name"
|
||||
title="文件系统"
|
||||
dataIndex="sys_type_name"
|
||||
<el-table-column
|
||||
label="文件系统"
|
||||
prop="sys_type_name"
|
||||
align="center"
|
||||
:width="100"
|
||||
width="100"
|
||||
/>
|
||||
<a-table-column
|
||||
key="type_name"
|
||||
title="盘符名称"
|
||||
dataIndex="type_name"
|
||||
:width="300"
|
||||
<el-table-column
|
||||
label="盘符名称"
|
||||
prop="type_name"
|
||||
/>
|
||||
<a-table-column
|
||||
key="usage"
|
||||
title="使用率"
|
||||
<el-table-column
|
||||
prop="usage"
|
||||
label="使用率"
|
||||
align="center"
|
||||
:width="120"
|
||||
:customRender="({record}) => {
|
||||
// 从record中获取usage值,确保是数字类型
|
||||
const usageValue = Number(record.usage);
|
||||
// 修改status的类型以匹配Progress组件的要求
|
||||
const status = usageValue > 80 ? 'exception' : usageValue > 60 ? 'normal' : 'normal';
|
||||
const strokeColor = usageValue > 80 ? '#ff4d4f' : usageValue > 60 ? '#faad14' : '#1677ff';
|
||||
return h('div', [
|
||||
h(AProgress, {
|
||||
percent: usageValue,
|
||||
size: 'small',
|
||||
status,
|
||||
strokeColor,
|
||||
style: { marginBottom: '4px' }
|
||||
}),
|
||||
]);
|
||||
}"
|
||||
/>
|
||||
<a-table-column
|
||||
key="total"
|
||||
title="总大小"
|
||||
dataIndex="total"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<!-- 使用 element-plus 的 Progress 组件 -->
|
||||
<div>
|
||||
<el-progress
|
||||
:percentage="Number(row.usage)"
|
||||
:status="row.usage > 80 ? 'exception' : row.usage > 60 ? 'warning' : 'success'"
|
||||
:text-inside="true"
|
||||
:stroke-width="16"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="总大小"
|
||||
prop="total"
|
||||
align="center"
|
||||
:width="100"
|
||||
width="100"
|
||||
/>
|
||||
<a-table-column
|
||||
key="free"
|
||||
title="可用大小"
|
||||
dataIndex="free"
|
||||
<el-table-column
|
||||
label="可用大小"
|
||||
prop="free"
|
||||
align="center"
|
||||
:width="100"
|
||||
width="100"
|
||||
/>
|
||||
<a-table-column
|
||||
key="used"
|
||||
title="已用大小"
|
||||
dataIndex="used"
|
||||
<el-table-column
|
||||
label="已用大小"
|
||||
prop="used"
|
||||
align="center"
|
||||
:width="100"
|
||||
width="100"
|
||||
/>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, h } from 'vue';
|
||||
import { getServer } from '@/api/monitor/server'
|
||||
import { QuestionCircleOutlined, DesktopOutlined, FileTextOutlined, MonitorOutlined, CodeOutlined, HddOutlined } from '@ant-design/icons-vue';
|
||||
import { Progress as AProgress } from 'ant-design-vue';
|
||||
import type { ServerInfo } from './types';
|
||||
import ServerAPI, {type ServerInfo } from '@/api/monitor/server'
|
||||
|
||||
|
||||
const loading = ref(false);
|
||||
const server = ref<ServerInfo>({
|
||||
@@ -297,7 +273,7 @@ const server = ref<ServerInfo>({
|
||||
async function getList() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await getServer();
|
||||
const response = await ServerAPI.getServer();
|
||||
server.value = response.data.data;
|
||||
} catch (error) {
|
||||
console.error('获取服务器信息失败:', error);
|
||||
@@ -311,104 +287,4 @@ onMounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.text-gray-400 {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.space-y-2 > * + * {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
export interface Cpu {
|
||||
cpu_num: number;
|
||||
used: number;
|
||||
sys: number;
|
||||
free: number;
|
||||
}
|
||||
|
||||
export interface Memory {
|
||||
total: string;
|
||||
used: string;
|
||||
free: string;
|
||||
usage: number;
|
||||
}
|
||||
|
||||
export interface System {
|
||||
computer_name: string;
|
||||
os_name: string;
|
||||
computer_ip: string;
|
||||
os_arch: string;
|
||||
user_dir: string;
|
||||
}
|
||||
|
||||
export interface Python {
|
||||
name: string;
|
||||
version: string;
|
||||
start_time: string;
|
||||
run_time: string;
|
||||
home: string;
|
||||
memory_total: string;
|
||||
memory_used: string;
|
||||
memory_free: string;
|
||||
memory_usage: number;
|
||||
}
|
||||
|
||||
export interface SysFile {
|
||||
dirName: string;
|
||||
sysTypeName: string;
|
||||
typeName: string;
|
||||
total: string;
|
||||
free: string;
|
||||
used: string;
|
||||
usage: number;
|
||||
}
|
||||
|
||||
export interface ServerInfo {
|
||||
cpu: Cpu;
|
||||
mem: Memory;
|
||||
sys: System;
|
||||
py: Python;
|
||||
disks: SysFile[];
|
||||
}
|
||||
Reference in New Issue
Block a user