代码更新
This commit is contained in:
@@ -4,6 +4,10 @@ export const getAlarmRecordListByPage = (data) => {
|
||||
return service({
|
||||
url: '/device/getAlarmRecordListByPage',
|
||||
method: 'post',
|
||||
data: data
|
||||
data: {
|
||||
...data,
|
||||
orderKey: 'CreatedAt',
|
||||
order: 'desc'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -36,7 +36,11 @@ export const getAlarmRecordListByPage = (data) => {
|
||||
return service({
|
||||
url: '/device/getAlarmRecordListByPage',
|
||||
method: 'post',
|
||||
data: data
|
||||
data: {
|
||||
...data,
|
||||
orderKey: 'CreatedAt',
|
||||
order: 'desc'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -36,7 +36,11 @@ export const getAlarmRecordListByPage = (data) => {
|
||||
return service({
|
||||
url: '/device/getAlarmRecordListByPage',
|
||||
method: 'post',
|
||||
data: data
|
||||
data: {
|
||||
...data,
|
||||
orderKey: 'CreatedAt',
|
||||
order: 'desc'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -20,6 +20,10 @@ export const getAlarmRecordListByPage = (data) => {
|
||||
return service({
|
||||
url: '/device/getAlarmRecordListByPage',
|
||||
method: 'post',
|
||||
data: data
|
||||
data: {
|
||||
...data,
|
||||
orderKey: 'CreatedAt',
|
||||
order: 'desc'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -585,7 +585,7 @@
|
||||
|
||||
const marker = new AMap.Marker({
|
||||
position: [longitude, latitude],
|
||||
content: createMarkerContent(device.status),
|
||||
content: createMarkerContent(device),
|
||||
anchor: 'bottom-center',
|
||||
zIndex: 120
|
||||
})
|
||||
@@ -615,14 +615,29 @@
|
||||
|
||||
const getMapStatusColor = (status) => mapStatusTheme[status] || mapStatusTheme.offline
|
||||
|
||||
const createMarkerContent = (status) => {
|
||||
const color = getMapStatusColor(status)
|
||||
const statusClass = status === 'online' ? 'online' : status === 'alarm' ? 'alarm' : 'offline'
|
||||
const getDeviceLocationName = (device) => {
|
||||
return device.gatewayAddress || device.gatewayName || device.gatewayMac || '未知位置'
|
||||
}
|
||||
|
||||
const escapeMapHtml = (value) => {
|
||||
return String(value ?? '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
}
|
||||
|
||||
const createMarkerContent = (device) => {
|
||||
const color = getMapStatusColor(device.status)
|
||||
const statusClass = device.status === 'online' ? 'online' : device.status === 'alarm' ? 'alarm' : 'offline'
|
||||
const locationName = escapeMapHtml(getDeviceLocationName(device))
|
||||
return `
|
||||
<div class="power-map-marker ${statusClass}" style="--marker-color: ${color};">
|
||||
<span class="marker-ripple"></span>
|
||||
<span class="marker-core"></span>
|
||||
<span class="marker-pin"></span>
|
||||
<span class="marker-location-name">${locationName}</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
@@ -630,6 +645,7 @@
|
||||
const createInfoWindowContent = (device) => {
|
||||
const statusText = device.status === 'online' ? '在线' : device.status === 'alarm' ? '告警' : '离线'
|
||||
const statusColor = getMapStatusColor(device.status)
|
||||
const locationName = escapeMapHtml(getDeviceLocationName(device))
|
||||
|
||||
return `
|
||||
<div class="power-map-info" style="--status-color: ${statusColor};">
|
||||
@@ -639,7 +655,7 @@
|
||||
</div>
|
||||
<div class="power-map-info__body">
|
||||
<div class="power-map-info__label">设备位置</div>
|
||||
<div class="power-map-info__address">${device.gatewayAddress || '暂无地址'}</div>
|
||||
<div class="power-map-info__address">${locationName}</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
@@ -2009,6 +2025,30 @@
|
||||
filter: drop-shadow(0 0 10px var(--marker-color));
|
||||
}
|
||||
|
||||
.marker-location-name {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
max-width: 140px;
|
||||
padding: 4px 8px;
|
||||
color: #e9fbff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border: 1px solid rgba(0, 212, 255, 0.58);
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, rgba(8, 47, 73, 0.9), rgba(2, 8, 23, 0.86));
|
||||
box-shadow:
|
||||
inset 0 0 12px rgba(0, 212, 255, 0.14),
|
||||
0 0 12px rgba(0, 212, 255, 0.26);
|
||||
text-shadow: 0 0 8px rgba(0, 212, 255, 0.46);
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.marker-core {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
||||
Reference in New Issue
Block a user