90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
import { Card, Table, Tag, Typography } from '@douyinfe/semi-ui';
|
|
import type { DashboardData } from '../types';
|
|
|
|
interface MovementRow {
|
|
id: string;
|
|
time: string;
|
|
dir: string;
|
|
material: string;
|
|
qty: string;
|
|
operator: string;
|
|
}
|
|
|
|
export function WarehouseBoard({ data }: { data: DashboardData }) {
|
|
const { warehouse: w } = data;
|
|
const rows: MovementRow[] = w.movements.map((m) => ({
|
|
id: m.id,
|
|
time: m.time,
|
|
dir: m.type === 'in' ? '入库' : '出库',
|
|
material: m.material,
|
|
qty: `${m.qty}`,
|
|
operator: m.operator,
|
|
}));
|
|
|
|
const columns = [
|
|
{ title: '时间', dataIndex: 'time' },
|
|
{
|
|
title: '方向',
|
|
dataIndex: 'dir',
|
|
render: (dir: string) => (
|
|
<Tag color={dir === '入库' ? 'green' : 'blue'}>{dir}</Tag>
|
|
),
|
|
},
|
|
{ title: '物料名称', dataIndex: 'material' },
|
|
{ title: '数量', dataIndex: 'qty' },
|
|
{ title: '操作人', dataIndex: 'operator' },
|
|
];
|
|
|
|
return (
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
|
|
<Card title="库存总量" style={{ gridColumn: 'span 2' }}>
|
|
<BigNumber value={w.totalStock} unit="件" color="#36a3f7" />
|
|
</Card>
|
|
<Card title="物料种类">
|
|
<BigNumber value={w.materialTypes} unit="种" color="#00d68f" />
|
|
</Card>
|
|
<Card title="当日出入库">
|
|
<div style={{ display: 'flex', gap: 24 }}>
|
|
<TextStat color="#00d68f" value={w.inboundToday} label="入库" />
|
|
<TextStat color="#36a3f7" value={w.outboundToday} label="出库" />
|
|
</div>
|
|
</Card>
|
|
|
|
<Card title="出入库动态（实时）" style={{ gridColumn: 'span 4' }}>
|
|
<Table
|
|
columns={columns}
|
|
dataSource={rows}
|
|
pagination={false}
|
|
rowKey="id"
|
|
empty={<Typography.Text type="tertiary">暂无出入库记录</Typography.Text>}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TextStat({ value, label, color }: { value: number; label: string; color: string }) {
|
|
return (
|
|
<div>
|
|
<div style={{ fontSize: 28, fontWeight: 600, color }}>{value}</div>
|
|
<div style={{ color: '#8fa3bf', fontSize: 13 }}>{label}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BigNumber({
|
|
value,
|
|
unit,
|
|
color,
|
|
}: {
|
|
value: number;
|
|
unit: string;
|
|
color: string;
|
|
}) {
|
|
return (
|
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
|
|
<span style={{ fontSize: 36, fontWeight: 700, color }}>{value}</span>
|
|
<span style={{ color: '#8fa3bf' }}>{unit}</span>
|
|
</div>
|
|
);
|
|
} |