gt_client_pad/src/pages/Home/QualityMng.js

//水质管理
import ChartModule from '@/components/ManagementPage/chartModule';
// import SearchModule from '@/components/ManagementPage/searchModule';
import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import {
  queryChartListByCode,
  queryProcessSection,
  querySectionCode,
} from '@/services/OperationManagement';
import { UnityAction } from '@/utils/utils';
import { useParams, useRequest } from '@umijs/max';
import { Empty, Spin, Table } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useMemo, useRef, useState } from 'react';

function Quality() {
  const { projectId } = useParams();
  const [currentCode, setCode] = useState(null);
  // const [processId, setProcessId] = useState(null);

  const timerRef = useRef({
    s_time: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
    e_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  });

  const { data: codeList, run: queryCodeList } = useRequest(querySectionCode, {
    manual: true,
    onSuccess(res) {
      if (res && res.length > 0) {
        setCode(res[0]);
      }
    },
  });

  // 获取工艺段列表
  useRequest(queryProcessSection, {
    defaultParams: [projectId],
    onSuccess(res) {
      // setProcessId(res.data[0].id);
      queryCodeList(res[0].id, 2, projectId * 1);
    },
  });
  const mainRes = useRequest(
    () => {
      return queryChartListByCode(
        {
          project_id: Number(projectId),
          start_time: timerRef.current.s_time,
          end_time: timerRef.current.e_time,
        },
        codeList?.map((item) => item.metric_code),
      );
    },
    {
      manual: true,
    },
  );
  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',
      };
    });
    return other && other.length > 0 ? [col, ...other] : [];
  }, [codeList]);

  //图表配置
  const chartProps = useMemo(() => {
    let xData = [],
      dataList = [];
    if (!mainRes.data || !currentCode) return;
    let yName = currentCode.metric;
    let data = [...mainRes.data].reverse();
    xData = data.map((item) => item.time);
    // dataList.push({
    //   type: 0,
    //   name: '出水水量',
    //   data: data.map((item) => item.permeate),
    // });
    // dataList.push({
    //   type: 1,
    //   name: '进水水量',
    //   data: data.map((item) => item.feed),
    // });
    dataList.push({
      type: 2,
      name: currentCode.metric,
      data: data.map((item) => item[currentCode.metric_code]),
    });
    return {
      yName,
      xData,
      dataList,
      typeList: codeList?.map((item) => item.metric),
      currentType: currentCode.metric,
    };
  }, [mainRes.data, currentCode]);

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

  const onChange = (name) => {
    const code = codeList.find((item) => item.metric == name);
    if (code) setCode(code);
  };

  return (
    <PageContent closeable={false}>
      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
        水质监测
      </PageTitle>
      <div className="card-box" style={{ padding: 20, marginTop: 40 }}>
        <PageTitle>数据曲线</PageTitle>
        <Spin spinning={mainRes.loading}>
          <div style={{ height: 500, marginTop: 20 }}>
            {mainRes?.data ? (
              <ChartModule {...chartProps} onChange={onChange} />
            ) : (
              <Empty />
            )}
          </div>
        </Spin>
        <div style={{ marginTop: 30 }}>
          <PageTitle>数据列表</PageTitle>
          <Table
            columns={column}
            style={{ marginTop: 20 }}
            dataSource={mainRes?.data}
            scroll={{ x: 2500 }}
          />
        </div>
      </div>
    </PageContent>
  );
}

export default Quality;