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

<template>
    <div class="container">
        <Breadcrumb :items="['乐跑记录', '记录详情']" />
        <a-card title="记录详情">
            <a-skeleton animation :loading="loading">
                <a-space direction="vertical" :style="{ width: '100%' }" size="large">
                    <a-skeleton-shape size="large" />
                    <a-skeleton-line :rows="5" />
                </a-space>
            </a-skeleton>
            <a-descriptions :data="info" :column="2" />
            <MapContainer v-if="showMap" :point_list="data.result.point_list" :pathData="data.data" threeD
                style="margin-top: 10px;" />
        </a-card>
    </div>
</template>

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

const route = useRoute()

const loading = ref(false)
const showMap = ref(false)
const data = ref({})
const info = ref([])

const getRecordDetail = async (id) => {
    try {
        loading.value = true
        showMap.value = false
        const res = await GetRecordDetail({ id })
        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.result.pass_tit },
            { label: '记录时间', value: stramptoTime(res.data.time) },
            { label: '开始时间', value: stramptoTime(res.data.result.start_time * 1000) },
            { 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(() => {
    getRecordDetail(route.params.id)
})

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">
.container {
    padding: 0 20px 20px 20px;
}
</style>