shuhi-ui/src/views/index/components/order-stat.vue

<template>
    <ele-card>
        <div class="section-title">
            <span class="section-bar"></span>
            <span>回收数据</span>
        </div>
        <el-row :gutter="24">
            <el-col :span="12" :xs="24">
                <div
                    v-for="(group, index) in leftGroups"
                    :key="index"
                    class="stat-panel"
                >
                    <div
                        v-for="item in group"
                        :key="item.label"
                        class="stat-cell"
                    >
                        <div class="stat-num">{{ item.value }}</div>
                        <div class="stat-label">
                            <i class="stat-dot" :class="item.dot"></i>
                            <span>{{ item.label }}</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12" :xs="24">
                <div
                    v-for="(group, index) in rightGroups"
                    :key="index"
                    class="stat-panel"
                >
                    <div
                        v-for="item in group"
                        :key="item.label"
                        class="stat-cell"
                    >
                        <div class="stat-num">{{ item.value }}</div>
                        <div class="stat-label">
                            <i class="stat-dot" :class="item.dot"></i>
                            <span>{{ item.label }}</span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </ele-card>
</template>

<script setup>
    import { computed } from 'vue';

    const props = defineProps({
        detail: {
            type: Object,
            default: () => ({})
        }
    });

    const num = (value) => {
        const count = Number(value);
        return Number.isFinite(count) ? count : 0;
    };

    const cell = (label, field, dot) => ({
        label,
        value: num(props.detail?.[field]),
        dot
    });

    const leftGroups = computed(() => [
        [
            cell('待初审订单', 'waitFirstCheckOrderNum', 'is-orange'),
            cell('待收货订单', 'waitReceiveOrderNum', 'is-green'),
            cell('待审核订单', 'waitCheckOrderNum', 'is-orange'),
            cell('待付款订单', 'waitPayOrderNum', 'is-orange')
        ],
        [
            cell('待退回订单', 'waitReturnOrderNum', 'is-orange'),
            cell('已到仓-收货超时', 'arriveReceiveTimeoutNum', 'is-green'),
            cell('已收货-审核超时', 'receiveCheckTimeoutNum', 'is-orange'),
            cell('回收催审核', 'recycleUrgeCheckNum', 'is-orange')
        ],
        [
            cell('待处理复审', 'waitRecheckNum', 'is-orange'),
            cell('待审核提醒', 'waitCheckRemindNum', 'is-green')
        ]
    ]);

    const rightGroups = computed(() => [
        [
            cell('库存预警', 'stockWarnNum', 'is-orange'),
            cell('库存已满', 'stockFullNum', 'is-green'),
            cell('24小时未初审', 'noFirstCheckNum', 'is-orange'),
            cell('回收价>出售价（中等）', 'recyclePriceAbnormalNum', 'is-orange')
        ],
        [
            cell('投诉管理', 'complaintsNum', 'is-orange'),
            cell('意见反馈', 'feedbackNum', 'is-green'),
            cell('上报', 'reportNum', 'is-orange'),
            cell('揽件超时', 'pickupTimeoutNum', 'is-orange')
        ],
        [
            cell('待入库不良单', 'waitBadStockNum', 'is-orange'),
            cell('待处理工单', 'waitHandleWorkOrderNum', 'is-green')
        ]
    ]);
</script>

<style lang="scss" scoped>
    .section-title {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
    }

    .section-bar {
        width: 3px;
        height: 16px;
        margin-right: 8px;
        background: #67c23a;
    }

    .stat-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom: 16px;
        border: 1px solid #ebeef5;
        border-radius: 4px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .stat-cell {
        padding: 22px 12px 18px;
        text-align: center;

        &:nth-child(2n) {
            border-left: 1px solid #ebeef5;
        }

        &:nth-child(n + 3) {
            border-top: 1px solid #ebeef5;
        }
    }

    .stat-num {
        font-size: 28px;
        line-height: 1.2;
        font-weight: 600;
        color: #303133;
    }

    .stat-label {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8px;
        color: #606266;
        font-size: 14px;
    }

    .stat-dot {
        width: 8px;
        height: 8px;
        margin-right: 6px;
        border-radius: 50%;
        flex-shrink: 0;

        &.is-orange {
            background: #e6a23c;
        }

        &.is-green {
            background: #67c23a;
        }
    }
</style>