81 lines
1.6 KiB
Vue
81 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="dashboard">
|
||
|
|
<a-row :gutter="16">
|
||
|
|
<a-col :span="6">
|
||
|
|
<a-card>
|
||
|
|
<a-statistic
|
||
|
|
title="总订单数"
|
||
|
|
:value="statistics.total"
|
||
|
|
:loading="loading"
|
||
|
|
/>
|
||
|
|
</a-card>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="6">
|
||
|
|
<a-card>
|
||
|
|
<a-statistic
|
||
|
|
title="已支付订单"
|
||
|
|
:value="statistics.paidCount"
|
||
|
|
:loading="loading"
|
||
|
|
/>
|
||
|
|
</a-card>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="6">
|
||
|
|
<a-card>
|
||
|
|
<a-statistic
|
||
|
|
title="总收入"
|
||
|
|
:value="statistics.totalRevenue"
|
||
|
|
:precision="2"
|
||
|
|
prefix="¥"
|
||
|
|
:loading="loading"
|
||
|
|
/>
|
||
|
|
</a-card>
|
||
|
|
</a-col>
|
||
|
|
</a-row>
|
||
|
|
|
||
|
|
<a-card title="各类型卜卦统计" style="margin-top: 16px" :loading="loading">
|
||
|
|
<a-table
|
||
|
|
:columns="columns"
|
||
|
|
:data-source="statistics.typeStats"
|
||
|
|
:pagination="false"
|
||
|
|
/>
|
||
|
|
</a-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted } from 'vue'
|
||
|
|
import axios from 'axios'
|
||
|
|
|
||
|
|
const loading = ref(true)
|
||
|
|
const statistics = ref({
|
||
|
|
total: 0,
|
||
|
|
paidCount: 0,
|
||
|
|
totalRevenue: 0,
|
||
|
|
typeStats: [],
|
||
|
|
})
|
||
|
|
|
||
|
|
const columns = [
|
||
|
|
{
|
||
|
|
title: '类型',
|
||
|
|
dataIndex: 'Type',
|
||
|
|
key: 'Type',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '数量',
|
||
|
|
dataIndex: 'Count',
|
||
|
|
key: 'Count',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
try {
|
||
|
|
const response = await axios.get('/api/admin/records/statistics')
|
||
|
|
statistics.value = response.data
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to fetch statistics:', error)
|
||
|
|
} finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|