90 lines
2.7 KiB
Vue
90 lines
2.7 KiB
Vue
<template>
|
||
<div class="space-y-6">
|
||
<div class="grid grid-cols-4 gap-6">
|
||
<a-card class="text-center">
|
||
<div class="text-3xl font-bold text-blue-600">{{ stats.serverCount }}</div>
|
||
<div class="text-gray-500 mt-2">服务器总数</div>
|
||
</a-card>
|
||
<a-card class="text-center">
|
||
<div class="text-3xl font-bold text-green-600">{{ stats.onlineCount }}</div>
|
||
<div class="text-gray-500 mt-2">在线服务器</div>
|
||
</a-card>
|
||
<a-card class="text-center">
|
||
<div class="text-3xl font-bold text-purple-600">{{ stats.scriptCount }}</div>
|
||
<div class="text-gray-500 mt-2">脚本数量</div>
|
||
</a-card>
|
||
<a-card class="text-center">
|
||
<div class="text-3xl font-bold text-orange-600">{{ stats.executeCount }}</div>
|
||
<div class="text-gray-500 mt-2">今日执行</div>
|
||
</a-card>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-6">
|
||
<a-card title="最近执行记录">
|
||
<a-table
|
||
:data-source="recentExecutions"
|
||
:columns="executionColumns"
|
||
:pagination="false"
|
||
size="small"
|
||
/>
|
||
</a-card>
|
||
|
||
<a-card title="服务器状态">
|
||
<a-table
|
||
:data-source="serverStatus"
|
||
:columns="serverColumns"
|
||
:pagination="false"
|
||
size="small"
|
||
/>
|
||
</a-card>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
|
||
const stats = ref({
|
||
serverCount: 0,
|
||
onlineCount: 0,
|
||
scriptCount: 0,
|
||
executeCount: 0
|
||
})
|
||
|
||
const recentExecutions = ref([])
|
||
const serverStatus = ref([])
|
||
|
||
const executionColumns = [
|
||
{ title: '脚本名称', dataIndex: 'scriptName', key: 'scriptName' },
|
||
{ title: '执行时间', dataIndex: 'executeTime', key: 'executeTime' },
|
||
{ title: '状态', dataIndex: 'status', key: 'status' }
|
||
]
|
||
|
||
const serverColumns = [
|
||
{ title: '服务器名称', dataIndex: 'name', key: 'name' },
|
||
{ title: 'IP地址', dataIndex: 'ip', key: 'ip' },
|
||
{ title: '状态', dataIndex: 'status', key: 'status' }
|
||
]
|
||
|
||
onMounted(async () => {
|
||
// 模拟数据，实际项目中应该从API获取
|
||
stats.value = {
|
||
serverCount: 12,
|
||
onlineCount: 10,
|
||
scriptCount: 8,
|
||
executeCount: 25
|
||
}
|
||
|
||
recentExecutions.value = [
|
||
{ key: 1, scriptName: '系统更新', executeTime: '2024-01-15 10:30', status: '成功' },
|
||
{ key: 2, scriptName: '日志清理', executeTime: '2024-01-15 09:15', status: '成功' },
|
||
{ key: 3, scriptName: '备份数据', executeTime: '2024-01-15 08:00', status: '失败' }
|
||
]
|
||
|
||
serverStatus.value = [
|
||
{ key: 1, name: 'Web-01', ip: '192.168.1.10', status: '在线' },
|
||
{ key: 2, name: 'DB-01', ip: '192.168.1.20', status: '在线' },
|
||
{ key: 3, name: 'Cache-01', ip: '192.168.1.30', status: '离线' }
|
||
]
|
||
})
|
||
</script> |