mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-26 06:19:04 +00:00
开源准备
This commit is contained in:
zhangtao
+467
@@ -0,0 +1,467 @@
|
||||
<template>
|
||||
|
||||
<!-- 页面头部 -->
|
||||
<page-header />
|
||||
|
||||
<div class="app-container">
|
||||
<a-tabs>
|
||||
<!-- 监控信息 Tab -->
|
||||
<a-tab-pane key="monitor" tab="监控信息">
|
||||
<a-row :gutter="16">
|
||||
<!-- 基本信息 -->
|
||||
<a-col :span="24">
|
||||
<a-card>
|
||||
<template #title>
|
||||
<MonitorOutlined class="icon" />
|
||||
<span class="title">Redis监控信息</span>
|
||||
</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>
|
||||
|
||||
<!-- 监控图表 -->
|
||||
<a-col :span="12" class="mt-4">
|
||||
<a-card>
|
||||
<template #title>
|
||||
<PieChartOutlined class="icon" />
|
||||
<span class="title">命令统计</span>
|
||||
</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>
|
||||
</template>
|
||||
<div ref="usedmemory" class="chart-container" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
|
||||
<!-- 缓存管理 Tab -->
|
||||
<a-tab-pane key="cache" tab="缓存管理">
|
||||
<a-row :gutter="16">
|
||||
<!-- 缓存列表 -->
|
||||
<a-col :span="8">
|
||||
<a-card :bodyStyle="{ height: tableContainerHeight, minHeight: '600px' }">
|
||||
<template #title>
|
||||
<SolutionOutlined class="icon" />
|
||||
<span class="title">缓存列表</span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-button type="link" @click="refreshCacheNames">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
</a-button>
|
||||
</template>
|
||||
<a-table
|
||||
:loading="loading"
|
||||
:dataSource="cacheNames"
|
||||
:scroll="{ y: tableHeight }"
|
||||
:pagination="false"
|
||||
rowKey="cache_name"
|
||||
>
|
||||
<a-table-column key="cache_name" title="缓存名称" align="center" :ellipsis="true">
|
||||
<template #default="{ record }">
|
||||
<a @click="getCacheKeyList(record)">{{ record.cache_name }}</a>
|
||||
</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" @click.stop="handleClearCacheName(record)">
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
</a-button>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- 键名列表 -->
|
||||
<a-col :span="8">
|
||||
<a-card :bodyStyle="{ height: tableContainerHeight, minHeight: '600px' }">
|
||||
<template #title>
|
||||
<KeyOutlined class="icon" />
|
||||
<span class="title">键名列表</span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-button type="link" @click="refreshCacheKeys">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
</a-button>
|
||||
</template>
|
||||
<a-table
|
||||
:loading="subLoading"
|
||||
:dataSource="cacheKeys.map(key => ({ cacheKey: key }))"
|
||||
:scroll="{ y: tableHeight }"
|
||||
:pagination="false"
|
||||
rowKey="cacheKey"
|
||||
>
|
||||
<a-table-column key="cacheKey" title="缓存键名" align="center" :ellipsis="true">
|
||||
<template #default="{ record }">
|
||||
<a @click="handleCacheValue(record.cacheKey)">{{ record.cacheKey }}</a>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column key="action" title="操作" width="60" align="center">
|
||||
<template #customRender="{ record }">
|
||||
<a-button type="link" @click.stop="handleClearCacheKey(record.cacheKey)">
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
</a-button>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- 缓存内容 -->
|
||||
<a-col :span="8">
|
||||
<a-card :bodyStyle="{ height: tableContainerHeight, minHeight: '600px' }">
|
||||
<template #title>
|
||||
<FileOutlined class="icon" />
|
||||
<span class="title">缓存内容</span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-button type="link" @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="8"
|
||||
readonly
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import { DeleteOutlined, RedoOutlined, LineChartOutlined, SolutionOutlined, KeyOutlined, FileOutlined, MonitorOutlined, PieChartOutlined, DashboardOutlined } from '@ant-design/icons-vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { getCacheInfo, getCacheNames, getCacheKeys, getCacheValue, deleteCacheName, deleteCacheKey, deleteCacheAll } from "@/api/monitor/cache";
|
||||
import * as echarts from 'echarts';
|
||||
import type { CacheInfo, CacheForm, CacheMonitor, RedisInfo } from './types';
|
||||
import PageHeader from '@/components/PageHeader.vue';
|
||||
|
||||
// 响应式状态定义
|
||||
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 tableHeight = ref(window.innerHeight - 350);
|
||||
const cache = ref<CacheMonitor>({
|
||||
info: {} as RedisInfo,
|
||||
command_stats: [],
|
||||
db_size: 0
|
||||
});
|
||||
const commandstats = ref<HTMLElement | null>(null);
|
||||
const usedmemory = ref<HTMLElement | null>(null);
|
||||
|
||||
let commandstatsInstance: echarts.ECharts | null = null;
|
||||
let usedmemoryInstance: echarts.ECharts | null = null;
|
||||
|
||||
// 计算属性
|
||||
const tableContainerHeight = computed(() => `calc(100vh - 300px)`);
|
||||
|
||||
const resetCacheForm = () => {
|
||||
cacheKeys.value = [];
|
||||
cacheForm.value = {
|
||||
cache_name: '',
|
||||
cache_key: '',
|
||||
cache_value: ''
|
||||
};
|
||||
};
|
||||
|
||||
// 缓存名称相关方法
|
||||
const getCacheNameList = () => {
|
||||
loading.value = true;
|
||||
getCacheNames()
|
||||
.then(({ data: result }) => {
|
||||
if (result.status_code === 200) {
|
||||
cacheNames.value = result.data || [];
|
||||
resetCacheForm();
|
||||
} else {
|
||||
message.error(result.msg)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取缓存列表出错:', error);
|
||||
message.error('获取缓存列表失败');
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 刷新缓存列表
|
||||
const refreshCacheNames = () => {
|
||||
getCacheNameList();
|
||||
message.success('刷新缓存列表成功');
|
||||
};
|
||||
|
||||
// 清理缓存名称
|
||||
const handleClearCacheName = (row: CacheInfo) => {
|
||||
Modal.confirm({
|
||||
title: '确认清理',
|
||||
content: `确定要清理缓存名称[${row.cache_name}]吗？`,
|
||||
onOk() {
|
||||
deleteCacheName(row.cache_name)
|
||||
.then(({ data: result }) => {
|
||||
if (result.status_code === 200) {
|
||||
message.success(result.msg);
|
||||
getCacheNameList();
|
||||
} else {
|
||||
message.error(result.msg)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('清理缓存失败:', error);
|
||||
message.error('清理缓存失败');
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 缓存键名相关方法
|
||||
const getCacheKeyList = (row?: CacheInfo) => {
|
||||
const cacheName = row?.cache_name || nowCacheName.value;
|
||||
if (!cacheName) return;
|
||||
|
||||
subLoading.value = true;
|
||||
getCacheKeys(cacheName)
|
||||
.then(({ data: result }) => {
|
||||
if (result.status_code === 200) {
|
||||
cacheKeys.value = result.data || [];
|
||||
nowCacheName.value = cacheName;
|
||||
cacheForm.value = {
|
||||
cache_name: cacheName,
|
||||
cache_key: '',
|
||||
cache_value: ''
|
||||
};
|
||||
message.success(result.msg);
|
||||
} else {
|
||||
message.error(result.msg)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取缓存键名列表失败:', error);
|
||||
message.error('获取缓存键名列表失败');
|
||||
})
|
||||
.finally(() => {
|
||||
subLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 刷新键名列表
|
||||
const refreshCacheKeys = () => {
|
||||
getCacheKeyList();
|
||||
message.success('刷新键名列表成功');
|
||||
};
|
||||
|
||||
// 清理缓存键名
|
||||
const handleClearCacheKey = (cacheKey: string) => {
|
||||
Modal.confirm({
|
||||
title: '确认清理',
|
||||
content: `确定要清理缓存键名[${cacheKey}]吗？`,
|
||||
onOk() {
|
||||
deleteCacheKey(cacheKey)
|
||||
.then(({ data: result }) => {
|
||||
if (result.status_code === 200) {
|
||||
message.success(result.msg);
|
||||
getCacheKeyList();
|
||||
} else {
|
||||
message.error(result.msg)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('清理缓存键名失败:', error);
|
||||
message.error('清理缓存键名失败');
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 缓存内容相关方法
|
||||
const handleCacheValue = (cacheKey: string) => {
|
||||
getCacheValue(nowCacheName.value, cacheKey)
|
||||
.then(({ data: result }) => {
|
||||
if (result.status_code === 200) {
|
||||
cacheForm.value = result.data;
|
||||
message.success(result.msg);
|
||||
} else {
|
||||
message.error(result.msg)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取缓存内容失败:', error);
|
||||
message.error('获取缓存内容失败');
|
||||
});
|
||||
};
|
||||
|
||||
// 清理全部缓存
|
||||
const handleClearCacheAll = () => {
|
||||
Modal.confirm({
|
||||
title: '确认清理',
|
||||
content: '确定要清理全部缓存吗？',
|
||||
onOk() {
|
||||
deleteCacheAll()
|
||||
.then(({ data: result }) => {
|
||||
if (result.status_code === 200) {
|
||||
message.success(result.msg);
|
||||
getCacheNameList();
|
||||
} else {
|
||||
message.error(result.msg)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('清理全部缓存失败:', error);
|
||||
message.error('清理全部缓存失败');
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 监控数据获取
|
||||
const getInfo = () => {
|
||||
getCacheInfo()
|
||||
.then(({ data: result }) => {
|
||||
if (result.status_code === 200) {
|
||||
cache.value = result.data || {
|
||||
info: {},
|
||||
command_stats: [],
|
||||
dbSize: 0
|
||||
};
|
||||
initCharts();
|
||||
message.success(result.msg || '获取缓存监控数据成功');
|
||||
} else {
|
||||
message.error(result.msg || '获取缓存监控数据失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
message.error('获取缓存监控数据失败:', error);
|
||||
});
|
||||
};
|
||||
|
||||
// 图表初始化
|
||||
const initCharts = () => {
|
||||
if (!commandstats.value || !usedmemory.value) return;
|
||||
|
||||
commandstatsInstance = echarts.init(commandstats.value, 'macarons');
|
||||
usedmemoryInstance = echarts.init(usedmemory.value, 'macarons');
|
||||
|
||||
const commandStatsOption = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
series: [{
|
||||
name: '命令',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: cache.value.command_stats || [],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 1000
|
||||
}]
|
||||
};
|
||||
|
||||
const usedMemory = cache.value.info?.used_memory_human || '0';
|
||||
const usedMemoryOption = {
|
||||
tooltip: {
|
||||
formatter: `{b} <br/>{a} : ${usedMemory}`
|
||||
},
|
||||
series: [{
|
||||
name: '峰值',
|
||||
type: 'gauge',
|
||||
min: 0,
|
||||
max: 1000,
|
||||
detail: {
|
||||
formatter: usedMemory
|
||||
},
|
||||
data: [{
|
||||
value: parseFloat(usedMemory) || 0,
|
||||
name: '内存消耗'
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
commandstatsInstance.setOption(commandStatsOption);
|
||||
usedmemoryInstance.setOption(usedMemoryOption);
|
||||
};
|
||||
|
||||
// 窗口大小变化处理
|
||||
const handleResize = () => {
|
||||
tableHeight.value = window.innerHeight - 800;
|
||||
commandstatsInstance?.resize();
|
||||
usedmemoryInstance?.resize();
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
getCacheNameList();
|
||||
getInfo();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
commandstatsInstance?.dispose();
|
||||
usedmemoryInstance?.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.title {
|
||||
vertical-align: middle;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 420px;
|
||||
}
|
||||
</style>
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<!-- 页面头部 -->
|
||||
<page-header />
|
||||
|
||||
<!-- 搜索表单 -->
|
||||
<div class="table-search-wrapper">
|
||||
<a-card :bordered="false">
|
||||
<a-form :model="queryState" @finish="handleQuery">
|
||||
<a-row>
|
||||
<a-col flex="0 1 450px">
|
||||
<a-form-item name="ipaddr" label="主机" style="max-width: 300px;">
|
||||
<a-input v-model:value="queryState.ipaddr" placeholder="请输入主机地址" allowClear></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col flex="0 1 450px">
|
||||
<a-form-item name="user_name" label="用户名" style="max-width: 300px;">
|
||||
<a-input v-model:value="queryState.user_name" placeholder="请输入登陆用户名称" allowClear></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col flex="0 1 450px">
|
||||
<a-form-item name="login_location" label="登陆地点" style="max-width: 300px;">
|
||||
<a-input v-model:value="queryState.login_location" placeholder="请输入登陆地点" allowClear></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col>
|
||||
<a-button type="primary" html-type="submit" :loading="loading">查询</a-button>
|
||||
<a-button style="margin: 0 8px" @click="resetQuery">重置</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<a-card title="在线用户列表"
|
||||
:bordered="false"
|
||||
:headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
|
||||
:bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 400px)' }">
|
||||
<a-table
|
||||
:rowKey="record => record.session_id"
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="loading"
|
||||
:scroll="{ x: 500, y: 'calc(100vh - 500px)' }"
|
||||
:style="{ minHeight: '500px' }"
|
||||
:pagination="pagination">
|
||||
<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 />
|
||||
强退
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { Modal, message } from 'ant-design-vue';
|
||||
import { getOnlineList, deleteOnline} from "@/api/monitor/online";
|
||||
import type { QueryState, OnlineUser } from './types';
|
||||
import PageHeader from '@/components/PageHeader.vue';
|
||||
|
||||
const onlineList = ref<OnlineUser[]>([]);
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const pageNum = ref(1);
|
||||
const pageSize = ref(10);
|
||||
|
||||
const queryState = ref<QueryState>({
|
||||
ipaddr: undefined,
|
||||
user_name: undefined
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{ title: '会话编号', dataIndex: 'session_id', key: 'sessionId', ellipsis: true },
|
||||
{ title: '登录名称', dataIndex: 'user_name', key: 'userName', align: 'center', ellipsis: true },
|
||||
{ title: '主机', 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: 'browser', key: 'browser', align: 'center', ellipsis: true },
|
||||
{ title: '登录时间', dataIndex: 'login_time', key: 'loginTime', align: 'center', width: 180 },
|
||||
{ title: '操作', dataIndex: 'operation', key: 'operation', align: 'center', width: 120 }
|
||||
];
|
||||
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: true,
|
||||
total: onlineList.value.length,
|
||||
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条 / 总共 ${total} 条`
|
||||
})
|
||||
|
||||
const tableData = computed(() => {
|
||||
if (!onlineList.value) return [];
|
||||
const start = (pageNum.value - 1) * pageSize.value;
|
||||
return onlineList.value.slice(start, start + pageSize.value);
|
||||
});
|
||||
|
||||
const getList = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const response = await getOnlineList(queryState.value);
|
||||
onlineList.value = response?.data?.data?.items || [];
|
||||
total.value = response?.data?.data?.total || 0;
|
||||
} catch (error) {
|
||||
message.error('获取数据失败');
|
||||
onlineList.value = [];
|
||||
total.value = 0;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleQuery = () => {
|
||||
pageNum.value = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
|
||||
const resetQuery = () => {
|
||||
Object.keys(queryState.value).forEach((key: string) => {
|
||||
delete queryState.value[key];
|
||||
});
|
||||
pagination.current = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const handleForceLogout = (row: OnlineUser) => {
|
||||
if (!row?.user_name) return;
|
||||
Modal.confirm({
|
||||
title: '确认提示',
|
||||
content: `是否确认强退名称为"${row.user_name}"的用户?`,
|
||||
async onOk() {
|
||||
try {
|
||||
await deleteOnline(row.session_id);
|
||||
await getList();
|
||||
message.success('强退成功');
|
||||
} catch (error) {
|
||||
message.error('强退失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number, size: number) => {
|
||||
pageNum.value = page;
|
||||
pageSize.value = size;
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (current: number, size: number) => {
|
||||
pageSize.value = size;
|
||||
pageNum.value = 1;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-search-wrapper {
|
||||
margin-block-end: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,16 @@
|
||||
export interface QueryState {
|
||||
ipaddr?: string;
|
||||
user_name?: string;
|
||||
login_location?: string;
|
||||
}
|
||||
|
||||
export interface OnlineUser {
|
||||
session_id: string;
|
||||
user_id: number;
|
||||
user_name: string;
|
||||
ipaddr: string;
|
||||
login_location: string;
|
||||
os: string;
|
||||
browser: string;
|
||||
login_time: string;
|
||||
}
|
||||
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12" class="mb-4">
|
||||
<a-card :loading="loading" :bordered="false" class="shadow-sm" :bodyStyle="{ padding: '24px', 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>
|
||||
</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>
|
||||
<AProgress type="circle" :percent="100" :format="() => server.cpu?.cpu_num || 0" status="normal" />
|
||||
</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>
|
||||
<AProgress type="circle" :percent="server.cpu?.used || 0" :status="server.cpu?.used > 80 ? 'exception' : 'normal'" />
|
||||
</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>
|
||||
|
||||
<a-col :span="12" class="mb-4">
|
||||
<a-card :loading="loading" :bordered="false" class="shadow-sm" :bodyStyle="{ padding: '24px', 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>
|
||||
</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>
|
||||
<AProgress type="circle" :percent="server.mem?.usage || 0" :status="server.mem?.usage > 80 ? 'exception' : 'normal'" />
|
||||
</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>
|
||||
|
||||
</div>
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-lg font-bold">Python内存</div>
|
||||
<AProgress type="circle" :percent="server.py?.memory_usage || 0" :status="server.py?.memory_usage > 80 ? 'exception' : 'normal'" />
|
||||
</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" :bordered="false" class="shadow-sm" :bodyStyle="{ padding: '24px' }">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<MonitorOutlined class="text-primary text-lg mr-2" />
|
||||
<span class="font-medium">服务器基本信息</span>
|
||||
<a-tooltip title="展示服务器基本配置信息">
|
||||
<QuestionCircleOutlined class="ml-2 text-gray-400" />
|
||||
</a-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>
|
||||
|
||||
<a-col :span="24" class="mb-4">
|
||||
<a-card :loading="loading" :bordered="false" class="shadow-sm" :bodyStyle="{ padding: '24px' }">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<CodeOutlined class="text-primary text-lg mr-2" />
|
||||
<span class="font-medium">Python运行环境</span>
|
||||
<a-tooltip title="展示Python环境配置及运行状态">
|
||||
<QuestionCircleOutlined class="ml-2 text-gray-400" />
|
||||
</a-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>
|
||||
|
||||
<a-col :span="24">
|
||||
<a-card :loading="loading" :bordered="false" class="shadow-sm" :bodyStyle="{ padding: '24px' }">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<HddOutlined class="text-primary text-lg mr-2" />
|
||||
<span class="font-medium">磁盘使用情况</span>
|
||||
<a-tooltip title="展示磁盘空间使用详情">
|
||||
<QuestionCircleOutlined class="ml-2 text-gray-400" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<a-table
|
||||
:dataSource="server.disks"
|
||||
:pagination="false"
|
||||
:bordered="true"
|
||||
:scroll="{ x: 'max-content' }"
|
||||
:rowKey="(record) => record.dir_name"
|
||||
>
|
||||
<a-table-column
|
||||
key="dir_name"
|
||||
title="盘符路径"
|
||||
dataIndex="dir_name"
|
||||
:ellipsis="true"
|
||||
:width="100"
|
||||
/>
|
||||
<a-table-column
|
||||
key="sys_type_name"
|
||||
title="文件系统"
|
||||
dataIndex="sys_type_name"
|
||||
align="center"
|
||||
:width="100"
|
||||
/>
|
||||
<a-table-column
|
||||
key="type_name"
|
||||
title="盘符名称"
|
||||
dataIndex="type_name"
|
||||
:width="300"
|
||||
/>
|
||||
<a-table-column
|
||||
key="usage"
|
||||
title="使用率"
|
||||
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', { style: { padding: '0 10px' }}, [
|
||||
h(AProgress, {
|
||||
percent: usageValue,
|
||||
size: 'small',
|
||||
status,
|
||||
strokeColor,
|
||||
style: { marginBottom: '4px' }
|
||||
}),
|
||||
]);
|
||||
}"
|
||||
/>
|
||||
<a-table-column
|
||||
key="total"
|
||||
title="总大小"
|
||||
dataIndex="total"
|
||||
align="center"
|
||||
:width="100"
|
||||
/>
|
||||
<a-table-column
|
||||
key="free"
|
||||
title="可用大小"
|
||||
dataIndex="free"
|
||||
align="center"
|
||||
:width="100"
|
||||
/>
|
||||
<a-table-column
|
||||
key="used"
|
||||
title="已用大小"
|
||||
dataIndex="used"
|
||||
align="center"
|
||||
:width="100"
|
||||
/>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, h } from 'vue';
|
||||
import { getServer } from '@/api/monitor/server'
|
||||
import { message } from 'ant-design-vue';
|
||||
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';
|
||||
|
||||
const loading = ref(false);
|
||||
const server = ref<ServerInfo>({
|
||||
cpu: {
|
||||
cpu_num: 0,
|
||||
used: 0,
|
||||
sys: 0,
|
||||
free: 0
|
||||
},
|
||||
mem: {
|
||||
total: '',
|
||||
used: '',
|
||||
free: '',
|
||||
usage: 0
|
||||
},
|
||||
sys: {
|
||||
computer_name: '',
|
||||
os_name: '',
|
||||
computer_ip: '',
|
||||
os_arch: '',
|
||||
user_dir: ''
|
||||
},
|
||||
py: {
|
||||
name: '',
|
||||
version: '',
|
||||
start_time: '',
|
||||
run_time: '',
|
||||
home: '',
|
||||
memory_total: '',
|
||||
memory_used: '',
|
||||
memory_free: '',
|
||||
memory_usage: 0
|
||||
},
|
||||
disks: []
|
||||
});
|
||||
|
||||
async function getList() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await getServer();
|
||||
server.value = response.data.data;
|
||||
} catch (error) {
|
||||
message.error('获取服务器信息失败');
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,51 @@
|
||||
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