ccy_DIB/pages/DigitalIntelligenceDashboard/components/SupplierCooperation.vue

<template>
    <view class="supplier-cooperation">
        <!-- 合作时长分布 -->
        <view class="chart-title">合作时长分布</view>
        <view class="chart-section">
            <view class="chart-container">
                <ChartLoading v-if="isLoading" text="数据加载中..." />
                <QiunDataCharts v-else type="pie" :opts="durationPieOpts" :chartData="durationPieData" :canvas2d="true"
                    :inScrollView="true" canvasId="durationPieChart" tooltipFormat="durationPieChart" />
            </view>
        </view>

        <!-- 供应商依赖度 -->
        <view class="chart-title">TOP5供应商依赖度</view>
        <view class="chart-section">
            <view class="chart-container">
                <ChartLoading v-if="isLoading" text="数据加载中..." />
                <QiunDataCharts v-else type="column" :opts="dependencyOpts" :chartData="dependencyData" :canvas2d="true"
                    :inScrollView="true" canvasId="dependencyChart" tooltipFormat="dependencyChart" />
            </view>
        </view>

        <!-- 合作统计卡片 -->
        <view class="cooperation-cards">
            <view class="cooperation-card long-term">
                <view class="cooperation-icon">🤝</view>
                <view class="cooperation-content">
                    <text class="cooperation-title">长期合作</text>
                    <view class="cooperation-value">
                        <text class="cooperation-number">{{ cooperationData.longTerm || 0 }}</text>
                        <text class="cooperation-unit">个</text>
                    </view>
                </view>
            </view>
            <view class="cooperation-card new-supplier">
                <view class="cooperation-icon">✨</view>
                <view class="cooperation-content">
                    <text class="cooperation-title">新增供应商</text>
                    <view class="cooperation-value">
                        <text class="cooperation-number">{{ cooperationData.newSuppliers || 0 }}</text>
                        <text class="cooperation-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,
            cooperationData: {
                longTerm: 68,
                newSuppliers: 15
            }
        }
    },

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

    computed: {
        // 合作时长分布数据
        durationPieData() {
            return {
                series: [{
                    data: [
                        { name: '3年以上', value: 45 },
                        { name: '1-3年', value: 38 },
                        { name: '1年以内', value: 45 }
                    ]
                }]
            }
        },

        // 合作时长分布配置
        durationPieOpts() {
            return {
                color: ['#9B7EDE', '#52C41A', '#1890FF'],
                padding: [15, 15, 15, 15],
                dataLabel: false,
                legend: {
                    show: true,
                    position: 'right',
                    float: 'center',
                    padding: 5,
                    margin: 10
                },
                extra: {
                    pie: {
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: 0,
                        labelWidth: 0,
                        border: true,
                        borderWidth: 0,
                        borderColor: '#FFFFFF'
                    }
                }
            }
        },

        // 供应商依赖度数据
        dependencyData() {
            return {
                categories: ['供应商A', '供应商B', '供应商C', '供应商D', '供应商E'],
                series: [{
                    name: '销售占比',
                    data: [28, 22, 18, 15, 12]
                }]
            }
        },

        // 供应商依赖度配置
        dependencyOpts() {
            return {
                color: ['#FF8F6F'],
                padding: [15, 15, 15, 15],
                dataLabel: false,
                xAxis: {
                    disableGrid: true,
                    itemCount: 5,
                    fontSize: 10
                },
                yAxis: {
                    gridType: 'dash',
                    showTitle: true,
                    data: [{
                        min: 0,
                        max: 30,
                        title: '占比(%)',
                        titleFontSize: 12,
                        titleOffsetY: -5
                    }]
                },
                legend: {
                    show: false
                },
                extra: {
                    column: {
                        type: 'group',
                        width: 15,
                        barBorderCircle: true,
                        linearType: 'custom',
                        customColor: ['#FF8F6F', '#FF6B45']
                    }
                }
            }
        }
    },

    onReady() {
        this.loadData()
    },

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

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

.supplier-cooperation {
    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;
}

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

.cooperation-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;

    &.long-term {
        background: linear-gradient(135deg, #9B7EDE, #B794F4);
    }

    &.new-supplier {
        background: linear-gradient(135deg, #1890FF, #40A9FF);
    }
}

.cooperation-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;
}

.cooperation-content {
    flex: 1;
}

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

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

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

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