123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- import * as echarts from 'echarts';
- import React, { useEffect, useRef, useState } from 'react';
- import Panel from './Panel';
- import { querySimulationProfit } from '@/services/SmartOps';
- import { history, useParams, useRequest } from '@umijs/max';
- import dayjs from 'dayjs';
- import { Button } from 'antd';
- const SimulatePie = props => {
- const { projectId } = props;
- const domRef = useRef(null);
- const chartRef = useRef(null);
- const { data } = useRequest(querySimulationProfit, {
- defaultParams: [
- {
- project_id: projectId,
- s_time: dayjs()
- .subtract(1, 'day')
- .format('YYYY-MM-DD HH:mm:ss'),
- e_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
- },
- ],
- onSuccess(data) {
- console.log(data);
- let options = getOption(data);
- // chartRef.current.clear();
- chartRef.current.setOption(options);
- },
- });
- const getProfit = () => {
- if (!data?.info) return '-';
- return Object.values(data.info).reduce((total, currentValue) => total + currentValue, 0);
- };
- useEffect(() => {
- chartRef.current = echarts.init(domRef.current);
- // 在组件卸载时销毁图表实例
- return () => {
- chartRef.current.dispose();
- };
- }, []);
- return (
- <Panel
- title={'模拟预估'}
- style={{ width: '100%' }}
- btns={
- <Button type="primary" onClick={() => history.go(-1)}>
- 返回
- </Button>
- }
- >
- <h2 style={{ textAlign: 'center', fontSize: 24, }}>
- 通过模拟仿真预计未来一日可省
- <span style={{ fontSize: 28, color: '#FFFF00' }}>{getProfit()}元</span>
- </h2>
- <div ref={domRef} style={{ height: '25vh' }}></div>
- </Panel>
- );
- };
- function getOption(data) {
- let seriesData = [];
- let type = {
- 0: '未分类',
- 1: '过滤周期优化',
- 2: '絮凝剂投加优化',
- 3: '膜寿命预测',
- 4: '膜反冲洗建议',
- 5: '膜化学清洗建议',
- 6: 'RO一段优化建议',
- 7: 'RO二段优化建议',
- 8: 'RO三段优化建议',
- 9: 'RO杀菌周期优化',
- 10: 'RO冲洗周期优化',
- };
- Object.entries(data.info).map(([key, value]) => {
- if(value > 0) {
- seriesData.push({
- value,
- name: type[key],
- });
- }
- });
- let option = {
- color: ['#30EDFD', '#FFC800'],
- tooltip: {
- trigger: 'item',
- },
- series: [
- {
- type: 'pie',
- radius: ['50%', '70%'],
- label: {
- fontSize: 22,
- },
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)',
- },
- },
- data: seriesData,
- },
- ],
- };
- return option;
- }
- export default SimulatePie;
|