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_type = [];//子维度订单统计
    orderCountData_Form = [];//表单类型统计数据源
    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_type(ordertype, ordertype_sub) {
        this.loading = true;
        const date_picker_store = this.rootStore.date_picker_store;
        let url = '/service-web/QueryData/GetOrderCount'
        url += `?OrderType=${ordertype}&OrderType_val=${ordertype_sub}`;
        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_type = 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);
            });
    }

    //网站订单数量
    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 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) {
            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(() => { //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。
                    this.orderCountData_Form = json;
                })
            })
            .catch((error) => {
                console.log('fetch data failed', error);
            });
    }

    //子维度查询
    getOrderCountByType_sub(ordertype, ordertype_sub, sub_type) {
        const date_picker_store = this.rootStore.date_picker_store;
        let url = '/service-web/QueryData/GetOrderCountByType_Sub'
        url += `?WebCode=${this.webcode}&OrderType=${ordertype}&OrderType_val=${ordertype_sub}&SubOrderType=${sub_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) {
            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(() => { //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。
                    this.orderCountData_Form_sub = json;
                })
            })
            .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;