123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- 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>
- );
- };
|