gt_client_pad/src/pages/Controller/components/Light.js

import { queryLightList } from '@/services/controller';
import { UnityAction } from '@/utils/utils';
import { useParams, useRequest } from '@umijs/max';
import { Spin } from 'antd';
import { useEffect, useState } from 'react';
import styles from '../index.less';

const Work = (props) => {
  const { projectId } = useParams();
  const [select, setSelect] = useState();

  const { data, loading } = useRequest(queryLightList, {
    defaultParams: [projectId],
    onSuccess(res) {
      UnityAction.sendMsg('lightData', JSON.stringify(res.list));
    },
  });

  const getIconStatus = (status) => {
    if (status == 1) return '';
    if (status == 2) return styles.offline;
    if (status == 3) return styles.error;
  };

  const onHandleSelect = (item) => {
    setSelect(item.id);
    UnityAction.sendMsg('lightItem', String(item.id));
  };

  useEffect(() => {
    UnityAction.addEventListener('lightItem', (id) => {
      setSelect(id);
    });

    return () => UnityAction.off('lightItem');
  }, []);

  return (
    <div>
      <div className={styles.top}>
        <div className={styles.left}>
          <img
            className={styles.img}
            src={require('@/assets/air-conditioner.png')}
          />
          <div>
            <div className="value-number">{data?.pagination?.total}</div>
            照明数量
          </div>
        </div>
        <div className={styles.right}>
          <div className={styles.row}>
            <i className={styles.icon}></i> 在线：{data?.online_count}
          </div>
          <div className={styles.row}>
            <i className={`${styles.icon} ${styles.offline}`}></i> 离线：
            {data?.offline_count}
          </div>
        </div>
      </div>
      <Spin spinning={loading}>
        <div className={styles.listContent}>
          {data?.list?.map((item) => (
            <div
              key={item.id}
              onClick={() => onHandleSelect(item)}
              className={`card-box ${styles.item} ${
                select == item.id ? 'card-select' : ''
              }`}
            >
              <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>{' '}
              {item.name}
            </div>
          ))}
        </div>
      </Spin>
    </div>
  );
};

export default Work;