dashboard/src/views/OPActivity.jsx

import React, { Children, useContext, useState } from 'react';
import { observer } from 'mobx-react';
import { stores_Context } from '../config';
import moment from 'moment';
import { SlackOutlined, SketchOutlined, AntCloudOutlined, RedditOutlined, GithubOutlined } from '@ant-design/icons';
import { Row, Col, Table, Select, Space, Typography, Progress, Spin, Divider, Button, Switch } from 'antd';
import SearchForm from './../components/search/SearchForm';

export default observer((props) => {
  const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context);

  const { formValues, siderBroken } = searchFormStore;

  const activityTableProps = {
    columns: [
      { title: '', dataIndex: 'op', key: 'op' }, // 维度: 顾问
      {
        title: '顾问动作',
        key: 'date',
        children: [
          { title: '首次响应率24H', dataIndex: 'action', key: 'action' },
          { title: '48H内报价率', dataIndex: 'action', key: 'action' },
          { title: '一次报价率', dataIndex: 'action', key: 'action' },
          { title: '二次报价率', dataIndex: 'action', key: 'action' },
          { title: '>50条会话', dataIndex: 'action', key: 'action' },
          { title: '违规数', dataIndex: 'action', key: 'action' },
        ],
      },
      {
        title: '客人回复',
        key: 'department',
        children: [
          { title: '首次回复率24H', dataIndex: 'action', key: 'action' },
          { title: '48H内报价回复率', dataIndex: 'action', key: 'action' },
          { title: '一次报价回复率', dataIndex: 'action', key: 'action' },
          { title: '二次报价回复率', dataIndex: 'action', key: 'action' },
        ],
      },
    ],
  };

  const riskTableProps = {
    columns: [
      { title: '', dataIndex: 'date', key: 'date' }, // 维度
      { title: '>24H回复', dataIndex: 'action', key: 'action' },
      { title: '首次报价周期>48h', dataIndex: 'action', key: 'action' },
      { title: '报价次数<1次', dataIndex: 'action' },
      { title: '报价次数<2次', dataIndex: 'action' },
    ],
  };

  return (
    <>
      <Row gutter={16} className={siderBroken ? '' : 'sticky-top'}>
        <Col md={24} lg={24} xxl={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...formValues,
                ...sale_store.searchValues,
              },
              shows: ['DepartmentList', 'WebCode', 'dates'],
              fieldProps: {
                DepartmentList: { show_all: false, mode: 'multiple', col: 5 },
                WebCode: { show_all: false, mode: 'multiple', col: 5 },
                dates: { hide_vs: true },
              },
            }}
            onSubmit={(_err, obj, form, str) => {
              sale_store.setSearchValues(obj, form);
              // pageRefresh(obj);
            }}
          />
        </Col>
      </Row>
      <section>
        <Table {...activityTableProps} bordered />
      </section>
      <section>
        <h3>未成行订单</h3>
        <Table {...riskTableProps} bordered />
      </section>
    </>
  );
});