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