73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
/**
|
|
* 柜子卡片网格组件
|
|
* - 展示柜子列表（卡片形式）
|
|
* - 点击跳转到柜子详情
|
|
*/
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
Card,
|
|
Grid,
|
|
Tag,
|
|
Spin,
|
|
Empty,
|
|
} from '@arco-design/web-react';
|
|
import { IconDesktop } from '@arco-design/web-react/icon';
|
|
import type { Cabinet } from '@/api/devices';
|
|
|
|
const Row = Grid.Row;
|
|
const Col = Grid.Col;
|
|
|
|
/** 柜子状态映射 */
|
|
const STATUS_MAP: Record<number, { label: string; color: string }> = {
|
|
0: { label: '离线', color: 'gray' },
|
|
1: { label: '在线', color: 'green' },
|
|
2: { label: '充电中', color: 'blue' },
|
|
3: { label: '故障', color: 'red' },
|
|
};
|
|
|
|
interface CabinetGridProps {
|
|
cabinets: Cabinet[];
|
|
loading: boolean;
|
|
}
|
|
|
|
export default function CabinetGrid({ cabinets, loading }: CabinetGridProps) {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<>
|
|
{loading ? (
|
|
<div style={{ textAlign: 'center', padding: '60px 0' }}><Spin dot /></div>
|
|
) : cabinets.length === 0 ? (
|
|
<Empty description="暂无设备" />
|
|
) : (
|
|
<Row gutter={[16, 16]}>
|
|
{cabinets.map((cab) => {
|
|
const st = STATUS_MAP[cab.status] || { label: '未知', color: 'gray' };
|
|
return (
|
|
<Col key={cab.id} xs={24} sm={12} md={8} lg={6}>
|
|
<Card
|
|
hoverable
|
|
size="small"
|
|
onClick={() => navigate(`/devices/cabinet/${cab.id}`)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<IconDesktop style={{ fontSize: 32, color: 'var(--color-primary-6)', marginBottom: 8 }} />
|
|
<div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
|
{cab.abstract_id}
|
|
</div>
|
|
<div style={{ fontSize: 12, color: 'var(--color-text-3)', marginBottom: 8 }}>
|
|
{cab.name || cab.imei}
|
|
</div>
|
|
<Tag color={st.color}>{st.label}</Tag>
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
);
|
|
})}
|
|
</Row>
|
|
)}
|
|
</>
|
|
);
|
|
}
|