ccy_DIB/pages/DigitalIntelligenceDashboard/components/MallOrderStatistics.vue

<template>
    <view class="mall-order-statistics">
        <!-- 商城订单统计标题 -->
        <view class="section-header">
            <text class="section-title">商城订单统计</text>
        </view>

        <!-- 订单统计图表 -->
        <view class="chart-card">
            <view class="chart-container">
                <QiunDataCharts type="mix" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                    :inScrollView="true" canvasId="mallOrderStatisticsChart" :animation="false" :ontap="true"
                    :ontouch="true" tooltipFormat="MallOrderStatistics" />
            </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 {
            // 图表原始数据
            rawData: {
                category: [],
                TicketCountData: [], // 订单笔数
                SellAmountData: [] // 交易金额
            }
        }
    },

    computed: {
        // 图表数据
        chartData() {
            return {
                categories: this.rawData.category,
                series: [
                    {
                        name: '交易金额',
                        data: this.rawData.SellAmountData,
                        type: 'line',
                        index: 0 // 使用左Y轴
                    },
                    {
                        name: '交易笔数',
                        data: this.rawData.TicketCountData,
                        type: 'line',
                        index: 1 // 使用右Y轴
                    }
                ]
            }
        },

        // 图表配置
        chartOpts() {
            return {
                padding: [15, 15, 15, 15], // 上方留出空间给图例
                dataLabel: false,
                enableScroll: true,
                dataPointShape: true,
                xAxis: {
                    disableGrid: true,
                    itemCount: 6, // 默认显示6个月的数据
                },
                yAxis: {
                    data: [
                        {
                            min: 0,
                            title: '交易金额(元)',
                            titleFontSize: 12,
                            position: 'left',
                        },
                        {
                            min: 0,
                            title: '交易笔数(笔)',
                            titleFontSize: 12,
                            position: 'right',
                        }
                    ]
                },
                legend: {
                    show: true,
                    position: 'bottom',
                    float: 'center',
                    fontSize: 12,
                    fontColor: '#333',
                    itemGap: 20
                },
                extra: {
                    mix: {
                        line: {
                            width: 2,
                            activeType: 'hollow'
                        }
                    }
                }
            }
        }
    },

    onReady() {
        this.handleGetMallOrderData()
    },

    methods: {
        // 获取商城订单统计数据
        async handleGetMallOrderData() {
            await this.getMallOrderSummaryData()
        },

        // 获取商城订单汇总数据
        async getMallOrderSummaryData() {
            const req = {
                DataType: 2, // 1 日度  2 月度
                ProvinceCode: '530000',
                type: 'encryption',
                StartMonth: moment().startOf('y').format('YYYYMM'),
                EndMonth: moment().subtract(1, 'M').format('YYYYMM'),
            }


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


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

        // 处理图表数据
        processChartData(data) {
            let category = []
            let TicketCountData = [] // 订单笔数
            let SellAmountData = [] // 交易金额

            // 处理数据：获取商城订单统计数据
            if (data && data.Result_Data && data.Result_Data.List && data.Result_Data.List.length > 0) {
                data.Result_Data.List.forEach((item) => {
                    category.push(`${item.StatisticsMonth}月`)
                    TicketCountData.push(item.TicketCount || 0)
                    SellAmountData.push(item.SellAmount || 0)
                })
            }

            // 更新图表数据
            this.rawData = {
                category: category,
                TicketCountData: TicketCountData,
                SellAmountData: SellAmountData
            }

        },

        // 更新图表数据
        async handleUpdateChart() {
            await this.handleGetMallOrderData()
        }
    }
}
</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);

.mall-order-statistics {
    width: 100%;
    margin-top: 24rpx;

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

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

    .chart-card {
        background: @bg-white;
        border-radius: @border-radius;
        padding: 24rpx;
        box-shadow: @shadow;
        margin-bottom: 24rpx;

        .chart-container {
            width: 100%;
            height: 400rpx;
        }
    }
}
</style>