diff --git a/pages/DigitalIntelligenceDashboard/components/SupplierCategory.vue b/pages/DigitalIntelligenceDashboard/components/SupplierCategory.vue
new file mode 100644
index 0000000..8a7ab1e
--- /dev/null
+++ b/pages/DigitalIntelligenceDashboard/components/SupplierCategory.vue
@@ -0,0 +1,326 @@
+<template>
+    <view class="supplier-category">
+        <!-- 品类销量排行 -->
+        <view class="chart-title">品类销量排行</view>
+        <view class="ranking-list">
+            <view v-for="(item, index) in categoryRanking" :key="index" class="ranking-item">
+                <view class="ranking-index"
+                    :class="['rank-' + (index + 1), index === 0 ? 'rank-gold' : index === 1 ? 'rank-silver' : index === 2 ? 'rank-bronze' : '']">
+                    {{ index + 1 }}</view>
+                <view class="ranking-content">
+                    <text class="ranking-name">{{ item.name }}</text>
+                    <view class="ranking-bar">
+                        <view class="ranking-progress" :style="{ width: item.percentage + '%' }"></view>
+                    </view>
+                </view>
+                <view class="ranking-value">
+                    <text class="ranking-amount">¥{{ formatAmount(item.amount) }}</text>
+                    <text class="ranking-percent">{{ item.percentage }}%</text>
+                </view>
+            </view>
+        </view>
+
+        <!-- 库存预警 -->
+        <view class="alert-cards">
+            <view class="alert-card-item slow">
+                <view class="alert-card-icon">📦</view>
+                <view class="alert-card-content">
+                    <text class="alert-card-label">滞销品</text>
+                    <text class="alert-card-value">{{ alertData.slowMoving || 0 }}个</text>
+                </view>
+            </view>
+            <view class="alert-card-item shortage">
+                <view class="alert-card-icon">⚠️</view>
+                <view class="alert-card-content">
+                    <text class="alert-card-label">缺货风险</text>
+                    <text class="alert-card-value">{{ alertData.shortage || 0 }}个</text>
+                </view>
+            </view>
+        </view>
+
+        <!-- 库存周转率 -->
+        <view class="chart-title">库存周转率</view>
+        <view class="chart-section">
+            <view class="chart-container">
+                <ChartLoading v-if="isLoading" text="数据加载中..." />
+                <QiunDataCharts v-else type="column" :opts="turnoverOpts" :chartData="turnoverData" :canvas2d="true"
+                    :inScrollView="true" canvasId="turnoverChart" tooltipFormat="turnoverChart" />
+            </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,
+            categoryRanking: [
+                { name: '食品饮料', amount: 1568000, percentage: 100 },
+                { name: '日用百货', amount: 1285000, percentage: 82 },
+                { name: '汽车用品', amount: 982000, percentage: 63 },
+                { name: '文化用品', amount: 763000, percentage: 49 },
+                { name: '其他商品', amount: 456000, percentage: 29 }
+            ],
+            alertData: {
+                slowMoving: 23,
+                shortage: 5
+            }
+        }
+    },
+
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        }
+    },
+
+    computed: {
+        // 库存周转率数据
+        turnoverData() {
+            return {
+                categories: ['食品', '日用', '汽车', '文化', '其他'],
+                series: [{
+                    name: '周转天数',
+                    data: [8, 12, 15, 18, 25]
+                }]
+            }
+        },
+
+        // 库存周转率配置
+        turnoverOpts() {
+            return {
+                color: ['#1890FF'],
+                padding: [15, 15, 15, 15],
+                dataLabel: true,
+                xAxis: {
+                    disableGrid: true,
+                    itemCount: 5,
+                    fontSize: 10
+                },
+                yAxis: {
+                    gridType: 'dash',
+                    showTitle: true,
+                    data: [{
+                        min: 0,
+                        title: '周转天数',
+                        titleFontSize: 12,
+                        titleOffsetY: -5
+                    }]
+                },
+                legend: {
+                    show: false
+                },
+                extra: {
+                    column: {
+                        type: 'group',
+                        width: 15,
+                        barBorderCircle: true
+                    }
+                }
+            }
+        }
+    },
+
+    onReady() {
+        this.loadData()
+    },
+
+    methods: {
+        async loadData() {
+            this.isLoading = true
+            setTimeout(() => {
+                this.isLoading = false
+            }, 500)
+        },
+
+        // 格式化金额
+        formatAmount(amount) {
+            if (!amount && amount !== 0) return '0'
+            return Number(amount).toLocaleString('zh-CN')
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+@text-primary: #333;
+@text-secondary: #666;
+@bg-white: #ffffff;
+
+.supplier-category {
+    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;
+}
+
+.ranking-list {
+    background: @bg-white;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    margin-bottom: 24rpx;
+}
+
+.ranking-item {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    margin-bottom: 24rpx;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.ranking-index {
+    width: 48rpx;
+    height: 48rpx;
+    border-radius: 50%;
+    background: #E8E8E8;
+    color: @text-primary;
+    font-size: 24rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.rank-gold {
+        background: linear-gradient(135deg, #FFD700, #FFA500);
+        color: #fff;
+    }
+
+    &.rank-silver {
+        background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
+        color: #fff;
+    }
+
+    &.rank-bronze {
+        background: linear-gradient(135deg, #CD7F32, #B8860B);
+        color: #fff;
+    }
+}
+
+.ranking-content {
+    flex: 1;
+}
+
+.ranking-name {
+    font-size: 26rpx;
+    color: @text-primary;
+    display: block;
+    margin-bottom: 8rpx;
+}
+
+.ranking-bar {
+    width: 100%;
+    height: 16rpx;
+    background: #F0F0F0;
+    border-radius: 8rpx;
+    overflow: hidden;
+}
+
+.ranking-progress {
+    height: 100%;
+    background: linear-gradient(90deg, #9B7EDE, #B794F4);
+    border-radius: 8rpx;
+    transition: width 0.3s ease;
+}
+
+.ranking-value {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.ranking-amount {
+    font-size: 26rpx;
+    font-weight: 600;
+    color: @text-primary;
+}
+
+.ranking-percent {
+    font-size: 22rpx;
+    color: @text-secondary;
+}
+
+.alert-cards {
+    display: flex;
+    gap: 24rpx;
+    margin-bottom: 24rpx;
+}
+
+.alert-card-item {
+    flex: 1;
+    background: @bg-white;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    text-align: center;
+
+    &.slow {
+        border-left: 6rpx solid #FAAD14;
+    }
+
+    &.shortage {
+        border-left: 6rpx solid #FF4D4F;
+    }
+}
+
+.alert-card-icon {
+    font-size: 48rpx;
+    margin-bottom: 12rpx;
+}
+
+.alert-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+}
+
+.alert-card-label {
+    font-size: 24rpx;
+    color: @text-secondary;
+}
+
+.alert-card-value {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: @text-primary;
+}
+
+.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;
+}
+</style>
diff --git a/pages/DigitalIntelligenceDashboard/components/SupplierCooperation.vue b/pages/DigitalIntelligenceDashboard/components/SupplierCooperation.vue
new file mode 100644
index 0000000..1301ac0
--- /dev/null
+++ b/pages/DigitalIntelligenceDashboard/components/SupplierCooperation.vue
@@ -0,0 +1,281 @@
+<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>
diff --git a/pages/DigitalIntelligenceDashboard/components/SupplierOverview.vue b/pages/DigitalIntelligenceDashboard/components/SupplierOverview.vue
new file mode 100644
index 0000000..fa8d25c
--- /dev/null
+++ b/pages/DigitalIntelligenceDashboard/components/SupplierOverview.vue
@@ -0,0 +1,265 @@
+<template>
+    <view class="supplier-overview">
+        <view class="section-title">供应链概览</view>
+
+        <!-- 核心KPI卡片 -->
+        <view class="metrics-row">
+            <view class="metric-card">
+                <text class="metric-value" style="color: #9B7EDE;">{{ kpiData.totalSuppliers || 0 }}</text>
+                <text class="metric-label">合作供应商/个</text>
+            </view>
+            <view class="metric-card">
+                <text class="metric-value" style="color: #52C41A;">{{ kpiData.avgDeliveryRate || 0 }}%</text>
+                <text class="metric-label">平均送达率</text>
+            </view>
+        </view>
+
+        <view class="metrics-row">
+            <view class="metric-card">
+                <text class="metric-value" style="color: #1890FF;">{{ kpiData.inventoryTurnover || 0 }}</text>
+                <text class="metric-label">库存周转/天</text>
+            </view>
+            <view class="metric-card">
+                <text class="metric-value" style="color: #FF8F6F;">¥{{ formatMoney(kpiData.monthlyPurchase) }}</text>
+                <text class="metric-label">本月采购额</text>
+            </view>
+        </view>
+
+        <!-- 供应商类别分布 -->
+        <view class="chart-title">供应商类别分布</view>
+        <view class="chart-section">
+            <view class="chart-container">
+                <!-- 图表加载效果 -->
+                <ChartLoading v-if="isLoading" text="数据加载中..." />
+                <!-- 实际饼图 -->
+                <QiunDataCharts v-else type="pie" :opts="categoryPieOpts" :chartData="categoryPieData" :canvas2d="true"
+                    :inScrollView="true" canvasId="supplierCategoryPie" tooltipFormat="supplierCategoryPie" />
+            </view>
+        </view>
+
+        <!-- 预警提示 -->
+        <!-- <view class="alert-card">
+            <view class="alert-icon">⚠️</view>
+            <view class="alert-content">
+                <text class="alert-title">预警提示</text>
+                <view class="alert-value">
+                    <text class="alert-number">{{ alertData.totalAlerts || 0 }}</text>
+                    <text class="alert-unit">个异常</text>
+                </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,
+            kpiData: {
+                totalSuppliers: 128,
+                avgDeliveryRate: 95.6,
+                inventoryTurnover: 12,
+                monthlyPurchase: 2800000
+            },
+            alertData: {
+                totalAlerts: 3
+            },
+            categoryData: [
+                { name: '食品供应商', value: 35 },
+                { name: '日用品供应商', value: 28 },
+                { name: '服务类供应商', value: 22 },
+                { name: '设备供应商', value: 18 },
+                { name: '其他', value: 25 }
+            ]
+        }
+    },
+
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        }
+    },
+
+    computed: {
+        // 供应商类别饼图数据
+        categoryPieData() {
+            return {
+                series: [{
+                    data: this.categoryData.filter(item => item.value > 0)
+                }]
+            }
+        },
+
+        // 供应商类别饼图配置
+        categoryPieOpts() {
+            return {
+                color: ['#9B7EDE', '#52C41A', '#1890FF', '#FF8F6F', '#FAAD14'],
+                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,
+                        labelWidth: 0,
+                        border: true,
+                        borderWidth: 0,
+                        borderColor: '#FFFFFF'
+                    }
+                }
+            }
+        }
+    },
+
+    onReady() {
+        this.loadData()
+    },
+
+    methods: {
+        async loadData() {
+            this.isLoading = true
+            // TODO: 实际API调用
+            setTimeout(() => {
+                this.isLoading = false
+            }, 500)
+        },
+
+        // 格式化金额,添加千分号
+        formatMoney(amount) {
+            if (!amount && amount !== 0) return '0'
+            return Number(amount).toLocaleString('zh-CN')
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+@text-primary: #333;
+@text-secondary: #666;
+@bg-white: #ffffff;
+
+.supplier-overview {
+    width: 100%;
+}
+
+.section-title {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: @text-primary;
+    margin-bottom: 12rpx;
+}
+
+.metrics-row {
+    display: flex;
+    gap: 24rpx;
+    margin-bottom: 24rpx;
+}
+
+.metric-card {
+    flex: 1;
+    background: @bg-white;
+    border-radius: 16rpx;
+    padding: 16rpx;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    text-align: center;
+}
+
+.metric-value {
+    font-size: 28rpx;
+    font-weight: 600;
+    display: block;
+}
+
+.metric-label {
+    font-size: 24rpx;
+    color: @text-secondary;
+}
+
+.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;
+}
+
+.alert-card {
+    background: linear-gradient(135deg, #FF8F6F, #FF4D4F);
+    border-radius: 16rpx;
+    padding: 16rpx 24rpx;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    display: flex;
+    align-items: center;
+    gap: 24rpx;
+    margin-bottom: 24rpx;
+}
+
+.alert-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;
+}
+
+.alert-content {
+    flex: 1;
+}
+
+.alert-title {
+    font-size: 24rpx;
+    color: #fff;
+    font-weight: 500;
+    margin-bottom: 8rpx;
+    display: block;
+}
+
+.alert-value {
+    display: flex;
+    align-items: baseline;
+    gap: 8rpx;
+}
+
+.alert-number {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #fff;
+}
+
+.alert-unit {
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.8);
+}
+</style>
diff --git a/pages/DigitalIntelligenceDashboard/components/SupplierPerformance.vue b/pages/DigitalIntelligenceDashboard/components/SupplierPerformance.vue
new file mode 100644
index 0000000..75e6517
--- /dev/null
+++ b/pages/DigitalIntelligenceDashboard/components/SupplierPerformance.vue
@@ -0,0 +1,297 @@
+<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>
diff --git a/pages/DigitalIntelligenceDashboard/components/SupplierRanking.vue b/pages/DigitalIntelligenceDashboard/components/SupplierRanking.vue
new file mode 100644
index 0000000..28a0698
--- /dev/null
+++ b/pages/DigitalIntelligenceDashboard/components/SupplierRanking.vue
@@ -0,0 +1,310 @@
+<template>
+    <view class="supplier-ranking">
+        <!-- 供应商销量TOP10 -->
+        <view class="chart-title">供应商销量TOP10</view>
+        <view class="ranking-cards">
+            <view v-for="(item, index) in supplierRanking" :key="index" class="ranking-card">
+                <view class="ranking-medal">
+                    <text v-if="index < 3" class="medal-icon">{{ getMedalIcon(index) }}</text>
+                    <text v-else class="medal-number">{{ index + 1 }}</text>
+                </view>
+                <view class="ranking-info">
+                    <text class="ranking-supplier-name">{{ item.name }}</text>
+                    <view class="ranking-data-row">
+                        <view class="data-group">
+                            <text class="data-label">销售额:</text>
+                            <text class="data-value sales">¥{{ item.sales }}</text>
+                            <view class="data-growth" :class="item.growth >= 0 ? 'growth-up' : 'growth-down'">
+                                <text class="growth-arrow">{{ item.growth >= 0 ? '↑' : '↓' }}</text>
+                                <text class="growth-value">{{ Math.abs(item.growth) }}%</text>
+                            </view>
+                        </view>
+                        <view class="data-divider"></view>
+                        <view class="data-group">
+                            <text class="data-label">销量:</text>
+                            <text class="data-value quantity">{{ item.quantity }}</text>
+                            <view class="data-growth" :class="item.quantityGrowth >= 0 ? 'growth-up' : 'growth-down'">
+                                <text class="growth-arrow">{{ item.quantityGrowth >= 0 ? '↑' : '↓' }}</text>
+                                <text class="growth-value">{{ Math.abs(item.quantityGrowth) }}%</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 品类销量TOP5 -->
+        <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="categoryRankOpts" :chartData="categoryRankData"
+                    :canvas2d="true" :inScrollView="true" canvasId="categoryRankChart"
+                    tooltipFormat="categoryRankChart" />
+            </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,
+            supplierRanking: [
+                { name: '优质食品供应商', sales: '186.5万', growth: 15.6, quantity: '12,580件', quantityGrowth: 18.2 },
+                { name: '日用百货批发商', sales: '158.2万', growth: 12.3, quantity: '9,856件', quantityGrowth: 10.5 },
+                { name: '汽车用品专营店', sales: '142.8万', growth: 8.7, quantity: '8,234件', quantityGrowth: 6.8 },
+                { name: '文化用品供应商', sales: '128.5万', growth: -2.1, quantity: '7,652件', quantityGrowth: -1.5 },
+                { name: '特色商品供应商', sales: '115.3万', growth: 18.9, quantity: '6,890件', quantityGrowth: 22.3 },
+                { name: '进口食品供应商', sales: '98.6万', growth: 6.5, quantity: '5,432件', quantityGrowth: 8.2 },
+                { name: '地方特产供应商', sales: '86.2万', growth: 22.4, quantity: '4,876件', quantityGrowth: 25.6 },
+                { name: '快消品批发商', sales: '75.8万', growth: 4.2, quantity: '4,123件', quantityGrowth: 3.8 },
+                { name: '品牌代理商', sales: '68.5万', growth: -5.3, quantity: '3,654件', quantityGrowth: -6.2 },
+                { name: '综合供应商', sales: '56.3万', growth: 9.8, quantity: '3,012件', quantityGrowth: 11.5 }
+            ]
+        }
+    },
+
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        }
+    },
+
+    computed: {
+        // 品类销量TOP5数据
+        categoryRankData() {
+            return {
+                categories: ['食品饮料', '日用百货', '汽车用品', '文化用品', '其他商品'],
+                series: [{
+                    name: '销量',
+                    data: [12580, 9856, 8234, 7652, 5432]
+                }]
+            }
+        },
+
+        // 品类销量配置
+        categoryRankOpts() {
+            return {
+                color: ['#9B7EDE'],
+                padding: [15, 15, 15, 15],
+                dataLabel: false,
+                xAxis: {
+                    disableGrid: true,
+                    itemCount: 5,
+                    fontSize: 10,
+                    scrollShow: true
+                },
+                yAxis: {
+                    gridType: 'dash',
+                    showTitle: true,
+                    data: [{
+                        min: 0,
+                        title: '销量(件)',
+                        titleFontSize: 12,
+                        titleOffsetY: -5
+                    }]
+                },
+                legend: {
+                    show: false
+                },
+                extra: {
+                    column: {
+                        type: 'group',
+                        width: 15,
+                        barBorderCircle: true,
+                        linearType: 'custom',
+                        customColor: ['#9B7EDE', '#B794F4']
+                    }
+                }
+            }
+        }
+    },
+
+    onReady() {
+        this.loadData()
+    },
+
+    methods: {
+        async loadData() {
+            this.isLoading = true
+            setTimeout(() => {
+                this.isLoading = false
+            }, 500)
+        },
+
+        getMedalIcon(index) {
+            const medals = ['🥇', '🥈', '🥉']
+            return medals[index] || ''
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+@text-primary: #333;
+@text-secondary: #666;
+@bg-white: #ffffff;
+
+.supplier-ranking {
+    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;
+}
+
+.ranking-cards {
+    background: @bg-white;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    margin-bottom: 24rpx;
+}
+
+.ranking-card {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    padding: 16rpx 0;
+    border-bottom: 1rpx solid #F0F0F0;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.ranking-medal {
+    width: 56rpx;
+    height: 56rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.medal-icon {
+    font-size: 40rpx;
+}
+
+.medal-number {
+    width: 48rpx;
+    height: 48rpx;
+    border-radius: 50%;
+    background: #F0F0F0;
+    color: @text-secondary;
+    font-size: 24rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ranking-info {
+    flex: 1;
+}
+
+.ranking-supplier-name {
+    font-size: 26rpx;
+    color: @text-primary;
+    display: block;
+    margin-bottom: 8rpx;
+}
+
+.ranking-data-row {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+}
+
+.data-group {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    flex: 1;
+}
+
+.data-label {
+    font-size: 22rpx;
+    color: @text-secondary;
+}
+
+.data-value {
+    font-size: 22rpx;
+    font-weight: 600;
+
+    &.sales {
+        color: #9B7EDE;
+    }
+
+    &.quantity {
+        color: #1890FF;
+    }
+}
+
+.data-divider {
+    width: 1rpx;
+    height: 24rpx;
+    background: #E8E8E8;
+}
+
+.data-growth {
+    display: flex;
+    align-items: center;
+    gap: 2rpx;
+    padding: 2rpx 6rpx;
+    border-radius: 4rpx;
+    font-size: 18rpx;
+
+    &.growth-up {
+        background: rgba(82, 196, 26, 0.1);
+        color: #52C41A;
+    }
+
+    &.growth-down {
+        background: rgba(255, 77, 79, 0.1);
+        color: #FF4D4F;
+    }
+}
+
+.growth-arrow {
+    font-size: 16rpx;
+}
+
+.growth-value {
+    font-weight: 600;
+}
+
+.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;
+}
+</style>
diff --git a/pages/DigitalIntelligenceDashboard/index.vue b/pages/DigitalIntelligenceDashboard/index.vue
index be13fee..c637718 100644
--- a/pages/DigitalIntelligenceDashboard/index.vue
+++ b/pages/DigitalIntelligenceDashboard/index.vue
@@ -125,6 +125,24 @@
                             <FestivalRevenueSumInfo />
                         </view>
 
+                        <!-- 供应链生态全景 -->
+                        <view v-else-if="tab.key === 'supplierAnalysis'" class="tab-content">
+                            <view id="supplier-overview" class="section-anchor"></view>
+                            <SupplierOverview :selectTime="selectTime" />
+
+                            <view id="supplier-performance" class="section-anchor"></view>
+                            <SupplierPerformance :selectTime="selectTime" />
+
+                            <view id="supplier-category" class="section-anchor"></view>
+                            <SupplierCategory :selectTime="selectTime" />
+
+                            <view id="supplier-ranking" class="section-anchor"></view>
+                            <SupplierRanking :selectTime="selectTime" />
+
+                            <view id="supplier-cooperation" class="section-anchor"></view>
+                            <SupplierCooperation :selectTime="selectTime" />
+                        </view>
+
                         <!-- 商户电商生态全景 -->
                         <view v-else-if="tab.key === 'mallOperation'" class="tab-content">
                             <view id="member-mall" class="section-anchor"></view>
@@ -181,6 +199,11 @@ import SupplierListBox from './components/SupplierListBox.vue'
 import MallOrderStatistics from './components/MallOrderStatistics.vue'
 import ThisMonthBenefits from './components/ThisMonthBenefits.vue'
 import AnalysisOfMember from './components/AnalysisOfMember.vue'
+import SupplierOverview from './components/SupplierOverview.vue'
+import SupplierPerformance from './components/SupplierPerformance.vue'
+import SupplierCategory from './components/SupplierCategory.vue'
+import SupplierRanking from './components/SupplierRanking.vue'
+import SupplierCooperation from './components/SupplierCooperation.vue'
 import moment from 'moment'
 
 
@@ -210,7 +233,12 @@ export default {
         SupplierListBox,
         MallOrderStatistics,
         ThisMonthBenefits,
-        AnalysisOfMember
+        AnalysisOfMember,
+        SupplierOverview,
+        SupplierPerformance,
+        SupplierCategory,
+        SupplierRanking,
+        SupplierCooperation
     },
     data() {
         return {
@@ -221,6 +249,7 @@ export default {
                 { name: '运营中心', key: 'business' },
                 { name: '客群画像', key: 'customerProfile' },
                 { name: '经营分析', key: 'businessRevenue' },
+                { name: '供应链生态', key: 'supplierAnalysis' },
                 { name: '电商生态', key: 'mallOperation' },
             ],
             // 各个Tab对应的导航栏数据
@@ -249,6 +278,13 @@ export default {
                     { id: 'business-structure', name: '业态' },// 业态结构
                     { id: 'festival-revenue-sum-info', name: '节假日' },// 节假日营收
                 ],
+                supplierAnalysis: [
+                    { id: 'supplier-overview', name: '概览' },// 供应商概览
+                    { id: 'supplier-performance', name: '绩效' },// 供应商绩效
+                    { id: 'supplier-category', name: '分类' },// 供应商分类
+                    { id: 'supplier-ranking', name: '排名' },// 供应商排名
+                    { id: 'supplier-cooperation', name: '合作' },// 合作分析
+                ],
                 mallOperation: [
                     { id: 'member-mall', name: '商城' },// 会员商城
                     { id: 'hot-product-list', name: '榜单' },// 商品榜单
@@ -263,6 +299,7 @@ export default {
                 business: '#6F86FF',
                 customerProfile: '#FF8F6F',
                 businessRevenue: '#38C9A4',
+                supplierAnalysis: '#9B7EDE',
                 mallOperation: '#F1C84C'
             },
             // 当前活动的导航项
@@ -276,6 +313,7 @@ export default {
                 business: '',
                 customerProfile: '',
                 businessRevenue: '',
+                supplierAnalysis: '',
                 mallOperation: ''
             },
             tabScrollPosition: 0,