mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-29 23:44:41 +00:00
refactor(module): 重构模块路径和数据库配置
- 将前端API路径从`system`和`monitor`重命名为`module_system`和`module_monitor` - 移除MongoDB相关配置和依赖 - 统一数据库类型命名为`mysql`和`postgres` - 修复代码生成模板中的字段命名问题 - 更新依赖项并移除不必要的包 - 优化数据库连接配置 - 添加新的文档和Redoc视图组件 - 修复SQL脚本中的字段注释
This commit is contained in:
zhangtao
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div class="app-container" >
|
||||
<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>
|
||||
<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}`"
|
||||
/>
|
||||
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<el-tooltip content="展示服务器基本配置信息">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<el-tooltip content="展示Python环境配置及运行状态">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<el-tooltip content="展示磁盘空间使用详情">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<el-table :data="server.disks" border >
|
||||
<template #empty>
|
||||
<el-empty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
<el-table-column
|
||||
label="盘符路径"
|
||||
prop="dir_name"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="文件系统"
|
||||
prop="sys_type_name"
|
||||
align="center"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
label="盘符名称"
|
||||
prop="type_name"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="usage"
|
||||
label="使用率"
|
||||
align="center"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<el-table-column
|
||||
label="可用大小"
|
||||
prop="free"
|
||||
align="center"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
label="已用大小"
|
||||
prop="used"
|
||||
align="center"
|
||||
width="100"
|
||||
/>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ServerAPI, {type ServerInfo } from '@/api/module_monitor/server'
|
||||
|
||||
|
||||
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 ServerAPI.getServer();
|
||||
server.value = response.data.data;
|
||||
} catch (error) {
|
||||
console.error('获取服务器信息失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user