index.jsx 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import React, { useState, useEffect, useCallback, useRef } from 'react';
  2. import { message } from 'antd';
  3. import styles from './index.less';
  4. import commonStyles from '../common.less';
  5. import { equipImageMap } from '@/config/image.js';
  6. import AnSwitch from '../anSwitch';
  7. import { getLampHttp, getStatusHttp, setallLampHttp } from '@/services/sgservice/equipment';
  8. import { setallLamps } from '@/pages/Equipment/checLampStatus.js';
  9. const { lamp_open, lamp_close, expend_down, expend_up } = equipImageMap;
  10. export default ({ spaceId }) => {
  11. const [isMore, setIsMore] = useState(false);
  12. const [isOpen, setIsOpen] = useState(false); // 12 开, 10关
  13. const [lampArr, setLampArr] = useState([]);
  14. let startLightsStatusTimer = useRef(null);
  15. // let waitSetResultFlag = useRef(false); // 等待开关接口
  16. const getLamp = useCallback(() => {
  17. getLampHttp(spaceId).then(
  18. (res) => {
  19. // if (res.result != 'success' && waitSetResultFlag.current) return;
  20. const arr = res.content;
  21. if (arr.length > 1) {
  22. setIsMore(true);
  23. let totalIsOpen = false;
  24. arr.forEach((item) => {
  25. if (item.runStatus) {
  26. totalIsOpen = true;
  27. }
  28. });
  29. setIsOpen(totalIsOpen);
  30. } else {
  31. arr.forEach((item) => {
  32. if (item.runStatus) {
  33. setIsOpen(true);
  34. } else {
  35. setIsOpen(false);
  36. }
  37. });
  38. }
  39. setLampArr(arr);
  40. },
  41. (e) => {},
  42. );
  43. }, []);
  44. function getLampTimer() {
  45. clearInterval(startLightsStatusTimer.current);
  46. startLightsStatusTimer.current = setInterval(() => {
  47. getLamp(); // 灯设备状态
  48. }, 3000);
  49. }
  50. useEffect(() => {
  51. getLamp();
  52. getLampTimer();
  53. return () => {
  54. clearInterval(startLightsStatusTimer.current);
  55. };
  56. }, []);
  57. const [flagSvg, setFlagSvg] = useState(false);
  58. function handleExpend() {
  59. setFlagSvg(!flagSvg);
  60. }
  61. const changeSwitch = (val, type, id) => {
  62. // 开关操作
  63. clearInterval(startLightsStatusTimer.current);
  64. let paramsArr = [];
  65. if (type == 'total') {
  66. lampArr.forEach((item) => {
  67. item.runStatus = val;
  68. paramsArr.push({
  69. id: item.id,
  70. switch: val,
  71. });
  72. });
  73. } else {
  74. lampArr.forEach((item) => {
  75. if (item.id == id) {
  76. item.runStatus = val;
  77. }
  78. });
  79. paramsArr.push({ id: id, switch: val });
  80. }
  81. lampArr.forEach((item) => {
  82. setIsOpen(item.runStatus); // 总开关
  83. });
  84. // waitSetResultFlag.current = true;
  85. setTimeout(() => {
  86. setLampArr([...lampArr]);
  87. }, 500);
  88. setallLampHttp(paramsArr).then((res) => {
  89. getLampTimer();
  90. });
  91. // setallLamps(paramsArr, getLamp, waitSetResultFlag);
  92. };
  93. return (
  94. <div className={commonStyles.box}>
  95. <div className={commonStyles.content}>
  96. <div className={commonStyles.env}>
  97. <div className={commonStyles.envLeft}>
  98. <span className={commonStyles.eqTitle}>{isMore ? '光照' : lampArr[0]?.localName}</span>
  99. <div className={`${commonStyles.eqStatus} ${commonStyles.pdt10}`}>
  100. <span>{isOpen ? '照明已开启' : '照明已关闭'}</span>
  101. </div>
  102. {isMore && (
  103. <div className={commonStyles.showAll} onClick={handleExpend}>
  104. <img className={commonStyles.showImg} src={flagSvg ? expend_up : expend_down}></img>
  105. <div className={commonStyles.showAllText}>显示全部</div>
  106. </div>
  107. )}
  108. </div>
  109. <div className={commonStyles.envRight}>
  110. <img className={commonStyles.roomEqImg} src={isOpen ? lamp_open : lamp_close} />
  111. </div>
  112. {!flagSvg && (
  113. <div
  114. className={commonStyles.eqBtn}
  115. onClick={() => {
  116. changeSwitch(!isOpen, 'total');
  117. }}
  118. >
  119. <AnSwitch isOpen={isOpen} />
  120. </div>
  121. )}
  122. </div>
  123. </div>
  124. {lampArr.map((item, idx) => {
  125. if (flagSvg) {
  126. return (
  127. <div className={`${styles.lampChild} ${commonStyles.flexBetween}`} key={item.id}>
  128. <div className={commonStyles.eqTitle}>{item.localName}</div>
  129. <div
  130. onClick={() => {
  131. changeSwitch(!item.runStatus, 'child', item.id);
  132. }}
  133. >
  134. <AnSwitch isOpen={item.runStatus}></AnSwitch>
  135. </div>
  136. </div>
  137. );
  138. }
  139. })}
  140. </div>
  141. );
  142. };