From 896a9f9f05bf9e6715c2d7714194ebe1747928e5 Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Mon, 24 Feb 2025 19:53:09 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E5=96=84gps=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/scenic/components/big-map.vue | 133 +++++++++++++++++-------
 1 file changed, 98 insertions(+), 35 deletions(-)

diff --git a/src/views/scenic/components/big-map.vue b/src/views/scenic/components/big-map.vue
index 3507bca..07b7d43 100644
--- a/src/views/scenic/components/big-map.vue
+++ b/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"
-                >{{ item.speed }}km/h <img src="@/assets/images/engine.png" alt="" />
-              </p>
+              <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="" />
+                <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"
-                >{{ item.speed }}km/h <img src="@/assets/images/engine.png" alt="" />
-              </p>
+              <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="" />
+                <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"
-                >{{ item.speed }}km/h <img src="@/assets/images/engine.png" alt="" />
-              </p>
+              <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="" />
+                <div
+                  :class="{
+                    'item__hot--primary': item.status == '行驶',
+                    'item__hot--info': item.status != '行驶',
+                    'item__hot--active': current === index
+                  }"
+                >
+                </div>
+              </div>
             </li>
           </ul>
         </div>
@@ -275,33 +313,41 @@
     { 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'>
-                  <p class='marker-title'> ${data?.licenseNumber} </p>
-                  <div class='marker-header'>
-                      <span class='marker-sim'> ${data?.imei} </span>
-                      <div class='marker-tag'> <div></div> ${data?.status}  （${data?.statusTimeDesc}）</div>
+                    <p class='marker-title'> ${data?.licenseNumber} </p>
+                    <div class='marker-header'>
+                        <span class='marker-sim'> ${data?.imei} </span>
+                        <div class='marker-tag'> <div></div> ${data?.status}  （${data?.statusTimeDesc}）</div>
+                      </div>
+                    <div class='marker-line'> </div>
+                    <div class='marker-row'>
+                      <div class='marker-col'> <img src='${icon13}' /> <p> ${data?.contactUser} </p> </div>
+                      <div class='marker-col'> <img src='${icon14}' /> <p> ${data?.contactTel} </p> </div>
                     </div>
-                  <div class='marker-line'> </div>
-                  <div class='marker-row'>
-                    <div class='marker-col'> <img src='${icon13}' /> <p> ${data?.contactUser} </p> </div>
-                    <div class='marker-col'> <img src='${icon14}' /> <p> ${data?.contactTel} </p> </div>
-                  </div>
-                  <div class='marker-row'>
-                    <div class='marker-col'> <img src='${icon15}' /> <p> ${data?.gpsTime} </p> </div>
-                  </div>
-                  <div class='marker-row'>
-                    <div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM </p> </div>
-                  </div>
-                  <div class='marker-row'>
-                    <div class='marker-col'> <img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div>
-                  </div>
-                  <div class='marker-row'>
-                    <div class='marker-col'> <img src='${icon20}' /> <p> ${data?.address} </p> </div>
-                  </div>
-                </div>`
+                    <div class='marker-row'>
+                      <div class='marker-col'> <img src='${icon15}' /> <p> ${data?.gpsTime} </p> </div>
+                    </div>
+                    <div class='marker-row'>
+                      <div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM </p> </div>
+                    </div>
+                    <div class='marker-row'>
+                      <div class='marker-col'> <img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div>
+                    </div>
+                    <div class='marker-row'>
+                      <div class='marker-col'> <img src='${icon20}' /> <p> ${data?.address} </p> </div>
+                    </div>
+                  </div>`
     return html
   }
 
@@ -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 {