import React, { useState, useEffect, useCallback, useRef } from 'react'; import { message } from 'antd'; import styles from './index.less'; import commonStyles from '../common.less'; import { equipImageMap } from '@/config/image.js'; import AnSwitch from '../anSwitch'; import { getLampHttp, getStatusHttp, setallLampHttp } from '@/services/sgservice/equipment'; import { setallLamps } from '@/pages/Equipment/checLampStatus.js'; const { lamp_open, lamp_close, expend_down, expend_up } = equipImageMap; export default ({ spaceId }) => { const [isMore, setIsMore] = useState(false); const [isOpen, setIsOpen] = useState(false); // 12 开, 10关 const [lampArr, setLampArr] = useState([]); let startLightsStatusTimer = useRef(null); // let waitSetResultFlag = useRef(false); // 等待开关接口 const getLamp = useCallback(() => { getLampHttp(spaceId).then( (res) => { // if (res.result != 'success' && waitSetResultFlag.current) return; const arr = res.content; if (arr.length > 1) { setIsMore(true); let totalIsOpen = false; arr.forEach((item) => { if (item.runStatus) { totalIsOpen = true; } }); setIsOpen(totalIsOpen); } else { arr.forEach((item) => { if (item.runStatus) { setIsOpen(true); } else { setIsOpen(false); } }); } setLampArr(arr); }, (e) => {}, ); }, []); function getLampTimer() { clearInterval(startLightsStatusTimer.current); startLightsStatusTimer.current = setInterval(() => { getLamp(); // 灯设备状态 }, 3000); } useEffect(() => { getLamp(); getLampTimer(); return () => { clearInterval(startLightsStatusTimer.current); }; }, []); const [flagSvg, setFlagSvg] = useState(false); function handleExpend() { setFlagSvg(!flagSvg); } const changeSwitch = (val, type, id) => { // 开关操作 clearInterval(startLightsStatusTimer.current); let paramsArr = []; if (type == 'total') { lampArr.forEach((item) => { item.runStatus = val; paramsArr.push({ id: item.id, switch: val, }); }); } else { lampArr.forEach((item) => { if (item.id == id) { item.runStatus = val; } }); paramsArr.push({ id: id, switch: val }); } lampArr.forEach((item) => { setIsOpen(item.runStatus); // 总开关 }); // waitSetResultFlag.current = true; setTimeout(() => { setLampArr([...lampArr]); }, 500); setallLampHttp(paramsArr).then((res) => { getLampTimer(); }); // setallLamps(paramsArr, getLamp, waitSetResultFlag); }; return ( <div className={commonStyles.box}> <div className={commonStyles.content}> <div className={commonStyles.env}> <div className={commonStyles.envLeft}> <span className={commonStyles.eqTitle}>{isMore ? '光照' : lampArr[0]?.localName}</span> <div className={`${commonStyles.eqStatus} ${commonStyles.pdt10}`}> <span>{isOpen ? '照明已开启' : '照明已关闭'}</span> </div> {isMore && ( <div className={commonStyles.showAll} onClick={handleExpend}> <img className={commonStyles.showImg} src={flagSvg ? expend_up : expend_down}></img> <div className={commonStyles.showAllText}>显示全部</div> </div> )} </div> <div className={commonStyles.envRight}> <img className={commonStyles.roomEqImg} src={isOpen ? lamp_open : lamp_close} /> </div> {!flagSvg && ( <div className={commonStyles.eqBtn} onClick={() => { changeSwitch(!isOpen, 'total'); }} > <AnSwitch isOpen={isOpen} /> </div> )} </div> </div> {lampArr.map((item, idx) => { if (flagSvg) { return ( <div className={`${styles.lampChild} ${commonStyles.flexBetween}`} key={item.id}> <div className={commonStyles.eqTitle}>{item.localName}</div> <div onClick={() => { changeSwitch(!item.runStatus, 'child', item.id); }} > <AnSwitch isOpen={item.runStatus}></AnSwitch> </div> </div> ); } })} </div> ); };