49 lines
2.2 KiB
Vue
49 lines
2.2 KiB
Vue
<template>
|
||
<a-spin :loading="loading" style="width: 100%">
|
||
<a-alert v-if="errorMessage" type="error" show-icon class="dashboard-alert">
|
||
{{ errorMessage }}
|
||
<template #action><a-button size="small" @click="loadOverview">重新加载</a-button></template>
|
||
</a-alert>
|
||
<div class="dashboard-meta">当前配送点业务汇总 · 更新时间：{{ updatedAtLabel }}</div>
|
||
<a-grid :cols="{ xs: 1, sm: 2, lg: 4 }" :col-gap="16" :row-gap="16">
|
||
<a-grid-item v-for="item in cards" :key="item.key">
|
||
<a-card :bordered="false" class="metric-card">
|
||
<a-statistic :title="item.label" :value="overview[item.key]" show-group-separator />
|
||
</a-card>
|
||
</a-grid-item>
|
||
</a-grid>
|
||
</a-spin>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { Message } from '@arco-design/web-vue';
|
||
import { computed, onMounted, reactive, ref } from 'vue';
|
||
import { request } from '@/api/http';
|
||
type Overview = Record<'staff_count' | 'user_count' | 'contract_count' | 'order_count', number>;
|
||
const loading = ref(false);
|
||
const errorMessage = ref('');
|
||
const updatedAt = ref('');
|
||
const updatedAtLabel = computed(() => updatedAt.value || (errorMessage.value ? '加载失败' : '加载中…'));
|
||
const overview = reactive<Overview>({ staff_count: 0, user_count: 0, contract_count: 0, order_count: 0 });
|
||
const cards: Array<{ key: keyof Overview; label: string }> = [
|
||
{ key: 'staff_count', label: '配送人员' }, { key: 'user_count', label: '服务用户' },
|
||
{ key: 'contract_count', label: '配送合同' }, { key: 'order_count', label: '配送订单' },
|
||
];
|
||
async function loadOverview() {
|
||
loading.value = true;
|
||
errorMessage.value = '';
|
||
try {
|
||
Object.assign(overview, await request<Overview>('/dashboard/overview'));
|
||
updatedAt.value = new Date().toLocaleString('zh-CN', { hour12: false });
|
||
}
|
||
catch (error) { errorMessage.value = (error as Error).message; Message.error(errorMessage.value); }
|
||
finally { loading.value = false; }
|
||
}
|
||
onMounted(loadOverview);
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.dashboard-alert { margin-bottom: 16px; }
|
||
.dashboard-meta { margin-bottom: 12px; color: var(--color-text-3); font-size: 12px; text-align: right; }
|
||
.metric-card { min-height: 112px; }
|
||
</style>
|