48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
|
|
import type { DashboardOverview } from '@/types/api'
|
|
|
|
defineProps<{
|
|
overview: DashboardOverview | null
|
|
loading: boolean
|
|
}>()
|
|
|
|
const periods = [
|
|
{ key: 'today' as const, label: '今日' },
|
|
{ key: 'this_week' as const, label: '本周' },
|
|
{ key: 'this_month' as const, label: '本月' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<a-row :gutter="16" class="mb-4">
|
|
<a-col :span="8" v-for="p in periods" :key="p.key">
|
|
<a-card :bordered="false">
|
|
<a-skeleton :loading="loading" active :paragraph="{ rows: 2 }">
|
|
<h3 class="text-base font-medium mb-3">{{ p.label }}</h3>
|
|
<div class="flex gap-6">
|
|
<a-statistic
|
|
title="成功"
|
|
:value="overview?.[p.key]?.success ?? 0"
|
|
:value-style="{ color: '#3f8600' }"
|
|
>
|
|
<template #prefix>
|
|
<CheckCircleOutlined />
|
|
</template>
|
|
</a-statistic>
|
|
<a-statistic
|
|
title="失败"
|
|
:value="overview?.[p.key]?.failed ?? 0"
|
|
:value-style="(overview?.[p.key]?.failed ?? 0) > 0 ? { color: '#cf1322' } : {}"
|
|
>
|
|
<template #prefix>
|
|
<CloseCircleOutlined />
|
|
</template>
|
|
</a-statistic>
|
|
</div>
|
|
</a-skeleton>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|