gt_client_pad/src/pages/Smart/ConditionDetection.js

// 优化任务
import {
  queryProcessSection,
  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: processList } = useRequest(queryProcessSection, {
    defaultParams: [pid],
  });

  // 查询工况
  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={styles.circle}>
        <CircleScore>
          <span className={styles.circleText}>{score}</span>
        </CircleScore>
        {/* <p>{desc}</p> */}
        <p>膜车间当前运行状态{grade}</p>
      </div>
      <Row gutter={16}>
        <Col span={12}>
          <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}>
          <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>
      <ChartContent projectId={pid} />
    </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: ['#FFC800', '#30EDFD', '#4096ff', '#ff4d4f', '#ffa940'],
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        textStyle: {
          // color: '#fff',
          fontSize: 18,
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data[0].list?.map((item) => item.name),
        axisLine: {
          lineStyle: {
            // color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            // color: '#fff',
          },
        },
        axisLabel: {
          // color: '#fff',
        },
      },
      yAxis: {
        type: 'value',
        boundaryGap: true,
        splitNumber: 5,
        axisLine: {
          lineStyle: {
            // color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            // color: '#fff',
          },
        },
        axisLabel: {
          // color: '#fff',
        },
      },
      series: data.map((item) => ({
        name: item.name,
        type: 'line',
        showSymbol: false,
        areaStyle: {
          opacity: 0.1,
        },
        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: '40vh' }}></div>
    </div>
  );
};

export default ConditionDetection;