dashboard/src/views/Sale_KPI.jsx

import React, { useContext } from 'react';
import { Row, Col, Table, Select, Space, Typography, Progress, Spin } from 'antd';
import { stores_Context } from '../config';
import { observer } from 'mobx-react';
import * as comm from '../utils/commons';
import SearchForm from './../components/search/SearchForm';
import { dataFieldAlias } from '../libs/ht';
import Donut from './../components/Donut';
import LineWithKPI from '../components/LineWithKPI';

const { Text } = Typography;

const Sale_KPI = () => {
  const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context);
  const { formValues } = searchFormStore;
  const { groupType, loading, operator, } = sale_store.salesTrade;

  const dataSource = [].concat(sale_store.salesTrade[groupType], operator);
  const yearData = Object.values(sale_store.salesTrade[groupType]?.[0]?.mData || {});
  const operatorObjects = operator.map((v) => ({ key: v.groupsKey, value: v.groupsKey, label: v.groupsLabel }));
  const pageRefresh = async (queryData) => {
    const overviewFlag = queryData.DepartmentList.toLowerCase() === 'all' || queryData.DepartmentList.toLowerCase().includes(',');
    const _groupType = overviewFlag ? 'overview' : 'dept';
    sale_store.setGroupType(_groupType);
    sale_store.fetchOperatorTradeData(_groupType, { ...queryData, groupDateType: 'year' });
    sale_store.fetchOperatorTradeData('operator', { ...queryData, groupDateType: 'year' });
    sale_store.setPickSales([]);
  };
  const monthCol = new Array(12).fill(1).map((_, index) => {
    return {
      title: `${index + 1}月`,
      dataIndex: `M${index + 1}Percent`,
      valueType: 'digit',
      width: '7.5em',
      render: (_, row) => (
        <Space direction={'vertical'}>
          {/* 目标 */}
          <div>
            <Text italic type={'secondary'}>
              {dataFieldAlias.SumML.formatter(row.mData[`month_${String(index + 1).padStart(2, '0')}`]?.MLKPIvalue || 0)}
            </Text>
          </div>
          {/* 完成 */}
          <div>{dataFieldAlias.SumML.formatter(row.mData[`month_${String(index + 1).padStart(2, '0')}`]?.SumML || 0)}</div>
          {row.mData[`month_${String(index + 1).padStart(2, '0')}`]?.MLKPIrates || 0 ? (
            <Progress
              percent={row.mData[`month_${String(index + 1).padStart(2, '0')}`]?.MLKPIrates || 0}
              size="small"
              format={(percent) => `${row.mData[`month_${String(index + 1).padStart(2, '0')}`]?.MLKPIrates || 0}%`}
              status={
                row.mData[`month_${String(index + 1).padStart(2, '0')}`].MLKPIrates < 80
                  ? 'exception'
                  : row.mData[`month_${String(index + 1).padStart(2, '0')}`].MLKPIrates < 100
                  ? 'normal'
                  : 'success'
              }
            />
          ) : (
            '-'
          )}
        </Space>
      ),
    };
  });
  const columns = [
    {
      title: ``,
      dataIndex: 'groupsLabel',
      editable: false,
      width: '7.5em',
      fixed: 'left',
    },
    {
      title: '年度',
      dataIndex: 'yearValue',
      width: '10em',
      fixed: 'left',
      render: (_, row) => (
        <Space direction={'vertical'}>
          <div>
            <Text italic type={'secondary'}>
              <span style={{ marginRight: '.5em' }}>目标</span>
              {dataFieldAlias.SumML.formatter(row.yData?.MLKPIvalue || 0)}
            </Text>
          </div>
          <div>
            <span style={{ marginRight: '.5em' }}>完成</span>
            {dataFieldAlias.SumML.formatter(row.yData?.SumML || 0)}
          </div>
          {row.yData?.MLKPIrates || 0 ? (
            <Progress
              percent={row.yData?.MLKPIrates || 0}
              size={'small'}
              format={(percent) => `${row.yData?.MLKPIrates || 0}%`}
              status={row.yData.MLKPIrates < 80 ? 'exception' : row.yData.MLKPIrates < 100 ? 'normal' : 'success'}
            />
          ) : (
            '-'
          )}
        </Space>
      ),
    },
    ...monthCol,
  ];
  const lineConfig = { appendPadding: 10, xField: 'groupDateVal', yField: 'SumML', seriesField: 'groupsLabel', isGroup: true, smooth: true, meta: comm.cloneDeep(dataFieldAlias), };
  return (
    <div>
      <Row gutter={16} className='sticky-top' >
        <Col md={24} lg={24} xxl={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>
      <Spin spinning={loading}>
        <h2 style={{ marginTop: '.5em' }}>年度业绩组成和走势</h2>
        <Row>
          <Col className="gutter-row" md={8}>
            <Donut
              {...{ angleField: 'SumML', colorField: 'groupsLabel', label1: { style: { color: '#000000' }, type: 'spider', content: '{name}\n{percentage}' }, legend: false, label2: false }}
              title={formValues.DepartmentList?.label}
              dataSource={operator.map((row) => ({ ...row, SumML: row.yearML }))}
            />
          </Col>
          <Col className="gutter-row" md={16}>
            <LineWithKPI dataSource={yearData} {...lineConfig} {...{legend: false}} />
          </Col>
          <Col className="gutter-row" md={24}>
            <Space gutter={16} size={'large'}>
              <h2>顾问业绩走势</h2>
              <Select
                labelInValue
                mode={'multiple'}
                style={{ width: '400px' }}
                placeholder={'选择顾问'}
                onChange={sale_store.setPickSales}
                value={sale_store.salesTrade.pickSales}
                maxTagCount={1}
                maxTagPlaceholder={(omittedValues) => ` + ${omittedValues.length} 更多...`}
                allowClear={true}
              >
                {operatorObjects.map((ele) => (
                  <Select.Option key={ele.key} value={ele.value}>
                    {ele.label}
                  </Select.Option>
                ))}
              </Select>
            </Space>
          </Col>
          <Col className="gutter-row" md={24}>
            <LineWithKPI dataSource={sale_store.salesTrade.pickSalesData} {...lineConfig} />
          </Col>
        </Row>

        <Row>
          <Col className="gutter-row" md={24}>
            <Table
              sticky
              key={`salesTradeTable`}
              loading={loading}
              columns={columns}
              rowKey="groupsKey"
              scroll={{
                x: 1000,
              }}
              dataSource={dataSource}
              pagination={false}
            />
          </Col>
        </Row>
      </Spin>
    </div>
  );
};
export default observer(Sale_KPI);