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