修复轨迹bug

src/views/trackManager/mapTrack.vue

@@ -15,16 +15,18 @@
     <!-- 异常停留 -->
     <div class="abnormal">
       <div>
-        <span class="abnormal-title">共停留{{ parkArray.length }}次,共停留{{ totalMin }}分钟</span>
+        <span class="abnormal-title">共停留{{ parkArray.length }}次,共停留{{ formatTime(totalMin) }}</span>
         <el-button size="small" type="primary" @click="showTable = !showTable">查看停留明细</el-button>
       </div>
-      <el-table :data="parkArray" style="width: 100%" border stripe size="small" v-if="showTable">
+      <el-table max-height="300px" :data="parkArray" style="width: 100%" border stripe size="small" v-if="showTable">
         <el-table-column prop="parkBte" label="停留开始" width="180">
           <template #default="scope">
             {{ moment(Number(scope.row.parkBte)).format('yyyy-MM-DD hh:mm:ss') }}
           </template>
         </el-table-column>
-        <el-table-column prop="parkMins" label="停留时长（分钟）" width="180"></el-table-column>
+        <el-table-column prop="parkMins" label="停留时长（分钟）" width="180">
+          <template #default="scope"> {{ formatTime(scope.row.parkMins) }} </template>
+        </el-table-column>
         <el-table-column prop="parkAdr" label="停留地址"></el-table-column>
       </el-table>
     </div>
@@ -71,6 +73,13 @@ export default defineComponent({
       })
     }
 
+    // 分钟转为小时分钟格式
+    const formatTime = time => {
+      const hours = Math.floor(time / 60)
+      const minutes = time % 60
+      return `${hours}小时${minutes}分钟`
+    }
+
     const getMap = () => {
       AMapLoader.load({
         key: '81a1282308f1aae58082425a1ebb91b0',
@@ -116,7 +125,7 @@ export default defineComponent({
       await loadData()
       await getMap()
     })
-    return { parkArray, totalMin, showTable, trajectory, data, moment }
+    return { parkArray, totalMin, showTable, trajectory, data, moment, formatTime }
   },
 })
 </script>

src/views/trajectoryQuery/index.vue

@@ -28,7 +28,7 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="10">
             <!-- 时间范围 -->
             <!-- 限制结束时间在开始时间三天内 -->
             <el-form-item label="时间范围" prop="timeRange">
@@ -49,7 +49,7 @@
               ></el-date-picker>
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="4">
             <!-- 查询按钮 -->
             <el-form-item>
               <el-button type="primary" @click="queryWaybill">查询轨迹</el-button>
@@ -61,16 +61,20 @@
     <!-- 异常停留 -->
     <div class="abnormal">
       <div>
-        <span class="abnormal-title">共停留{{ parkArray.length }}次,共停留{{ totalMin }}分钟</span>
+        <span class="abnormal-title">共停留{{ parkArray.length }}次,共停留{{ formatTime(totalMin) }}</span>
         <el-button size="small" type="primary" @click="showTable = !showTable">查看停留明细</el-button>
       </div>
-      <el-table :data="parkArray" style="width: 100%" border stripe size="small" v-if="showTable">
+      <el-table max-height="300px" :data="parkArray" style="width: 100%" border stripe size="small" v-if="showTable">
         <el-table-column prop="parkBte" label="停留开始" width="180">
           <template #default="scope">
             {{ moment(Number(scope.row.parkBte)).format('yyyy-MM-DD hh:mm:ss') }}
           </template>
         </el-table-column>
-        <el-table-column prop="parkMins" label="停留时长（分钟）" width="180"></el-table-column>
+        <el-table-column prop="parkMins" label="停留时长（分钟）" width="180">
+          <template #default="scope">
+            {{ formatTime(scope.row.parkMins) }}
+          </template>
+        </el-table-column>
         <el-table-column prop="parkAdr" label="停留地址"></el-table-column>
       </el-table>
     </div>
@@ -84,6 +88,17 @@ import AMapLoader from '@amap/amap-jsapi-loader'
 import { tms } from '@/request/api'
 import { Message, Modal, Spin } from 'view-ui-plus'
 import { transformFromWGSToGCJArr } from '../trackManager/utils.js'
+import dataJson from './data.json'
+import moment from 'moment'
+import qidian from '@/assets/images/qidian.png'
+import zhongdian from '@/assets/images/zhongdian.png'
+
+// 分钟转为小时分钟格式
+const formatTime = time => {
+  const hours = Math.floor(time / 60)
+  const minutes = time % 60
+  return `${hours}小时${minutes}分钟`
+}
 
 // 限制选择的结束时间必须在选择的开始时间后的三天内
 const disabledDateFn = time => {
@@ -145,6 +160,7 @@ const data = ref(null)
 const parkArray = ref([])
 const totalMin = ref(0)
 const showTable = ref(false)
+const polyline = ref(null)
 const queryWaybill = async () => {
   if (!form.value.licensePlateNo) {
     return Message.error('请输入车牌号')
@@ -169,7 +185,12 @@ const queryWaybill = async () => {
       Message.error(res.data.result)
       return
     }
-
+    if (polyline.value) {
+      map.value.remove(polyline.value)
+      trajectory.value = [] // 清空之前的轨迹数据
+      polyline.value = null // 清除之前的polyline实例
+      totalMin.value = 0 // 重置停留时间
+    }
     data.value = res.data
     if (data.value.result && data.value.result.trackArray) {
       parkArray.value = data.value.result.parkArray
@@ -182,9 +203,15 @@ const queryWaybill = async () => {
         }
       })
     }
-    // 清除之前的markers
+
+    clearMarkers()
+
     map.value.clearMap()
-    var polyline = new AMap.Polyline({
+    // 添加起点和终点标记
+    addMarker([trajectory.value[0]], qidian)
+    addMarker([trajectory.value[trajectory.value.length - 1]], zhongdian)
+    // 清除之前的markers
+    polyline.value = new AMap.Polyline({
       map: map.value,
       path: trajectory.value,
       showDir: true,
@@ -196,11 +223,11 @@ const queryWaybill = async () => {
 }
 
 // 添加marker
-const addMarker = data => {
+const addMarker = (data, icon) => {
   data.forEach(item => {
     const marker = new AMap.Marker({
       position: item,
-      icon: require('@/assets/images/dian.png'), // 自定义图标
+      icon: icon, // 自定义图标
       offset: new AMap.Pixel(-13, -26),
     })
     marker.setMap(map.value)