dashboard/src/views/Orders.js

import React, {Component} from 'react';
import {Row, Col, Button, Tabs, Table} from 'antd';
import {
    ContainerOutlined, CarryOutOutlined,
    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'

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);
    // }

    render() {
        const {orders_store} = this.context;
        const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
        const config = {
            data: data_source,
            padding: 'auto',
            xField: 'xField',
            yField: 'yField',
            seriesField: 'seriesField',
            xAxis: {
                type: 'timeCat',
            },
            // tooltip: {
            //     customContent: (title, items) => {
            //         const data = items[0]?.data || {};
            //         return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
            //     }
            // },
            smooth: false,
        };

        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 className="gutter-row" span={24}>
                        <Line {...config} />
                    </Col>

                    <Col className="gutter-row" 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={orders_store.orderCountData_Form.dataSource}
                                       columns={orders_store.orderCountData_Form.columns} size="small"/>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="Product">
                                <Table dataSource={orders_store.orderCountData_Form.dataSource}
                                       columns={orders_store.orderCountData_Form.columns} size="small"/>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="Country">
                                <Table dataSource={orders_store.orderCountData_Form.dataSource}
                                       columns={orders_store.orderCountData_Form.columns} size="small"/>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="line">
                                <Table dataSource={orders_store.orderCountData_Form.dataSource}
                                       columns={orders_store.orderCountData_Form.columns} size="small"/>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="city">
                                <Table dataSource={orders_store.orderCountData_Form.dataSource}
                                       columns={orders_store.orderCountData_Form.columns} size="small"/>
                            </Tabs.TabPane>
                        </Tabs>
                    </Col>

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

export default observer(Orders);