index.jsx 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  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/ant-design-pro/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 startTime = null;
  15. let endTime = null;
  16. const startLightsStatusTimer = useRef(null);
  17. const getLamp = () => {
  18. getLampHttp(spaceId).then((res) => {
  19. if (res.result != 'success') 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. };
  42. useEffect(() => {
  43. getLamp();
  44. // startLightsStatusTimer.current = setInterval(() => {
  45. // getLamp(); // 灯设备状态
  46. // }, 1000);
  47. // return () => {
  48. // clearInterval(startLightsStatusTimer.current);
  49. // };
  50. }, []);
  51. const [flagSvg, setFlagSvg] = useState(false);
  52. function handleExpend() {
  53. setFlagSvg(!flagSvg);
  54. }
  55. const changeSwitch = (val, type, id) => {
  56. let paramsArr = [];
  57. if (type == 'total') {
  58. lampArr.forEach((item) => {
  59. paramsArr.push({
  60. id: item.id,
  61. switch: val,
  62. });
  63. });
  64. } else {
  65. paramsArr.push({ id: id, switch: val });
  66. }
  67. setallLamps(paramsArr, getLamp);
  68. };
  69. return (
  70. <div className={commonStyles.box}>
  71. <div className={commonStyles.content}>
  72. <div className={commonStyles.env}>
  73. <div className={commonStyles.envLeft}>
  74. <span className={commonStyles.eqTitle}>{isMore ? '光照' : lampArr[0]?.localName}</span>
  75. <div className={`${commonStyles.eqStatus} ${commonStyles.pdt10}`}>
  76. <span>{isOpen ? '照明已开启' : '照明已关闭'}</span>
  77. </div>
  78. {isMore && (
  79. <div className={commonStyles.showAll} onClick={handleExpend}>
  80. <img className={commonStyles.showImg} src={flagSvg ? expend_up : expend_down}></img>
  81. <div className={commonStyles.showAllText}>显示全部</div>
  82. </div>
  83. )}
  84. </div>
  85. <div className={commonStyles.envRight}>
  86. <img className={commonStyles.roomEqImg} src={isOpen ? lamp_open : lamp_close} />
  87. </div>
  88. {!flagSvg && (
  89. <div
  90. className={commonStyles.eqBtn}
  91. onClick={() => {
  92. changeSwitch(!isOpen, 'total');
  93. }}
  94. >
  95. <AnSwitch isOpen={isOpen} />
  96. </div>
  97. )}
  98. </div>
  99. </div>
  100. {lampArr.map((item, idx) => {
  101. if (flagSvg) {
  102. return (
  103. <div className={`${styles.lampChild} ${commonStyles.flexBetween}`} key={item.id}>
  104. <div className={commonStyles.eqTitle}>{item.localName}</div>
  105. <div
  106. onClick={() => {
  107. changeSwitch(!item.runStatus, 'child', item.id);
  108. }}
  109. >
  110. <AnSwitch isOpen={item.runStatus}></AnSwitch>
  111. </div>
  112. </div>
  113. );
  114. }
  115. })}
  116. </div>
  117. );
  118. };