ccy_DIB/pages/DigitalIntelligenceDashboard/components/SupplierPerformance.vue

<template>
    <view class="supplier-performance">
        <!-- 送达率趋势 -->
        <view class="chart-title">送达率趋势</view>
        <view class="chart-section">
            <view class="chart-container">
                <ChartLoading v-if="isLoading" text="数据加载中..." />
                <QiunDataCharts v-else type="line" :opts="deliveryTrendOpts" :chartData="deliveryTrendData"
                    :canvas2d="true" :inScrollView="true" canvasId="deliveryTrendChart"
                    :tooltipFormat="formatDeliveryTooltip" />
            </view>
        </view>

        <!-- 供应商评分TOP10 -->
        <view class="chart-title">供应商评分TOP10</view>
        <view class="chart-section">
            <view class="chart-container">
                <ChartLoading v-if="isLoading" text="数据加载中..." />
                <QiunDataCharts v-else type="bar" :opts="scoreRankOpts" :chartData="scoreRankData" :canvas2d="true"
                    :inScrollView="true" canvasId="scoreRankChart" tooltipFormat="scoreRankChart" />
            </view>
        </view>

        <!-- 绩效统计卡片 -->
        <view class="performance-cards">
            <view class="performance-card excellent">
                <view class="performance-icon">✓</view>
                <view class="performance-content">
                    <text class="performance-title">优秀供应商</text>
                    <view class="performance-value">
                        <text class="performance-number">{{ performanceData.excellent || 0 }}</text>
                        <text class="performance-unit">个</text>
                    </view>
                </view>
            </view>
            <view class="performance-card warning">
                <view class="performance-icon">!</view>
                <view class="performance-content">
                    <text class="performance-title">待改进</text>
                    <view class="performance-value">
                        <text class="performance-number">{{ performanceData.needImprovement || 0 }}</text>
                        <text class="performance-unit">个</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
import ChartLoading from './ChartLoading.vue'

export default {
    components: {
        QiunDataCharts,
        ChartLoading
    },

    data() {
        return {
            isLoading: false,
            performanceData: {
                excellent: 85,
                needImprovement: 12
            }
        }
    },

    props: {
        selectTime: {
            type: String,
            default: ""
        }
    },

    computed: {
        // 送达率趋势数据
        deliveryTrendData() {
            return {
                categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                series: [{
                    name: '送达率',
                    data: [92.5, 93.2, 94.1, 95.3, 94.8, 95.6, 96.2, 95.8, 96.5, 97.1, 96.8, 97.3]
                }]
            }
        },

        // 送达率趋势配置
        deliveryTrendOpts() {
            return {
                color: ['#9B7EDE'],
                padding: [15, 15, 15, 15],
                dataLabel: false,
                xAxis: {
                    disableGrid: true,
                    itemCount: 12,
                    fontSize: 10
                },
                yAxis: {
                    gridType: 'dash',
                    showTitle: true,
                    data: [{
                        min: 90,
                        max: 100,
                        title: '送达率(%)',
                        titleFontSize: 12,
                        titleOffsetY: -5
                    }]
                },
                legend: {
                    show: false
                },
                extra: {
                    line: {
                        type: 'curve',
                        width: 2,
                        activeType: 'hollow'
                    }
                }
            }
        },

        // 供应商评分数据
        scoreRankData() {
            return {
                categories: ['供应商A', '供应商B', '供应商C', '供应商D', '供应商E', '供应商F', '供应商G', '供应商H', '供应商I', '供应商J'],
                series: [{
                    name: '综合评分',
                    data: [98, 96, 94, 92, 90, 88, 86, 84, 82, 80]
                }]
            }
        },

        // 供应商评分配置
        scoreRankOpts() {
            return {
                color: ['#52C41A'],
                padding: [15, 15, 15, 15],
                dataLabel: true,
                type: 'bar',
                xAxis: {
                    boundaryGap: 'justify',
                    disableGrid: false,
                    min: 0,
                    max: 100,
                    splitNumber: 5,
                    fontSize: 10
                },
                yAxis: {
                    data: [{
                        fontSize: 10
                    }]
                },
                legend: {
                    show: false
                },
                extra: {
                    bar: {
                        type: 'group',
                        width: 10,
                        barBorderCircle: true,
                        linearType: 'custom',
                        linearOpacity: 1,
                        customColor: ['#52C41A', '#73D13D']
                    }
                }
            }
        }
    },

    onReady() {
        this.loadData()
    },

    methods: {
        async loadData() {
            this.isLoading = true
            setTimeout(() => {
                this.isLoading = false
            }, 500)
        },

        // 自定义tooltip格式
        formatDeliveryTooltip(item, category, index, opts) {
            if (item.data && category) {
                return `${category} 送达率:${item.data}%`
            }
            return ''
        }
    }
}
</script>

<style scoped lang="less">
@text-primary: #333;
@text-secondary: #666;
@bg-white: #ffffff;

.supplier-performance {
    width: 100%;
}

.section-title {
    font-size: 30rpx;
    font-weight: 600;
    color: @text-primary;
    margin-bottom: 12rpx;
}

.chart-title {
    font-size: 30rpx;
    font-weight: 600;
    color: @text-primary;
    margin-bottom: 12rpx;
}

.chart-section {
    background: @bg-white;
    border-radius: 16rpx;
    padding: 24rpx 24rpx 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 32rpx;
}

.chart-container {
    width: 100%;
    height: 400rpx;
    margin-bottom: 20rpx;
}

.performance-cards {
    display: flex;
    gap: 24rpx;
    margin-bottom: 24rpx;
}

.performance-card {
    flex: 1;
    border-radius: 16rpx;
    padding: 16rpx 24rpx;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 24rpx;

    &.excellent {
        background: linear-gradient(135deg, #52C41A, #73D13D);
    }

    &.warning {
        background: linear-gradient(135deg, #FF8F6F, #FF4D4F);
    }
}

.performance-icon {
    font-size: 48rpx;
    width: 80rpx;
    height: 80rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
}

.performance-content {
    flex: 1;
}

.performance-title {
    font-size: 24rpx;
    color: #fff;
    font-weight: 500;
    margin-bottom: 8rpx;
    display: block;
}

.performance-value {
    display: flex;
    align-items: baseline;
    gap: 8rpx;
}

.performance-number {
    font-size: 28rpx;
    font-weight: 600;
    color: #fff;
}

.performance-unit {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
}
</style>