import type { VehicleMonitorVo } from '../command-center.types'
|
import { MONITOR_COLOR_MAP, VEHICLE_STATE } from '../command-center.constants'
|
|
/**
|
* 创建车辆地图标注的 HTML 内容
|
* @param vehicle - 车辆监控数据
|
* @returns 标注 DOM 字符串
|
*/
|
export const createVehicleMarkerContent = (vehicle: VehicleMonitorVo): string => {
|
const colorConfig = MONITOR_COLOR_MAP[vehicle.monitorGroup] || MONITOR_COLOR_MAP.ABNORMAL
|
const isPulse = vehicle.stateCode === VEHICLE_STATE.ODD_OUT
|
const isCharging = vehicle.charging
|
|
return `
|
<div class="vehicle-marker ${isPulse ? 'vehicle-marker--pulse' : ''}">
|
<svg class="vehicle-marker__icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="${colorConfig.color}">
|
<path d="M941.4 467.2l-117.6-3.2-56-155.2c-16-44.8-59.2-75.2-107.2-75.2H362.2c-48 0-91.2 30.4-107.2 75.2l-56 155.2-117.6 3.2C56.6 468.8 35 491.2 35 518.4v148.8c0 27.2 22.4 49.6 49.6 49.6h44.8c8 51.2 52.8 89.6 105.6 89.6s97.6-38.4 105.6-89.6h342.4c8 51.2 52.8 89.6 105.6 89.6s97.6-38.4 105.6-89.6h44.8c27.2 0 49.6-22.4 49.6-49.6V518.4c0-27.2-22.4-51.2-46.6-51.2zM235 758.4c-27.2 0-49.6-22.4-49.6-49.6s22.4-49.6 49.6-49.6 49.6 22.4 49.6 49.6-22.4 49.6-49.6 49.6zm553.6 0c-27.2 0-49.6-22.4-49.6-49.6s22.4-49.6 49.6-49.6 49.6 22.4 49.6 49.6-22.4 49.6-49.6 49.6zM253.4 462.4l44.8-131.2c8-24 30.4-40 56-40h315.2c25.6 0 48 16 56 40l44.8 131.2H253.4z"></path>
|
<path d="M512 296a25.6 25.6 0 0 1-25.6-25.6V134.4a25.6 25.6 0 0 1 51.2 0v136c0 14.1-11.5 25.6-25.6 25.6z"></path>
|
</svg>
|
${isCharging ? '<span class="vehicle-marker__charging">⚡</span>' : ''}
|
</div>
|
`
|
}
|
|
/**
|
* 创建车辆 hover 提示框的 HTML 内容
|
* @param vehicle - 车辆监控数据
|
* @returns 提示框 DOM 字符串
|
*/
|
export const createVehicleTooltipContent = (vehicle: VehicleMonitorVo): string => {
|
const colorConfig = MONITOR_COLOR_MAP[vehicle.monitorGroup] || MONITOR_COLOR_MAP.ABNORMAL
|
return `<div style="padding:4px 8px;font-size:12px;white-space:nowrap;">
|
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${colorConfig.color};margin-right:4px;"></span>
|
${vehicle.plateNumber || vehicle.vin} · ${vehicle.monitorStatus}
|
</div>`
|
}
|
|
/**
|
* 创建车辆点击弹窗的 HTML 内容
|
* @param vehicle - 车辆监控数据
|
* @param address - 逆地理编码地址
|
* @returns 弹窗 DOM 字符串
|
*/
|
export const createVehicleInfoWindowContent = (vehicle: VehicleMonitorVo, address: string): string => {
|
return `<div class="vehicle-info-card">
|
<div class="vehicle-info-card__header">
|
<span class="vehicle-info-card__title">车辆位置</span>
|
<span class="vehicle-info-card__close" onclick="document.dispatchEvent(new CustomEvent('closeVehicleInfoWindow'))">×</span>
|
</div>
|
<div class="vehicle-info-card__body">
|
<div class="vehicle-info-card__row">
|
<span class="vehicle-info-card__label">车辆ID</span>
|
<span class="vehicle-info-card__value">${vehicle.plateNumber || vehicle.vin}</span>
|
</div>
|
<div class="vehicle-info-card__row">
|
<span class="vehicle-info-card__label">当前状态</span>
|
<span class="vehicle-info-card__value">${vehicle.monitorStatus}</span>
|
</div>
|
<div class="vehicle-info-card__row">
|
<span class="vehicle-info-card__label">当前位置</span>
|
<span class="vehicle-info-card__value">${address || '定位中...'}</span>
|
</div>
|
</div>
|
</div>`
|
}
|
