pc-admin/src/pages/statistics/activity/index.jsx

import React, { Component, useState, useEffect } from 'react';
import { Card, Row, Col, Statistic, Icon, Table } from 'antd';
// import IndexEcharts from './components/indexEcharts';
// import Swiper from './swiper/index';
import moment from 'moment';
import router from 'umi/router';
import request from '@/utils/request';
import apis from '@/services/apis';
import TimeSelect from '../compents/TimeSelect';
import BuildingSelect from '@/components/SelectButton/BuildSelect';
import Navigate from '@/components/Navigate';
// import Count from './components/Count';
// import SourceRole from './components/SourceRole';
// import UserSex from './components/UserSex';
// import UserConversion from './components/UserConversion';
// import BuildingStatistic from './BuildingStatistic';

const DataReport = props => {
  const [data, setData] = useState({});
  const [time, setTime] = useState();
  const [buildingValue, setBuildingValue] = useState('');

  useEffect(() => {
    if (time) {
      getTableList({
        buildingId:buildingValue,
        startDate: moment(time[0]).format('YYYY-MM-DDT00:00:00.000') + 'Z',
        endDate: moment(time[1]).format('YYYY-MM-DDT23:59:59.999') + 'Z',
      });
    }
  }, [time,buildingValue]);

  const columns = [
    {
      title: '活动名称',
      dataIndex: 'title',
      key: 'title',
      // sorter: true,
    },
    {
      title: '访问人数',
      dataIndex: 'visitPersonNum',
      key: 'visitPersonNum',
      width:'25%',
      sorter: true,
      render: (text)=>text||0
    },
    {
      title: '访问次数',
      dataIndex: 'visitNum',
      key: 'visitNum',
      width:'25%',
      sorter: true,
      render: (text)=>text||0
    },
    {
      title: '报名人数',
      dataIndex: 'signNum',
      key: 'signNum',
      width:'25%',
      sorter: true,
      // render: (text)=>text||0
        render: (text, record) => (
          text? <Navigate onClick={()=>toAddVisitNum(record)}>{record.signNum}</Navigate>:0
          // <a style={{ color: '#66B3FF' }} onClick={toAddVisitNum(record)}><span>{record.visitNum}</span></a>
        ),
    },
  ];

  const  toAddVisitNum = (record)=>{
    router.push({
      pathname: '/activity/SignupActivity/registrationRecord',
      query: {
        dynamicId:record.dynamicId
      },
    });
  }

  //排序
  const handleTableChange = (pagination, filters, sorter) => {
    console.log(pagination, filters, sorter);
    getTableList({
      buildingId:buildingValue,
      startDate: moment(time[0]).format('YYYY-MM-DDT00:00:00.000') + 'Z',
      endDate: moment(time[1]).format('YYYY-MM-DDT23:59:59.999') + 'Z',
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
      sort: sorter.order,
      sortField: sorter.columnKey,
    });
    // const { formData } = this.state
    // this.setState({
    //   formData: {
    //     ...formData,
    //     startDate: formData.startDate,
    //     endDate: formData.endDate,
    //     buildingId: formData.buildingId,
    //     targetType: formData.targetType,
    //     pageNum: pagination.current,
    //     pageSize: pagination.pageSize,
    //     sort: sorter.order,
    //     colKey: sorter.columnKey
    //   }
    // }, this.getTableList)
  };

  function getTableList(params) {
    request({
      ...apis.activityDataStatis.activityDetailTableData,
      params: {
        ...params,
      },
    })
      .then(data => {
        console.log(data);
        setData(data);
        // this.setState({ tableData: data.records, total: data.total });
      })
      .catch();
  }

  const onTimeChange = e => {
    setTime(e);
  };

  return (
    <Card
      title={<BuildingSelect value={buildingValue} onChange={e => setBuildingValue(e)} all />}
      headStyle={{ textAlign: 'left' }}
      extra={<TimeSelect onChange={onTimeChange}></TimeSelect>}
    >
      <Table
        columns={columns}
        dataSource={data?.records}
        key="dynamicId"
        pagination={{current:data?.current, pageSize: 10, total: data?.total }}
        onChange={handleTableChange}
      ></Table>
    </Card>
  );
};
export default DataReport;