gt_client_pad/src/pages/Home/WaterAmtMng.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 } from '@/services/OperationManagement';
import { useParams, useRequest } from '@umijs/max';
import { Spin, Table } from 'antd';
import dayjs from 'dayjs';
import { useMemo, useState } from 'react';

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

  const [currentPage, setPage] = useState(1);

  const { data, loading, run } = useRequest(
    (date) =>
      queryChartListByCode(
        {
          start_time: date.s_time,
          end_time: date.e_time,
          project_id: Number(projectId),
          order: 1,
        },
        ['plant_permeate_flow', 'plant_feed_flow'],
      ),
    {
      defaultParams: [
        {
          s_time: dayjs().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'),
          e_time: dayjs().format('YYYY-MM-DD 23:59:59'),
        },
      ],
    },
  );

  const columns = [
    {
      title: '时间',
      dataIndex: 'time',
    },
    {
      title: '进水水量(t)',
      dataIndex: 'plant_feed_flow',
    },
    {
      title: '实际出水水量(t)',
      dataIndex: 'plant_permeate_flow',
    },
    {
      title: '预测出水水量(t)',
      // dataIndex: '',
      render: () => '-',
    },
  ];

  const { dataList, xData } = useMemo(() => {
    const dataList = [];
    let xData = [];
    if (data) {
      xData = data.map((item) => item.time);
      dataList.push({
        type: 0,
        name: '实际出水水量',
        data: data.map((item) => item.plant_permeate_flow),
      });
      dataList.push({
        type: 1,
        name: '进水水量',
        data: data.map((item) => item.plant_feed_flow),
      });
    }
    return { dataList, xData };
  }, [data]);

  const onChangePage = (pagination) => {
    setPage(pagination.current);
  };

  const onSearch = (date) => {
    run(date);
    setPage(1);
  };

  return (
    <PageContent closeable={false}>
      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
        水量监测
      </PageTitle>
      <div className="card-box" style={{ padding: 20, marginTop: 40 }}>
        <PageTitle>数据曲线</PageTitle>
        <Spin spinning={loading}>
          <div style={{ height: '300px', marginTop: 20 }}>
            <ChartModule yName="水量(t)" xData={xData} dataList={dataList} />
          </div>
        </Spin>
        <div style={{ marginTop: 30 }}>
          <PageTitle>数据列表</PageTitle>
          <Table
            loading={loading}
            columns={columns}
            style={{ marginTop: 20 }}
            pagination={{ current: currentPage }}
            onChange={onChangePage}
            dataSource={data?.sort((a, b) => b?.time?.localeCompare(a?.time))}
          />
        </div>
      </div>
    </PageContent>
  );
};

export default WaterAmtMng;