feat：完善功能

src/views/monitor/components/box-2.vue

@@ -134,8 +134,8 @@
 <script setup>
   import { getVideoListApi, postRefreshApi, getPreviewUrlApi } from '@/api/home'
   import { getVideoTypeApi, getVideoRegionsApi, postVideoRemainApi } from '@/api/monitor'
-  import { debounce } from 'lodash'
 
+  import { debounce } from 'lodash'
   import PubSub from 'pubsub-js'
   import Hls from 'hls.js'
 

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

@@ -5,10 +5,15 @@
       <div class="flex">
         <div class="list-box">
           <title2 title="车船" />
-          <el-input v-model="keyword" clearable placeholder="设备号/设备名称SIM卡号">
+          <el-input
-            <template #suffix>
+            v-model="keyword"
+            clearable
+            placeholder="设备号/设备名称SIM卡号"
+            @input="onInput"
+          >
+            <!-- <template #suffix>
               <img src="@/assets/images/search-icon-1.png" alt="" />
-            </template>
+            </template> -->
           </el-input>
           <ul class="tabs">
             <li
@@ -23,14 +28,58 @@
           </ul>
           <ul class="list">
             <li
+              v-if="active == 0"
               class="item"
               :class="{ item__active: current === index }"
-              v-for="(item, index) in carList"
+              v-for="(item, index) in list"
               :key="index"
               @click="handleItem(item, index)"
             >
-              <p class="item__label">{{ item.license_number }}</p>
+              <p class="item__label">{{ item.licenseNumber }}</p>
-              <p class="item__value">31km/h <img src="@/assets/images/engine.png" alt="" /> </p>
+              <p 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>
+            </li>
+            <li
+              v-if="active == 1"
+              class="item"
+              :class="{ item__active: current === index }"
+              v-for="(item, index) in ononlineList"
+              :key="index"
+              @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>
+            </li>
+            <li
+              v-if="active == 2"
+              class="item"
+              :class="{ item__active: current === index }"
+              v-for="(item, index) in offlineList"
+              :key="index"
+              @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>
+            </li>
+            <li
+              v-if="active == 3"
+              class="item"
+              :class="{ item__active: current === index }"
+              v-for="(item, index) in staticList"
+              :key="index"
+              @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>
             </li>
           </ul>
         </div>
@@ -57,6 +106,8 @@
 
   import { useMap } from '@/hooks/map'
 
+  import { debounce } from 'lodash'
+
   const { map, marker, initMap, addMarker } = useMap()
 
   let props = defineProps({
@@ -83,6 +134,7 @@
   let active = ref(0)
   let current = ref('')
   let scenicChange = null
+  let list = ref([])
   let carOverlays = ref([])
   let shipOverlays = ref([])
   let lastInfoBox = ref()
@@ -91,21 +143,24 @@
   let tabs = ref([
     {
       label: '所有',
-      value: '101'
+      value: '0'
     },
     {
       label: '在线',
-      value: '30'
+      value: '0'
     },
     {
       label: '离线',
-      value: '15'
+      value: '0'
     },
     {
       label: '未启用',
-      value: '56'
+      value: '0'
     }
   ])
+  let onlineList = ref([])
+  let offlineList = ref([])
+  let staticList = ref([])
 
   watch(
     () => modelValue.value,
@@ -162,6 +217,7 @@
                 e.sim = e.target.sim
                 currentMarker.value = e
                 let obj = props.carList.find((item) => item.sim == e.target.sim)
+                console.log(obj, 'obj')
                 setInfoBox(e.latLng, obj)
               })
               marker.value.sim = item.sim
@@ -220,30 +276,30 @@
   )
 
   const setHtml = (data) => {
+    //  <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?.license_number} </p>
+                  <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.status_time_desc}）</div>
+                      <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> 王明 </p> </div>
+                    <div class='marker-col'> <img src='${icon13}' /> <p> ${data?.contactUser} </p> </div>
-                    <div class='marker-col'> <img src='${icon14}' /> <p> 18723232323 </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> 王明 </p> </div>
+                    <div class='marker-col'> <img src='${icon15}' /> <p> ${data?.gpsTime} </p> </div>
-                    <div class='marker-col'> <img src='${icon16}' /> <p> 18723232323 </p> </div>
                   </div>
                   <div class='marker-row'>
-                    <div class='marker-col'> <img src='${icon17}' /> <p> 222KM </p> </div>
+                    <div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM </p> </div>
-                    <div class='marker-col'> <img src='${icon18}' /> <p> 3.01KM </p> </div>
                   </div>
                   <div class='marker-row'>
-                    <div class='marker-col'> <img src='${icon19}' /> <p> ${data.lng},${data.lat} </p> </div>
+                    <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 class='marker-col'> <img src='${icon20}' /> <p> ${data?.address} </p> </div>
                   </div>
                 </div>`
     return html
@@ -284,8 +340,22 @@
       keyword: keyword.value,
       status: status.value
     })
+    list.value = res.data
+    onlineList.value = res.data.filter((item) => item.status == '在线')
+    offlineList.value = res.data.filter((item) => item.status == '离线')
+    staticList.value = res.data.filter((item) => item.status == '未启用')
+    tabs.value[0].value = res.data.length
+    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) => {
+    getGpsList()
+  }, 500)
+
   onMounted(() => {
     scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
       scenicSpotId.value = data.scenicSpotId