28 lines
1.2 KiB
Vue
28 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<a-spin :loading="loading" style="width: 100%">
|
||
|
|
<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"><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 { 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 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: '配送订单' },
|
||
|
|
];
|
||
|
|
onMounted(async () => {
|
||
|
|
loading.value = true;
|
||
|
|
try { Object.assign(overview, await request<Overview>('/dashboard/overview')); }
|
||
|
|
catch (error) { Message.error((error as Error).message); }
|
||
|
|
finally { loading.value = false; }
|
||
|
|
});
|
||
|
|
</script>
|