69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
|
|
import React from 'react';
|
|
import { WarningRecordCard } from '@zhst/biz';
|
|
import { Space } from 'antd';
|
|
|
|
// 例如 后端返回这样的数据结构
|
|
const backEndData = [
|
|
{
|
|
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
|
id: '1561561',
|
|
warningType: '火焰识别',
|
|
boxId: '2',
|
|
position: '2',
|
|
cabietId: '002',
|
|
// warningTime: "2023-03-01 ",
|
|
warningTimestamp: Date.now(),
|
|
// warningTimeFormat:"YYYY-MM-DD"
|
|
odRect: [{
|
|
// "id": "123",
|
|
"x": 0.5519352,
|
|
"y": 0.2965385,
|
|
"w": 0.05185461,
|
|
"h": 0.24698898,
|
|
}]
|
|
},
|
|
{
|
|
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
|
|
id: '156156155',
|
|
warningType: '火焰识别',
|
|
boxId: '1',
|
|
position: '1',
|
|
cabietId: '001',
|
|
// warningTime: "2023-03-01 ",
|
|
warningTimestamp: Date.now(),
|
|
// warningTimeFormat:"YYYY-MM-DD"
|
|
odRect: [{
|
|
// "id": "456",
|
|
"x": 0.1519352,
|
|
"y": 0.2965385,
|
|
"w": 0.05185461,
|
|
"h": 0.24698898,
|
|
}]
|
|
}
|
|
]
|
|
|
|
// 前端处理数据结构
|
|
const dataSource = backEndData.map(o => {
|
|
return {
|
|
imageKey: o.imageKey,
|
|
id: o.id,
|
|
warningType: o.warningType,
|
|
boxId: o.boxId,
|
|
position: o.position,
|
|
cabietId: o.cabietId,
|
|
warningInfo: [`盒子${o.boxId}`, `位置${o.position}`, `柜子ID${o.cabietId}`],
|
|
// cabietText: `柜子ID: ${o.cabietId}`,
|
|
warningTimestamp: o.warningTimestamp,
|
|
odRect: o.odRect
|
|
}
|
|
})
|
|
export default () => {
|
|
|
|
return (
|
|
<Space size={[8, 16]} direction="vertical">
|
|
{dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} />)}
|
|
</Space>
|
|
)
|
|
}
|