// 优化任务 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 ( 工况检测
{score} {/*

{desc}

*/}

膜车间当前运行状态{grade}

实时工况 {real.score}分

  • 水质达标率评分:{real.water}
  • 能耗评分:{real.energy}
  • 药耗评分:{real.medicine}
  • 设施设备利用率评分:{real.device_rate}
  • 设施设备完好率评分:{real.device_intact}

目标工况 {best.score}分

  • 水质达标率评分:{best.water}
  • 能耗评分:{best.energy}
  • 药耗评分:{best.medicine}
  • 设施设备利用率评分:{best.device_rate}
  • 设施设备完好率评分:{best.device_intact}
); }; 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 (
近一日工况统计
); }; export default ConditionDetection;