cattleTransportation/pc-cattle-transportation/src/views/earlywarning/warningDetailDialog.vue

<template>
    <el-dialog 
        v-model="dialogVisible" 
        :title="dialogTitle" 
        width="900px" 
        :close-on-click-modal="false"
        @close="handleClose"
    >
        <!-- 轨迹定位按钮 -->
        <template #header>
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <span>{{ dialogTitle }}</span>
                <el-button 
                    type="primary" 
                    :icon="Location" 
                    @click="handleTrackClick"
                    :disabled="!warningData.deliveryId"
                >
                    轨迹定位
                </el-button>
            </div>
        </template>
        <!-- 温度预警 - 只显示设备信息，不显示地图 -->
        <div v-if="isTemperatureWarning" class="warning-content temperature-warning">
            <!-- 预警基本信息 -->
            <el-descriptions title="温度预警基本信息" :column="2" border>
                <el-descriptions-item label="预警时间">
                    <span style="font-weight: 600;">{{ warningData.warningTime }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="预警类型">
                    <el-tag :type="warningData.warningType == 5 ? 'danger' : 'primary'" size="large">
                        {{ warningData.warningTypeDesc }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="预警温度">
                    <span :style="{ 
                        color: getTemperatureColor(parseFloat(warningData.deviceTemp)), 
                        fontWeight: 'bold',
                        fontSize: '18px' 
                    }">
                        {{ warningData.deviceTemp || '--' }}°C
                    </span>
                </el-descriptions-item>
                <el-descriptions-item label="设备ID">
                    {{ warningData.serverDeviceSn || warningData.deviceId || '未知' }}
                </el-descriptions-item>
                <el-descriptions-item label="运单号">{{ warningData.deliveryNumber }}</el-descriptions-item>
                <el-descriptions-item label="车牌号">{{ warningData.licensePlate }}</el-descriptions-item>
                <el-descriptions-item label="司机姓名">{{ warningData.driverName }}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{ warningData.createByName || '--' }}</el-descriptions-item>
            </el-descriptions>
            
            <!-- 预警详情描述 -->
            <div v-if="warningData.warningDetail" class="warning-description">
                <el-alert 
                    :title="warningData.warningDetail" 
                    :type="warningData.warningType == 5 ? 'error' : 'warning'"
                    :closable="false"
                    show-icon
                    style="margin-top: 20px;"
                />
            </div>
            
            <el-divider content-position="left">
                <el-icon><InfoFilled /></el-icon>
                <span style="margin-left: 5px;">设备详细信息</span>
            </el-divider>
            
            <!-- 绑定设备列表 -->
            <div v-if="deviceList.length > 0" class="device-list-section">
                <!-- 调试信息（开发环境可显示） -->
                <div v-if="false" style="font-size: 12px; color: #909399; margin-bottom: 10px;">
                    调试：设备数量={{ deviceList.length }}, deliveryId={{ warningData.deliveryId }}
                </div>
                <div class="section-header">
                    <h4>
                        <el-icon style="vertical-align: middle;"><Connection /></el-icon>
                        绑定设备列表
                        <el-tag type="info" size="small" style="margin-left: 10px;">{{ deviceList.length }}个</el-tag>
                    </h4>
                </div>
                <el-table :data="deviceList" border style="width: 100%" size="small">
                    <el-table-column prop="deviceId" label="设备ID" width="150" />
                    <el-table-column prop="deviceTypeName" label="设备类型" width="120">
                        <template #default="scope">
                            <el-tag 
                                :type="scope.row.deviceType == 1 || scope.row.deviceType == 4 ? 'primary' : (scope.row.deviceType == 2 ? 'success' : 'warning')"
                            >
                                {{ scope.row.deviceTypeName || '未知' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sn" label="设备SN" min-width="150" />
                    <el-table-column prop="battery" label="电量" width="100">
                        <template #default="scope">
                            <span v-if="scope.row.battery || scope.row.batteryPercentage">
                                {{ scope.row.battery || scope.row.batteryPercentage }}%
                            </span>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template #default="scope">
                            <el-tag :type="scope.row.status == 1 ? 'success' : 'info'">
                                {{ scope.row.status == 1 ? '在线' : '离线' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-else-if="!loadingDevices" class="no-data-tip">
                <el-empty description="暂无绑定设备信息" :image-size="80" />
                <div style="margin-top: 10px; font-size: 12px; color: #909399;">
                    <p v-if="!warningData.deliveryId">提示：运单ID为空，无法查询设备</p>
                    <p v-else>提示：该运单可能没有绑定设备，或设备已被删除</p>
                </div>
            </div>
            <div v-else class="no-data-tip">
                <el-icon class="is-loading"><Loading /></el-icon>
                <span style="margin-left: 10px;">正在加载设备列表...</span>
            </div>
            
            <!-- 设备温度日志（重点显示温度数据） -->
            <div v-if="deviceLogs.length > 0" class="device-logs-section">
                <div class="section-header">
                    <h4>
                        <el-icon style="vertical-align: middle;"><DataLine /></el-icon>
                        设备温度记录
                        <el-tag type="info" size="small" style="margin-left: 10px;">{{ deviceLogs.length }}条</el-tag>
                    </h4>
                    <p class="section-desc">显示设备的温度历史记录，可以查看温度变化趋势</p>
                </div>
                <el-table 
                    :data="deviceLogs" 
                    border 
                    style="width: 100%" 
                    size="small"
                    max-height="350"
                    v-loading="loadingLogs"
                    :default-sort="{ prop: 'createTime', order: 'descending' }"
                >
                    <el-table-column label="记录时间" width="170" sortable>
                        <template #default="scope">
                            {{ scope.row.hourTime || scope.row.createTime || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="deviceTypeName" label="设备类型" width="110">
                        <template #default="scope">
                            <el-tag 
                                size="small" 
                                :type="scope.row.deviceType == 1 || scope.row.deviceType == 4 ? 'primary' : (scope.row.deviceType == 2 ? 'success' : 'warning')"
                            >
                                {{ scope.row.deviceTypeName }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deviceId" label="设备ID" width="140" />
                    <el-table-column label="温度（°C）" width="120" sortable>
                        <template #default="scope">
                            <span v-if="scope.row.deviceTemp" 
                                :style="{ 
                                    color: getTemperatureColor(parseFloat(scope.row.deviceTemp)),
                                    fontWeight: '600',
                                    fontSize: '14px'
                                }">
                                {{ scope.row.deviceTemp }}°C
                            </span>
                            <span v-else style="color: #909399;">--</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="heartRate" label="心率" width="80" />
                    <el-table-column label="步数" width="90">
                        <template #default="scope">
                            {{ scope.row.stepCount || scope.row.steps || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="latitude" label="纬度" width="100" />
                    <el-table-column prop="longitude" label="经度" width="100" />
                </el-table>
            </div>
            <div v-else-if="!loadingLogs" class="no-data-tip">
                <el-empty description="暂无设备日志记录" :image-size="80" />
            </div>
        </div>

        <!-- 停留预警/位置偏离预警 - 显示地图 -->
        <div v-else-if="isLocationWarning" class="warning-content">
            <el-descriptions title="位置预警详情" :column="2" border>
                <el-descriptions-item label="预警时间">{{ warningData.warningTime }}</el-descriptions-item>
                <el-descriptions-item label="预警类型">
                    <el-tag :type="getWarningTagType(warningData.warningType)">
                        {{ warningData.warningTypeDesc }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="预警经度">{{ warningData.longitude || '未知' }}</el-descriptions-item>
                <el-descriptions-item label="预警纬度">{{ warningData.latitude || '未知' }}</el-descriptions-item>
                <el-descriptions-item label="运单号">{{ warningData.deliveryNumber }}</el-descriptions-item>
                <el-descriptions-item label="车牌号">{{ warningData.licensePlate }}</el-descriptions-item>
                <el-descriptions-item label="司机姓名">{{ warningData.driverName }}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{ warningData.createByName }}</el-descriptions-item>
            </el-descriptions>
            
            <el-divider />
            
            <!-- 百度地图显示 -->
            <div class="map-container">
                <h4>预警位置地图</h4>
                <div id="warningMap" style="width: 100%; height: 400px;"></div>
            </div>
            
            <!-- 预警详情描述 -->
            <div v-if="warningData.warningDetail" class="warning-description">
                <h4>预警详情</h4>
                <p>{{ warningData.warningDetail }}</p>
            </div>
            
            <!-- ✅ 新增：绑定设备列表 -->
            <div v-if="deviceList.length > 0" class="device-list-section">
                <h4>绑定设备列表（{{ deviceList.length }}个）</h4>
                <el-table :data="deviceList" border style="width: 100%" size="small">
                    <el-table-column prop="deviceId" label="设备ID" width="150" />
                    <el-table-column prop="deviceTypeName" label="设备类型" width="120">
                        <template #default="scope">
                            <el-tag :type="scope.row.deviceType == 1 ? 'primary' : (scope.row.deviceType == 2 ? 'success' : 'warning')">
                                {{ scope.row.deviceTypeName || '未知' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sn" label="设备SN" min-width="150" />
                    <el-table-column prop="status" label="状态" width="100">
                        <template #default="scope">
                            <el-tag :type="scope.row.status == 1 ? 'success' : 'info'">
                                {{ scope.row.status == 1 ? '在线' : '离线' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            
            <!-- ✅ 新增：设备日志列表 -->
            <div v-if="deviceLogs.length > 0" class="device-logs-section">
                <h4>设备日志记录（{{ deviceLogs.length }}条）</h4>
                <el-table 
                    :data="deviceLogs" 
                    border 
                    style="width: 100%" 
                    size="small"
                    max-height="300"
                    v-loading="loadingLogs"
                >
                    <el-table-column label="时间" width="160">
                        <template #default="scope">
                            {{ scope.row.hourTime || scope.row.createTime || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="deviceTypeName" label="设备类型" width="110">
                        <template #default="scope">
                            <el-tag size="small" :type="scope.row.deviceType == 1 ? 'primary' : (scope.row.deviceType == 2 ? 'success' : 'warning')">
                                {{ scope.row.deviceTypeName }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deviceId" label="设备ID" width="130" />
                    <el-table-column prop="latitude" label="纬度" width="90" />
                    <el-table-column prop="longitude" label="经度" width="90" />
                    <el-table-column prop="deviceTemp" label="温度（°C）" width="100">
                        <template #default="scope">
                            <span v-if="scope.row.deviceTemp" :style="{ color: getTemperatureColor(parseFloat(scope.row.deviceTemp)) }">
                                {{ scope.row.deviceTemp }}°C
                            </span>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="heartRate" label="心率" width="80" />
                    <el-table-column label="步数" width="80">
                        <template #default="scope">
                            {{ scope.row.stepCount || scope.row.steps || '--' }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!-- 其他类型预警 -->
        <div v-else class="warning-content">
            <el-descriptions title="预警详情" :column="2" border>
                <el-descriptions-item label="预警时间">{{ warningData.warningTime }}</el-descriptions-item>
                <el-descriptions-item label="预警类型">
                    <el-tag :type="getWarningTagType(warningData.warningType)">
                        {{ warningData.warningTypeDesc }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="运单号">{{ warningData.deliveryNumber }}</el-descriptions-item>
                <el-descriptions-item label="车牌号">{{ warningData.licensePlate }}</el-descriptions-item>
                <el-descriptions-item label="司机姓名">{{ warningData.driverName }}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{ warningData.createByName }}</el-descriptions-item>
            </el-descriptions>
            
            <el-divider />
            
            <div v-if="warningData.warningDetail" class="warning-description">
                <h4>预警详情</h4>
                <p>{{ warningData.warningDetail }}</p>
            </div>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 轨迹定位对话框 -->
    <el-dialog
        v-model="trackDialogVisible"
        title="轨迹定位"
        width="1000px"
        :close-on-click-modal="false"
        @close="handleTrackDialogClose"
    >
        <div v-loading="trackLoading" style="min-height: 500px;">
            <!-- 状态提示 -->
            <div v-if="deliveryStatus === 1" class="status-tip">
                <el-alert
                    title="运单尚未开始运输"
                    description="当前运单状态为准备中，暂无轨迹数据"
                    type="info"
                    :closable="false"
                    show-icon
                />
            </div>
            
            <!-- 轨迹地图容器 -->
            <div v-else>
                <!-- 控制按钮 -->
                <div class="track-controls" style="margin-bottom: 15px;">
                    <el-button 
                        type="primary" 
                        :icon="VideoPlay" 
                        @click="handlePlayTrack"
                        :disabled="!trackMapShow || trackPath.length === 0"
                    >
                        {{ isPlaying ? '暂停' : '播放' }}
                    </el-button>
                    <el-button 
                        :icon="Refresh" 
                        @click="handleResetTrack"
                        :disabled="!trackMapShow || trackPath.length === 0"
                    >
                        重置
                    </el-button>
                    <el-tag type="info" style="margin-left: 10px;">
                        轨迹点数：{{ trackPath.length }}
                    </el-tag>
                    <el-tag type="info" style="margin-left: 10px;">
                        状态：{{ getDeliveryStatusText(deliveryStatus) }}
                    </el-tag>
                </div>
                
                <!-- 地图容器 -->
                <div 
                    id="trackMap" 
                    style="width: 100%; height: 500px; border: 1px solid #dcdfe6; border-radius: 4px;"
                ></div>
                
                <!-- 无轨迹数据提示 -->
                <div v-if="!trackMapShow && !trackLoading" class="no-track-tip">
                    <el-empty description="暂无轨迹数据" :image-size="100" />
                </div>

                <div v-if="yingyanMeta.entityName" class="track-meta-panel">
                    <el-descriptions :column="3" border>
                        <el-descriptions-item label="终端名称">{{ yingyanMeta.entityName }}</el-descriptions-item>
                        <el-descriptions-item label="查询开始">{{ formatTimestamp(yingyanMeta.startTime) }}</el-descriptions-item>
                        <el-descriptions-item label="查询结束">{{ formatTimestamp(yingyanMeta.endTime) }}</el-descriptions-item>
                    </el-descriptions>
                </div>

                <div v-if="latestPoint" class="latest-point-panel">
                    <h4>最新定位</h4>
                    <el-descriptions :column="3" border>
                        <el-descriptions-item label="定位时间">
                            {{ formatTimestamp(latestPoint.locTime) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="纬度">
                            {{ latestPoint.lat }}
                        </el-descriptions-item>
                        <el-descriptions-item label="经度">
                            {{ latestPoint.lng }}
                        </el-descriptions-item>
                        <el-descriptions-item label="速度(米/秒)">
                            {{ latestPoint.speed ?? '--' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="航向角">
                            {{ latestPoint.direction ?? '--' }}
                        </el-descriptions-item>
                    </el-descriptions>
                </div>

                <div v-if="segmentStats && segmentStats.length > 0" class="segment-stats">
                    <h4>轨迹查询分段（{{ segmentStats.length }}）</h4>
                    <el-table :data="segmentStats" border size="small" max-height="220">
                        <el-table-column label="段次" width="80" prop="index" />
                        <el-table-column label="开始时间" min-width="160">
                            <template #default="scope">
                                {{ formatTimestamp(scope.row.startTime) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="结束时间" min-width="160">
                            <template #default="scope">
                                {{ formatTimestamp(scope.row.endTime) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="轨迹点数" width="120" prop="trackCount" />
                        <el-table-column label="停留点数" width="120" prop="stayCount" />
                    </el-table>
                </div>

                <div v-if="stayPoints && stayPoints.length > 0" class="staypoint-section">
                    <h4>停留点分析（15分钟）</h4>
                    <el-table :data="stayPoints" border style="width: 100%;" size="small">
                        <el-table-column label="开始时间" min-width="160">
                            <template #default="scope">
                                {{ formatTimestamp(scope.row.startTime) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="结束时间" min-width="160">
                            <template #default="scope">
                                {{ formatTimestamp(scope.row.endTime) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="停留时长" width="120">
                            <template #default="scope">
                                {{ formatDuration(scope.row.duration) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="位置" min-width="160">
                            <template #default="scope">
                                {{ `${scope.row.latitude || '--'}, ${scope.row.longitude || '--'}` }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-else-if="trackMapShow && !trackLoading" class="no-data-tip">
                    暂无满足 15 分钟的停留点数据
                </div>
            </div>
        </div>
        
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="trackDialogVisible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, nextTick, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Location, VideoPlay, Refresh, InfoFilled, Connection, DataLine, Loading } from '@element-plus/icons-vue';
import { BMPGL } from '@/utils/loadBmap.js';
import { pageDeviceList, getCollarLogs, getEarTagLogs, getHostLogs, getYingyanTrack, waybillDetail } from '@/api/abroad.js';

const dialogVisible = ref(false);
const warningData = reactive({
    id: null,
    warningType: null,
    warningTypeDesc: '',
    warningTime: '',
    latitude: '',
    longitude: '',
    deviceId: '',
    deviceName: '',
    deviceTemp: '', // 修改：使用 deviceTemp
    temperature: null,
    warningDetail: '',
    deliveryNumber: '',
    licensePlate: '',
    driverName: '',
    createByName: '',
    deliveryId: null, // 新增：运单ID
    serverDeviceSn: '', // 新增：主机设备SN
});

const temperatureHistory = ref([]);
const deviceList = ref([]); // 新增：设备列表
const deviceLogs = ref([]); // 新增：设备日志列表
const loadingDevices = ref(false); // 新增：加载设备列表状态
const loadingLogs = ref(false); // 新增：加载日志状态
let mapInstance = null;
let markerInstance = null;

// 轨迹定位相关
const trackDialogVisible = ref(false);
const trackLoading = ref(false);
const trackMapShow = ref(false);
const trackPath = ref([]); // 轨迹点数组
const trackMapInstance = ref(null); // 轨迹地图实例
const trackPolyline = ref(null); // 轨迹线条
const trackStartMarker = ref(null); // 起点标记
const trackEndMarker = ref(null); // 终点标记
const trackPlayMarker = ref(null); // 播放位置标记
const deliveryStatus = ref(null); // 运输状态：1-准备中，2-运输中，3-已结束
const isPlaying = ref(false); // 是否正在播放
const playTimer = ref(null); // 播放定时器
const currentPlayIndex = ref(0); // 当前播放到的轨迹点索引
const trackBMapGL = ref(null); // 保存 BMapGL 实例，避免重复加载
const stayPoints = ref([]); // 停留点列表
const latestPoint = ref(null); // 最新轨迹点
const segmentStats = ref([]);
const yingyanMeta = reactive({
    entityName: '',
    startTime: null,
    endTime: null
});

// 计算属性：判断预警类型
const isTemperatureWarning = computed(() => {
    // 5-高温预警，6-低温预警
    const type = parseInt(warningData.warningType);
    const isTempWarning = type === 5 || type === 6;

    return isTempWarning;
});

const isLocationWarning = computed(() => {
    // 4-设备停留预警，7-位置偏离预警，8-延误预警
    const type = parseInt(warningData.warningType);
    const isLocWarning = type === 4 || type === 7 || type === 8;

    return isLocWarning;
});

const isStaticTrack = computed(() => {
    const status = Number(warningData.status || 0);
    return status >= 3;
});

const dialogTitle = computed(() => {
    return `${warningData.warningTypeDesc || '预警'}详情`;
});

// 打开对话框
const open = async (row) => {
    console.log('[WARNING-DETAIL] 打开预警详情对话框，原始数据:', row);

    // 填充数据
    Object.keys(warningData).forEach(key => {
        if (row[key] !== undefined) {
            warningData[key] = row[key];
        }
    });
    
    console.log('[WARNING-DETAIL] 填充后的 warningData:', warningData);
    console.log('[WARNING-DETAIL] deliveryId:', warningData.deliveryId);

    dialogVisible.value = true;
    
    // ✅ 查询运单绑定的设备列表
    if (warningData.deliveryId) {
        console.log('[WARNING-DETAIL] 开始加载设备列表，deliveryId:', warningData.deliveryId);
        await loadDeviceList(warningData.deliveryId);
    } else {
        console.warn('[WARNING-DETAIL] 警告：deliveryId 为空，无法加载设备列表');
        console.warn('[WARNING-DETAIL] 请检查预警详情 API 是否返回了 deliveryId 字段');
    }
    
    // 如果是位置相关预警，加载地图
    if (isLocationWarning.value && warningData.latitude && warningData.longitude) {
        await nextTick();
        initMap();
    }
    
    // 注意：温度预警的日志已经通过 loadDeviceList 自动加载，无需单独调用
    // 设备列表加载后会自动调用 loadAllDeviceLogs()
};

// ✅ 新增：加载运单绑定的设备列表
const loadDeviceList = async (deliveryId) => {
    if (!deliveryId) {
        console.warn('[WARNING-DETAIL] 运单ID为空，无法加载设备列表');
        return;
    }
    
    loadingDevices.value = true;
    try {
        console.log('[WARNING-DETAIL] 调用 pageDeviceList API，参数:', {
            deliveryId: deliveryId,
            pageNum: 1,
            pageSize: 100
        });

        const res = await pageDeviceList({
            deliveryId: deliveryId,
            pageNum: 1,
            pageSize: 100, // 一次性加载所有设备
        });
        
        console.log('[WARNING-DETAIL] pageDeviceList API 返回结果:', res);
        
        if (res.code === 200 && res.data) {
            // ✅ 修复：后端直接返回数组，不是嵌套在 list 或 rows 中
            let devices = [];
            if (Array.isArray(res.data)) {
                devices = res.data;
            } else {
                devices = res.data.list || res.data.rows || [];
            }
            
            console.log('[WARNING-DETAIL] 解析后的设备列表:', devices);
            console.log('[WARNING-DETAIL] 设备数量:', devices.length);
            
            deviceList.value = devices;

            if (devices.length === 0) {
                console.warn('[WARNING-DETAIL] 警告：设备列表为空');
                console.warn('[WARNING-DETAIL] 可能原因：');
                console.warn('[WARNING-DETAIL] 1. 该运单确实没有绑定设备');
                console.warn('[WARNING-DETAIL] 2. 设备被标记为已删除（is_delet=1）');
                console.warn('[WARNING-DETAIL] 3. 设备表中的 delivery_id 字段为空或不匹配');
                ElMessage.warning('该运单暂无绑定设备');
            } else {
                console.log('[WARNING-DETAIL] 成功加载设备列表，设备数量:', devices.length);
                // 自动加载所有设备的日志
                await loadAllDeviceLogs();
            }
        } else {
            console.error('[WARNING-DETAIL] API 返回错误:', res);
            ElMessage.warning('加载设备列表失败：' + (res.msg || '未知错误'));
        }
    } catch (error) {
        console.error('[WARNING-DETAIL] 加载设备列表异常:', error);
        ElMessage.error('加载设备列表失败：' + (error.message || '网络错误'));
    } finally {
        loadingDevices.value = false;
    }
};

// ✅ 新增：加载所有设备的日志数据
const loadAllDeviceLogs = async () => {
    if (deviceList.value.length === 0) {
        console.warn('[WARNING-DETAIL] 设备列表为空，无法加载日志');
        return;
    }
    
    loadingLogs.value = true;
    deviceLogs.value = []; // 清空之前的日志
    
    try {

        // 并行加载所有设备的日志
        const logPromises = deviceList.value.map(device => {

            return loadDeviceLogs(device.deviceId || device.sn, device.deviceType, warningData.deliveryId);
        });
        
        await Promise.all(logPromises);
        

    } catch (error) {
        console.error('[WARNING-DETAIL] 加载设备日志失败:', error);
        ElMessage.error('加载设备日志失败');
    } finally {
        loadingLogs.value = false;
    }
};

// ✅ 新增：加载单个设备的日志数据
const loadDeviceLogs = async (deviceId, deviceType, deliveryId) => {
    if (!deviceId) {
        console.warn('[WARNING-DETAIL] 设备ID为空，无法加载日志');
        return;
    }
    
    if (!deliveryId) {
        console.warn('[WARNING-DETAIL] 运单ID为空，无法加载日志');
        return;
    }
    
    // 确保 deviceType 是数字
    const typeNum = parseInt(deviceType);
    
    try {
        // 根据设备类型选择不同的API
        let apiFunc;
        let deviceTypeName;
        
        switch (typeNum) {
            case 1: // 智能主机
                apiFunc = getHostLogs;
                deviceTypeName = '智能主机';
                break;
            case 2: // 智能耳标
                apiFunc = getEarTagLogs;
                deviceTypeName = '智能耳标';
                break;
            case 3: // 智能项圈
            case 4: // 也可能是4
                apiFunc = getCollarLogs;
                deviceTypeName = '智能项圈';
                break;
            default:
                console.warn(`[WARNING-DETAIL] 未知的设备类型: ${typeNum} (原始值: ${deviceType})`);
                return;
        }
        
        // 调用对应的日志查询API（必须传入 deliveryId）
        const res = await apiFunc({
            deviceId: deviceId,
            deliveryId: deliveryId, // ✅ 新增：后端必需参数
            pageNum: 1,
            pageSize: 50, // 查询最近50条日志
            // 可选：添加时间范围过滤（预警时间前后1小时）
            // startTime: getStartTime(warningData.warningTime),
            // endTime: getEndTime(warningData.warningTime),
        });
        
        if (res.code === 200 && res.data) {
            // ✅ 修复：后端可能直接返回数组，也可能嵌套在 list/rows 中
            let logs = [];
            if (Array.isArray(res.data)) {
                logs = res.data;
            } else {
                logs = res.data.list || res.data.rows || [];
            }
            
            console.log('[WARNING-DETAIL] 原始日志数据:', logs);
            
            // 为每条日志添加设备信息
            const logsWithDeviceInfo = logs.map(log => ({
                ...log,
                deviceId: deviceId,
                deviceType: typeNum, // 使用转换后的数字类型
                deviceTypeName: deviceTypeName,
            }));
            
            deviceLogs.value.push(...logsWithDeviceInfo);
        } else {
            console.warn('[WARNING-DETAIL] 加载' + deviceTypeName + '日志失败:', res.msg);
        }
    } catch (error) {
        console.error('[WARNING-DETAIL] 加载设备(' + deviceId + ')日志失败:', error);
    }
};

// 初始化地图
const initMap = async () => {
    try {
        // 使用百度地图 API Key
        const BMapGL = await BMPGL('3AN3VahoqaXUs32U8luXD2Dwn86KK5B7');
        const lat = parseFloat(warningData.latitude);
        const lon = parseFloat(warningData.longitude);
        
        if (isNaN(lat) || isNaN(lon)) {
            ElMessage.warning('经纬度数据无效');
            return;
        }
        
        // 创建地图实例（使用 BMapGL）
        mapInstance = new BMapGL.Map('warningMap');
        const point = new BMapGL.Point(lon, lat);
        mapInstance.centerAndZoom(point, 15);
        mapInstance.enableScrollWheelZoom(true);
        
        // 添加标注
        markerInstance = new BMapGL.Marker(point);
        mapInstance.addOverlay(markerInstance);
        
        // 添加信息窗口
        const warningTypeText = warningData.warningTypeDesc || '预警位置';
        const infoWindow = new BMapGL.InfoWindow(
            '<div style="padding: 10px;">' +
                '<p style="margin: 0; font-weight: bold; color: #f56c6c;">' + warningTypeText + '</p>' +
                '<p style="margin: 5px 0 0 0;">时间: ' + warningData.warningTime + '</p>' +
                '<p style="margin: 5px 0 0 0;">经度: ' + lon + '</p>' +
                '<p style="margin: 5px 0 0 0;">纬度: ' + lat + '</p>' +
            '</div>',
            { width: 250, height: 120 }
        );
        markerInstance.addEventListener('click', function () {
            mapInstance.openInfoWindow(infoWindow, point);
        });
        
        // 默认打开信息窗口
        mapInstance.openInfoWindow(infoWindow, point);
        

    } catch (error) {
        console.error('[WARNING-DETAIL] 地图初始化失败:', error);
        ElMessage.error('地图加载失败');
    }
};

// 根据温度值返回颜色
const getTemperatureColor = (temp) => {
    if (temp == null) return '#909399';
    if (temp >= 35) return '#f56c6c'; // 高温-红色
    if (temp <= 5) return '#409eff'; // 低温-蓝色
    return '#67c23a'; // 正常-绿色
};

// 根据预警类型返回标签类型
const getWarningTagType = (type) => {
    const typeNum = parseInt(type);
    switch (typeNum) {
        case 2: return 'danger';   // 数量盘单预警
        case 3: return 'warning';  // 运输距离预警
        case 4: return 'info';     // 设备停留预警
        case 5: return 'danger';   // 高温预警
        case 6: return 'info';     // 低温预警
        case 7: return 'warning';  // 位置偏离预警
        case 8: return 'danger';   // 延误预警
        case 9: return 'success';  // 超前到达预警
        default: return 'info';
    }
};

const normalizeTimestamp = (value) => {
    if (value === null || value === undefined || value === '') {
        return null;
    }
    const num = Number(value);
    if (Number.isNaN(num)) {
        return null;
    }
    return num < 1e12 ? num * 1000 : num;
};

const formatTimestamp = (value) => {
    const ms = normalizeTimestamp(value);
    if (!ms) return '--';
    const date = new Date(ms);
    if (Number.isNaN(date.getTime())) {
        return '--';
    }
    const pad = (num) => `${num}`.padStart(2, '0');
    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
};

const formatDuration = (seconds) => {
    if (seconds === null || seconds === undefined) {
        return '--';
    }
    const total = Number(seconds);
    if (Number.isNaN(total) || total <= 0) {
        return '--';
    }
    const hours = Math.floor(total / 3600);
    const minutes = Math.floor((total % 3600) / 60);
    const sec = Math.floor(total % 60);
    const parts = [];
    if (hours > 0) {
        parts.push(`${hours}小时`);
    }
    if (minutes > 0) {
        parts.push(`${minutes}分钟`);
    }
    if (sec > 0 && hours === 0) {
        parts.push(`${sec}秒`);
    }
    return parts.join('') || `${sec}秒`;
};

function parseLatestPoint(point) {
    if (!point) {
        return null;
    }
    const lng = parseFloat(point.longitude ?? point.lng ?? 0);
    const lat = parseFloat(point.latitude ?? point.lat ?? 0);
    if (Number.isNaN(lng) || Number.isNaN(lat) || (lng === 0 && lat === 0)) {
        return null;
    }

    return {
        lng,
        lat,
        locTime: point.locTime ?? point.loc_time ?? null,
        speed: point.speed ?? null,
        direction: point.direction ?? null,
    };
}

// 关闭对话框
const handleClose = () => {
    // 清理地图实例
    if (mapInstance) {
        mapInstance.clearOverlays();
        mapInstance = null;
        markerInstance = null;
    }
    
    // 清空温度历史数据
    temperatureHistory.value = [];
    
    // ✅ 清空设备列表和日志数据
    deviceList.value = [];
    deviceLogs.value = [];
    loadingDevices.value = false;
    loadingLogs.value = false;
    
    // 重置数据
    Object.keys(warningData).forEach(key => {
        if (typeof warningData[key] === 'number') {
            warningData[key] = null;
        } else {
            warningData[key] = '';
        }
    });
};

// 轨迹定位按钮点击
const handleTrackClick = async () => {
    if (!warningData.deliveryId) {
        ElMessage.warning('运单ID不存在，无法查看轨迹');
        return;
    }
    console.info('[TRACK] 开始轨迹定位流程', {
        deliveryId: warningData.deliveryId,
        status: warningData.status,
        estimatedDepartureTime: warningData.estimatedDepartureTime,
    });
    
    trackDialogVisible.value = true;
    trackLoading.value = true;
    trackMapShow.value = false;
    trackPath.value = [];
    latestPoint.value = null;
    isPlaying.value = false;
    currentPlayIndex.value = 0;
    
    // 获取运单运输状态
    await getDeliveryStatus();
    
    // 如果状态为准备中，直接返回
    if (deliveryStatus.value === 1) {
        trackLoading.value = false;
        return;
    }
    
    await loadYingyanTrack();
    
    if (trackPath.value.length === 0) {
        trackLoading.value = false;
        return;
    }
    
    // 初始化地图
    await nextTick();
    await initTrackMap();
};

// 获取运送清单运输状态
const getDeliveryStatus = async () => {
    // 先检查 warningData 中是否包含 status
    if (warningData.status !== undefined && warningData.status !== null) {
        // 注意：这里的 status 可能是业务状态（1-7），需要判断是否是运输状态（1-3）
        // 如果 status 在 1-3 范围内，可能是运输状态
        const status = parseInt(warningData.status);
        if (status >= 1 && status <= 3) {
            deliveryStatus.value = status;
            return;
        }
    }
    
    // 如果没有，通过 API 获取运单详情
    try {
        const res = await waybillDetail(warningData.deliveryId);
        if (res.code === 200 && res.data) {
            const delivery = res.data.delivery || res.data;
            // 注意：Delivery 实体中的 status 是业务状态（1-7），不是运输状态
            // 需要查看是否有专门的运输状态字段，或者根据业务状态推断
            // 这里先假设 status 字段就是运输状态，如果不对需要调整
            deliveryStatus.value = delivery.status || null;
        }
    } catch (error) {
        console.error('[TRACK] 获取运单状态失败:', error);
        // 默认设置为运输中，允许查看轨迹
        deliveryStatus.value = 2;
    }
};

// 加载百度鹰眼轨迹与停留点
const loadYingyanTrack = async () => {
    stayPoints.value = [];
    trackPath.value = [];
    latestPoint.value = null;
    segmentStats.value = [];
    trackMapShow.value = false;
    yingyanMeta.entityName = '';
    yingyanMeta.startTime = null;
    yingyanMeta.endTime = null;

    if (!warningData.deliveryId) {
        ElMessage.warning('运单ID缺失，无法查询轨迹');
        return;
    }

    try {
        const res = await getYingyanTrack({ deliveryId: warningData.deliveryId });
        console.info('[TRACK] 后端轨迹接口响应', res);
        if (res.code === 200 && res.data) {
            segmentStats.value = Array.isArray(res.data.segmentStats) ? res.data.segmentStats : [];
            console.info('[TRACK] 分段统计', segmentStats.value);
            const rawPoints = Array.isArray(res.data.trackPoints) ? res.data.trackPoints : [];
            trackPath.value = rawPoints
                .map(item => {
                    const lng = parseFloat(item.longitude ?? item.lng ?? 0);
                    const lat = parseFloat(item.latitude ?? item.lat ?? 0);
                    if (Number.isNaN(lng) || Number.isNaN(lat) || lng === 0 || lat === 0) {
                        return null;
                    }
                    return {
                        lng,
                        lat,
                        locTime: item.locTime
                    };
                })
                .filter(Boolean);

            stayPoints.value = Array.isArray(res.data.stayPoints) ? res.data.stayPoints : [];
            yingyanMeta.entityName = res.data.entityName || '';
            yingyanMeta.startTime = res.data.startTime || null;
            yingyanMeta.endTime = res.data.endTime || null;
            latestPoint.value = parseLatestPoint(res.data.latestPoint);
            console.info('[TRACK] 轨迹点数量', trackPath.value.length);

            if (trackPath.value.length > 0) {
                trackMapShow.value = true;
            } else if (latestPoint.value) {
                trackPath.value.push({
                    lng: latestPoint.value.lng,
                    lat: latestPoint.value.lat,
                    locTime: latestPoint.value.locTime || null,
                });
                trackMapShow.value = true;
            } else {
                ElMessage.warning('暂无有效轨迹点');
            }
        } else {
            ElMessage.warning(res.msg || '暂无轨迹数据');
        }
    } catch (error) {
        console.error('[TRACK] 加载百度鹰眼轨迹失败:', error);
        ElMessage.error('加载轨迹数据失败');
    }
};

// 初始化轨迹地图
const initTrackMap = async () => {
    if (trackPath.value.length === 0) {
        return;
    }
    
    try {
        const BMapGL = await BMPGL('3AN3VahoqaXUs32U8luXD2Dwn86KK5B7');
        trackBMapGL.value = BMapGL; // 保存 BMapGL 实例
        
        // 创建地图实例
        trackMapInstance.value = new BMapGL.Map('trackMap');
        
        // 计算地图中心点和缩放级别
        const bounds = calculateBounds(trackPath.value);
        const centerPoint = new BMapGL.Point(bounds.center.lng, bounds.center.lat);
        trackMapInstance.value.centerAndZoom(centerPoint, bounds.zoom);
        trackMapInstance.value.enableScrollWheelZoom(true);
        
        // 根据状态绘制轨迹
        if (deliveryStatus.value === 3) {
            // 已结束：静态轨迹
            drawStaticTrack(BMapGL);
        } else if (deliveryStatus.value === 2) {
            // 运输中：动态轨迹（先绘制已有部分）
            drawDynamicTrack(BMapGL);
        }
        
        trackLoading.value = false;
    } catch (error) {
        console.error('[TRACK] 地图初始化失败:', error);
        ElMessage.error('地图加载失败');
        trackLoading.value = false;
    }
};

// 计算轨迹边界
const calculateBounds = (points) => {
    if (points.length === 0) {
        return { center: { lng: 116.404, lat: 39.915 }, zoom: 15 };
    }
    
    let minLng = points[0].lng;
    let maxLng = points[0].lng;
    let minLat = points[0].lat;
    let maxLat = points[0].lat;
    
    points.forEach(point => {
        minLng = Math.min(minLng, point.lng);
        maxLng = Math.max(maxLng, point.lng);
        minLat = Math.min(minLat, point.lat);
        maxLat = Math.max(maxLat, point.lat);
    });
    
    const center = {
        lng: (minLng + maxLng) / 2,
        lat: (minLat + maxLat) / 2
    };
    
    // 计算缩放级别（简单估算）
    const lngDiff = maxLng - minLng;
    const latDiff = maxLat - minLat;
    const maxDiff = Math.max(lngDiff, latDiff);
    let zoom = 15;
    if (maxDiff > 0.1) zoom = 10;
    else if (maxDiff > 0.05) zoom = 11;
    else if (maxDiff > 0.02) zoom = 12;
    else if (maxDiff > 0.01) zoom = 13;
    else if (maxDiff > 0.005) zoom = 14;
    
    return { center, zoom };
};

// 绘制静态轨迹（已结束）
const drawStaticTrack = (BMapGL) => {
    if (!trackMapInstance.value || trackPath.value.length === 0) {
        return;
    }
    
    // 清除之前的覆盖物
    trackMapInstance.value.clearOverlays();
    
    // 绘制轨迹线
    const polyline = new BMapGL.Polyline(
        trackPath.value.map(p => new BMapGL.Point(p.lng, p.lat)),
        {
            strokeColor: '#3388ff',
            strokeWeight: 4,
            strokeOpacity: 0.8
        }
    );
    trackMapInstance.value.addOverlay(polyline);
    trackPolyline.value = polyline;
    
    // 添加起点标记
    if (trackPath.value.length > 0) {
        const startPoint = new BMapGL.Point(trackPath.value[0].lng, trackPath.value[0].lat);
        // 使用简单的圆形标记作为起点（绿色）
        const startMarker = new BMapGL.Marker(startPoint, {
            icon: new BMapGL.Icon(
                'https://api.map.baidu.com/images/marker_red.png',
                new BMapGL.Size(32, 32),
                { anchor: new BMapGL.Size(16, 32) }
            )
        });
        trackMapInstance.value.addOverlay(startMarker);
        trackStartMarker.value = startMarker;
        
        // 起点信息窗口
        const startInfoWindow = new BMapGL.InfoWindow(
            '<div style="padding: 5px;"><strong style="color: #67c23a;">起点</strong></div>',
            { width: 80, height: 30 }
        );
        startMarker.addEventListener('click', () => {
            trackMapInstance.value.openInfoWindow(startInfoWindow, startPoint);
        });
    }
    
    // 添加终点标记
    if (trackPath.value.length > 1) {
        const endPoint = new BMapGL.Point(
            trackPath.value[trackPath.value.length - 1].lng,
            trackPath.value[trackPath.value.length - 1].lat
        );
        // 使用红色标记作为终点
        const endMarker = new BMapGL.Marker(endPoint, {
            icon: new BMapGL.Icon(
                'https://api.map.baidu.com/images/marker_red.png',
                new BMapGL.Size(32, 32),
                { anchor: new BMapGL.Size(16, 32) }
            )
        });
        trackMapInstance.value.addOverlay(endMarker);
        trackEndMarker.value = endMarker;
        
        // 终点信息窗口
        const endInfoWindow = new BMapGL.InfoWindow(
            '<div style="padding: 5px;"><strong style="color: #f56c6c;">终点</strong></div>',
            { width: 80, height: 30 }
        );
        endMarker.addEventListener('click', () => {
            trackMapInstance.value.openInfoWindow(endInfoWindow, endPoint);
        });
    }
};

// 绘制动态轨迹（运输中）
const drawDynamicTrack = (BMapGL) => {
    if (!trackMapInstance.value || trackPath.value.length === 0) {
        return;
    }
    
    // 清除之前的覆盖物
    trackMapInstance.value.clearOverlays();
    
    // 绘制已有轨迹线
    const polyline = new BMapGL.Polyline(
        trackPath.value.map(p => new BMapGL.Point(p.lng, p.lat)),
        {
            strokeColor: '#3388ff',
            strokeWeight: 4,
            strokeOpacity: 0.6
        }
    );
    trackMapInstance.value.addOverlay(polyline);
    trackPolyline.value = polyline;
    
    // 添加起点标记
    if (trackPath.value.length > 0) {
        const startPoint = new BMapGL.Point(trackPath.value[0].lng, trackPath.value[0].lat);
        const startMarker = new BMapGL.Marker(startPoint, {
            icon: new BMapGL.Icon(
                'https://api.map.baidu.com/images/marker_red.png',
                new BMapGL.Size(32, 32),
                { anchor: new BMapGL.Size(16, 32) }
            )
        });
        trackMapInstance.value.addOverlay(startMarker);
        trackStartMarker.value = startMarker;
    }
    
    // 添加当前位置标记（用于动画）
    const currentPoint = new BMapGL.Point(trackPath.value[0].lng, trackPath.value[0].lat);
    const playMarker = new BMapGL.Marker(currentPoint, {
        icon: new BMapGL.Icon(
            'https://api.map.baidu.com/images/marker_red.png',
            new BMapGL.Size(20, 20),
            { anchor: new BMapGL.Size(10, 20) }
        )
    });
    trackMapInstance.value.addOverlay(playMarker);
    trackPlayMarker.value = playMarker;
    currentPlayIndex.value = 0;
};

// 播放轨迹动画
const handlePlayTrack = () => {
    if (trackPath.value.length === 0 || !trackMapInstance.value) {
        return;
    }
    
    if (isPlaying.value) {
        // 暂停
        if (playTimer.value) {
            clearInterval(playTimer.value);
            playTimer.value = null;
        }
        isPlaying.value = false;
    } else {
        // 播放
        if (currentPlayIndex.value >= trackPath.value.length - 1) {
            // 如果已经播放完，重新开始
            currentPlayIndex.value = 0;
        }
        
        isPlaying.value = true;
        playTimer.value = setInterval(() => {
            if (currentPlayIndex.value < trackPath.value.length - 1) {
                currentPlayIndex.value++;
                updatePlayMarker();
            } else {
                // 播放完成
                if (playTimer.value) {
                    clearInterval(playTimer.value);
                    playTimer.value = null;
                }
                isPlaying.value = false;
            }
        }, 200); // 每200ms移动一次
    }
};

// 更新播放位置标记
const updatePlayMarker = () => {
    if (!trackMapInstance.value || !trackPlayMarker.value || !trackBMapGL.value || currentPlayIndex.value >= trackPath.value.length) {
        return;
    }
    
    const point = trackPath.value[currentPlayIndex.value];
    const bdPoint = new trackBMapGL.value.Point(point.lng, point.lat);
    
    trackPlayMarker.value.setPosition(bdPoint);
    
    // 地图跟随
    trackMapInstance.value.panTo(bdPoint);
};

// 重置轨迹动画
const handleResetTrack = () => {
    if (playTimer.value) {
        clearInterval(playTimer.value);
        playTimer.value = null;
    }
    isPlaying.value = false;
    currentPlayIndex.value = 0;
    
    if (trackPlayMarker.value && trackPath.value.length > 0 && trackMapInstance.value && trackBMapGL.value) {
        const point = trackPath.value[0];
        const bdPoint = new trackBMapGL.value.Point(point.lng, point.lat);
        trackPlayMarker.value.setPosition(bdPoint);
        trackMapInstance.value.panTo(bdPoint);
    }
};

// 获取运输状态文本
const getDeliveryStatusText = (status) => {
    const statusMap = {
        1: '准备中',
        2: '运输中',
        3: '已结束'
    };
    return statusMap[status] || '未知';
};

// 关闭轨迹对话框
const handleTrackDialogClose = () => {
    // 清理定时器
    if (playTimer.value) {
        clearInterval(playTimer.value);
        playTimer.value = null;
    }
    
    // 清理地图实例
    if (trackMapInstance.value) {
        trackMapInstance.value.clearOverlays();
        trackMapInstance.value = null;
    }
    
    trackPolyline.value = null;
    trackStartMarker.value = null;
    trackEndMarker.value = null;
    trackPlayMarker.value = null;
    trackBMapGL.value = null;
    isPlaying.value = false;
    currentPlayIndex.value = 0;
    trackPath.value = [];
    trackMapShow.value = false;
    stayPoints.value = [];
    yingyanMeta.entityName = '';
    yingyanMeta.startTime = null;
    yingyanMeta.endTime = null;
};

// 组件卸载时清理
onUnmounted(() => {
    if (playTimer.value) {
        clearInterval(playTimer.value);
    }
    if (trackMapInstance.value) {
        trackMapInstance.value.clearOverlays();
    }
});

// 导出方法
defineExpose({
    open
});
</script>

<style scoped lang="less">
.warning-content {
    padding: 10px 0;
}

// 温度预警专用样式
.temperature-warning {
    .warning-description {
        margin-top: 20px;
    }
    
    .section-header {
        margin-bottom: 15px;
        
        h4 {
            margin: 0 0 8px 0;
            color: #303133;
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
        }
        
        .section-desc {
            margin: 0;
            font-size: 13px;
            color: #909399;
        }
    }
    
    .no-data-tip {
        padding: 40px 0;
        text-align: center;
    }
}

.warning-description {
    margin-top: 20px;
    
    h4 {
        margin: 0 0 10px 0;
        color: #303133;
        font-size: 14px;
    }
    
    p {
        margin: 0;
        padding: 10px;
        background-color: #f5f7fa;
        border-left: 3px solid #409eff;
        border-radius: 4px;
        line-height: 1.6;
        color: #606266;
    }
}

.track-meta-panel {
    margin-top: 20px;
}

.latest-point-panel {
    margin-top: 20px;

    h4 {
        margin: 0 0 10px 0;
        font-size: 15px;
        font-weight: 600;
        color: #303133;
    }
}

.segment-stats {
    margin-top: 20px;

    h4 {
        margin: 0 0 10px 0;
        font-size: 15px;
        font-weight: 600;
        color: #303133;
    }
}

.staypoint-section {
    margin-top: 20px;

    h4 {
        margin: 0 0 10px 0;
        font-size: 15px;
        color: #303133;
        font-weight: 600;
    }
}

.map-container {
    margin-top: 20px;
    
    h4 {
        margin: 0 0 10px 0;
        color: #303133;
        font-size: 14px;
    }
}

.temperature-chart {
    margin-top: 20px;
    
    h4 {
        margin: 0 0 10px 0;
        color: #303133;
        font-size: 14px;
    }
}

.device-list-section {
    margin-top: 20px;
    
    h4 {
        margin: 0 0 10px 0;
        color: #303133;
        font-size: 14px;
        font-weight: 600;
    }
}

.device-logs-section {
    margin-top: 20px;
    
    h4 {
        margin: 0 0 10px 0;
        color: #303133;
        font-size: 14px;
        font-weight: 600;
    }
    
    :deep(.el-table) {
        font-size: 12px;
    }
}

// 轨迹对话框样式
.status-tip {
    margin-bottom: 20px;
}

.track-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.no-track-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
}
</style>