index.jsx 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. import React, { useState, useEffect, useRef, useCallback } from 'react';
  2. import { message, Spin } from 'antd';
  3. import styles from './index.less';
  4. import commonStyles from '../common.less';
  5. import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
  6. import AnSwitch from '../anSwitch';
  7. import { getFeedbackDocumentsHttp, changeAirHttp } from '@/services/sagacare_service/equipment';
  8. import { LoadingOutlined } from '@ant-design/icons';
  9. export default ({ spaceId, projectId }) => {
  10. const {
  11. airOpen,
  12. airClose,
  13. temp_down,
  14. temp_up,
  15. temp_keep,
  16. arrow_down,
  17. arrow_up,
  18. wind_up,
  19. wind_down,
  20. } = equipImageMap;
  21. const hasAir = true;
  22. let isNowAirStatus = useRef('');
  23. let firstLoading = useRef(true);
  24. let [isOpen, setIsOpen] = useState(false);
  25. let [isLoading, setIsLoading] = useState(false);
  26. const [imgSrc, setImgSrc] = useState(null);
  27. let timer = useRef(null);
  28. let airLoadingTimer = useRef(null);
  29. const [spaceStatus, setStatusText] = useState('null');
  30. let [changeLoading, setChangeLoading] = useState({ 4: false, 2: false, 5: false, 6: false });
  31. const airExpend = [
  32. {
  33. title: '温度调节',
  34. type: 'temp',
  35. downType: 4,
  36. upType: 2,
  37. leftImg: arrow_down,
  38. rightImg: arrow_up,
  39. },
  40. {
  41. title: '风量调节',
  42. type: 'wind',
  43. downType: 5,
  44. upType: 6,
  45. leftImg: wind_down,
  46. rightImg: wind_up,
  47. },
  48. ];
  49. const statusImg = (icon) => {
  50. switch (icon) {
  51. case 1:
  52. return setImgSrc(temp_keep);
  53. break;
  54. case 2:
  55. return setImgSrc(temp_down);
  56. break;
  57. case 3:
  58. return setImgSrc(temp_up);
  59. break;
  60. default:
  61. break;
  62. }
  63. };
  64. function timerGetAirInfo(timeLong) {
  65. clearTimeout(timer.current);
  66. timer.current = setTimeout(() => {
  67. getAirInfo(); // 获取空调状态
  68. }, timeLong);
  69. }
  70. function changeSwitch(val) {
  71. if (!isLoading) {
  72. setIsLoading(true);
  73. changeIsLoading(val);
  74. const itemIdSum = val ? 12 : 10; // 10关闭 12开启¬
  75. changeAir(itemIdSum);
  76. }
  77. }
  78. const changeIsLoading = (val) => {
  79. let countTimer = 0;
  80. airLoadingTimer.current = setInterval(() => {
  81. if (countTimer >= 30 || isNowAirStatus.current === val) {
  82. // setIsOpen(isNowAirStatus.current); // 开关
  83. setIsLoading(false);
  84. clearInterval(airLoadingTimer.current);
  85. } else {
  86. countTimer++;
  87. }
  88. }, 1000);
  89. };
  90. const getAirInfo = useCallback(() => {
  91. const paramsObj = {
  92. objectId: spaceId,
  93. projectId: projectId,
  94. };
  95. getFeedbackDocumentsHttp(paramsObj)
  96. .then((res) => {
  97. const val = res.icon == 7 ? false : true;
  98. if (firstLoading.current) {
  99. setIsLoading(false);
  100. }
  101. isNowAirStatus.current = val;
  102. setIsOpen(val); // 开关
  103. firstLoading.current = false;
  104. // setFirstLoading(false)
  105. timerGetAirInfo(3000);
  106. setStatusText(res.spaceStatus); // 状态文案
  107. statusImg(res.icon); // icon
  108. })
  109. .catch(() => {
  110. timerGetAirInfo(3000);
  111. firstLoading.current = false;
  112. // setIsLoading(false);
  113. });
  114. }, []);
  115. const changeAir = useCallback(
  116. (itemId) => {
  117. if (changeLoading[itemId]) {
  118. return;
  119. }
  120. const paramsObj = {
  121. objectId: spaceId, // 空间id
  122. valueType: 1, // 固定为1
  123. itemId: itemId,
  124. };
  125. // console.log('changeLoading', changeLoading);
  126. setChangeLoading({ ...changeLoading, [itemId]: true });
  127. changeAirHttp(paramsObj)
  128. .then((res) => {
  129. setChangeLoading({ ...changeLoading, [itemId]: false });
  130. if (res.result == 'success') {
  131. message.success('指令下发成功');
  132. // getAirInfo();
  133. // timerGetAirInfo(2000);
  134. } else {
  135. message.error('操作失败,请重试');
  136. }
  137. })
  138. .catch((err) => {
  139. setChangeLoading({ ...changeLoading, [itemId]: false });
  140. });
  141. },
  142. [changeLoading],
  143. );
  144. useEffect(() => {
  145. getAirInfo(); // 获取空调状态
  146. //timerGetAirInfo(2000);
  147. return () => {
  148. clearTimeout(timer.current);
  149. };
  150. }, []);
  151. return (
  152. <div className={styles.box}>
  153. <div className={styles.content}>
  154. <div className={styles.env}>
  155. <div className={styles.envLeft}>
  156. <span className={commonStyles.eqTitle}>空调</span>
  157. <div className={styles.airStatus}>
  158. <span className={styles.airStatusText}>{isOpen ? '空调已开启' : '空调已关闭'}</span>
  159. {isOpen && (
  160. <div className={styles.airStatusbox}>
  161. <img className={styles.airStatusImg} src={imgSrc} />
  162. <span className={styles.statusText}>{spaceStatus}</span>
  163. </div>
  164. )}
  165. </div>
  166. </div>
  167. <div className={styles.envRight}>
  168. <img className={styles.roomAirImg} src={isOpen ? airOpen : airClose} />
  169. </div>
  170. <div
  171. onClick={() => {
  172. changeSwitch(!isOpen);
  173. }}
  174. className={commonStyles.eqBtn}
  175. >
  176. <AnSwitch isOpen={isOpen} isAir={true} isLoading={isLoading} />
  177. {/*<Switch loading isOpen />*/}
  178. </div>
  179. </div>
  180. </div>
  181. {isOpen && (
  182. <div className={styles.expend}>
  183. {airExpend.map((items, idx) => {
  184. return (
  185. <div className={styles.item} key={idx}>
  186. <div>{items.title}</div>
  187. <div className={styles.itemRight}>
  188. <div
  189. className={styles.itemBg}
  190. onClick={(e) => {
  191. changeAir(items.downType);
  192. }}
  193. >
  194. {changeLoading[items.downType] ? (
  195. <Spin indicator={<LoadingOutlined style={{ fontSize: 20 }} spin />} />
  196. ) : (
  197. <img className={styles.itemImg} src={items.leftImg} />
  198. )}
  199. </div>
  200. <div className={styles.itemBg} onClick={() => changeAir(items.upType)}>
  201. {changeLoading[items.upType] ? (
  202. <Spin indicator={<LoadingOutlined style={{ fontSize: 20 }} spin />} />
  203. ) : (
  204. <img className={styles.itemImg} src={items.rightImg} />
  205. )}
  206. </div>
  207. </div>
  208. </div>
  209. );
  210. })}
  211. </div>
  212. )}
  213. </div>
  214. );
  215. };