65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import { useIntl } from '@umijs/max';
|
|
import { Collapse, Flex, Typography } from 'antd';
|
|
import { MessageInstance } from 'antd/es/message/interface';
|
|
import { GPSParseResult } from '../type';
|
|
import { BaseMap } from './BaseMap';
|
|
import ShipDetail from './ShipDetail';
|
|
|
|
const MultipleShips = ({
|
|
things,
|
|
messageApi,
|
|
mapController,
|
|
}: {
|
|
things: SgwModel.SgwThing[];
|
|
messageApi: MessageInstance;
|
|
mapController: BaseMap | null;
|
|
}) => {
|
|
const intl = useIntl();
|
|
return (
|
|
<Collapse
|
|
bordered={false}
|
|
style={{
|
|
background: 'white',
|
|
}}
|
|
// onChange={handleCollapseChange}
|
|
items={things.map((thing, index) => {
|
|
const gpsData: GPSParseResult = JSON.parse(thing.metadata?.gps || '{}');
|
|
return {
|
|
key: index,
|
|
label: (
|
|
<Flex
|
|
justify="space-between"
|
|
align="center"
|
|
style={{ width: '100%', marginBottom: 10 }}
|
|
>
|
|
<Typography.Text strong>
|
|
{thing.metadata?.ship_name || thing.name}
|
|
</Typography.Text>
|
|
<div style={{ display: 'flex', gap: '10px' }}>
|
|
<Typography.Text strong>
|
|
${intl.formatMessage({ id: 'map.ship_detail.speed' })}:{' '}
|
|
{gpsData.s} km/h
|
|
</Typography.Text>
|
|
<Typography.Text>-</Typography.Text>
|
|
<Typography.Text strong>
|
|
{intl.formatMessage({ id: 'map.ship_detail.heading' })}:{' '}
|
|
{gpsData.h}°
|
|
</Typography.Text>
|
|
</div>
|
|
</Flex>
|
|
),
|
|
children: (
|
|
<ShipDetail
|
|
thing={thing}
|
|
messageApi={messageApi}
|
|
mapController={mapController}
|
|
/>
|
|
),
|
|
};
|
|
})}
|
|
></Collapse>
|
|
);
|
|
};
|
|
|
|
export default MultipleShips;
|