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

feat: 后端返回ICCID，卡片显示IMEI/ICCID换行，状态图标

Browse Source
This commit is contained in:
12451 2026-07-02 20:54:37 +08:00
parent c2c70be3b3
commit a9e720fe02
3 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
software/api-server/src/routes/cabinets.rs
View File

@ -346,6 +346,10 @@ pub struct CabinetOption {
pub id: i64,
pub name: Option<String>,
pub abstract_id: String,
pub imei: Option<String>,
pub iccid: Option<String>,
pub address: Option<String>,
pub status: i8,
}
/// 仓板下拉选项
@ -372,14 +376,14 @@ pub async fn list_cabinet_options(
let rows = if let Some(pid) = params.project_id {
sqlx::query_as::<_, CabinetOption>(
"SELECT id, name, abstract_id FROM cabinets WHERE project_id = ? ORDER BY id"
"SELECT id, name, abstract_id, imei, iccid, address, status FROM cabinets WHERE project_id = ? ORDER BY id"
)
.bind(pid)
.fetch_all(&state.mysql)
.await?
} else {
sqlx::query_as::<_, CabinetOption>(
"SELECT id, name, abstract_id FROM cabinets ORDER BY id"
"SELECT id, name, abstract_id, imei, iccid, address, status FROM cabinets ORDER BY id"
)
.fetch_all(&state.mysql)
.await?

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

@ -20,6 +20,7 @@ export interface Cabinet {
project_id?: number;
abstract_id: string;
imei: string;
iccid?: string;
auth_str?: string;
name?: string;
address?: string;

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

@ -10,15 +10,15 @@ import {
Spin,
Empty,
} from '@arco-design/web-react';
import { IconLocation } from '@arco-design/web-react/icon';
import { IconLocation, IconPoweroff, IconCheckCircle, IconInfoCircle } from '@arco-design/web-react/icon';
import type { Cabinet } from '@/api/devices';
/** 柜子状态映射 */
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' },
const STATUS_MAP: Record<number, { label: string; color: string; icon: React.ReactNode }> = {
0: { label: '离线', color: 'gray', icon: <IconInfoCircle /> },
1: { label: '在线', color: 'green', icon: <IconCheckCircle /> },
2: { label: '充电中', color: 'blue', icon: <IconPoweroff /> },
3: { label: '故障', color: 'red', icon: <IconInfoCircle /> },
};
interface CabinetGridProps {
@ -38,7 +38,7 @@ export default function CabinetGrid({ cabinets, loading }: CabinetGridProps) {
) : (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
{cabinets.map((cab) => {
const st = STATUS_MAP[cab.status] || { label: '未知', color: 'gray' };
const st = STATUS_MAP[cab.status] || { label: '未知', color: 'gray', icon: <IconInfoCircle /> };
return (
<Card
key={cab.id}
@ -48,18 +48,21 @@ export default function CabinetGrid({ cabinets, loading }: CabinetGridProps) {
style={{ cursor: 'pointer' }}
>
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
{/* 标题行 */}
{/* 标题行：名称 + 状态图标 */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ fontWeight: 600, fontSize: 15 }}>{cab.name || cab.abstract_id}</span>
<Tag color={st.color} style={{ fontSize: 12 }}>{st.label}</Tag>
<span style={{ fontWeight: 600, fontSize: 15, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '70%' }}>
{cab.name || cab.abstract_id}
</span>
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<span style={{ color: st.color }}>{st.icon}</span>
<Tag color={st.color} style={{ fontSize: 12, margin: 0 }}>{st.label}</Tag>
</div>
</div>
{/* 信息网格 */}
<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>
{/* IMEI 和 ICCID */}
<div style={{ fontSize: 12, color: 'var(--color-text-3)' }}>
<div>IMEI: {cab.imei || '-'}</div>
<div>ICCID: {cab.iccid || '-'}</div>
</div>
{/* 通道状态 */}
@ -72,7 +75,7 @@ export default function CabinetGrid({ cabinets, loading }: CabinetGridProps) {
{/* 地址 */}
{cab.address && (
<div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--color-text-3)' }}>
<IconLocation style={{ color: '#f53f3f' }} />
<IconLocation style={{ color: '#f53f3f', flexShrink: 0 }} />
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{cab.address}</span>
</div>
)}