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></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"></stat-card>
                </div>
                <div class="flex-1 stat-card">
                    <stat-card title="回收数量（本）" :value="realTimeData.bookNum" :data="realTimeData.bookNumTodayCharts" :yesterday-data="realTimeData.bookNumYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                </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"></stat-card>
                </div>
                <div class="flex-1 stat-card">
                    <stat-card title="待审核订单数" :value="realTimeData.waitAuditOrderNum" :data="realTimeData.waitAuditOrderNumTodayCharts" :yesterday-data="realTimeData.waitAuditOrderNumYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                </div>
                <div class="flex-1 stat-card">
                    <stat-card title="待签收订单数" :value="realTimeData.waitSignOrderNum" :data="realTimeData.waitSignOrderNumTodayCharts" :yesterday-data="realTimeData.waitSignOrderNumYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                </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"></stat-card>
                </div>
                <div class="flex-1 stat-card">
                    <stat-card title="今日扫描人数" :value="realTimeData.scanUserNum" :data="realTimeData.scanUserNumTodayCharts" :yesterday-data="realTimeData.scanUserNumYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                </div>
                <div class="flex-1 stat-card">
                    <stat-card title="用户增长数" :value="realTimeData.userRegNum" :data="realTimeData.userRegNumTodayCharts" :yesterday-data="realTimeData.userRegNumYestodayCharts" :chatAxis="realTimeData.chatAxis"></stat-card>
                </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"></stat-card>
                </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"></stat-card>
                </div>
            </div>
            <el-divider></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"></stat-card>
                            </div>
                            <div class="flex-1 stat-card">
                                <stat-card title="回收数量（本）" :value="historyData.bookNum" :data="historyData.bookNumCharts" :chatAxis="historyData.chatAxis"></stat-card>
                            </div>
                            <div class="flex-1 stat-card">
                                <stat-card title="回收单本均价" :value="historyData.recycleAveragePrice" :data="historyData.recycleAveragePriceCharts" :chatAxis="historyData.chatAxis" :precision="2"></stat-card>
                            </div>
                            <div class="flex-1 stat-card">
                                <stat-card title="审核订单数" :value="historyData.auditNum" :data="historyData.auditNumCharts" :chatAxis="historyData.chatAxis"></stat-card>
                            </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"></stat-card>
                            </div>
                            <div class="flex-1 stat-card">
                                <stat-card title="扫描次数" :value="historyData.scanTimes" :data="historyData.scanTimesCharts" :chatAxis="historyData.chatAxis"></stat-card>
                            </div>
                            <div class="flex-1 stat-card">
                                <stat-card title="扫描人数" :value="historyData.scanUserNum" :data="historyData.scanUserNumCharts" :chatAxis="historyData.chatAxis"></stat-card>
                            </div>
                            <div class="flex-1 stat-card">
                                <stat-card title="用户增长数" :value="historyData.userRegNum" :data="historyData.userRegNumCharts" :chatAxis="historyData.chatAxis"></stat-card>
                            </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');
        }
    }).finally(() => {
        loading.value = false;
    });
};

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>