hand_device/web/src/views/HandDevice/Home/components/services/popup.service.ts

/**
 * 弹窗服务类
 */
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()
  }
}