gt_client_pad/src/pages/Controller/Device.js

import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { queryDevice } from '@/services/controller';
import { UnityAction } from '@/utils/utils';
import { useParams, useRequest } from '@umijs/max';
import { Spin } from 'antd';
import styles from './index.less';

function Hardware() {
  const { projectId } = useParams();

  const { data, loading } = useRequest(queryDevice, {
    defaultParams: [projectId],
  });

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

  return (
    <PageContent closeable={false}>
      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '智能管控')}>
        设备定位
      </PageTitle>

      <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>
              <div>定位</div>
              {/* <div>历史轨迹</div> */}
            </div>
          </div>
        ))}

        <div
          className={`card-box ${styles.item}`}
          style={{ justifyContent: 'space-between' }}
        >
          <div>
            <i className={`${styles.icon}`}></i>
            设备1
          </div>
          <div>
            <div>定位</div>
          </div>
        </div>
      </Spin>
    </PageContent>
  );
}

export default Hardware;