shuhi-ui/src/views/statistic/overview/index.vue

<template>
    <ele-page flex-table v-loading="loading">
        <ele-card flex-table>
            <date-search
                class="mb-4"
                v-model="mapDateRange"
                @search="fetchProvinceData"
                position="left"
            />
            <map-card class="flex-1" :province-data="provinceData" />

            <div class="flex gap-10">
                <div class="flex-1 stat-card">
                    <el-statistic
                        title="总扫描次数"
                        :value="realTimeData.scanTimesTotal"
                        value-style="font-size:30px;color:#409eef"
                    />
                </div>
                <div class="flex-1 stat-card">
                    <el-statistic
                        title="总审核单量"
                        :value="realTimeData.auditNumTotal"
                        value-style="font-size:30px;color:#409eef"
                    />
                </div>
                <div class="flex-1 stat-card">
                    <el-statistic
                        title="总审核本数"
                        :value="realTimeData.auditBookNumTotal"
                        value-style="font-size:30px;color:#409eef"
                    />
                </div>
                <div class="flex-1 stat-card">
                    <el-statistic
                        title="总审核金额"
                        :value="realTimeData.auditMoneyTotal"
                        value-style="font-size:30px;color:#409eef"
                        :precision="2"
                    />
                </div>
                <div class="flex-1 stat-card">
                    <el-statistic
                        title="总用户人数"
                        :value="realTimeData.userNumTotal"
                        value-style="font-size:30px;color:#409eef"
                    />
                </div>
            </div>
            <el-divider />
            <div class="flex justify-end mb-2" @click="fetchRealTimeData">
                <div class="flex items-center gap-2 cursor-pointer">
                    <el-icon><Refresh /></el-icon>
                    <span>更新时间：{{ nowTime }}</span>
                </div>
            </div>
            <div class="flex gap-4">
                <div class="flex-1 stat-card">
                    <stat-card
                        title="回收订单数"
                        :value="realTimeData.orderNum"
                        :data="realTimeData.orderNumTodayCharts"
                        :yesterday-data="realTimeData.orderNumYestodayCharts"
                        :chatAxis="realTimeData.chatAxis"
                    />
                </div>
                <div class="flex-1 stat-card">
                    <stat-card
                        title="回收数量（本）"
                        :value="realTimeData.bookNum"
                        :data="realTimeData.bookNumTodayCharts"
                        :yesterday-data="realTimeData.bookNumYestodayCharts"
                        :chatAxis="realTimeData.chatAxis"
                    />
                </div>
                <div class="flex-1 stat-card">
                    <stat-card
                        title="回收单本均价"
                        :precision="2"
                        :value="realTimeData.recycleAveragePrice"
                        :data="realTimeData.recycleAveragePriceTodayCharts"
                        :yesterday-data="
                            realTimeData.recycleAveragePriceYestodayCharts
                        "
                        :chatAxis="realTimeData.chatAxis"
                    />
                </div>
                <div class="flex-1 stat-card">
                    <stat-card
                        title="待审核订单数"
                        :value="realTimeData.waitAuditOrderNum"
                        :data="realTimeData.waitAuditOrderNumTodayCharts"
                        :yesterday-data="
                            realTimeData.waitAuditOrderNumYestodayCharts
                        "
                        :chatAxis="realTimeData.chatAxis"
                    />
                </div>
                <div class="flex-1 stat-card">
                    <stat-card
                        title="待签收订单数"
                        :value="realTimeData.waitSignOrderNum"
                        :data="realTimeData.waitSignOrderNumTodayCharts"
                        :yesterday-data="
                            realTimeData.waitSignOrderNumYestodayCharts
                        "
                        :chatAxis="realTimeData.chatAxis"
                    />
                </div>
            </div>
            <div class="flex gap-4 mt-4">
                <div class="flex-1 stat-card">
                    <stat-card
                        title="今日扫描次数"
                        :value="realTimeData.scanTimes"
                        :data="realTimeData.scanTimesTodayCharts"
                        :yesterday-data="realTimeData.scanTimesYestodayCharts"
                        :chatAxis="realTimeData.chatAxis"
                    />
                </div>
                <div class="flex-1 stat-card">
                    <stat-card
                        title="今日扫描人数"
                        :value="realTimeData.scanUserNum"
                        :data="realTimeData.scanUserNumTodayCharts"
                        :yesterday-data="realTimeData.scanUserNumYestodayCharts"
                        :chatAxis="realTimeData.chatAxis"
                    />
                </div>
                <div class="flex-1 stat-card">
                    <stat-card
                        title="用户增长数"
                        :value="realTimeData.userRegNum"
                        :data="realTimeData.userRegNumTodayCharts"
                        :yesterday-data="realTimeData.userRegNumYestodayCharts"
                        :chatAxis="realTimeData.chatAxis"
                    />
                </div>
                <div class="flex-1 stat-card">
                    <stat-card
                        title="待审核金额"
                        :precision="2"
                        :value="realTimeData.waitAuditMoney"
                        :data="realTimeData.waitAuditMoneyTodayCharts"
                        :yesterday-data="
                            realTimeData.waitAuditMoneyYestodayCharts
                        "
                        :chatAxis="realTimeData.chatAxis"
                    />
                </div>
                <div class="flex-1 stat-card">
                    <stat-card
                        title="待打款金额"
                        :precision="2"
                        :value="realTimeData.waitPayoutMoney"
                        :data="realTimeData.waitPayoutMoneyTodayCharts"
                        :yesterday-data="
                            realTimeData.waitPayoutMoneyYestodayCharts
                        "
                        :chatAxis="realTimeData.chatAxis"
                    />
                </div>
            </div>
            <el-divider />

            <div class="flex-col">
                <date-search
                    class="mb-4"
                    v-model="dateRange"
                    @search="fetchHistoryData"
                />
                <div class="gap-4 flex">
                    <div style="flex: 4" class="flex flex-col">
                        <div class="flex gap-4">
                            <div class="flex-1 stat-card">
                                <stat-card
                                    title="回收订单数"
                                    :data="historyData.orderNumCharts"
                                    :chatAxis="historyData.chatAxis"
                                    :value="historyData.orderNum"
                                />
                            </div>
                            <div class="flex-1 stat-card">
                                <stat-card
                                    title="回收数量（本）"
                                    :value="historyData.bookNum"
                                    :data="historyData.bookNumCharts"
                                    :chatAxis="historyData.chatAxis"
                                />
                            </div>
                            <div class="flex-1 stat-card">
                                <stat-card
                                    title="回收单本均价"
                                    :value="historyData.recycleAveragePrice"
                                    :data="
                                        historyData.recycleAveragePriceCharts
                                    "
                                    :chatAxis="historyData.chatAxis"
                                    :precision="2"
                                />
                            </div>
                            <div class="flex-1 stat-card">
                                <stat-card
                                    title="审核订单数"
                                    :value="historyData.auditNum"
                                    :data="historyData.auditNumCharts"
                                    :chatAxis="historyData.chatAxis"
                                />
                            </div>
                        </div>
                        <div class="flex gap-4 mt-4">
                            <div class="flex-1 stat-card">
                                <stat-card
                                    title="签收订单数"
                                    :value="historyData.signOrderNum"
                                    :data="historyData.signOrderNumCharts"
                                    :chatAxis="historyData.chatAxis"
                                />
                            </div>
                            <div class="flex-1 stat-card">
                                <stat-card
                                    title="扫描次数"
                                    :value="historyData.scanTimes"
                                    :data="historyData.scanTimesCharts"
                                    :chatAxis="historyData.chatAxis"
                                />
                            </div>
                            <div class="flex-1 stat-card">
                                <stat-card
                                    title="扫描人数"
                                    :value="historyData.scanUserNum"
                                    :data="historyData.scanUserNumCharts"
                                    :chatAxis="historyData.chatAxis"
                                />
                            </div>
                            <div class="flex-1 stat-card">
                                <stat-card
                                    title="用户增长数"
                                    :value="historyData.userRegNum"
                                    :data="historyData.userRegNumCharts"
                                    :chatAxis="historyData.chatAxis"
                                />
                            </div>
                        </div>
                    </div>

                    <div class="flex-1 flex flex-col stat-card">
                        <pie-chart
                            title="回收折扣占比"
                            :data="recycleDiscountData"
                        />
                        <pie-chart
                            title="审核品相比例分析"
                            :data="auditRatioData"
                        />
                    </div>
                </div>
            </div>
        </ele-card>
    </ele-page>
</template>

<script setup>
    import mapCard from '@/views/statistic/overview/components/map-card.vue';
    import statCard from '@/views/statistic/overview/components/stat-card.vue';
    import pieChart from '@/views/statistic/overview/components/pie-chart.vue';
    import DateSearch from '@/components/DateSearch/index.vue';
    import { Refresh } from '@element-plus/icons-vue';
    import dayjs from 'dayjs';
    import request from '@/utils/request';
    import { onMounted, ref } from 'vue';

    const provinceData = ref([]);
    const dateRange = ref([
        dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
        dayjs().subtract(1, 'day').format('YYYY-MM-DD')
    ]);
    // 地图数据时间范围
    const mapDateRange = ref([
        dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
        dayjs().subtract(1, 'day').format('YYYY-MM-DD')
    ]);

    // 组织回收折扣比例数据
    const recycleDiscountData = ref([
        { value: 0, name: '≥2折', key: 'discount2' },
        { value: 0, name: '2<至≥1', key: 'discount12' },
        { value: 0, name: '1<至≥0.5', key: 'discount051' },
        { value: 0, name: '<0.5', key: 'discount05' }
    ]);

    // 组织审核品相比例分析数据
    const auditRatioData = ref([
        { value: 0, name: '良好', key: 'auditGoodNum' },
        { value: 0, name: '一般', key: 'auditGeneralNum' },
        { value: 0, name: '较差', key: 'auditBadNum' }
    ]);

    //获取历史数据汇总
    const historyData = ref({
        orderNumCharts: [],
        chatAxis: []
    });
    const fetchHistoryData = async () => {
        let params = {
            statisticDateStart: dateRange.value[0],
            statisticDateEnd: dateRange.value[1]
        };
        request
            .get('/order/recycleStatisticOverview/history', { params })
            .then((res) => {
                if (res.data.code === 200) {
                    recycleDiscountData.value.forEach((item) => {
                        item.value = res.data.data[item.key] || 0;
                    });
                    auditRatioData.value.forEach((item) => {
                        item.value = res.data.data[item.key] || 0;
                    });
                    historyData.value = res.data.data;
                }
            });
    };

    // 获取省份排名数据 //传入的时间是近7天，结束时间就是今天，使用 dayjs
    const fetchProvinceData = async () => {
        const params = {
            statisticDateStart: mapDateRange.value[0],
            statisticDateEnd: mapDateRange.value[1]
        };
        request
            .get('/order/recycleStatisticOverview/provinceRankList', {
                params
            })
            .then((res) => {
                if (res.data.code === 200) {
                    provinceData.value = res.data.data;
                }
            });
    };

    // 获取实时数据
    const realTimeData = ref({});
    const loading = ref(false);
    const nowTime = ref('');
    const fetchRealTimeData = async () => {
        loading.value = true;
        request
            .get('/order/recycleStatisticOverview/realtime')
            .then((res) => {
                if (res.data.code === 200) {
                    loading.value = false;
                    realTimeData.value = res.data.data;
                    nowTime.value =
                        res.data.data.nowTime ||
                        dayjs().format('YYYY-MM-DD HH:mm:ss');
                    // realTimeData.value.chatAxis = res.data.data.chatAxis.map(v=>`${v}点`);
                }
            })
            .finally(() => {
                loading.value = false;
            });
    };
    2254;

    onMounted(() => {
        fetchProvinceData();
        fetchHistoryData();
        fetchRealTimeData();
    });
</script>

<style lang="scss">
    .stat-card {
        border-radius: 10px;
        background: #f8f7f6;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .el-statistic__head {
            text-align: center;
        }
    }
</style>