dashboard/src/views/Orders.js

import React, {Component} from 'react';
import {Row, Col, Button, Tabs, Table} from 'antd';
import {
    ContainerOutlined, CarryOutOutlined, BlockOutlined,
    SmileOutlined, TagsOutlined, GlobalOutlined,
    SearchOutlined,
} from '@ant-design/icons';
import {stores_Context} from '../config'
import {Line} from "@ant-design/charts";
import SiteSelect from "../charts/SiteSelect";
import {observer} from 'mobx-react';
import DatePickerCharts from '../charts/DatePickerCharts'
import * as config from "../config";
import {NavLink} from "react-router-dom";
import * as comm from "../utils/commons"

class Orders extends Component {

    static contextType = stores_Context;

    constructor(props) {
        super(props);
    }

    // componentDidMount() {
    //     const {orders_store} = this.context;
    //     orders_store.getOrderCount();
    //     orders_store.onChange_Tabs(orders_store.active_tab_key);
    // }


    format_data(data) {
        const {date_picker_store, orders_store} = this.context;
        let result = {dataSource: [], columns: []}
        if (!comm.empty(data)) {
            let ordercountTotal1 = data.ordercountTotal1;
            let ordercountTotal2 = data.ordercountTotal2;
            if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { //有比较的数据
                result.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/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>
                        }]
                    },
                    {
                        title: '数量',
                        children: [{
                            title: comm.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount_diff, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount),
                            dataIndex: 'OrderCount'
                        }],
                    },
                    {
                        title: '成交数',
                        children: [{
                            title: comm.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount_diff, ordercountTotal1.CJCount, ordercountTotal2.CJCount),
                            dataIndex: 'CJCount'
                        }],
                    },
                    {
                        title: '成交人数',
                        children: [{
                            title: comm.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum_diff, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum),
                            dataIndex: 'CJPersonNum'
                        }],
                    },
                    {
                        title: '成交率',
                        children: [{
                            title: comm.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate_diff, ordercountTotal1.CJrate, ordercountTotal2.CJrate),
                            dataIndex: 'CJrate'
                        }],
                    },
                    {
                        title: '成交毛利（预计）',
                        children: [{
                            title: comm.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY_diff, ordercountTotal1.YJLY, ordercountTotal2.YJLY),
                            dataIndex: 'YJLY'
                        }],
                    },

                    {
                        title: '单个订单价值',
                        children: [{
                            title: comm.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue_diff, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue),
                            dataIndex: 'Ordervalue'
                        }],
                    },
                ];
                for (let item of data.ordercount1) {
                    for (let item2 of data.ordercount2) {
                        if (item.OrderType == item2.OrderType) {
                            result.dataSource.push({
                                key: item.key,
                                OrderType: item.OrderType,
                                OrderTypeSN: item.OrderTypeSN,
                                OrderCount: comm.show_vs_tag(item.OrderCount_vs, item.OrderCount_diff, item.OrderCount, item2.OrderCount),
                                CJCount: comm.show_vs_tag(item.CJCount_vs, item.CJCount_diff, item.CJCount, item2.CJCount),
                                CJPersonNum: comm.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum_diff, item.CJPersonNum, item2.CJPersonNum),
                                CJrate: comm.show_vs_tag(item.CJrate_vs, item.CJrate_diff, item.CJrate, item2.CJrate),
                                YJLY: comm.show_vs_tag(item.YJLY_vs, item.YJLY_diff, item.YJLY, item2.YJLY),
                                Ordervalue: comm.show_vs_tag(item.Ordervalue_vs, item.Ordervalue_diff, item.Ordervalue, item2.Ordervalue),
                            })
                        }
                    }
                }
            } else {
                result.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/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{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,
                        },
                    ];
                result.dataSource = data.ordercount1;
            }
        }
        return result;
    }

    render() {
        const {orders_store} = this.context;
        const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : [];
        const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
        const avg_line_y=data_source.length ? Math.round((data_source.reduce((a, b) => a + b.yField, 0))/data_source.length):0;//平均值，显示一条平均线
        const config = {
            data: data_source,
            padding: 'auto',
            xField: 'xField',
            yField: 'yField',
            seriesField: 'seriesField',
            xAxis: {
                type: 'timeCat',
            },
            point: {
                size: 4,
                shape: 'cicle',
            },
            annotations: [
                {
                    type: 'text',
                    position: ['start', avg_line_y],
                    content: avg_line_y,
                    offsetX: -15,
                    style: {
                        fill: '#F4664A',
                        textBaseline: 'bottom',
                    }
                },
                {
                    type: 'line',
                    start: [-10, avg_line_y],
                    end: ['max', avg_line_y],
                    style: {
                        stroke: '#F4664A',
                        lineDash: [2, 2],
                    },
                },
            ],
            label: {},//显示标签
            legend: {
                itemValue: {
                    formatter: (text, item) => {
                        const items = data_source.filter((d) => d.seriesField === item.value);//按站点筛选
                        return items.length ? items.reduce((a, b) => a + b.yField, 0) : '';//计算总数
                    },
                },
            },
            tooltip: {
                // customContent: (title, items) => {
                //     const data = items[0]?.data || {};
                //     return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
                // }
                title: (title, datum) => {
                    return title+' '+ comm.getWeek(datum.xField);//显示周几
                },
            },
            smooth: true,
        };


        return (
            <div>
                <Row>
                    <Col span={14}>
                    </Col>
                    <Col span={2}>
                        <SiteSelect store={orders_store}/>
                    </Col>
                    <Col span={6}>
                        <DatePickerCharts/>
                    </Col>
                    <Col span={2}>
                        <Button type="primary" icon={<SearchOutlined/>} loading={orders_store.loading} onClick={() => {
                            orders_store.getOrderCount();
                            orders_store.onChange_Tabs(orders_store.active_tab_key);
                        }}>统计</Button>
                    </Col>
                </Row>
                <Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>

                    <Col span={24}>
                        <Line {...config} />
                    </Col>

                    <Col span={24}>
                        <Tabs activeKey={orders_store.active_tab_key}
                              onChange={(active_key) => orders_store.onChange_Tabs(active_key)}>
                            <Tabs.TabPane tab={<span><ContainerOutlined/>来源类型</span>} key="Form">
                                <Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="Product">
                                <Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="Country">
                                <Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="line">
                                <Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="city">
                                <Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><BlockOutlined/>页面类型</span>} key="LineClass">
                                <Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
                            </Tabs.TabPane>
                        </Tabs>
                    </Col>

                </Row>
            </div>
        );
    }
    }

    export
    default

    observer(Orders);