gt_client_pad/src/pages/Smart/OptimizationTasks.js

// 优化任务
import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import {
  queryMandate,
  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';

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

  const { data, run } = useRequest(queryMandate, {
    manual: true,
  });

  return (
    <PageContent closeable={false}>
      <PageTitle returnable>
        <div className={styles.navigateTitle}>
          <div>优化任务</div>
          <div className={styles.titleTime}>
            {dayjs().format('MM月DD日 HH:mm')}
          </div>
        </div>
      </PageTitle>
      <div className="content-title">
        <div>
          <Produce projectId={projectId} />
          <Cost projectId={projectId} />
        </div>
      </div>
    </PageContent>
  );
};

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

  const [mandateID, setMandateID] = useState();

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

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

const Cost = ({ projectId }) => {
  const columns = [
    {
      title: '设备',
      dataIndex: 'Title',
    },
    {
      title: '调整内容',
      dataIndex: 'Content',
    },
  ];

  const [mandateID, setMandateID] = 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 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>
        <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="table2"
              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>
  );
};

export default OptimizationTasks;