dashboard/src/views/Orders.js

import React, {Component} from 'react';
import {Layout, Menu, Image, Row, Col, DatePicker, Space, Button, Tabs, Select, Table} from 'antd';
import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
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);

    }


    render() {
        const {orders_store} = this.context;
        const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
        const config = {
            data: data_source,
            padding: 'auto',
            xField: 'ApplyDate',
            yField: 'orderCount',
            seriesField: 'groups',
            xAxis: {
                type: 'timeCat',
            },
            smooth: true,
        };

        return (
            <div>
                <Row>
                    <Col span={14}>
                    </Col>
                    <Col span={2}>
                        <SiteSelect/>
                    </Col>
                    <Col span={6}>
                        <DatePickerCharts/>
                    </Col>
                    <Col span={2}>
                        <Button type="primary" icon={<SearchOutlined/>} loading={orders_store.loading} onClick={() => {
                            orders_store.getOrderCount();
                            orders_store.getOrderCountByType('Form');
                        }}>统计</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 defaultActiveKey="tab_form">
                            <Tabs.TabPane tab={<span><ContainerOutlined/>来源类型</span>} key="tab_form">
                                <Table dataSource={orders_store.orderCountData_Form} columns={
                                    [
                                        {
                                            title: '时间段',
                                            dataIndex: 'groups',
                                            key: 'groups',
                                        },
                                        {
                                            title: '来源类型',
                                            dataIndex: 'OrderType',
                                            key: 'OrderType',
                                        },
                                        {
                                            title: '数量',
                                            dataIndex: 'OrderCount',
                                            key: 'OrderCount',
                                        },
                                        {
                                            title: '成交数',
                                            dataIndex: 'CJCount',
                                            key: 'CJCount',
                                        },
                                        {
                                            title: '成交人数',
                                            dataIndex: 'CJPersonNum',
                                            key: 'CJPersonNum',
                                        },
                                        {
                                            title: '成交率',
                                            dataIndex: 'CJrate',
                                            key: 'CJrate',
                                        },
                                        {
                                            title: '预计毛利（成交）',
                                            dataIndex: 'YJLY',
                                            key: 'YJLY',
                                        },

                                        {
                                            title: '单个订单价值',
                                            dataIndex: 'Ordervalue',
                                            key: 'Ordervalue',
                                        },
                                    ]
                                } size="small"/>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="tab_product">
                                产品类型
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="tab_nationality">
                                国籍
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="tab_tour">
                                线路
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="tab_destination">
                                目的地
                            </Tabs.TabPane>
                        </Tabs>
                    </Col>

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

export default observer(Orders);