index.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import { queryConditionSnapshot } from '@/services/SmartOps';
  2. import { history, useParams, useRequest } from '@umijs/max';
  3. import { Button, Col, Row } from 'antd';
  4. import { useState } from 'react';
  5. import CircleScore from './components/CircleScore';
  6. import styles from './index.less';
  7. const Work = (props) => {
  8. const { projectId } = useParams();
  9. const [open, setOpen] = useState(false);
  10. const { data, loading } = useRequest(queryConditionSnapshot, {
  11. defaultParams: [{ project_id: projectId }],
  12. initialData: {},
  13. });
  14. console.log(data)
  15. return (
  16. <div>
  17. <div className={styles.score}>
  18. <CircleScore>
  19. {data?.score}
  20. <div style={{ fontSize: 18 }}>{data?.grade}</div>
  21. </CircleScore>
  22. <div className={styles.scoreRight}>
  23. {/* <h3>新水岛当前运行良好,可继续优化</h3> */}
  24. <h3>当前运行{data?.grade},可继续优化</h3>
  25. <div className={styles.time}>{data?.clac_time}</div>
  26. {data?.score && (
  27. <Button
  28. style={{ marginRight: 20 }}
  29. type="primary"
  30. onClick={() =>
  31. history.push(
  32. `/smart/optimization-tasks/${projectId}?score=${data.score}`,
  33. )
  34. }
  35. >
  36. 优化任务
  37. </Button>
  38. )}
  39. <Button
  40. style={{ marginRight: 20 }}
  41. type="primary"
  42. onClick={() =>
  43. history.push('/smart/condition-detection/' + projectId)
  44. }
  45. >
  46. 工况检测
  47. </Button>
  48. {/* <Button
  49. type="primary"
  50. onClick={() =>
  51. history.push(`/smart/params/${projectId}`)
  52. }
  53. >
  54. 工况模拟
  55. </Button> */}
  56. </div>
  57. </div>
  58. <Row gutter={16}>
  59. <Col span={12}>
  60. <div className={styles.card}>
  61. <h3>进水数据</h3>
  62. <ul>
  63. <li>
  64. <i></i>进水量:{data?.fwa}
  65. </li>
  66. <li>
  67. <i></i>进水温度:{data?.ft}
  68. </li>
  69. <li>
  70. <i></i>进水浊度:{data?.ftur}
  71. </li>
  72. <li>
  73. <i></i>进水压力:{data?.fpp}
  74. </li>
  75. {/* 与产水数据对其 */}
  76. <li style={{ visibility: 'hidden' }}>
  77. <i></i>
  78. </li>
  79. </ul>
  80. </div>
  81. </Col>
  82. <Col span={12}>
  83. <div className={styles.card}>
  84. <h3>产水数据</h3>
  85. <ul>
  86. <li>
  87. <i></i>外供水流量:{data?.dwa}
  88. </li>
  89. <li>
  90. <i></i>外供水pH:{data?.dph}
  91. </li>
  92. <li>
  93. <i></i>外供水电导率:{data?.dtds}
  94. </li>
  95. <li>
  96. <i></i>外供水浊度:{data?.dtur}
  97. </li>
  98. <li>
  99. <i></i>外供水余氯:{data?.dsan}
  100. </li>
  101. </ul>
  102. </div>
  103. </Col>
  104. <Col span={12}>
  105. <div className={styles.card}>
  106. <h3>水厂负荷数据</h3>
  107. <ul>
  108. <li>
  109. <i></i>实际处理水量:{data?.fact_water}
  110. </li>
  111. <li>
  112. <i></i>设计处理水量:{data?.devise_water}
  113. </li>
  114. </ul>
  115. </div>
  116. </Col>
  117. </Row>
  118. <Row gutter={16}>
  119. <Col span={12}>
  120. <div className={styles.card2}>
  121. <h3>能耗数据</h3>
  122. <ul>
  123. <li>
  124. <i></i>吨水电耗:{data?.elec_unit}
  125. </li>
  126. <li>
  127. <i></i>用电量:{data?.elec}
  128. </li>
  129. </ul>
  130. </div>
  131. </Col>
  132. <Col span={12}>
  133. <div className={styles.card2}>
  134. <h3>药耗数据</h3>
  135. <ul>
  136. <li>
  137. <i></i>吨水药耗:{data?.otc_unit}
  138. </li>
  139. <li>
  140. <i></i>药量:{data?.otc}
  141. </li>
  142. </ul>
  143. </div>
  144. </Col>
  145. <Col span={12}>
  146. <div className={styles.card2}>
  147. <h3>
  148. 成本数据
  149. <div
  150. onClick={() => setOpen(!open)}
  151. className={`eye ${open ? 'open' : ''}`}
  152. ></div>
  153. </h3>
  154. <ul>
  155. <li>
  156. <i></i>吨水药成本:{open ? data?.otc_cost_unit : '*******'}
  157. </li>
  158. <li>
  159. <i></i>吨水电成本:{open ? data?.elec_cost_unit : '*******'}
  160. </li>
  161. </ul>
  162. </div>
  163. </Col>
  164. </Row>
  165. </div>
  166. );
  167. };
  168. export default Work;