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 styles from '../index.less';

const Work = (props) => {
  const { projectId } = useParams();

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

  return (
    <div>
      <div className={`card-box ${styles.top}`}>
        <div className={styles.left}>
          <img
            className={styles.img}
            src={require('@/assets/air-conditioner.png')}
          />
          <div>
            <div className={styles.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}>
        {data?.list?.map((item) => (
          <div key={item.id} className={`card-box ${styles.item}`}>
            <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>{' '}
            {item.name}
          </div>
        ))}
      </Spin>
    </div>
  );
};

export default Work;