gt_client_pad/src/pages/SmartOps/operationManage/WaterQualityAnalysis/WaterQualityAnalysis.js

import ChartModule from '@/components/ManagementPage/chartModule';
import {
  queryChartListByCode,
  queryProcessSection,
  querySectionCode,
} from '@/services/OperationManagement';
import { useParams, useRequest } from '@umijs/max';
import { Button, DatePicker, Empty, Table } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useMemo, useState } from 'react';
import SubTitle from '../../components/SubTitle';
import styles from './WaterQuailtyAnalysis.less';

const { RangePicker } = DatePicker;

const WaterQualityAnalysis = () => {
  const { projectId } = useParams();

  const defaultTime = {
    s_time: dayjs().subtract(1, 'week').format('YYYY-MM-DD 00:00:00'),
    e_time: dayjs().format('YYYY-MM-DD 23:59:59'),
  };

  const [processId, setProcessId] = useState(null);
  const [currentCode, setCode] = useState(null);

  const { data: codeList, run: getCode } = useRequest(querySectionCode, {
    manual: true,
    onSuccess(data) {
      if (data) {
        setCode(data[0]);
      }
    },
    formatResult(res) {
      return res.data;
    },
  });

  useRequest(queryProcessSection, {
    defaultParams: [projectId],
    onSuccess(data) {
      setProcessId(data[0].id);
    },
    formatResult(res) {
      return res.data;
    },
  });

  const { data: mainData, run } = useRequest(
    (date) => {
      const temp = codeList?.slice(0, 3);
      console.log(date);
      return queryChartListByCode(
        {
          project_id: Number(projectId),
          start_time: date?.s_time || defaultTime.s_time,
          end_time: date?.e_time || defaultTime.e_time,
        },
        [...temp?.map((item) => item.metric_code), 'permeate', 'feed'],
        false,
      );
    },
    {
      manual: true,
      onSuccess: (data) => {
        console.log(data);
      },
    },
  );

  useEffect(() => {
    if (processId !== null) {
      getCode(processId, 2, projectId);
    }
  }, [processId]);

  useEffect(() => {
    if (codeList) {
      run();
    }
  }, [codeList]);

  const chartProps = useMemo(() => {
    const dataList = [];
    if (!mainData || !currentCode) {
      return;
    }

    const yName = currentCode.metric;
    const reversedData = [...mainData].reverse();
    const xData = reversedData.map((item) => item.time);

    dataList.push({
      type: 0,
      name: '出水水量',
      data: reversedData.map((item) => item.permeate),
    });

    dataList.push({
      type: 1,
      name: '进水水量',
      data: reversedData.map((item) => item.feed),
    });

    dataList.push({
      type: 2,
      name: currentCode.metric,
      data: reversedData.map((item) => item[currentCode.metric_code]),
    });

    return {
      yName,
      xData,
      dataList,
      typeList: codeList?.map((item) => item.metric).slice(0, 3),
      currentType: currentCode.metric,
    };
  }, [mainData]);

  const column = useMemo(() => {
    const col = { title: '时间', dataIndex: 'time', width: '250px' };
    let other = codeList?.map((item) => {
      return {
        title: item.metric,
        dataIndex: item.metric_code,
        width: '200px',
      };
    });
    other = other?.slice(0, 3);
    return other && other.length > 0 ? [col, ...other] : [];
  }, [codeList]);

  const handleTimeRangeChange = (range) => {
    if (range?.length === 2) {
      run({
        s_time: dayjs(range[0]).format('YYYY-MM-DD 00:00:00'),
        e_time: dayjs(range[1]).format('YYYY-MM-DD HH:mm:ss'),
      });
    } else {
      run(defaultTime);
    }
  };

  const handleTimeBTNClick = (unit) => {
    run({
      s_time: dayjs().subtract(1, unit).format('YYYY-MM-DD 00:00:00'),
      e_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    });
  };

  return (
    <div className="card-box" style={{ padding: '0.2rem' }}>
      <div>
        <div className={styles.timeBtn} style={{}}>
          <SubTitle title="全厂概览" />
          <RangePicker onChange={handleTimeRangeChange} />
          <Button
            type="primary"
            shape="round"
            onClick={() => {
              handleTimeBTNClick('day');
            }}
          >
            近一天
          </Button>
          <Button
            type="primary"
            shape="round"
            onClick={() => {
              handleTimeBTNClick('week');
            }}
          >
            近一周
          </Button>
          <Button
            type="primary"
            shape="round"
            onClick={() => {
              handleTimeBTNClick('month');
            }}
          >
            近一个月
          </Button>
        </div>
      </div>
      <div>
        <SubTitle title={'数据曲线'} fontSize="0.26rem" />
        <div style={{ height: '4rem' }}>
          {mainData ? (
            <ChartModule {...chartProps} onChange={onChange} />
          ) : (
            <Empty />
          )}
        </div>
      </div>
      <div>
        <SubTitle title={'数据列表'} fontSize="0.26rem" />
        <Table columns={column} dataSource={mainData} />
      </div>
    </div>
  );
};

export default WaterQualityAnalysis;