ConditionDetection.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. // 优化任务
  2. import {
  3. queryProcessSection,
  4. queryRealEstimate,
  5. queryRealEstimateChart,
  6. } from '@/services/SmartOps';
  7. import { useParams, useRequest } from '@umijs/max';
  8. import { Col, Row } from 'antd';
  9. import * as echarts from 'echarts';
  10. import { useEffect, useMemo, useRef } from 'react';
  11. import PageContent from '@/components/PageContent';
  12. import PageTitle from '@/components/PageTitle';
  13. import styles from './ConditionDetection.less';
  14. import CircleScore from './components/CircleScore';
  15. const ConditionDetection = (props) => {
  16. const { projectId } = useParams();
  17. let pid = Number(projectId);
  18. // 查询工艺段列表
  19. const { data: processList } = useRequest(queryProcessSection, {
  20. defaultParams: [pid],
  21. });
  22. // 查询工况
  23. const { data } = useRequest(queryRealEstimate, {
  24. defaultParams: [pid],
  25. });
  26. const { score, real, best, grade } = useMemo(() => {
  27. let score = '-',
  28. grade = '-',
  29. real = {},
  30. best = {};
  31. if (data) {
  32. score = data.score;
  33. if (score >= 90) {
  34. grade = '优秀';
  35. } else if (score >= 80) {
  36. grade = '良好';
  37. } else if (score >= 70) {
  38. grade = '较好';
  39. } else if (score >= 60) {
  40. grade = '一般';
  41. } else {
  42. grade = '较差';
  43. }
  44. real = data.list[0] || {};
  45. best = data.list[1] || {};
  46. }
  47. return { score, real, best, grade };
  48. }, [data]);
  49. return (
  50. <PageContent closeable={false}>
  51. <PageTitle returnable>工况检测</PageTitle>
  52. <div className={styles.circle}>
  53. <CircleScore>
  54. <span className={styles.circleText}>{score}</span>
  55. </CircleScore>
  56. {/* <p>{desc}</p> */}
  57. <p>膜车间当前运行状态{grade}</p>
  58. </div>
  59. <Row gutter={16}>
  60. <Col span={12}>
  61. <div className={`${styles.card} card-box`}>
  62. <h3>
  63. 实时工况 <span>{real.score}分</span>
  64. </h3>
  65. <ul>
  66. <li>
  67. <i></i>水质达标率评分:{real.water}
  68. </li>
  69. <li>
  70. <i></i>能耗评分:{real.energy}
  71. </li>
  72. <li>
  73. <i></i>药耗评分:{real.medicine}
  74. </li>
  75. <li>
  76. <i></i>设施设备利用率评分:{real.device_rate}
  77. </li>
  78. <li>
  79. <i></i>设施设备完好率评分:{real.device_intact}
  80. </li>
  81. </ul>
  82. </div>
  83. </Col>
  84. <Col span={12}>
  85. <div className={`${styles.card2} card-box`}>
  86. <h3>
  87. 目标工况 <span>{best.score}分</span>
  88. </h3>
  89. <ul>
  90. <li>
  91. <i></i>水质达标率评分:{best.water}
  92. </li>
  93. <li>
  94. <i></i>能耗评分:{best.energy}
  95. </li>
  96. <li>
  97. <i></i>药耗评分:{best.medicine}
  98. </li>
  99. <li>
  100. <i></i>设施设备利用率评分:{best.device_rate}
  101. </li>
  102. <li>
  103. <i></i>设施设备完好率评分:{best.device_intact}
  104. </li>
  105. </ul>
  106. </div>
  107. </Col>
  108. </Row>
  109. <ChartContent projectId={pid} />
  110. </PageContent>
  111. );
  112. };
  113. const ChartContent = ({ projectId }) => {
  114. const domRef = useRef(null);
  115. const chartRef = useRef(null);
  116. useRequest(queryRealEstimateChart, {
  117. defaultParams: [projectId],
  118. onSuccess(data) {
  119. let options = getOption([
  120. data.device_rate,
  121. data.device_intact,
  122. data.water,
  123. data.energy,
  124. data.medicine,
  125. ]);
  126. chartRef.current.setOption(options, true);
  127. },
  128. });
  129. function getOption(data = []) {
  130. const option = {
  131. color: ['#FFC800', '#30EDFD', '#4096ff', '#ff4d4f', '#ffa940'],
  132. tooltip: {
  133. trigger: 'axis',
  134. },
  135. legend: {
  136. textStyle: {
  137. // color: '#fff',
  138. fontSize: 18,
  139. },
  140. },
  141. grid: {
  142. left: '3%',
  143. right: '4%',
  144. bottom: '3%',
  145. containLabel: true,
  146. },
  147. xAxis: {
  148. type: 'category',
  149. boundaryGap: false,
  150. data: data[0].list?.map((item) => item.name),
  151. axisLine: {
  152. lineStyle: {
  153. // color: '#fff',
  154. },
  155. },
  156. splitLine: {
  157. lineStyle: {
  158. // color: '#fff',
  159. },
  160. },
  161. axisLabel: {
  162. // color: '#fff',
  163. },
  164. },
  165. yAxis: {
  166. type: 'value',
  167. boundaryGap: true,
  168. splitNumber: 5,
  169. axisLine: {
  170. lineStyle: {
  171. // color: '#fff',
  172. },
  173. },
  174. splitLine: {
  175. lineStyle: {
  176. // color: '#fff',
  177. },
  178. },
  179. axisLabel: {
  180. // color: '#fff',
  181. },
  182. },
  183. series: data.map((item) => ({
  184. name: item.name,
  185. type: 'line',
  186. showSymbol: false,
  187. areaStyle: {
  188. opacity: 0.1,
  189. },
  190. type: 'line',
  191. smooth: true,
  192. data: item?.list.map((v) => v.value),
  193. })),
  194. };
  195. return option;
  196. }
  197. useEffect(() => {
  198. chartRef.current = echarts.init(domRef.current);
  199. return () => {
  200. chartRef.current.dispose();
  201. };
  202. }, []);
  203. return (
  204. <div className={`${styles.card} card-box`}>
  205. <div className={styles.title}>近一日工况统计</div>
  206. <div ref={domRef} style={{ height: '40vh' }}></div>
  207. </div>
  208. );
  209. };
  210. export default ConditionDetection;