优化

src/utils/filter.js

@@ -1,4 +1,4 @@
-import { isEmpty } from '@/utils/index'
+import { isEmpty } from '@/utils/index';
 
 const filters = {
   // 金钱显示，保留两位小数
@@ -21,6 +21,12 @@ const filters = {
     }
     return num.toFixed(10);
   },
+  fix8(num) {
+    if (num == null) {
+      return num;
+    }
+    return num.toFixed(8);
+  },
   dv(data) {
     return filters.defaultValue(data);
   }

src/views/bst/areaSub/components/AreaMap.vue

@@ -28,6 +28,7 @@
     <!-- 轨迹回放控制面板 -->
     <playback-panel
       v-show="isPlaybackVisible && locationLogList.length > 0"
+      :location-log-list="locationLogList"
       :current-log="currentLog"
       :current-speed="currentSpeed"
       :max-index="sortedLocationLogs.length - 1"

src/views/bst/areaSub/components/PlaybackPanel.vue

@@ -47,7 +47,7 @@
       <el-slider
         :value="sliderValue"
         :max="maxIndex"
-        :show-tooltip="false"
+        :format-tooltip="formatTooltip"
         @input="handleSliderChange">
       </el-slider>
 
@@ -65,6 +65,13 @@
             {{ speed }}x
           </el-button>
         </el-button-group>
+
+        <el-button-group>
+          <el-button size="mini" icon="el-icon-arrow-left" @click="handlePrev">
+          </el-button>
+          <el-button size="mini" icon="el-icon-arrow-right" @click="handleNext">
+          </el-button>
+        </el-button-group>
       </div>
     </div>
   </el-card>
@@ -94,6 +101,10 @@ export default {
     currentIndex: {
       type: Number,
       required: true
+    },
+    locationLogList: {
+      type: Array,
+      default: () => []
     }
   },
   computed: {
@@ -102,6 +113,9 @@ export default {
     }
   },
   methods: {
+    formatTooltip(value) {
+      return this.locationLogList?.[value]?.at;
+    },
     handleSliderChange(index) {
       this.$emit('slider-change', index);
     },
@@ -110,7 +124,17 @@ export default {
     },
     setPlaybackSpeed(speed) {
       this.$emit('speed-change', speed);
+    },
+    handlePrev() {
+      if (this.currentIndex > 0) {
+        this.$emit('slider-change', this.currentIndex - 1);
       }
+    },
+    handleNext() {
+      if (this.currentIndex < this.maxIndex) {
+        this.$emit('slider-change', this.currentIndex + 1);
+      }
+    },
   }
 }
 </script>
@@ -149,6 +173,13 @@ export default {
   }
 
   .playback-controls {
+    .time-display {
+      text-align: center;
+      margin-bottom: 16px;
+      font-size: 12px;
+      color: #606266;
+    }
+
     .el-slider {
       margin-bottom: 4px;
     }
@@ -161,6 +192,12 @@ export default {
       .el-button {
         padding: 7px 12px;
       }
+
+      .el-button-group {
+        .el-button {
+          margin-left: -1px;
+        }
+      }
     }
   }
 }

src/views/bst/device/view/components/DeviceLocationLogList.vue

@@ -47,13 +47,13 @@
               <div class="log-info">
                 <span class="info-item">
                   <i class="el-icon-location"></i>
-                  {{ log.longitude.toFixed(8) }}, {{ log.latitude.toFixed(8) }}
+                  {{ log.longitude | fix8 | dv }}, {{ log.latitude | fix8 | dv}}
                 </span>
                 <span class="info-item">
                   <i class="el-icon-odometer"></i>
-                  {{ log.voltage | fix2 }}V
+                  {{ log.voltage | fix2 | dv }}V
                 </span>
-                <span class="info-item">{{ log.sn }}</span>
+                <span class="info-item">{{ log.sn | dv }}</span>
               </div>
             </div>
             <div v-if="group.hasMore" class="load-more" @click="loadMoreLogs(groupIndex)">