You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.9 KiB
97 lines
2.9 KiB
/**
|
|
* 弹窗服务类
|
|
*/
|
|
import type { MarkerData, DetectorInfo } from '../types/map.types'
|
|
import {
|
|
getHighestPriorityStatus,
|
|
getStatusLabel,
|
|
getStatusColor,
|
|
createClusterPopupHTML,
|
|
sortDetectorsByPriority,
|
|
getLabelWithTypeValue
|
|
} from '../utils/map.utils'
|
|
|
|
export class PopupService {
|
|
/**
|
|
* 处理聚合标记弹窗
|
|
*/
|
|
handleClusterPopup(features: any[]): string {
|
|
// 收集所有探测器信息
|
|
const detectorList: DetectorInfo[] = features.map((f) => {
|
|
const markerData = f.get('markerData') as MarkerData
|
|
const status = getHighestPriorityStatus(markerData)
|
|
return {
|
|
name: markerData?.name || '-',
|
|
status,
|
|
statusLabel: getStatusLabel(status),
|
|
statusColor: getStatusColor(status)
|
|
}
|
|
})
|
|
|
|
// 按优先级排序
|
|
const sortedDetectorList = sortDetectorsByPriority(detectorList)
|
|
|
|
// 生成弹窗HTML
|
|
return createClusterPopupHTML(sortedDetectorList)
|
|
}
|
|
|
|
/**
|
|
* 处理单个标记弹窗
|
|
*/
|
|
handleSingleMarkerPopup(markerData: MarkerData): string {
|
|
return `
|
|
<div style="font-weight: bold; margin-bottom: 4px;">${markerData.name}</div>
|
|
<div style="color: ${markerData.statusColor};">
|
|
状态: ${markerData.statusLabel}
|
|
</div>
|
|
<div>在线状态: ${getLabelWithTypeValue('onlineStatus', markerData.onlineStatus)}</div>
|
|
|
|
<div>气体状态: ${getLabelWithTypeValue('gasStatus', markerData.gasStatus)}</div>
|
|
<div>围栏状态: ${getLabelWithTypeValue('fenceStatus', markerData.fenceStatus)}</div>
|
|
<div>电池状态: ${getLabelWithTypeValue('batteryStatus', markerData.batteryStatus)}</div>
|
|
|
|
|
|
|
|
<div>类型：${markerData.gasChemical}</div>
|
|
<div>数值：${markerData.value} ${markerData.unit ? markerData.unit : ''}</div>
|
|
<div>时间：${markerData.timeStr ? markerData.timeStr : '-'} </div>
|
|
<div>
|
|
坐标：${markerData.coordinates[0].toFixed(6)}, ${markerData.coordinates[1].toFixed(6)}
|
|
</div>
|
|
`
|
|
}
|
|
|
|
/**
|
|
* 处理默认弹窗
|
|
*/
|
|
handleDefaultPopup(): string {
|
|
return `
|
|
<div style="font-weight: bold;">标记</div>
|
|
<div style="font-size: 10px; color: #666;">未知标记</div>
|
|
`
|
|
}
|
|
|
|
/**
|
|
* 根据特征类型处理弹窗内容
|
|
*/
|
|
handlePopupContent(feature: any): string {
|
|
const markerData = feature.get('markerData')
|
|
const features = feature.get('features')
|
|
|
|
// 处理聚合标记
|
|
if (features && features.length > 1) {
|
|
return this.handleClusterPopup(features)
|
|
} else if (features && features.length === 1) {
|
|
// 处理聚合中的单个标记
|
|
const singleMarkerData = features[0].get('markerData') as MarkerData
|
|
if (singleMarkerData) {
|
|
return this.handleSingleMarkerPopup(singleMarkerData)
|
|
}
|
|
} else if (markerData) {
|
|
// 处理非聚合的单个标记
|
|
return this.handleSingleMarkerPopup(markerData as MarkerData)
|
|
}
|
|
|
|
return this.handleDefaultPopup()
|
|
}
|
|
}
|
|
|