feat：完善gps功能

src/views/scenic/components/big-map.vue

@@ -36,11 +36,19 @@
               @click="handleItem(item, index)"
             >
               <p class="item__label">{{ item.licenseNumber }}</p>
-              <p class="item__value"
+              <div class="item__value"
                 >{{ item.speed }}km/h
                 <img v-if="item.status == '行驶'" src="@/assets/images/engine.png" alt="" />
                 <img v-else src="@/assets/images/unengine.png" alt="" />
-              </p>
+                <div
+                  :class="{
+                    'item__hot--primary': item.status == '行驶',
+                    'item__hot--info': item.status != '行驶',
+                    'item__hot--active': current === index
+                  }"
+                >
+                </div>
+              </div>
             </li>
             <li
               v-if="active == 1"
@@ -51,9 +59,19 @@
               @click="handleItem(item, index)"
             >
               <p class="item__label">{{ item.licenseNumber }}</p>
-              <p class="item__value"
+              <div class="item__value"
-                >{{ item.speed }}km/h <img src="@/assets/images/engine.png" alt="" />
+                >{{ item.speed }}km/h
-              </p>
+                <img v-if="item.status == '行驶'" src="@/assets/images/engine.png" alt="" />
+                <img v-else src="@/assets/images/unengine.png" alt="" />
+                <div
+                  :class="{
+                    'item__hot--primary': item.status == '行驶',
+                    'item__hot--info': item.status != '行驶',
+                    'item__hot--active': current === index
+                  }"
+                >
+                </div>
+              </div>
             </li>
             <li
               v-if="active == 2"
@@ -64,9 +82,19 @@
               @click="handleItem(item, index)"
             >
               <p class="item__label">{{ item.licenseNumber }}</p>
-              <p class="item__value"
+              <div class="item__value"
-                >{{ item.speed }}km/h <img src="@/assets/images/engine.png" alt="" />
+                >{{ item.speed }}km/h
-              </p>
+                <img v-if="item.status == '行驶'" src="@/assets/images/engine.png" alt="" />
+                <img v-else src="@/assets/images/unengine.png" alt="" />
+                <div
+                  :class="{
+                    'item__hot--primary': item.status == '行驶',
+                    'item__hot--info': item.status != '行驶',
+                    'item__hot--active': current === index
+                  }"
+                >
+                </div>
+              </div>
             </li>
             <li
               v-if="active == 3"
@@ -77,9 +105,19 @@
               @click="handleItem(item, index)"
             >
               <p class="item__label">{{ item.licenseNumber }}</p>
-              <p class="item__value"
+              <div class="item__value"
-                >{{ item.speed }}km/h <img src="@/assets/images/engine.png" alt="" />
+                >{{ item.speed }}km/h
-              </p>
+                <img v-if="item.status == '行驶'" src="@/assets/images/engine.png" alt="" />
+                <img v-else src="@/assets/images/unengine.png" alt="" />
+                <div
+                  :class="{
+                    'item__hot--primary': item.status == '行驶',
+                    'item__hot--info': item.status != '行驶',
+                    'item__hot--active': current === index
+                  }"
+                >
+                </div>
+              </div>
             </li>
           </ul>
         </div>
@@ -275,7 +313,15 @@
     { immediate: true }
   )
 
+  const timestampToYMD = (timestamp) => {
+    const date = new Date(timestamp * 1000)
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1
+    const day = date.getDate()
+    return `${year}-${month}-${day}`
+  }
   const setHtml = (data) => {
+    data.gpsTime = timestampToYMD(data?.gpsTime)
     //  <div class='marker-col'> <img src='${icon16}' /> <p> 18723232323 </p> </div>
     //  <div class='marker-col'> <img src='${icon18}' /> <p> 3.01KM </p> </div>
     let html = `<div class='marker-box'>
@@ -348,8 +394,6 @@
     tabs.value[1].value = onlineList.value.length
     tabs.value[2].value = offlineList.value.length
     tabs.value[3].value = staticList.value.length
-
-    console.log(list.value, 'list.value')
   }
 
   const onInput = debounce((e) => {
@@ -549,9 +593,28 @@
       justify-content: space-between;
       &__value {
         display: flex;
+        align-items: center;
         > img {
           width: vw(16);
           height: auto;
+          margin: 0 vw(10);
+        }
+      }
+      &__hot {
+        width: vw(8);
+        height: vw(8);
+        border-radius: 50%;
+        &--primary {
+          @extend .item__hot;
+          background-color: #02f9fa;
+        }
+        &--info {
+          @extend .item__hot;
+          background-color: #055498;
+        }
+        &--active {
+          @extend .item__hot;
+          background-color: #ffffff !important;
         }
       }
       &__active {