RunForge-Frontend/src/pages/admin/lepaoRecords/recordDetail.vue

<template>
    <div class="store-page">
        <Breadcrumb />
        <a-card title="记录详情">
            <a-skeleton animation :loading="loading">
                <StoreRecordSkeleton />
                <template #content>
                    <a-descriptions
                        :data="info"
                        :column="isMobile ? 1 : 2"
                        class="record-descriptions"
                    />
                    <MapContainer v-if="showMap" :point_list="data.result.point_list" :log_list="data.point_data" :pathData="data.data" threeD
                        style="margin-top: 10px;" />
                </template>
            </a-skeleton>
        </a-card>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { adminGetRecordDetail } from '@/api/lepao'
import { Notification } from '@arco-design/web-vue'
import { useRoute } from 'vue-router'
import MapContainer from '@/components/Map/MapContainer.vue'
import StoreRecordSkeleton from '@/components/skeleton/StoreRecordSkeleton.vue'

const route = useRoute()
const uuidLike = /^[0-9a-fA-F-]{16,}$/

const loading = ref(false)
const showMap = ref(false)
const data = ref({})
const info = ref([])
const isMobile = ref(false)
let mobileResizeHandler = null

const GetRecordDetail = async (routeId) => {
    try {
        loading.value = true
        showMap.value = false
        const raw = decodeURIComponent(String(routeId || ''))
        const payload = uuidLike.test(raw)
            ? { public_id: raw }
            : { id: raw }
        const res = await adminGetRecordDetail(payload)
        if (!res || res.code !== 0)
            return Notification.error({
                title: '获取路径数据失败！',
                content: res?.msg ?? '请稍后再试'
            })

        data.value = res.data
        showMap.value = true

        info.value = [
            { label: '账号名称', value: res.data.name },
            { label: '乐跑账号', value: res.data.lepao_account },
            { label: '乐跑类型', value: res.data.run_mode === 'manual' ? '手动乐跑' : '自动乐跑' },
            { label: '跑区名称', value: res.data.result.pass_tit },
            { label: '路线ID', value: res.data.path_id },
            { label: '记录时间', value: stramptoTime(res.data.time) },
            { label: '开始时间', value: stramptoTime(res.data.result.start_time * 1000) },
            { label: '乐跑状态', value: res.data.result.record_failed_reason },
            { label: '打卡点数量', value: res.data.result.point_list.length },
            { label: '跑步距离', value: res.data.result.distance + ' Km' },
            { label: '跑步时长', value: formatSecondsToMinSec(res.data.result.time) },
            { label: '平均配速', value: calculatePace(res.data.result.time, res.data.result.distance) }
        ]
    } catch (error) {
        Notification.error({
            title: '获取路径数据失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    mobileResizeHandler = () => {
        isMobile.value = window.innerWidth <= 768
    }
    mobileResizeHandler()
    window.addEventListener('resize', mobileResizeHandler)
    GetRecordDetail(route.params.id)
})

onUnmounted(() => {
    if (mobileResizeHandler) window.removeEventListener('resize', mobileResizeHandler)
})

const stramptoTime = (time) => {
    return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

function calculatePace(seconds, kilometers) {
    const paceInSeconds = seconds / kilometers;
    const minutes = Math.floor(paceInSeconds / 60);
    const remainingSeconds = Math.round(paceInSeconds % 60);

    return `${minutes}'${remainingSeconds.toString().padStart(2, '0')}''`;
}

function formatSecondsToMinSec(totalSeconds) {
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;

    return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
}

</script>

<style scoped lang="less">
.record-descriptions {
    margin-top: 8px;
}

@media (max-width: 768px) {
    .record-descriptions :deep(.arco-descriptions-item-label) {
        white-space: nowrap;
        width: 88px !important;
    }

    .record-descriptions :deep(.arco-descriptions-item-value) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>