更新地图组件,优化标记点数据处理逻辑,增加全局配置获取方式,提升代码可维护性和用户体验。同时,新增地图标记数据接口定义,确保数据结构一致性。

This commit is contained in:
zyh
2025-04-10 22:10:08 +00:00
parent bf97b4f885
commit e6ef6d656e
4 changed files with 83 additions and 48 deletions

View File

@@ -108,16 +108,18 @@ export const LoginMapPage = () => {
// 渲染地图标记点
const renderMarkers = (locations: LoginLocation[]): MarkerData[] => {
return locations.map(location => ({
id: location.id,
longitude: location.longitude,
latitude: location.latitude,
title: location.user.nickname || location.user.username,
description: `登录时间: ${dayjs(location.loginTime).format('YYYY-MM-DD HH:mm:ss')}\nIP地址: ${location.ipAddress}`,
status: 'online',
type: 'login',
extraData: location
}));
return locations
.filter(location => location.longitude !== null && location.latitude !== null)
.map(location => ({
id: location.id?.toString() || '',
longitude: location.longitude as number,
latitude: location.latitude as number,
title: location.user?.nickname || location.user?.username || '未知用户',
description: `登录时间: ${dayjs(location.login_time).format('YYYY-MM-DD HH:mm:ss')}\nIP地址: ${location.ip_address}`,
status: 'online',
type: 'login',
extraData: location
}));
};
return (
@@ -156,7 +158,9 @@ export const LoginMapPage = () => {
<div style={{ height: '100%', minHeight: '500px' }}>
<AMap
markers={renderMarkers(locations)}
center={locations[0] ? [locations[0].longitude, locations[0].latitude] : undefined}
center={locations[0] && locations[0].longitude !== null && locations[0].latitude !== null
? [locations[0].longitude, locations[0].latitude] as [number, number]
: undefined}
onMarkerClick={handleMarkerClick}
height={'100%'}
/>
@@ -179,7 +183,7 @@ export const LoginMapPage = () => {
) : markerDetail ? (
<Descriptions column={1}>
<Descriptions.Item label={<><UserOutlined /> </>}>
{markerDetail.user.nickname || markerDetail.user.username}
{markerDetail.user?.nickname || markerDetail.user?.username || '未知用户'}
</Descriptions.Item>
<Descriptions.Item label={<><ClockCircleOutlined /> </>}>
{dayjs(markerDetail.login_time).format('YYYY-MM-DD HH:mm:ss')}
@@ -208,4 +212,4 @@ export const LoginMapPage = () => {
</Drawer>
</div>
);
};
};