sliderData.tsx 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. import React, { useEffect, useState } from 'react';
  2. import * as datav from '@jiaminghi/data-view-react';
  3. import styles from './sliderData.less';
  4. import { connect } from '@@/plugin-dva/exports';
  5. import { JSONPath } from 'jsonpath-plus';
  6. interface propsData {
  7. data: any;
  8. MQTTMessage: any;
  9. }
  10. /**
  11. * 底部轮播
  12. * @constructor
  13. */
  14. const SliderData: React.FC<propsData> = (props) => {
  15. const { data, MQTTMessage } = props;
  16. const [voltage, setVoltage] = useState({ ua: 0 });
  17. const [current, setCurrent] = useState({ ia: 0 });
  18. const [activePower, setActivePower] = useState({ active_power: 0 });
  19. const [controlData, setControlData] = useState({
  20. power: data.power ? data.power : 0,
  21. mode: data.mode,
  22. set_temp: data.set_temp,
  23. temperature: data.temperature,
  24. humidity: data.humidity,
  25. air_quality: data.air_quality,
  26. co2: data.co2,
  27. });
  28. useEffect(() => {
  29. // 电
  30. if (
  31. MQTTMessage.message?.DeviceCode === 'DT645-4G' &&
  32. MQTTMessage.message?.SubDeviceId !== '' &&
  33. data.electric_id !== '' &&
  34. MQTTMessage.message?.SubDeviceId === data.electric_id
  35. ) {
  36. // 电压
  37. if (Object.keys(MQTTMessage.message.Data)[0] === 'voltage') {
  38. setVoltage({ ua: JSONPath({ json: MQTTMessage.message.Data, path: '$.voltage.ua' })[0] });
  39. }
  40. // 电流
  41. if (Object.keys(MQTTMessage.message.Data)[0] === 'current') {
  42. setCurrent({ ia: JSONPath({ json: MQTTMessage.message.Data, path: '$.current.ia' })[0] });
  43. }
  44. // 用电量
  45. if (Object.keys(MQTTMessage.message.Data)[0] === 'power') {
  46. setActivePower({
  47. active_power: JSONPath({
  48. json: MQTTMessage.message.Data,
  49. path: '$.power.active_power',
  50. })[0],
  51. });
  52. }
  53. }
  54. //温湿度等
  55. if (
  56. MQTTMessage.message?.DeviceCode === data.device_id &&
  57. MQTTMessage.message?.SubDeviceId === ''
  58. ) {
  59. setControlData({
  60. power: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.power' })[0],
  61. mode: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.mode' })[0],
  62. set_temp: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.set_temp' })[0],
  63. temperature: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.temperature' })[0],
  64. humidity: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.humidity' })[0],
  65. air_quality: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.air_quality' })[0],
  66. co2: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.co2' })[0],
  67. });
  68. }
  69. }, [MQTTMessage.message?.DeviceCode && MQTTMessage.message?.SubDeviceId]);
  70. const handleCo2Grade = (co2: number) => {
  71. if (co2 >= 0 && co2 < 800) {
  72. return '#90c456';
  73. }
  74. if (co2 >= 800 && co2 < 1600) {
  75. return '#eceb3b';
  76. }
  77. if (co2 >= 1600) {
  78. return '#e4151b';
  79. }
  80. return '';
  81. };
  82. const handlePm25Grade = (pm25: number) => {
  83. if (pm25 >= 0 && pm25 <= 50) {
  84. return '#90c456';
  85. }
  86. if (pm25 > 50 && pm25 < 150) {
  87. return '#eceb3b';
  88. }
  89. if (pm25 >= 150) {
  90. return '#e4151b';
  91. }
  92. return '';
  93. };
  94. return (
  95. <div>
  96. <datav.BorderBox12
  97. className={styles.decoration_bottom_border}
  98. style={{ width: '550px', height: '280px' }}
  99. >
  100. <div className={styles.home_detail}>
  101. <div className={styles.detail_left}>
  102. <div className={styles.detail_left_left}>
  103. <div className={styles.decoration_on} />
  104. <div className={styles.home_name}>{data?.home_name ? data?.home_name : '我的家'}</div>
  105. </div>
  106. <div className={styles.detail_left_right}>
  107. <table className={styles.detail_item}>
  108. <tbody>
  109. <tr>
  110. <td className={styles.detail_item_title}>管理员</td>
  111. <td className={styles.detail_item_value}>{data?.admin}</td>
  112. </tr>
  113. <tr>
  114. <td className={styles.detail_item_title}>是否在线</td>
  115. <td
  116. className={styles.detail_item_value}
  117. // style={{ color: `${data?.is_online ? '#90c456' : '#e4151b'}` }}
  118. style={{ color: '#90c456' }}
  119. >
  120. {/*{data?.is_online ? '在线' : '离线'}*/}
  121. 在线
  122. </td>
  123. </tr>
  124. <tr>
  125. <td className={styles.detail_item_title}>运行状态</td>
  126. <td className={styles.detail_item_value} style={{ color: '#ffb026' }}>
  127. {{ 0: '关', 1: '开' }[controlData.power]}
  128. </td>
  129. </tr>
  130. <tr>
  131. <td className={styles.detail_item_title}>模式</td>
  132. <td className={styles.detail_item_value}>
  133. {{ 0: '制冷', 1: '制热', 2: '除湿', 3: '送风', 4: '加湿' }[controlData?.mode]}
  134. </td>
  135. </tr>
  136. </tbody>
  137. </table>
  138. </div>
  139. </div>
  140. <div className={styles.detail_right}>
  141. <div className={styles.detail_right_top}>
  142. <div className={styles.detail_right_top_content}>
  143. <div className={styles.content_title}>设定温度</div>
  144. <div className={styles.content_value}>{controlData?.set_temp}°C</div>
  145. </div>
  146. <div className={styles.detail_right_top_content}>
  147. <div className={styles.content_title}>室内温度</div>
  148. <div className={styles.content_value}>{controlData?.temperature}°C</div>
  149. </div>
  150. <div className={styles.detail_right_top_content}>
  151. <div className={styles.content_title}>湿度</div>
  152. <div className={styles.content_value}>{controlData?.humidity}%rh</div>
  153. </div>
  154. <div className={styles.detail_right_top_content}>
  155. <div className={styles.content_title}>PM25</div>
  156. <div
  157. className={styles.content_value}
  158. style={{ color: handlePm25Grade(controlData?.air_quality) }}
  159. >
  160. {controlData?.air_quality}μg/m³
  161. </div>
  162. </div>
  163. <div className={styles.detail_right_top_content}>
  164. <div className={styles.content_title}>CO2</div>
  165. <div
  166. className={styles.content_value}
  167. style={{ color: handleCo2Grade(controlData?.co2) }}
  168. >
  169. {controlData?.co2}
  170. </div>
  171. </div>
  172. <div className={styles.detail_right_top_content}>
  173. <div className={styles.content_title}>用电量</div>
  174. <div className={styles.content_value}>{activePower?.active_power}kwh</div>
  175. </div>
  176. <div className={styles.detail_right_top_content}>
  177. <div className={styles.content_title}>电压</div>
  178. <div className={styles.content_value}>{voltage?.ua}V</div>
  179. </div>
  180. <div className={styles.detail_right_top_content}>
  181. <div className={styles.content_title}>电流</div>
  182. <div className={styles.content_value}>{current?.ia}A</div>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. </datav.BorderBox12>
  188. </div>
  189. );
  190. };
  191. export default connect(({ MQTTMessage }: any) => ({
  192. MQTTMessage,
  193. }))(SliderData);