gt_client_pad/src/pages/Smart/OptimizationTasks.js

// 优化任务
import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import {
  queryMandate,
  queryMandateChildList,
  querySimulationProfit,
  queryUserList,
} from '@/services/SmartOps';
import { history, useLocation, useParams, useRequest } from '@umijs/max';
import { Col, Row, Table } from 'antd';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import styles from './OptimizationTasks.less';

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

  const { data, run } = useRequest(queryMandate, {
    manual: true,
  });
  const { data: userList } = useRequest(queryUserList, {
    defaultParams: [{ projectId }],
  });

  const ResponsiblePeople = useMemo(() => {
    if (!data || !userList) return '-';
    let user = userList.find((item) => item.ID == data.ResponsiblePeople);
    return user?.CName || '-';
  }, [data, userList]);

  const status = { 0: '未处理', 2: '已完成', 4: '已忽略', 5: '已派遣' };

  return (
    <PageContent closeable={false}>
      <PageTitle returnable>优化任务</PageTitle>
      <div className={styles.pageCard}>
        <div style={{ padding: 20 }}>
          <Produce
            projectId={projectId}
            score={score}
            queryMandate={run}
            mandate={data}
          />
          <Cost projectId={projectId} />
        </div>

        {data && (
          <div className={styles.bottom}>
            <Row gutter={16}>
              <Col span={8}>
                <div className={styles.bottomText}>任务类型：系统发送</div>
              </Col>
              <Col span={8}>
                <div className={styles.bottomText}>
                  任务负责人：{ResponsiblePeople}
                </div>
              </Col>
              <Col span={8}>
                <div className={styles.bottomText}>
                  任务状态：{status[data?.Status]}
                </div>
              </Col>
            </Row>
          </div>
        )}
      </div>
    </PageContent>
  );
};

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

  const { data } = useRequest(queryMandateChildList, {
    defaultParams: [
      {
        projectId,
        mandateClass: 1,
      },
    ],
    onSuccess(data) {
      if (data.length > 0) {
        queryMandate({
          mandate_id: data[0]?.MandateId,
        });
      }
    },
  });

  return (
    <div style={{ marginBottom: 20 }}>
      <h3 className={styles.title}>
        <i />
        生产调度类
      </h3>
      {data?.length > 0 && (
        <>
          <div className={styles.orderIcon}>任务已发送</div>
          <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}
            />
          </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 { 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,
      },
    ],
  });
  return (
    <div>
      <h3 className={styles.title}>
        <i style={{ background: '#F5A623' }} />
        成本节约类
        <div
          className={styles.btn}
          onClick={() => history.push(`/smart/simulate/${projectId}`)}
        >
          模拟评估
        </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} />
          </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;