<template>
|
<div class="task-mileage-detail">
|
<el-card class="box-card" shadow="hover">
|
<div slot="header" class="clearfix">
|
<span class="card-title">
|
<i class="el-icon-location-information"></i>
|
任务GPS里程统计
|
</span>
|
<el-button
|
style="float: right; padding: 3px 10px"
|
type="text"
|
size="small"
|
@click="refreshData"
|
:loading="loading"
|
>
|
<i class="el-icon-refresh"></i> 刷新
|
</el-button>
|
</div>
|
|
<!-- 统计概览 -->
|
<div class="mileage-summary">
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<div class="stat-item total-mileage">
|
<div class="stat-label">总里程</div>
|
<div class="stat-value">{{ totalMileage }} <span class="unit">km</span></div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="stat-item segment-count">
|
<div class="stat-label">分段数</div>
|
<div class="stat-value">{{ segmentCount }} <span class="unit">段</span></div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="stat-item gps-count">
|
<div class="stat-label">GPS点数</div>
|
<div class="stat-value">{{ totalGpsPoints }} <span class="unit">个</span></div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 分段明细 -->
|
<div class="segment-detail" v-if="segmentList.length > 0">
|
<el-divider content-position="left">
|
<i class="el-icon-tickets"></i> 里程分段明细
|
</el-divider>
|
|
<el-table
|
:data="segmentList"
|
size="small"
|
:max-height="400"
|
stripe
|
border
|
>
|
<el-table-column type="index" label="序号" width="50" align="center" />
|
<el-table-column label="时间段开始" prop="segmentStartTime" width="160" align="center">
|
<template slot-scope="scope">
|
{{ parseTime(scope.row.segmentStartTime, '{h}:{i}:{s}') }}
|
</template>
|
</el-table-column>
|
<el-table-column label="时间段结束" prop="segmentEndTime" width="160" align="center">
|
<template slot-scope="scope">
|
{{ parseTime(scope.row.segmentEndTime, '{h}:{i}:{s}') }}
|
</template>
|
</el-table-column>
|
<el-table-column label="里程(km)" prop="segmentDistance" width="100" align="center">
|
<template slot-scope="scope">
|
<el-tag type="success" size="mini">{{ scope.row.segmentDistance }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="GPS点数" prop="gpsPointCount" width="90" align="center" />
|
<el-table-column label="起点坐标" align="center" width="180">
|
<template slot-scope="scope">
|
<span class="coordinate">
|
{{ scope.row.startLongitude }}, {{ scope.row.startLatitude }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="终点坐标" align="center" width="180">
|
<template slot-scope="scope">
|
<span class="coordinate">
|
{{ scope.row.endLongitude }}, {{ scope.row.endLatitude }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="计算方式" prop="calculateMethod" width="100" align="center">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.calculateMethod === 'tianditu' ? 'warning' : 'info'" size="mini">
|
{{ scope.row.calculateMethod === 'tianditu' ? '天地图' : 'Haversine' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<!-- 无数据提示 -->
|
<el-empty
|
v-else-if="!loading"
|
description="暂无GPS里程数据"
|
:image-size="80"
|
></el-empty>
|
|
<!-- 加载中 -->
|
<div v-if="loading" class="loading-container">
|
<el-skeleton :rows="5" animated />
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { getSegmentsByTaskId, getTaskTotalMileage } from '@/api/system/gpsSegment'
|
|
export default {
|
name: 'TaskMileageDetail',
|
props: {
|
taskId: {
|
type: [Number, String],
|
required: true
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
totalMileage: '0.00',
|
segmentList: [],
|
segmentCount: 0,
|
totalGpsPoints: 0
|
}
|
},
|
watch: {
|
taskId: {
|
handler(newVal) {
|
if (newVal) {
|
this.loadData()
|
}
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
/** 加载数据 */
|
loadData() {
|
if (!this.taskId) {
|
return
|
}
|
|
this.loading = true
|
|
// 并行请求总里程和分段明细
|
Promise.all([
|
getTaskTotalMileage(this.taskId),
|
getSegmentsByTaskId(this.taskId)
|
]).then(([totalRes, segmentRes]) => {
|
// 处理总里程
|
if (totalRes.code === 200) {
|
this.totalMileage = (totalRes.data || 0).toFixed(2)
|
}
|
|
// 处理分段明细
|
if (segmentRes.code === 200 && segmentRes.data) {
|
this.segmentList = segmentRes.data
|
this.segmentCount = this.segmentList.length
|
|
// 计算总GPS点数
|
this.totalGpsPoints = this.segmentList.reduce((sum, item) => {
|
return sum + (item.gpsPointCount || 0)
|
}, 0)
|
}
|
}).catch(error => {
|
console.error('加载任务GPS里程数据失败', error)
|
this.$message.error('加载GPS里程数据失败')
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
|
/** 刷新数据 */
|
refreshData() {
|
this.loadData()
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.task-mileage-detail {
|
margin-top: 15px;
|
|
.card-title {
|
font-size: 16px;
|
font-weight: 500;
|
color: #303133;
|
|
i {
|
margin-right: 5px;
|
color: #409EFF;
|
}
|
}
|
|
.mileage-summary {
|
margin-bottom: 20px;
|
|
.stat-item {
|
padding: 20px;
|
text-align: center;
|
border-radius: 4px;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
color: white;
|
|
&.total-mileage {
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
}
|
|
&.segment-count {
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
}
|
|
&.gps-count {
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
}
|
|
.stat-label {
|
font-size: 14px;
|
opacity: 0.9;
|
margin-bottom: 8px;
|
}
|
|
.stat-value {
|
font-size: 28px;
|
font-weight: bold;
|
|
.unit {
|
font-size: 14px;
|
font-weight: normal;
|
margin-left: 4px;
|
}
|
}
|
}
|
}
|
|
.segment-detail {
|
margin-top: 20px;
|
|
.coordinate {
|
font-family: 'Courier New', monospace;
|
font-size: 12px;
|
color: #606266;
|
}
|
}
|
|
.loading-container {
|
padding: 20px;
|
}
|
}
|
</style>
|
