admin/charging-cabinet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 卡片添加地址字段，中文名字，优化布局

Browse Source
This commit is contained in:
12451 2026-07-02 20:37:24 +08:00
parent da9296a407
commit c2c70be3b3
2 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
software/web/src/api/devices.ts
View File

@ -22,6 +22,7 @@ export interface Cabinet {
imei: string; imei: string;
auth_str?: string; auth_str?: string;
name?: string; name?: string;
address?: string;
status: number; status: number;
} }

47
software/web/src/pages/devices/CabinetGrid.tsx
View File

@ -6,17 +6,13 @@
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { import {
Card, Card,
Grid,
Tag, Tag,
Spin, Spin,
Empty, Empty,
} from '@arco-design/web-react'; } from '@arco-design/web-react';
import { IconDesktop } from '@arco-design/web-react/icon'; import { IconLocation } from '@arco-design/web-react/icon';
import type { Cabinet } from '@/api/devices'; import type { Cabinet } from '@/api/devices';
const Row = Grid.Row;
const Col = Grid.Col;
/** 柜子状态映射 */ /** 柜子状态映射 */
const STATUS_MAP: Record<number, { label: string; color: string }> = { const STATUS_MAP: Record<number, { label: string; color: string }> = {
0: { label: '离线', color: 'gray' }, 0: { label: '离线', color: 'gray' },
@ -40,32 +36,51 @@ export default function CabinetGrid({ cabinets, loading }: CabinetGridProps) {
) : cabinets.length === 0 ? ( ) : cabinets.length === 0 ? (
<Empty description="暂无设备" /> <Empty description="暂无设备" />
) : ( ) : (
<Row gutter={[16, 16]}> <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
{cabinets.map((cab) => { {cabinets.map((cab) => {
const st = STATUS_MAP[cab.status] || { label: '未知', color: 'gray' }; const st = STATUS_MAP[cab.status] || { label: '未知', color: 'gray' };
return ( return (
<Col key={cab.id} xs={24} sm={12} md={8} lg={6}>
<Card <Card
key={cab.id}
hoverable hoverable
size="small" size="small"
onClick={() => navigate(`/devices/cabinet/${cab.id}`)} onClick={() => navigate(`/devices/cabinet/${cab.id}`)}
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
> >
<div style={{ textAlign: 'center' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
<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' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
{cab.abstract_id} <span style={{ fontWeight: 600, fontSize: 15 }}>{cab.name || cab.abstract_id}</span>
<Tag color={st.color} style={{ fontSize: 12 }}>{st.label}</Tag>
</div> </div>
<div style={{ fontSize: 12, color: 'var(--color-text-3)', marginBottom: 8 }}>
{cab.name || cab.imei} {/* 信息网格 */}
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px 12px', fontSize: 12, color: 'var(--color-text-3)' }}>
<div>IMEI: {cab.imei?.slice(-6) || '-'}</div>
<div>绑定码: {cab.auth_str || '-'}</div>
<div>柜板: 6</div>
<div>通道: 36</div>
</div> </div>
<Tag color={st.color}>{st.label}</Tag>
{/* 通道状态 */}
<div style={{ display: 'flex', gap: 12, fontSize: 12, borderTop: '1px solid var(--color-border)', paddingTop: 8 }}>
<span style={{ color: 'var(--color-text-3)' }}>空闲: <b style={{ color: 'var(--color-text-1)' }}>30</b></span>
<span style={{ color: 'var(--color-text-3)' }}>充电: <b style={{ color: '#165dff' }}>5</b></span>
<span style={{ color: 'var(--color-text-3)' }}>故障: <b style={{ color: '#f53f3f' }}>1</b></span>
</div>
{/* 地址 */}
{cab.address && (
<div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--color-text-3)' }}>
<IconLocation style={{ color: '#f53f3f' }} />
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{cab.address}</span>
</div>
)}
</div> </div>
</Card> </Card>
</Col>
); );
})} })}
</Row> </div>
)} )}
</> </>
); );