SimulatePie.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import * as echarts from 'echarts';
  2. import React, { useEffect, useRef, useState } from 'react';
  3. import Panel from './Panel';
  4. import { querySimulationProfit } from '@/services/SmartOps';
  5. import { history, useParams, useRequest } from '@umijs/max';
  6. import dayjs from 'dayjs';
  7. import { Button } from 'antd';
  8. const SimulatePie = props => {
  9. const { projectId } = props;
  10. const domRef = useRef(null);
  11. const chartRef = useRef(null);
  12. const { data } = useRequest(querySimulationProfit, {
  13. defaultParams: [
  14. {
  15. project_id: projectId,
  16. s_time: dayjs()
  17. .subtract(1, 'day')
  18. .format('YYYY-MM-DD HH:mm:ss'),
  19. e_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  20. },
  21. ],
  22. onSuccess(data) {
  23. console.log(data);
  24. let options = getOption(data);
  25. // chartRef.current.clear();
  26. chartRef.current.setOption(options);
  27. },
  28. });
  29. const getProfit = () => {
  30. if (!data?.info) return '-';
  31. return Object.values(data.info).reduce((total, currentValue) => total + currentValue, 0);
  32. };
  33. useEffect(() => {
  34. chartRef.current = echarts.init(domRef.current);
  35. // 在组件卸载时销毁图表实例
  36. return () => {
  37. chartRef.current.dispose();
  38. };
  39. }, []);
  40. return (
  41. <Panel
  42. title={'模拟预估'}
  43. style={{ width: '100%' }}
  44. btns={
  45. <Button type="primary" onClick={() => history.go(-1)}>
  46. 返回
  47. </Button>
  48. }
  49. >
  50. <h2 style={{ textAlign: 'center', fontSize: 24, }}>
  51. 通过模拟仿真预计未来一日可省 &nbsp;
  52. <span style={{ fontSize: 28, color: '#FFFF00' }}>{getProfit()}元</span>
  53. </h2>
  54. <div ref={domRef} style={{ height: '25vh' }}></div>
  55. </Panel>
  56. );
  57. };
  58. function getOption(data) {
  59. let seriesData = [];
  60. let type = {
  61. 0: '未分类',
  62. 1: '过滤周期优化',
  63. 2: '絮凝剂投加优化',
  64. 3: '膜寿命预测',
  65. 4: '膜反冲洗建议',
  66. 5: '膜化学清洗建议',
  67. 6: 'RO一段优化建议',
  68. 7: 'RO二段优化建议',
  69. 8: 'RO三段优化建议',
  70. 9: 'RO杀菌周期优化',
  71. 10: 'RO冲洗周期优化',
  72. };
  73. Object.entries(data.info).map(([key, value]) => {
  74. if(value > 0) {
  75. seriesData.push({
  76. value,
  77. name: type[key],
  78. });
  79. }
  80. });
  81. let option = {
  82. color: ['#30EDFD', '#FFC800'],
  83. tooltip: {
  84. trigger: 'item',
  85. },
  86. series: [
  87. {
  88. type: 'pie',
  89. radius: ['50%', '70%'],
  90. label: {
  91. fontSize: 22,
  92. },
  93. emphasis: {
  94. itemStyle: {
  95. shadowBlur: 10,
  96. shadowOffsetX: 0,
  97. shadowColor: 'rgba(0, 0, 0, 0.5)',
  98. },
  99. },
  100. data: seriesData,
  101. },
  102. ],
  103. };
  104. return option;
  105. }
  106. export default SimulatePie;