dashboard/src/stores/OrdersStore.js

import {makeAutoObservable, runInAction} from "mobx"
import {
    CaretUpOutlined,
    CaretDownOutlined
} from '@ant-design/icons';
import {Tag} from 'antd';
import * as config from "../config";
import moment from "moment";
import {NavLink} from "react-router-dom";


class OrdersStore {

    constructor(rootStore) {
        this.rootStore = rootStore;
        makeAutoObservable(this);
    }

    loading = false;
    site_select_mode = false;//是否多选站点
    webcode = 'AH';
    active_tab_key = 'Form';//当前切换的标签页
    orderCountData = [];//订单统计数据源
    orderCountData_sub = [];//子维度订单统计
    orderCountData_Form = {dataSource: [], columns: []};//表单类型统计数据源
    orderCountData_Form_sub = [];//子维度类型统计

    handleChange_webcode = (value) => {
        this.webcode = value;
    };

    //格式化一下数据
    //映射时间，做时间段对比的时候需要把对比时间段映射到开始时间上才能在同一个x轴显示
    //比如2022-10-01~2022-10-30 vs 2021-10-01~2021-10-30 ，则需要在2021年的时间段加365天的时间映射成2022起始时间段
    //相差的天数用a.diff(b, 'days')计算
    format_data_source(data_source, start_date, end_date) {
        let result = [];
        for (let item of data_source.ordercount1) {
            result.push({
                'xField': item.ApplyDate,
                'yField': item.orderCount,
                'seriesField': item.groups
            })
        }
        if (data_source.ordercount2 && end_date) {
            let diff_days = start_date.diff(end_date, 'days');
            for (let item of data_source.ordercount2) {
                result.push({
                    'xField': moment(item.ApplyDate).add(diff_days, 'days').format(config.DATE_FORMAT),
                    'yField': item.orderCount,
                    'seriesField': item.groups
                })
            }
        }
        return result;
    }


    //网站订单数量
    getOrderCount() {
        this.loading = true;
        const date_picker_store = this.rootStore.date_picker_store;
        let url = '/service-web/QueryData/GetOrderCount'//?WebCode=cht&COLI_ApplyDate1=2022-08-01&COLI_ApplyDate2=2022-08-31&COLI_ApplyDateold1=2021-08-01&COLI_ApplyDateold2=2021-08-31';
        url += '?WebCode=' + this.webcode + '&COLI_ApplyDate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&COLI_ApplyDate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
        if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
            url += '&COLI_ApplyDateold1=' + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '&COLI_ApplyDateold2=' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + '%2023:59:59';
        }
        fetch(config.HT_HOST + url)
            .then((response) => response.json())
            .then((json) => {
                runInAction(() => {
                    this.orderCountData = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp);
                    this.loading = false;
                })
            })
            .catch((error) => {
                this.loading = false;
                console.log('fetch data failed', error);
            });
    }

    show_vs_tag(vs, data1, data2) {
        let tag = '-';
        if (parseInt(vs) < 0) {
            tag = <Tag icon={<CaretDownOutlined/>} color="gold">{vs}</Tag>
        } else if (parseInt(vs) > 0) {
            tag = <Tag icon={< CaretUpOutlined/>} color="lime">{vs}</Tag>
        }
        return <span><div>{data1} vs {data2}</div>
            {tag}</span>
    }

    //网站订单类型
    getOrderCountByType(order_type) {
        const date_picker_store = this.rootStore.date_picker_store;
        let isVS = false;//是否是比较数据，有比较的表格是不一样的
        let url = '/service-web/QueryData/GetOrderCountByType'
        url += '?WebCode=' + this.webcode + '&OrderType=' + order_type;
        url += '&COLI_ApplyDate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&COLI_ApplyDate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
        if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
            isVS = true;
            url += '&COLI_ApplyDateold1=' + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '&COLI_ApplyDateold2=' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + '%2023:59:59';
        }
        fetch(config.HT_HOST + url)
            .then((response) => response.json())
            .then((json) => {
                let ordercountTotal1 = json.ordercountTotal1;
                let ordercountTotal2 = json.ordercountTotal2;
                let data = [];
                let columns = [];
                if (isVS) {
                    columns = [
                        {
                            title: '',
                            children: [{
                                title: <span><div>{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}</div><div>{date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)}</div></span>,
                                dataIndex: 'OrderType',
                                render: (text, record) => <NavLink
                                    to={`/orders_sub/${this.active_tab_key}/${record.OrderTypeSN}`}>{text}</NavLink>
                            }]
                        },
                        {
                            title: '数量',
                            children: [{
                                title: this.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount),
                                dataIndex: 'OrderCount'
                            }],
                        },
                        {
                            title: '成交数',
                            children: [{
                                title: this.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount, ordercountTotal2.CJCount),
                                dataIndex: 'CJCount'
                            }],
                        },
                        {
                            title: '成交人数',
                            children: [{
                                title: this.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum),
                                dataIndex: 'CJPersonNum'
                            }],
                        },
                        {
                            title: '成交率',
                            children: [{
                                title: this.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate, ordercountTotal2.CJrate),
                                dataIndex: 'CJrate'
                            }],
                        },
                        {
                            title: '成交毛利（预计）',
                            children: [{
                                title: this.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY, ordercountTotal2.YJLY),
                                dataIndex: 'YJLY'
                            }],
                        },

                        {
                            title: '单个订单价值',
                            children: [{
                                title: this.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue),
                                dataIndex: 'Ordervalue'
                            }],
                        },
                    ];
                    for (let item of json.ordercount1) {
                        for (let item2 of json.ordercount2) {
                            if (item.OrderType == item2.OrderType) {
                                data.push({
                                    OrderType: item.OrderType,
                                    OrderTypeSN: item.OrderTypeSN,
                                    OrderCount: this.show_vs_tag(item.OrderCount_vs, item.OrderCount, item2.OrderCount),
                                    CJCount: this.show_vs_tag(item.CJCount_vs, item.CJCount, item2.CJCount),
                                    CJPersonNum: this.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum, item2.CJPersonNum),
                                    CJrate: this.show_vs_tag(item.CJrate_vs, item.CJrate, item2.CJrate),
                                    YJLY: this.show_vs_tag(item.YJLY_vs, item.YJLY, item2.YJLY),
                                    Ordervalue: this.show_vs_tag(item.Ordervalue_vs, item.Ordervalue, item2.Ordervalue),
                                })
                            }
                        }
                    }
                } else {
                    columns =
                        [
                            {
                                title: '',
                                children: [{
                                    title: <span><div>{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}</div></span>,
                                    dataIndex: 'OrderType',
                                    render: (text, record) => <NavLink
                                        to={`/orders_sub/${this.active_tab_key}/${record.OrderTypeSN}`}>{text}</NavLink>
                                }]
                            },
                            {
                                title: '数量',
                                children: [{title: ordercountTotal1.OrderCount, dataIndex: 'OrderCount'}],
                                sorter: (a, b) => b.OrderCount - a.OrderCount,
                            },
                            {
                                title: '成交数',
                                children: [{title: ordercountTotal1.CJCount, dataIndex: 'CJCount'}],
                                sorter: (a, b) => b.CJCount - a.CJCount,
                            },
                            {
                                title: '成交人数',
                                children: [{title: ordercountTotal1.CJPersonNum, dataIndex: 'CJPersonNum'}],
                                sorter: (a, b) => b.CJPersonNum - a.CJPersonNum,
                            },
                            {
                                title: '成交率',
                                children: [{title: ordercountTotal1.CJrate, dataIndex: 'CJrate'}],
                                sorter: (a, b) => parseInt(b.CJrate) - parseInt(a.CJrate),
                            },
                            {
                                title: '成交毛利（预计）',
                                children: [{title: ordercountTotal1.YJLY, dataIndex: 'YJLY'}],
                                sorter: (a, b) => b.YJLY - a.YJLY,
                            },

                            {
                                title: '单个订单价值',
                                children: [{title: ordercountTotal1.Ordervalue, dataIndex: 'Ordervalue'}],
                                sorter: (a, b) => b.Ordervalue - a.Ordervalue,
                            },
                        ];
                    data = json.ordercount1;
                }

                runInAction(() => { //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。
                    this.orderCountData_Form.dataSource = data;
                    this.orderCountData_Form.columns = columns;
                })

            })
            .catch((error) => {
                console.log('fetch data failed', error);
            });
    }

    //切换标签页
    onChange_Tabs(active_key) {
        this.active_tab_key = active_key;
        this.getOrderCountByType(this.active_tab_key);
    }


}


export default OrdersStore;