estateagents-admin-manager/src/pages/indexEcharts/userBehavior.jsx

import React, { Component, useState, useEffect } from 'react';
import { Radio, DatePicker, Form, Input, Button, Icon, Select, message, Table , Row, Col, Menu, Dropdown } from 'antd';

import moment from 'moment';
import UserBehavior from './components/UserBehavior'
import EChart from '../../components/EchartsTest/EChart';
import request from '../../utils/request';
import apis from '../../services/apis';
import BuildSelect from '../../components/SelectButton/BuildSelect'
import { func } from 'prop-types';

// const formatDate = (start, end) => {
//   const startDate = moment(start).format('YYYY-MM-DDT00:00:00.000') + 'Z'
//   const endDate = moment(end).format('YYYY-MM-DDT23:59:59.999') + 'Z'
//   return { startDate, endDate }
// }
const { Option } = Select;

const header = props => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [tableData, setTableData] = useState({ records: [] })

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [endDate, setEndDate] = useState({})
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [startDate, setStartDate] = useState({})
  const daterange = []

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    window.scrollTo(0, 0)
    setEndDate(new Date())
    setStartDate(moment().subtract(7, 'day').toDate())
    getBizEventType()
    getBizEventList()
    getProperties()
    props.form.setFieldsValue({ radioGroup: 'a' })
  }, [])

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [eventypes, setEventTypes] = useState([])
  function getBizEventType(row) {
    request({
      ...apis.indexEcharts.bizEvent.dict,
    }).then(data => {
      const eventType = ['agent', 'main']
      setEventTypes(data.records.filter(item => !eventType.includes(item.typeId)))
    })
  }
  const [eventList, setEventList] = useState([])
  function getBizEventList(row) {
    request({
      ...apis.indexEcharts.bizEvent.list,
    }).then(data => {
      setEventList(data.records)
    })
  }
  const [properties, setProperties] = useState([])
  function getProperties(row) {
    request({
      ...apis.indexEcharts.bizEvent.properties,
    }).then(data => {
      setProperties(data.records)
    })
  }

  const { RangePicker } = DatePicker;


  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        const { rangePicker } = values
        console.log('Received values of form: ', values.rangePicker);
        setEndDate(rangePicker[1])
        setStartDate(rangePicker[0])
      }
    });
  }

  const getDataOf = days => () => {
    setEndDate(new Date())
    setStartDate(moment().subtract(days, 'day').toDate())
  }


  function redata(e) {
    console.log('行为回调数据：', e)
  }
  const [eventType, setEventType] = useState('')
  function handleChangeType(value) {
    setEventType(value)
  }
  const [event, setEvent] = useState('')
  function handleChangeEvent(value) {
    setEvent(value)
  }
  const [activity, setActivity] = useState('')
  function handleChangeProperty(value) {
    setActivity(value)
  }

  const [buildingId, setBuildingId] = useState('')
  function handleBuildingChange(value) {
    setBuildingId(value)
  }

  // 重置
  function resetQuery() {
    props.form.resetFields()
    props.form.setFieldsValue({ radioGroup: 'a' })
  }

  const columns = [
    {
      title: '访问事件',
      dataIndex: 'personName',
      key: 'personName',
      width: '20%',
    },
    {
      title: '访问用户',
      dataIndex: 'phone',
      key: 'phone',
      width: '20%',
    },
    {
      title: '访问次数',
      dataIndex: 'buildingName',
      key: 'buildingName',
      width: '20%',
    },
    {
      title: '首次访问时间',
      dataIndex: 'intention',
      key: 'intention',
      width: '20%',
    },
    {
      title: '离开时间',
      dataIndex: 'stion',
      key: 'stion',

    },
  ];

  const dataSource = []

  const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = props.form;
  return (
  <>
    <div>
      <div>
        <Form layout="inline" onSubmit={handleSubmit}>
          <Form.Item>
            {getFieldDecorator('radioGroup')(
              <Radio.Group buttonStyle="solid">
                <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
                <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
              </Radio.Group>,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('rangePicker')(
              <RangePicker
                style={{ paddingLeft: '30px', width: '400px' }}
                ranges={{
                  Today: [moment(), moment()],
                  'This Month': [moment().startOf('month'), moment().endOf('month')],
                }}
                // defaultValue={[moment(new Date(new Date().setDate((new Date().getDate() - 6))), 'YYYY-MM-DD HH:MM:SS'), moment(new Date(), 'YYYY-MM-DD HH:MM:SS')]}
                showTime
              />,
            )}
          </Form.Item>

            <Button type="primary" htmlType="submit" style={{ marginLeft: '30px', float: 'right' }}>
              搜索
            </Button>
            <Button style={{ marginLeft: '30px', float: 'right' }} onClick={resetQuery}>
              重置
            </Button>

          <div style={{ display: 'flex', margin: '24px 0' }}>
            <Form.Item>
              {getFieldDecorator('buildingId')(
                <BuildSelect style={{ width: '14%', minWidth: '160px' }} slot="action" onChange={(e => handleBuildingChange(e))}></BuildSelect>,
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('handleType')(
                <Select style={{ width: '14%', minWidth: '160px', marginLeft: '2%' }} placeholder="所有事件组" onChange={handleChangeType}>
                    {eventypes.map(type => (
                      <Option key={type.typeId}>{type.typeName}</Option>
                    ))}
                </Select>,
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('handleEvent')(
                 <Select style={{ width: '14%', minWidth: '200px', marginLeft: '2%' }} placeholder="请选择事件" onChange={handleChangeEvent}>
                      {eventList.map(event => (
                        <Option key={event.eventId}>{event.eventName}</Option>
                      ))}
                  </Select>,
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('handleProperty')(
                 <Select style={{ width: '14%', minWidth: '160px', marginLeft: '2%' }} placeholder="请选择属性" onChange={handleChangeProperty}>
                    {properties.map(property => (
                      <Option key={property.propertyId}>{property.propertyName}</Option>
                    ))}
                </Select>,
              )}
            </Form.Item>
          </div>
        </Form>
      </div>

      <div style={{ margin: '24px 0' }}>
       <UserBehavior tableShow BuildSelectHide buildingId={buildingId} endDate={endDate} startDate={startDate} eventType={eventType} activity={activity} event={event} dataZoom onReData={e => redata(e)}></UserBehavior>
      </div>

      {/* <Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ y: 500 }} /> */}
    </div>
  </>
  )
}

const WrappedHorizontalLoginForm = Form.create({ name: 'header' })(header);
export default WrappedHorizontalLoginForm