dashboard/src/charts/Orders.jsx

import React, { Component } from 'react';
import { Row, Col, Button, Tabs, Table, Space } 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 '../components/search/SiteSelect';
import { observer } from 'mobx-react';
import DatePickerCharts from '../components/search/DatePickerCharts';
import DateGroupRadio from '../components/DateGroupRadio';

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 { dashboard_store } = this.context;
    const orders_data = dashboard_store.orders_data;
    const line_config = {
      data: orders_data.data,
      padding: 'auto',
      xField: 'ApplyDate',
      yField: 'orderCount',
      seriesField: 'WebCode',
      // xAxis: {
      //   type: 'timeCat',
      // },
      smooth: true,
      legend: {
        position: 'right-top',
        title: {
          text: '总合计 ' + orders_data.data.reduce((a, b) => a + b.orderCount, 0),
        },
        itemMarginBottom: 12, // 垂直间距
        itemValue: {
          formatter: (text, item) => {
            const items = orders_data.data.filter((d) => d.WebCode === item.value); // 按站点筛选
            return items.length ? items.reduce((a, b) => a + b.orderCount, 0) : ''; // 计算总数
          },
        },
      },
    };

    return (
      <div>
        <h2>全网站订单数统计</h2>
        <div>
          <Space>
            <DatePickerCharts hide_vs={true} />
            <Button
              type="primary"
              icon={<SearchOutlined />}
              loading={orders_data.loading}
              onClick={() => {
                orders_data.getOrderCount_all();
              }}
            >
              统计
            </Button>
          </Space>
        <div style={{textAlign: 'right'}}>
          <DateGroupRadio
            visible={true}
            dataRaw={dashboard_store.ordersCountDataRaw}
            onChange={dashboard_store.onChangeDateGroup}
            defaultValue={'day'}
            dataMapper={dashboard_store.orderCountDataMapper}
            fieldMapper={dashboard_store.orderCountDataFieldMapper}
          />
        </div>
        </div>
        <br />
        <Line {...line_config} />
      </div>
    );
  }
}

export default observer(Orders);