gt_client_pad/src/pages/Smart/index.js

import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { queryConditionSnapshot } from '@/services/SmartOps';
import { history, useParams, useRequest } from '@umijs/max';
import { Button, Col, Row } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import CircleScore from './components/CircleScore';
import styles from './index.less';

const Work = (props) => {
  const { projectId } = useParams();
  const [open, setOpen] = useState(false);

  const { data, loading } = useRequest(queryConditionSnapshot, {
    defaultParams: [{ project_id: projectId }],
    initialData: {},
  });

  return (
    <PageContent>
      <PageTitle>水厂工况</PageTitle>
      <div className="content-title">
        <div className={styles.score}>
          <CircleScore big>
            {data?.score}
            <div style={{ fontSize: 24 }}>{data?.grade}</div>
          </CircleScore>
          <div className={styles.scoreRight}>
            <h3>当前运行{data?.grade}，可继续优化</h3>
            <div className={styles.time}>
              {dayjs(data?.clac_time).format('YYYY-MM-DD HH:mm')}
            </div>
            {data?.score && (
              <Button
                style={{ marginRight: 20 }}
                className={styles.btn}
                type="primary"
                onClick={() =>
                  history.push(
                    `/smart/optimization-tasks/${projectId}?score=${data.score}`,
                  )
                }
              >
                优化任务
              </Button>
            )}

            <Button
              className={styles.btn}
              type="primary"
              onClick={() =>
                history.push('/smart/condition-detection/' + projectId)
              }
            >
              工况检测
            </Button>
          </div>
        </div>
        <Row gutter={40}>
          <Col span={12}>
            <div className={styles.card}>
              <h3>进水数据</h3>
              <ul>
                <li>
                  <i></i>进水量：{data?.fwa}
                </li>
                <li>
                  <i></i>进水温度：{data?.ft}
                </li>
                <li>
                  <i></i>进水浊度：{data?.ftur}
                </li>
                <li>
                  <i></i>进水压力：{data?.fpp}
                </li>
                {/* 与产水数据对其 */}
                <li style={{ visibility: 'hidden' }}>
                  <i></i>
                </li>
              </ul>
            </div>
          </Col>
          <Col span={12}>
            <div className={styles.card}>
              <h3>产水数据</h3>
              <ul>
                <li>
                  <i></i>外供水流量：{data?.dwa}
                </li>
                <li>
                  <i></i>外供水pH：{data?.dph}
                </li>
                <li>
                  <i></i>外供水电导率：{data?.dtds}
                </li>
                <li>
                  <i></i>外供水浊度：{data?.dtur}
                </li>
                <li>
                  <i></i>外供水余氯：{data?.dsan}
                </li>
              </ul>
            </div>
          </Col>
          <Col span={12}>
            <div className={styles.card}>
              <h3>水厂负荷数据</h3>
              <ul>
                <li>
                  <i></i>实际处理水量：{data?.fact_water}
                </li>
                <li>
                  <i></i>设计处理水量：{data?.devise_water}
                </li>
              </ul>
            </div>
          </Col>
          <Col span={12}>
            <div className={styles.card2}>
              <h3>
                成本数据
                <div
                  style={{ marginLeft: 14 }}
                  onClick={() => setOpen(!open)}
                  className={`password-eye ${open ? 'open' : ''}`}
                ></div>
              </h3>
              <ul>
                <li>
                  <i></i>吨水药成本：{open ? data?.otc_cost_unit : '*******'}
                </li>
                <li>
                  <i></i>吨水电成本：{open ? data?.elec_cost_unit : '*******'}
                </li>
              </ul>
            </div>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <div className={styles.card2}>
              <h3>能耗数据</h3>
              <ul>
                <li>
                  <i></i>吨水电耗：{data?.elec_unit}
                </li>
                <li>
                  <i></i>用电量：{data?.elec}
                </li>
              </ul>
            </div>
          </Col>
          <Col span={12}>
            <div className={styles.card2}>
              <h3>药耗数据</h3>
              <ul>
                <li>
                  <i></i>吨水药耗：{data?.otc_unit}
                </li>
                <li>
                  <i></i>药量：{data?.otc}
                </li>
              </ul>
            </div>
          </Col>
        </Row>
      </div>
    </PageContent>
  );
};

export default Work;