增加 dashboard
This commit is contained in:
aaron
parent
90f83588fd
commit
af758aeeba
@ -5,20 +5,132 @@
|
||||
<h1>欢迎使用蜂快运营管理系统</h1>
|
||||
<p>{{ greeting }}</p>
|
||||
</div>
|
||||
|
||||
<a-row :gutter="24" class="data-overview">
|
||||
<!-- 用户数据卡片 -->
|
||||
<a-col :span="8">
|
||||
<a-card class="data-card">
|
||||
<template #title>
|
||||
<span class="card-title">
|
||||
<team-outlined /> 用户数据
|
||||
</span>
|
||||
</template>
|
||||
<a-statistic-group>
|
||||
<a-statistic
|
||||
title="总用户数"
|
||||
:value="dashboardData.total_user_count"
|
||||
class="main-stat"
|
||||
/>
|
||||
<div class="sub-stats">
|
||||
<a-statistic
|
||||
title="今日新增"
|
||||
:value="dashboardData.today_user_count"
|
||||
:value-style="{ color: '#3f8600' }"
|
||||
/>
|
||||
<a-statistic
|
||||
title="昨日新增"
|
||||
:value="dashboardData.yesterday_user_count"
|
||||
/>
|
||||
</div>
|
||||
</a-statistic-group>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- 订单数据卡片 -->
|
||||
<a-col :span="8">
|
||||
<a-card class="data-card">
|
||||
<template #title>
|
||||
<span class="card-title">
|
||||
<shopping-outlined /> 配送订单
|
||||
</span>
|
||||
</template>
|
||||
<a-statistic-group>
|
||||
<a-statistic
|
||||
title="总订单数"
|
||||
:value="dashboardData.total_order_count"
|
||||
class="main-stat"
|
||||
/>
|
||||
<div class="sub-stats">
|
||||
<a-statistic
|
||||
title="今日新增"
|
||||
:value="dashboardData.today_order_count"
|
||||
:value-style="{ color: '#3f8600' }"
|
||||
/>
|
||||
<a-statistic
|
||||
title="昨日新增"
|
||||
:value="dashboardData.yesterday_order_count"
|
||||
/>
|
||||
</div>
|
||||
</a-statistic-group>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- 小区数据卡片 -->
|
||||
<a-col :span="8">
|
||||
<a-card class="data-card">
|
||||
<template #title>
|
||||
<span class="card-title">
|
||||
<home-outlined /> 小区数据
|
||||
</span>
|
||||
</template>
|
||||
<a-statistic-group>
|
||||
<a-statistic
|
||||
title="总小区数"
|
||||
:value="dashboardData.total_community_count"
|
||||
class="main-stat"
|
||||
/>
|
||||
<div class="sub-stats">
|
||||
<a-statistic
|
||||
title="今日新增"
|
||||
:value="dashboardData.today_community_count"
|
||||
:value-style="{ color: '#3f8600' }"
|
||||
/>
|
||||
<a-statistic
|
||||
title="昨日新增"
|
||||
:value="dashboardData.yesterday_community_count"
|
||||
/>
|
||||
</div>
|
||||
</a-statistic-group>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { defineComponent, computed, ref, onMounted } from 'vue'
|
||||
import { Card, Row, Col, Statistic } from 'ant-design-vue'
|
||||
import { TeamOutlined, ShoppingOutlined, HomeOutlined } from '@ant-design/icons-vue'
|
||||
import PageContainer from '@/components/PageContainer.vue'
|
||||
import request from '@/utils/request'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
PageContainer
|
||||
PageContainer,
|
||||
ACard: Card,
|
||||
ARow: Row,
|
||||
ACol: Col,
|
||||
AStatistic: Statistic,
|
||||
AStatisticGroup: Statistic.Group,
|
||||
TeamOutlined,
|
||||
ShoppingOutlined,
|
||||
HomeOutlined
|
||||
},
|
||||
setup() {
|
||||
const dashboardData = ref({
|
||||
total_user_count: 0,
|
||||
today_user_count: 0,
|
||||
yesterday_user_count: 0,
|
||||
total_order_count: 0,
|
||||
today_order_count: 0,
|
||||
yesterday_order_count: 0,
|
||||
total_community_count: 0,
|
||||
today_community_count: 0,
|
||||
yesterday_community_count: 0
|
||||
})
|
||||
|
||||
const greeting = computed(() => {
|
||||
const hour = new Date().getHours()
|
||||
if (hour < 6) return '夜深了，请注意休息'
|
||||
@ -30,8 +142,24 @@ export default defineComponent({
|
||||
return '晚上好'
|
||||
})
|
||||
|
||||
const fetchDashboardData = async () => {
|
||||
try {
|
||||
const res = await request.get('/api/dashboard')
|
||||
if (res.code === 200) {
|
||||
dashboardData.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取数据看板数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchDashboardData()
|
||||
})
|
||||
|
||||
return {
|
||||
greeting
|
||||
greeting,
|
||||
dashboardData
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -46,7 +174,8 @@ export default defineComponent({
|
||||
|
||||
.welcome-card {
|
||||
text-align: center;
|
||||
padding: 48px 0;
|
||||
padding: 24px 0;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.welcome-card h1 {
|
||||
@ -59,4 +188,73 @@ export default defineComponent({
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.data-overview {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.data-card {
|
||||
height: 100%;
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
|
||||
.ant-card-head-title {
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
|
||||
.anticon {
|
||||
font-size: 20px;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.main-stat {
|
||||
margin-bottom: 16px;
|
||||
|
||||
:deep(.ant-statistic-title) {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
:deep(.ant-statistic-content) {
|
||||
font-size: 24px;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
:deep(.ant-statistic) {
|
||||
padding: 0 12px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.ant-statistic-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.ant-statistic-content {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user