ccy_DIB/pages/DigitalIntelligenceDashboard/components/ThisMonthBenefits.vue

<template>
    <view class="this-month-benefits">

        <view class="section-header">
            <text class="section-title">核心品类占比</text>
        </view>



        <!-- 核心品类占比 -->
        <view class="core-category-box">

            <!-- 本月福利金发放额度 -->
            <view class="benefits-header">
                <view class="benefits-left">
                    <text class="benefits-title">本月福利金发放额度</text>
                </view>
                <view class="benefits-right">
                    <text class="benefits-value">{{ allRealData.distributeAmount || '0' }}</text>
                    <text class="benefits-unit">元</text>
                </view>
            </view>

            <view class="chart-container">
                <QiunDataCharts type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                    :inScrollView="true" canvasId="coreCategoryChart" :animation="false" :ontap="true" :ontouch="true"
                    tooltipFormat="ThisMonthBenefits" />
            </view>
        </view>
    </view>
</template>

<script>
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
import request from "@/util/index.js";
import moment from 'moment'

export default {
    components: {
        QiunDataCharts
    },

    data() {
        return {
            // 拿到的实际数据
            allRealData: {},
            // 图表原始数据
            rawData: {
                pieData: []
            },
        }
    },

    computed: {
        // 图表数据
        chartData() {
            return {
                series: [{
                    data: this.rawData.pieData
                }]
            }
        },

        // 图表配置
        chartOpts() {
            return {
                padding: [15, 15, 15, 15],
                dataLabel: false,
                legend: {
                    show: true,
                    position: 'right',
                    float: 'center',
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderColor: 'rgba(0,0,0,0)',
                    fontSize: 12,
                    margin: 0,
                    padding: 0,
                    itemGap: 10,
                    textAlign: 'left'
                },
                extra: {
                    pie: {
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: 0,
                        labelWidth: 0,
                        border: false,
                        borderWidth: 2,
                        borderColor: '#FFFFFF',
                        linearType: 'custom'
                    }
                },
            }
        }
    },

    onReady() {
        this.handleGetData()
    },

    methods: {
        // 获取数据
        async handleGetData() {
            await this.getWelFareSummaryData()
        },

        // 获取福利金汇总数据
        async getWelFareSummaryData() {
            const req = {
                ProvinceCode: '530000',
                StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
                type: 'encryption'
            }


            // 按照TrendOfTrafficFlow.vue的请求方式，使用request.$posPost
            const data = await request.$posPost(
                "CommercialApi/SupplyChain/GetWelFareSummary",
                req
            );


            // 处理数据
            this.processChartData(data.Result_Data)
        },

        // 处理图表数据
        processChartData(data) {
            let pieData = []

            // 保存原始数据
            this.allRealData = data

            // 处理数据：获取核心品类占比数据
            if (data && data.WelFareGoodsTypeList && data.WelFareGoodsTypeList.length > 0) {
                let list = data.WelFareGoodsTypeList.slice(0, 5) // 只取前5个
                let sum = 0

                // 计算总数
                list.forEach((item) => {
                    sum += item.GoodsCount || 0
                })

                // 构建饼图数据
                list.forEach((item) => {
                    let percent = sum > 0 ? ((item.GoodsCount || 0) / sum * 100).toFixed(2) : '0'
                    pieData.push({
                        name: item.GoodsTypeName || '',
                        value: item.GoodsCount || 0,
                        percent: percent
                    })
                })
            }

            // 更新图表数据
            this.rawData = {
                pieData: pieData
            }
        },

        // 更新图表数据
        async handleUpdateChart() {
            await this.handleGetData()
        }
    }
}
</script>

<style scoped lang="less">
@primary-color: #46B8F3;
@secondary-color: #3CD495;
@danger-color: #FF5E5E;
@success-color: #52C41A;
@text-primary: #333;
@text-secondary: #666;
@text-light: #999;
@bg-white: #ffffff;
@border-radius: 16rpx;
@shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

.this-month-benefits {
    width: 100%;
    margin-top: 24rpx;

    .section-header {
        margin-bottom: 24rpx;

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

    .benefits-header {
        background: @bg-white;
        border-radius: @border-radius;
        padding: 24rpx;
        box-shadow: @shadow;
        margin-bottom: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .benefits-left {
            display: flex;
            align-items: center;

            .benefits-title {
                font-size: 28rpx;
                font-weight: 600;
                color: @text-primary;
            }
        }

        .benefits-right {
            display: flex;
            align-items: baseline;

            .benefits-value {
                font-size: 24rpx;
                font-weight: 600;
                color: @primary-color;
                margin-right: 8rpx;
            }

            .benefits-unit {
                font-size: 24rpx;
                color: @text-secondary;
            }
        }
    }

    .core-category-box {


        .chart-container {
            background: @bg-white;
            border-radius: @border-radius;
            padding: 24rpx;
            box-shadow: @shadow;
            height: 440rpx;
            position: relative;

        }
    }
}
</style>