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),
        [currentCode.metric_code],
      );
    },
    {
      manual: true,
    },
  );
  const column = useMemo(() => {
    if (!currentCode) return [];
    return [
      { title: '时间', dataIndex: 'time', width: '40%' },
      {
        title: currentCode.metric,
        dataIndex: currentCode.metric_code,
      },
    ];
  }, [currentCode]);

  //图表配置
  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: 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 (currentCode) {
      mainRes.run();
    }
  }, [currentCode]);

  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: 26 }}>
        <div className="tabs" style={{ marginBottom: 20 }}>
          {codeList?.map((item) => (
            <div
              onClick={() => {
                setCode(item);
              }}
              className={`tabs-item ${item == currentCode ? 'active' : ''}`}
            >
              {item.metric}
            </div>
          ))}
        </div>
        <div className="section-title">
          <div className="section-line"></div>
          数据曲线
        </div>
        <Spin spinning={mainRes.loading}>
          <div style={{ height: 500, marginTop: 20 }}>
            {mainRes?.data ? (
              <ChartModule {...chartProps} onChange={onChange} />
            ) : (
              <Empty />
            )}
          </div>
        </Spin>
        <div style={{ marginTop: 30 }}>
          <div className="section-title">
            <div className="section-line"></div>
            数据列表
          </div>
          <Table
            columns={column}
            style={{ marginTop: 20 }}
            dataSource={mainRes?.data}
          />
        </div>
      </div>
    </PageContent>
  );
}

export default Quality;