完善功能

src/components/Correspondence/index.vue

@@ -32,6 +32,7 @@
       </div>
     </div>
   </div>
+  <div>
     <el-dialog :title="gridTitle" center v-model="dialogTableVisible">
       <div class="bom-box">
         <div class="table">
@@ -56,6 +57,7 @@
         </div>
       </div>
     </el-dialog>
+  </div>
 </template>
 
 <script setup>
@@ -85,17 +87,16 @@
     getComRecord()
   })
 </script>
-<style>
-  .el-dialog {
+
+<style lang="scss" scoped>
+  :deep(.el-dialog) {
     background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
     background-size: 100% 100%;
   }
-  .el-dialog__title {
+  :deep(.el-dialog__title) {
     color: #fff;
     font-weight: bold;
   }
-</style>
-<style lang="scss" scoped>
   .sp-ico {
     width: vw(40);
   }

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

@@ -1,8 +1,41 @@
 <template>
   <div class="dialog">
     <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
-      <div id="big-car-ship" class="big-car-ship" />
       <img class="close" src="@/assets/images/close.png" @click="modelValue = false" />
+      <div class="flex">
+        <div class="list-box">
+          <title2 title="车船" />
+          <el-input v-model="value" clearable placeholder="设备号/设备名称SIM卡号">
+            <template #suffix>
+              <img src="@/assets/images/search-icon-1.png" alt="" />
+            </template>
+          </el-input>
+          <ul class="tabs">
+            <li
+              class="tab-item"
+              :class="{ 'tab-item__active': active == index }"
+              v-for="(item, index) in tabs"
+              :key="index"
+              @click="handleTab(index)"
+            >
+              {{ item.label }}({{ item.value }})
+            </li>
+          </ul>
+          <ul class="list">
+            <li
+              class="item"
+              :class="{ item__active: current === index }"
+              v-for="(item, index) in carList"
+              :key="index"
+              @click="handleItem(item, index)"
+            >
+              <p class="item__label">{{ item.license_number }}</p>
+              <p class="item__value">31km/h <img src="@/assets/images/engine.png" alt="" /> </p>
+            </li>
+          </ul>
+        </div>
+        <div id="big-car-ship" class="big-car-ship" />
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -38,12 +71,34 @@
 
   let lat = ref('')
   let lng = ref('')
+  let value = ref('')
+  let active = ref(0)
+  let current = ref('')
   let scenicChange = null
   let carOverlays = ref([])
   let shipOverlays = ref([])
   let lastInfoBox = ref()
   let infoBox = ref()
   let currentMarker = ref()
+  let tabs = ref([
+    {
+      label: '所有',
+      value: '101'
+    },
+    {
+      label: '在线',
+      value: '30'
+    },
+    {
+      label: '离线',
+      value: '15'
+    },
+    {
+      label: '未启用',
+      value: '56'
+    }
+  ])
+
   watch(
     () => modelValue.value,
     (val) => {
@@ -81,7 +136,7 @@
             if (
               currentMarker.value &&
               infoBox.value &&
-              props.carList[i].sim == currentMarker.value.target.sim
+              props.carList[i].sim == currentMarker.value.sim
             ) {
               infoBox.value.setContent(setHtml(props.carList[i]))
               infoBox.value.setPosition({
@@ -96,6 +151,7 @@
             if (item.lng && item.lat) {
               addMarker(carIcon, [item.lng, item.lat], [36, 50])
               marker.value.addEventListener('click', (e) => {
+                e.sim = e.target.sim
                 currentMarker.value = e
                 let obj = props.carList.find((item) => item.sim == e.target.sim)
                 setInfoBox(e.latLng, obj)
@@ -126,7 +182,7 @@
             if (
               currentMarker.value &&
               infoBox.value &&
-              props.shipList[i].sim == currentMarker.value.target.sim
+              props.shipList[i].sim == currentMarker.value.sim
             ) {
               infoBox.value.setContent(setHtml(props.shipList[i]))
               infoBox.value.setPosition({
@@ -156,12 +212,11 @@
   )
 
   const setHtml = (data) => {
-    console.log(data, 'data')
     let html = `<div class='marker-box'>
                   <p class='marker-title'> ${data?.license_number} </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.status_time_desc}）</div>
                     </div>
                   <div class='marker-line'> </div>
                   <div class='marker-row'>
@@ -180,7 +235,7 @@
                     <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> 重庆市奉节县(重庆市奉节县白帝城.瞿塘峡景区内.白帝城东南218米） </p> </div>
+                    <div class='marker-col'> <img src='${icon20}' /> <p> ${data.address} </p> </div>
                   </div>
                 </div>`
     return html
@@ -204,6 +259,17 @@
     infoBox.value.open(e)
   }
 
+  const handleItem = (e, index) => {
+    current.value = index
+    currentMarker.value = carOverlays.value.find((item) => item.sim == e.sim)
+    setInfoBox(new BMapGL.Point(e.lng, e.lat), e)
+  }
+
+  const handleTab = (index) => {
+    if (active.value == index) return
+    active.value = index
+  }
+
   onMounted(() => {
     scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
       lat.value = data.lat
@@ -265,7 +331,10 @@
       font-weight: 400;
       font-size: vw(13);
       color: #0096ff;
-      background: #0b4599;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #0b4599;
       border-radius: vw(23);
       border: vw(1) solid #0096ff;
     }
@@ -300,6 +369,45 @@
   }
 </style>
 <style scoped lang="scss">
+  :deep(.el-input__inner) {
+    height: vh(32);
+    color: #fff;
+  }
+  :deep(.el-input__wrapper) {
+    margin-top: vh(8);
+    font-size: vw(16);
+    border-radius: vw(2);
+    border: vw(1) solid #0096ff;
+    box-shadow: none !important;
+    background: rgba(217, 217, 217, 0);
+  }
+  .tabs {
+    display: flex;
+    border-bottom: vw(1) solid #0a4190;
+    .tab-item {
+      cursor: pointer;
+      position: relative;
+      flex: 1;
+      height: vh(44);
+      font-weight: 600;
+      font-size: vw(14);
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .tab-item__active {
+      color: #00d0ff;
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: vw(40);
+        height: vh(2);
+        background: #00d0ff;
+      }
+    }
+  }
   :deep(.BMap_cpyCtrl) {
     display: none;
   }
@@ -309,22 +417,70 @@
   .dialog {
     :deep(.el-dialog) {
       width: vw(2540);
-      height: vh(900);
-      padding: vh(40) vw(40);
+      padding: vw(8);
+      background-image: url('@/assets/images/dialog-bg.png') !important;
+      background-size: 100% 100%;
     }
     :deep(.el-dialog__header) {
       padding-bottom: 0 !important;
     }
   }
+  .list-box {
+    margin-right: vw(10);
+    background-image: url('@/assets/images/bg-3.png');
+    background-size: 100% 100%;
+  }
+  .list {
+    width: vw(330);
+    height: vh(690);
+    padding-top: vh(10);
+    overflow-y: auto;
+    box-sizing: border-box;
+    /* 滚动条整体样式 */
+    &::-webkit-scrollbar {
+      width: vw(10); /* 滚动条的宽度 */
+    }
+    /* 滚动条轨道 */
+    &::-webkit-scrollbar-track {
+      background: 'transparent'; /* 轨道的背景色 */
+    }
+    /* 滚动条滑块 */
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+      border-radius: 5px; /* 滑块的圆角 */
+    }
+    .item {
+      cursor: pointer;
+      font-weight: 400;
+      font-size: vw(14);
+      height: vh(30);
+      padding: 0 vw(20);
+      color: #0096ff;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      &__value {
+        display: flex;
+        > img {
+          width: vw(16);
+          height: auto;
+        }
+      }
+      &__active {
+        color: #fff !important;
+        background-color: #055498;
+      }
+    }
+  }
   .big-car-ship {
-    width: 100%;
+    flex: 1;
     height: vh(820);
   }
   .close {
     cursor: pointer;
     position: absolute;
     right: vw(20);
-    top: vh(20);
+    top: vw(20);
     width: vw(60);
     z-index: 9999;
   }

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

@@ -371,7 +371,6 @@
     () => scenicStore.carShipData,
     (val) => {
       setTimeout(() => {
-        clearOverlays()
         if (carOverlays.value.length > 0) {
           let flag = false
           for (let i = 0; i < carOverlays.value.length; i++) {
@@ -422,6 +421,8 @@
 
   onMounted(() => {
     scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+      carOverlays.value = []
+      shipOverlays.value = []
       initMap('car-ship', data.lng, data.lat, 15)
     })
   })
@@ -504,13 +505,6 @@
       line-height: vh(18);
     }
   }
-  .dialog {
-    :deep(.el-dialog) {
-      width: vw(2540);
-      height: vh(904);
-    }
-  }
-
   .container {
     margin: vh(120) 0 0 vw(10);
     .count-box {