dashboard/src/views/Distribution.jsx

import { useContext, useEffect, useMemo } from 'react';
import { observer } from 'mobx-react';
import { stores_Context } from '../config';
import { Row, Col, Spin, Space, Radio, Tabs, Table } from 'antd';
import { RingProgress } from '@ant-design/plots';
import SearchForm from './../components/search/SearchForm';
import "./kpi.css";
import { empty } from '../utils/commons';

const apartOptions = [
  { key: 'tourDays', value: 'tourDays', label: '团天数', },
  { key: 'PML', value: 'PML', label: '单团毛利', },
  { key: 'ConfirmDays', value: 'ConfirmDays', label: '成团周期', },
  { key: 'ApplyDays', value: 'ApplyDays', label: '预定周期', },
  { key: 'PersonNum', value: 'PersonNum', label: '人等', },
  { key: 'destination', value: 'destination', label: '国内目的地', },
  { key: 'GlobalDestination', value: 'GlobalDestination', label: '海外目的地', },
];

export default observer((props) => {
  const { date_picker_store: searchFormStore, DistributionStore } = useContext(stores_Context);
  const { formValues, formValuesToSub } = searchFormStore;
  const { curTab } = DistributionStore;
  const pageRefresh = (obj) => {
    DistributionStore.getData({
      DateType: 'applyDate',
      Date1: searchFormStore.start_date.startOf('year').format('YYYY-MM-DD'),
      Date2: searchFormStore.end_date.endOf('year').format('YYYY-MM-DD 23:59'),
      ...(obj || formValuesToSub),
    });
  };

  useEffect(() => {
    if (empty(DistributionStore[curTab].dataSource)) {
      pageRefresh();
    }
  }, [curTab]);

  useEffect(() => {
    DistributionStore.resetData();
    return () => {};
  }, [formValuesToSub]);


  const onTabsChange = (tab) => {
    DistributionStore.setCurTab(tab);
  };
  const RingProgressConfig = {
    height: 60,
    width: 60,
    autoFit: false,
    // percent: Number(_)/100,
    color: ['#5B8FF9', '#E8EDF3'],
  };
  const columns = [
    {
      title: '',
      dataIndex: 'label',
    },
    { title: '团数', dataIndex: 'ConfirmOrder'},
    { title: '业绩', dataIndex: 'SumML', render1: (v) => `1`},
    { title: '团数占比', dataIndex: 'ConfirmOrderPercent', render: (v) => <RingProgress {...RingProgressConfig} percent={v/100} /> },
    { title: '业绩占比', dataIndex: 'SumMLPercent', render: (v) => <RingProgress {...RingProgressConfig} percent={v/100} />},
  ];
  return (
    <>
      <Row gutter={16} style={{ margin: '-16px -8px' }}>
        {/* style={{ margin: '-16px -8px', padding: 0 }} */}
        <Col className="gutter-row" span={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...formValues,
              },
              shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'years'],
              fieldProps: {
                DepartmentList: { show_all: true },
                WebCode: { show_all: true },
                years: { hide_vs: true },
              },
            }}
            onSubmit={(_err, obj, form, str) => {
              pageRefresh(obj);
            }}
          />
        </Col>
      </Row>
      <section>
          <Tabs
            onChange={onTabsChange}
            type="card"
            items={apartOptions.map((ele, i) => {
              // const ObjectItemPanel = objectComponents[ele.key];
              return {
                ...ele,
                children: (
                  <Spin spinning={DistributionStore.pageLoading}>
                    {/* <ObjectItemPanel title={ele.label} {...{ curObject, onSearchSubmit, objects: retObjects }} /> */}

              <Table
                id="table_to_xlsx_sale"
                dataSource={DistributionStore[curTab].dataSource}
                columns={columns}
                size="small"
                rowKey={(record) => record.label}
                loading={DistributionStore[curTab].loading}
                pagination={false}
                scroll={{ x: '100%' }}
              />
                  </Spin>
                ),
              };
            })}
          />
      </section>
    </>
  );
});