添加 最大速度 和 平均速度 计算/显示

frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue

@@ -48,11 +48,22 @@
             keep-color
         />
     </div>
-    <div id="container"></div>
+    <div id="container">
+        <div class="fixed bg-amber-50 rounded-r z-max text-center" style="width: 300px" v-if="view.filterData.length > 0">
+            <div class="flex">
+                <div class="w-1/4">最高速度</div>
+                <div>{{view.speed.max}} km/h</div>
+            </div>
+            <div class="flex">
+                <div class="w-1/4">平均速度</div>
+                <div>{{view.speed.avg}} km/h</div>
+            </div>
+        </div>
+    </div>
 </template>
 <script setup>
 import AMapLoader from '@amap/amap-jsapi-loader';
-import {reactive, ref} from "vue";
+import {reactive, ref, shallowReadonly, toRaw} from "vue";
 import DateTimeSelector from "matrix-middle-service-web/src/components/DateTimeSelector.vue";
 import {useQuasar} from "quasar";
 import moment from "moment";
@@ -83,7 +94,15 @@ const data = {
     labelsLayer: {},
     markers: [],
     tmpMarker: {},
+    infoWindow: {},
 }
+const view = reactive({
+    filterData: [],
+    speed: {
+        max: 0,
+        avg: 0
+    }
+})
 const layers = reactive({
     satellite: {
         inst: {},
@@ -239,6 +258,7 @@ function clearMap(){
     map.remove(data.polyline)
     map.remove(data.labelsLayer)
     map.remove(data.markers)
+    map.remove(data.infoWindow)
 }
 
 
@@ -260,6 +280,18 @@ function drawMap(){
         return a.time.isBefore(b.time)?-1:1
     })
 
+    view.filterData =  _data;
+    let sortSpeedData = JSON.parse(JSON.stringify(view.filterData)).sort((a,b)=>{return b.speed - a.speed})
+    view.speed.max = ((sortSpeedData[0]||{}).speed*3.6 || 0).toFixed(2);
+
+    if(view.filterData.length === 0){
+        view.speed.avg = 0
+    } else {
+        view.speed.avg = ((view.filterData.map(item=>item.speed || 0).reduce((prev,cur)=>{
+            return prev + cur
+        },0) / view.filterData.length) * 3.6).toFixed(2);
+    }
+
     console.log("data", _data)
 
     data.tmpMarker = new AMap.Marker({
@@ -344,8 +376,6 @@ function drawMap(){
     for (let i = 0; i < _data.length; i++) {
         let datum = _data[i]
 
-        console.log(prev,datum.time, datum.time.diff(prev,'m') <= 5)
-
         if (prev.year() === datum.time.year() && prev.month() === datum.time.month() && prev.date() === datum.time.date() && datum.time.diff(prev,'m') <= 5 ) {
             prev = datum.time
         } else {