From 3726db0ad35b86d5033b4463b1fd516a6049cd9d Mon Sep 17 00:00:00 2001
From: Shikong <919411476@qq.com>
Date: Sun, 14 May 2023 02:19:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E6=9C=80=E5=A4=A7?=
 =?UTF-8?q?=E9=80=9F=E5=BA=A6=20=E5=92=8C=20=E5=B9=B3=E5=9D=87=E9=80=9F?=
 =?UTF-8?q?=E5=BA=A6=20=E8=AE=A1=E7=AE=97/=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/record/AMapLocation.vue         | 38 +++++++++++++++++--
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue b/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
index 2219b31..17de2d2 100644
--- a/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
+++ b/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 {