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 TabsContent from '@/components/TabsContent';
import {
  queryChartListByCode,
  queryProcessSection,
  querySectionCode,
} from '@/services/OperationManagement';
import { queryConditionSnapshot } from '@/services/SmartOps';
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';
import SubTitle from '../SmartOps/components/SubTitle';
import { getValue } from './index';
import styles from './index.less';

function Quality() {
  return (
    <PageContent closeable={false}>
      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
        水质监测
      </PageTitle>
      <WaterQuality showTip />
    </PageContent>
  );
}

export default Quality;

export const WaterQuality = ({ showTip = false }) => {
  const { projectId } = useParams();
  const [currentCode, setCode] = useState(null);
  const [processList, setProcessList] = useState([]);

  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]);
      }
    },
    formatResult: (result) => {
      if (result?.data) {
        return result.data.reverse();
      }
      return [];
    },
  });

  // 获取工艺段列表
  useRequest(queryProcessSection, {
    defaultParams: [projectId],
    onSuccess(res) {
      setProcessList(res);
      queryCodeList(res[0].id, 2, projectId * 1);
      return res;
    },
  });

  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 { data: snapshot } = useRequest(queryConditionSnapshot, {
    defaultParams: [{ project_id: projectId }],
    pollingInterval: 10 * 1000,
  });

  const status = useMemo(() => {
    switch (snapshot?.water_quality_status) {
      case 1:
        return '当前水质良好';
      case 2:
        return '当前水质较好';
    }
  }, [snapshot?.water_quality_status]);

  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);
  };

  const handleProcessChange = (val) => {
    queryCodeList(val, 2, projectId);
  };

  return (
    <div style={{ marginTop: '0.1rem', position: 'relative' }}>
      {showTip && <div className={styles.pageTip}>{status}</div>}
      <div className="card-box">
        <ul className={styles.pageTop}>
          <li>
            <div className={styles.pageTopValue}>
              {getValue(snapshot?.dtds)}
            </div>
            <div>外供水电导率(µs/cm)</div>
          </li>
          <li>
            <div className={styles.pageTopValue}>{getValue(snapshot?.dph)}</div>
            <div>外供水(PH)</div>
          </li>
        </ul>
      </div>
      <div className="card-box" style={{ padding: '0.2rem' }}>
        <div style={{ padding: '0.2rem 0' }}>
          <TabsContent
            defaultActiveKey="19"
            center={false}
            small
            spacing={2.5}
            items={processList
              ?.map((item) => {
                return {
                  key: item.id,
                  label: item.name,
                  children: null,
                };
              })
              .filter((item) => item.label !== '膜车间全景')}
            onChange={handleProcessChange}
          />
        </div>
        {codeList?.length > 0 && (
          <div className="tabs" style={{ marginBottom: '0.2rem' }}>
            {codeList?.map((item) => (
              <div
                key={item.metric_code}
                onClick={() => {
                  setCode(item);
                }}
                className={`tabs-item ${item === currentCode ? 'active' : ''}`}
              >
                {item.metric}
              </div>
            ))}
          </div>
        )}
        <SubTitle title="数据曲线" />
        <Spin spinning={mainRes.loading}>
          <div style={{ height: '5rem', marginTop: '0.2rem' }}>
            {mainRes?.data ? (
              <ChartModule {...chartProps} onChange={onChange} />
            ) : (
              <Empty />
            )}
          </div>
        </Spin>
        <div style={{ marginTop: '0.3rem' }}>
          <SubTitle title="数据列表" />
          <Table
            columns={column}
            style={{ marginTop: '0.2rem' }}
            dataSource={mainRes?.data}
            pagination={false}
          />
        </div>
      </div>
    </div>
  );
};