gt_client_pad/src/pages/Smart/OptimizationTasks.js

// 优化任务
import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import {
  queryHistory,
  queryMandateChildList,
  querySimulationProfit,
} from '@/services/SmartOps';
import { UnityAction } from '@/utils/utils';
import { useParams, useRequest } from '@umijs/max';
import { Table } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import styles from './OptimizationTasks.less';
import EvaluationReport from './components/EvaluationReport';
import ScrollLoading from './components/ScrollLoading';

const OptimizationTasks = (props) => {
  const { projectId } = useParams();

  return (
    <PageContent closeable={false}>
      <PageTitle returnable>
        <div className={styles.navigateTitle}>
          <div>优化任务</div>
        </div>
      </PageTitle>
      <div className={styles.titleTime}>{dayjs().format('MM月DD日 HH:mm')}</div>
      <div className="content-title">
        <div>
          <Produce projectId={projectId} />
          <Cost projectId={projectId} />
          <div className={styles.pageCard}>
            <h3
              className={styles.title}
              style={{ justifyContent: 'space-between' }}
            >
              <div>
                <i />
                评估报告
              </div>
            </h3>
            <EvaluationReport dataKey="allProject" />
          </div>
        </div>
      </div>
    </PageContent>
  );
};

const Produce = ({ projectId }) => {
  const columns = [
    {
      title: '参数',
      dataIndex: 'Title',
    },
    {
      title: '调整内容',
      dataIndex: 'Content',
    },
  ];

  const historyColumns = [
    {
      title: '时间',
      dataIndex: 'CreateTime',
      render: (time) => dayjs(time).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '参数',
      dataIndex: 'Title',
    },
    {
      title: '任务内容',
      dataIndex: 'Content',
    },
  ];

  const [mandateID, setMandateID] = useState();
  const [active, setActive] = useState(false);
  const [list, setList] = useState([]);
  const [curPagination, setCurPagination] = useState({});

  // 当前记录
  const { data } = useRequest(queryMandateChildList, {
    defaultParams: [
      {
        projectId,
        mandateClass: 1,
      },
    ],
    onSuccess: (data) => {
      setMandateID(data[0]?.MandateId);
    },
  });

  // 历史记录
  const {
    run,
    loading,
    data: historyData,
  } = useRequest(queryHistory, {
    defaultParams: [{ project_id: projectId, class: 1, currentPage: 1 }],
    onSuccess: (data) => {
      setList([...list, ...data.list]);
      setCurPagination(data.pagination);
    },
  });

  const openDetail = () => {
    // send message to unity with mandate_id
    if (!mandateID) {
      return;
    }
    UnityAction.sendMsg('OpenTaskModal', `mandate_id=${mandateID}`);
  };

  return (
    <>
      <div className={styles.pageCard}>
        <h3
          className={styles.title}
          style={{ justifyContent: 'space-between' }}
        >
          <div>
            <i />
            生产调度类
          </div>
          {mandateID && (
            <div className={styles.btnBlue} onClick={openDetail}>
              查看任务
            </div>
          )}
        </h3>
        {data?.length > 0 && (
          <>
            <div
              className={styles.content}
              style={{ backgroundColor: '#B1D2F3' }}
            >
              <h3 className={styles.left}>任务总结</h3>
              <div className={styles.desc}>
                根据水质相关数据．建议您调节以下参数，水厂运行可达较优状态
              </div>
            </div>
            <div
              className={styles.content}
              style={{ backgroundColor: '#EDF5FC' }}
            >
              <h3 className={styles.left}>任务内容</h3>
              <Table
                className={styles.taskTable}
                style={{ width: '100%' }}
                columns={columns}
                dataSource={data}
                pagination={false}
              />
            </div>
          </>
        )}
        {!data?.length && (
          <div
            className={styles.content}
            style={{ backgroundColor: '#B1D2F3' }}
          >
            <div className={styles.desc}>
              当前进水数据稳定，产水数据稳定，暂无调节任务，继续保持哦~
            </div>
          </div>
        )}
        <div
          className={`${styles.bottomBtn} ${active ? styles.active : ''}`}
          onClick={() => setActive(!active)}
        >
          历史优化记录
          <i></i>
        </div>
        <div style={{ display: active ? 'block' : 'none' }}>
          <ScrollLoading
            loading={loading}
            pagination={curPagination}
            handleLoadData={(current) =>
              run({ project_id: projectId, currentPage: current, class: 1 })
            }
            height="3rem"
          >
            <Table
              rowKey={'id'}
              loading={loading}
              dataSource={list}
              columns={historyColumns}
              pagination={false}
              className={styles.table1}
            />
          </ScrollLoading>
        </div>
      </div>
    </>
  );
};

const Cost = ({ projectId }) => {
  const columns = [
    {
      title: '设备',
      dataIndex: 'Title',
    },
    {
      title: '调整内容',
      dataIndex: 'Content',
    },
  ];
  const historyColumns = [
    {
      title: '时间',
      dataIndex: 'CreateTime',
      render: (time) => dayjs(time).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '参数',
      dataIndex: 'Title',
    },
    {
      title: '任务内容',
      dataIndex: 'Content',
    },
  ];

  const [mandateID, setMandateID] = useState();
  const [active, setActive] = useState(false);
  const [list, setList] = useState([]);
  const [curPagination, setCurPagination] = useState({});

  const { data: profit } = useRequest(querySimulationProfit, {
    defaultParams: [
      {
        project_id: projectId,
        s_time: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
        e_time: dayjs().format('YYYY-MM-DD'),
      },
    ],
    formatResult(data) {
      if (!data?.info) return '-';
      return Object.values(data.info).reduce(
        (total, currentValue) => total + currentValue,
        0,
      );
    },
  });

  const { data } = useRequest(queryMandateChildList, {
    defaultParams: [
      {
        projectId,
        mandateClass: 2,
      },
    ],
    onSuccess: (data) => {
      setMandateID(data[0]?.MandateId);
    },
  });

  // 历史记录
  const { run, loading } = useRequest(queryHistory, {
    defaultParams: [{ project_id: projectId, class: 2, currentPage: 1 }],
    onSuccess: (data) => {
      setList([...list, ...data.list]);
      setCurPagination(data.pagination);
    },
  });

  const openDetail = () => {
    // send message to unity
    if (!mandateID) {
      return;
    }
    UnityAction.sendMsg('OpenTaskModal', `mandate_id=${mandateID}`);
  };

  return (
    <div className={styles.pageCard}>
      <h3 className={styles.title} style={{ justifyContent: 'space-between' }}>
        <div>
          <i style={{ background: '#F5A623' }} />
          成本节约类
        </div>
        {mandateID && (
          <div className={styles.btnOrange} onClick={openDetail}>
            查看任务
          </div>
        )}
      </h3>
      {data?.length > 0 && (
        <>
          <div
            className={styles.content}
            style={{ backgroundColor: '#FBDEAE' }}
          >
            <h3 className={styles.left}>任务总结</h3>
            <div className={styles.desc}>
              通过能耗/药耗数据模拟仿真预计未来一日可节省
              <span>{profit || '-'}</span>元
            </div>
          </div>
          <div
            className={styles.content}
            style={{ backgroundColor: 'rgba(245,166,35,0.04);' }}
          >
            <h3 className={styles.left}>任务内容</h3>
            <Table
              className={styles.taskTable}
              columns={columns}
              dataSource={data}
              pagination={false}
            />
          </div>
        </>
      )}
      {!data?.length && (
        <div className={styles.content} style={{ backgroundColor: '#FBDEAE' }}>
          <h3 className={styles.left}>任务总结</h3>
          <div className={styles.desc}>暂无可降低成本，继续保持哦~</div>
        </div>
      )}
      <div
        className={`${styles.bottomBtn2} ${active ? styles.active : ''}`}
        onClick={() => setActive(!active)}
      >
        历史优化记录
        <i></i>
      </div>
      <div style={{ display: active ? 'block' : 'none' }}>
        <ScrollLoading
          loading={loading}
          pagination={curPagination}
          handleLoadData={(current) =>
            run({ project_id: projectId, currentPage: current, class: 2 })
          }
          height="3rem"
        >
          <Table
            rowKey={'id'}
            loading={loading}
            dataSource={list}
            columns={historyColumns}
            pagination={false}
            className={styles.table2}
          />
        </ScrollLoading>
      </div>
    </div>
  );
};

export default OptimizationTasks;