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';//当前切换的标签页
    active_tab_key_sub = 'detail';//当前切换的子维度标签页
    orderCountData = [];//订单统计数据源
    orderCountData_type = [];//子维度订单统计
    orderCountData_Form = [];//表单类型统计数据源
    orderCountData_Form_sub = [];//子维度类型统计
    diff_days1=0;//日期相差天数，用于计算日平均值
    diff_days2=0;//日期相差天数，比较数据时使用

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

    //切换标签页
    onChange_Tabs_sub(ordertype, ordertype_sub, active_key) {
        this.active_tab_key_sub = active_key;
        this.getOrderCountByType_sub(ordertype, ordertype_sub, this.active_tab_key_sub);
    }

    //格式化一下数据
    //映射时间，做时间段对比的时候需要把对比时间段映射到开始时间上才能在同一个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) {
            //不能直接用diff计算，因为日期是含有时间的，会导致计算差一天，先转成格式化的日期再比较
            let _start_date=moment(start_date.format(config.DATE_FORMAT));
            let _end_date=moment(end_date.format(config.DATE_FORMAT));
            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);
            });
    }


    //网站订单类型
    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;