<script lang="ts" setup>
|
import { computed, ref } from 'vue';
|
|
import { Page } from '@vben/common-ui';
|
|
import { Card, Col, DatePicker, Row } from 'ant-design-vue';
|
import dayjs from 'dayjs';
|
|
import { getRangePickerDefaultProps } from '#/utils';
|
|
import DistributionChart from './modules/distribution-chart.vue';
|
import SummaryCards from './modules/summary-cards.vue';
|
import TrendChart from './modules/trend-chart.vue';
|
|
defineOptions({ name: 'MesConsumerScanStatistics' });
|
|
/** 统计时间范围，默认近 30 天（valueFormat 已转为 yyyy-MM-dd HH:mm:ss） */
|
const dateRange = ref<[string, string] | undefined>([
|
dayjs().subtract(30, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
]);
|
|
const startTime = computed(() => dateRange.value?.[0]);
|
const endTime = computed(() => dateRange.value?.[1]);
|
</script>
|
|
<template>
|
<Page>
|
<Card title="消费者扫码统计" class="mb-4">
|
<div class="flex flex-wrap items-center gap-2">
|
<span class="text-muted-foreground text-sm">统计时间范围</span>
|
<DatePicker.RangePicker
|
v-model:value="dateRange"
|
v-bind="getRangePickerDefaultProps()"
|
/>
|
</div>
|
</Card>
|
|
<SummaryCards :start-time="startTime" :end-time="endTime" />
|
|
<Row :gutter="16">
|
<Col :lg="14" :md="24" :sm="24" :xl="14" :xs="24" class="mb-4">
|
<TrendChart :start-time="startTime" :end-time="endTime" />
|
</Col>
|
<Col :lg="10" :md="24" :sm="24" :xl="10" :xs="24" class="mb-4">
|
<DistributionChart :start-time="startTime" :end-time="endTime" />
|
</Col>
|
</Row>
|
</Page>
|
</template>
|
