gt_client_pad/src/pages/Smart/ConditionDetection.js

// 优化任务
import { queryRealEstimate, queryRealEstimateChart } from '@/services/SmartOps';
import { useParams, useRequest } from '@umijs/max';
import { Col, Row } from 'antd';
import * as echarts from 'echarts';
import { useEffect, useMemo, useRef } from 'react';

import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import styles from './ConditionDetection.less';
import CircleScore from './components/CircleScore';

const ConditionDetection = (props) => {
  const { projectId } = useParams();
  let pid = Number(projectId);

  // 查询工况
  const { data } = useRequest(queryRealEstimate, {
    defaultParams: [pid],
  });

  const { score, real, best, grade } = useMemo(() => {
    let score = '-',
      grade = '-',
      real = {},
      best = {};

    if (data) {
      score = data.score;
      if (score >= 90) {
        grade = '优秀';
      } else if (score >= 80) {
        grade = '良好';
      } else if (score >= 70) {
        grade = '较好';
      } else if (score >= 60) {
        grade = '一般';
      } else {
        grade = '较差';
      }
      real = data.list[0] || {};
      best = data.list[1] || {};
    }

    return { score, real, best, grade };
  }, [data]);

  return (
    <PageContent closeable={false}>
      <PageTitle returnable>工况检测</PageTitle>

      <div className="content-title">
        <div className={styles.circle}>
          <CircleScore big>
            <span className={styles.circleText}>{score}</span>
          </CircleScore>
          {/* <p>{desc}</p> */}
          <p>膜车间当前运行状态{grade}</p>
        </div>
        <div className={styles.content}>
          <Row gutter={16}>
            <Col span={12} style={{ padding: "0.2rem" }}>
              <div className={`${styles.card} card-box`}>
                <h3>
                  实时工况 <span>{real.score}分</span>
                </h3>
                <ul>
                  <li>
                    <i></i>水质达标率评分：{real.water}
                  </li>
                  <li>
                    <i></i>能耗评分：{real.energy}
                  </li>
                  <li>
                    <i></i>药耗评分：{real.medicine}
                  </li>
                  <li>
                    <i></i>设施设备利用率评分：{real.device_rate}
                  </li>
                  <li>
                    <i></i>设施设备完好率评分：{real.device_intact}
                  </li>
                </ul>
              </div>
            </Col>
            <Col span={12} style={{ padding: "0.2rem" }}>
              <div className={`${styles.card2} card-box`}>
                <h3>
                  目标工况 <span>{best.score}分</span>
                </h3>
                <ul>
                  <li>
                    <i></i>水质达标率评分：{best.water}
                  </li>
                  <li>
                    <i></i>能耗评分：{best.energy}
                  </li>
                  <li>
                    <i></i>药耗评分：{best.medicine}
                  </li>
                  <li>
                    <i></i>设施设备利用率评分：{best.device_rate}
                  </li>
                  <li>
                    <i></i>设施设备完好率评分：{best.device_intact}
                  </li>
                </ul>
              </div>
            </Col>
          </Row>
          <div className={styles.img}></div>
        </div>

        <ChartContent projectId={pid} />
      </div>
    </PageContent>
  );
};

const ChartContent = ({ projectId }) => {
  const domRef = useRef(null);
  const chartRef = useRef(null);

  useRequest(queryRealEstimateChart, {
    defaultParams: [projectId],
    onSuccess(data) {
      let options = getOption([
        data.device_rate,
        data.device_intact,
        data.water,
        data.energy,
        data.medicine,
      ]);
      chartRef.current.setOption(options, true);
    },
  });

  function getOption(data = []) {
    const option = {
      color: [
        '#F5A623',
        '#4B9FEC',
        '#91cc75',
        '#5470c6',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452',
        '#9a60b4',
        '#ea7ccc',
      ],
      tooltip: {
        trigger: 'axis',
        textStyle: {
          fontSize: 8,
        },
      },
      legend: {
        textStyle: {
          // color: '#fff',
          fontSize: 8,
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data[0].list?.map((item) => item.name.split(' ')[1]),
        nameTextStyle: {
          fontSize: 8,
        },
        axisLabel: {
          fontSize: 8,
        },
      },
      yAxis: {
        type: 'value',
        boundaryGap: true,
        splitNumber: 5,
        nameTextStyle: {
          fontSize: 8,
        },
        axisLabel: {
          fontSize: 8,
        },
      },
      series: data.map((item) => ({
        name: item.name,
        type: 'line',
        showSymbol: false,
        type: 'line',
        smooth: true,
        data: item?.list.map((v) => v.value),
      })),
    };

    return option;
  }

  useEffect(() => {
    chartRef.current = echarts.init(domRef.current);

    return () => {
      chartRef.current.dispose();
    };
  }, []);
  return (
    <div className={`${styles.card} card-box`}>
      <div className={styles.title}>近一日工况统计</div>
      <div ref={domRef} style={{ height: '38vh' }}></div>
    </div>
  );
};

export default ConditionDetection;