ConsumptionSearch.jsx

import React, { useState, useEffect } from 'react';
import {Card, Form, Radio, DatePicker, Tag, Select} from 'antd';
import moment from "moment";
import styles from "../index.less";

const { RangePicker } = DatePicker;

const EnergySearch = (props) => {
  const { onSet, onChange, form, type, compareChange } = props;

  /* 快捷时间筛选 */
  const [quickValue, setQuickValue] = useState('month');

  /**
   * @表单提交
   */
  /* 快捷时间筛选 */
  const quickDate = val => {
    setQuickValue(val);
    const searchData = {
      'startTimestamp-endTimestamp': [ moment().startOf(val), moment().endOf('day')],
    };
    if (type === 'consumption') {
      searchData.groupBy = {day: 'hour', month: 'day', year: 'month'}[val]
    }
    onSet(searchData)
  };
  /* 时间范围选择ss */
  const rangeChange = () => {
    setQuickValue(null);
    form.setFieldsValue({
      groupBy: null
    })
  };

  /**
   * @对比分析
   */
  const year = moment().year();

  /* 默认时间 */
  const defaultRange = [
    moment().startOf('month'),
    moment().endOf('day')
  ];

  /**
   * @页面数据
   */
  /* 表单默认数据 */
  const initialValue = {
    'startTimestamp-endTimestamp': defaultRange,
    querySamePeriodLastYear: true,
    groupBy: 'day'
  };
  /* 能耗分析表单数据 */
  const groupBySelect = [
    { label: '小时', value: 'hour' },
    { label: '日周期', value: 'day' },
    { label: '月周期', value: 'month' },
    { label: '年周期', value: 'year' },
  ]

  return (
    <div className={styles.small_card_form}>
      <Card size="small">
        <Form
          form={form}
          initialValues={initialValue}
          onValuesChange={onChange}
          className={styles.search_left}
        >
          <Form.Item name="groupBy" label="统计周期" style={{marginBottom: 0}}>
            <Select allowClear style={{width: '100%'}}>
              {groupBySelect.map((item, index) => (
                <Select.Option key={index} value={item.value}>{item.label}</Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="startTimestamp-endTimestamp" label="选择日期" style={{marginBottom: 0, marginLeft: 10}}>
            <RangePicker style={{width: '100%'}} allowClear/>
          </Form.Item>
          <Radio.Group
            value={quickValue}
            style={{marginLeft: 10}}
            buttonStyle="solid"
            onChange={val => quickDate(val.target.value)}
          >
            {type === 'consumption' &&  <Radio.Button value="day">今日</Radio.Button>}
            <Radio.Button value="month">本月</Radio.Button>
            <Radio.Button value="year">本年</Radio.Button>
          </Radio.Group>
          <Form.Item name="querySamePeriodLastYear" style={{marginBottom: 0, marginLeft: 10}}>
            <Radio.Group onChange={val => compareChange(val.target.value)} buttonStyle="solid">
              <Radio.Button value={true}>同比</Radio.Button>
              <Radio.Button value={false}>环比</Radio.Button>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Card>
    </div>

  )
}

export default EnergySearch;