WorkloadWeb/src/pages/ReportDaily/Index.js

import React, { useState } from 'react';
import { DatePicker, Button, Calendar, Progress, Modal } from 'antd';
import { getData } from './utils';
import moment from 'moment';
import ReportTable from './components/ReportTable';

const ReportSummary = () => {
  const [loading, setLoading] = useState(false);
  const [selectedDate, setSelectedDate] = useState(moment());
  const [progress, setProgress] = useState(0);
  const [statusText, setStatusText] = useState('');
  const [statusTextHistory, setStatusTextHistory] = useState([]);
  const [historyVisible, setHistoryVisible] = useState(false);
  const [data, setData] = useState(false);

  const handleDateChange = date => {
    setSelectedDate(date);
  };

  const handleQuery = async () => {
    if (!selectedDate) {
      return;
    }

    // 计算默认时间范围：上个月26号到这个月25号
    const startDate = selectedDate
      .clone()
      .subtract(1, 'month')
      .date(26)
      .startOf('day');
    const endDate = selectedDate
      .clone()
      .date(25)
      .endOf('day');

    setLoading(true);
    try {
      // 发起接口请求
      let data = await getData(startDate, endDate, onChangeStatus);
      setData(data);
    } catch (error) {
      console.error(error);
      onChangeStatus('请求接口失败');
    }
    setLoading(false);
  };

  const onChangeStatus = (text, isDone) => {
    let totalCalls = 300;
    let newProgress = 0;
    if (!isDone) {
      let current = progress + 1 / totalCalls;
      newProgress = current > 99 ? 99 : Number(current.toFixed(2));
    } else {
      newProgress = 100; // 直接到达100%
    }
    const currentTime = new Date().toLocaleTimeString();
    let statusText = `【${currentTime}】：${text}`;
    setProgress(newProgress);
    setStatusText(statusText);
    setStatusTextHistory(prevHistory => [statusText, ...prevHistory]);
  };

  const handleHistoryClick = () => {
    setHistoryVisible(true);
  };

  const handleHistoryCancel = () => {
    setHistoryVisible(false);
  };

  return (
    <div>
      <DatePicker
        allowClear={false}
        value={selectedDate}
        onChange={handleDateChange}
        picker="month"
      />
      <Button type="primary" loading={loading} onClick={handleQuery} style={{ marginLeft: 20 }}>
        查询
      </Button>
      <div style={{ margin: '10px 0' }}>
        {/* <Progress percent={50} status="active" /> */}
        <div onClick={() => setHistoryVisible(true)}>{statusText}</div>
      </div>
      <ReportTable data={data} month={selectedDate.month() + 1} />

      <Modal title="历史记录" visible={historyVisible} onCancel={handleHistoryCancel} footer={null}>
        {statusTextHistory.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </Modal>
    </div>
  );
};

export default ReportSummary;