From d547312c746253e008908f0dad5ba98e31511b66 Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Thu, 20 Feb 2025 20:17:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/dialog-bg.png         | Bin 0 -> 43880 bytes
 src/assets/images/engine.png            | Bin 0 -> 770 bytes
 src/assets/images/unengine.png          | Bin 0 -> 796 bytes
 src/components/Correspondence/index.vue |  51 +++----
 src/views/scenic/components/big-map.vue | 178 ++++++++++++++++++++++--
 src/views/scenic/components/box-2.vue   |  10 +-
 6 files changed, 195 insertions(+), 44 deletions(-)
 create mode 100644 src/assets/images/dialog-bg.png
 create mode 100644 src/assets/images/engine.png
 create mode 100644 src/assets/images/unengine.png

diff --git a/src/assets/images/dialog-bg.png b/src/assets/images/dialog-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..67bce713a4b947b42778429480fa2cb494013897
GIT binary patch
literal 43880
zcmeI5U1%It6vyw(j_YOFw9`}}^mC{d`Vepfh57+H({4XvX{n`PeNa{?r4J%hiy9j2
z&c+H6L<*(tQ?rc^zO5e=1RrGe$p?{0MWHCHFC{`-ij}q~S)Hk7Kb$=~H+>LRetF3-
z%)OaCbI$+#&bfCd)BE=B9LlZADW!(ScNO<5m2;HJRCP8wbLWZoW};u#tNV9uRkd%{
z{Gybn#*4v$H(t1Ud2FccyDFG3oP6Zrs@isLcIvH4>E|ssbImKYA15Bae*9PMdVX11
zwv&1gUbydY(3tz<=7hn;e@}QLHyJcO`EXb2+^xSKe&N)vO`aIlYhF6~`EIitiv~CC
zihtYib3~WhcBNh)e%E|}6TWPGFWPaOFx<E*G_q>^$+i8H@wKjwF3;@VY`097cHlan
zrCri?0oQe%?3p8u@gw&1u}r$}{Br}I=jr_Dx7v7s@6Kn9oyYfmcjVyg3gZD~Z*Iuk
z{mW&q@KNz0;{jGsUEMZpny*<_P%2IDFdtCyx1`P4HZu+{g#ZpOg-eLTOPY_uOZfqX
z7xM!OFF_7S)6Uf0Y7EkdKm^i&G?8<_@M45ev`P^|(b}D6IubKQs|5XYX(Z^UOCv%*
zU78MU>GB`ik`nZTG$0LaNr_NsONwoO+LB!vrb9(&ONxX-TT&vF0dGrw`s8D$7xx0N
z>e{=i!}<TG&X2?6@a(IR`k&E88TQo(7){4UN(ppq=-9C8DrqVm8#*?za<b|wMF^{|
zQiQNoSb#D1#!E2f!SG@<MPCMCZ+!1oI1CTN!|)QJ!0?i$vg#@l3ahTYQ;p}d>dLBX
zEVb;Mlp=&ayci)cyj1$#1H;cWmOsC^7l1E!C-D!w0dL~MkQSv>0MMcoBLutwZ`epC
z(aM1DqGTf(8_DjufL-_6wW?O??cm&rAMP|Zy!hOVSnhPSr9FKy$*9tqLiEa}W#{LY
z^2#P=?=p8QvtxJ3$*>HTL1zTcMS-Q@z%p3oZd(Q7fH<Jkp3OBh5{*P7TQyknfZ9U}
z5G;dbsLH6y;)P3N!X7(heYLn3!1bUHNkXs;mVwKXIMzC|1kFKbdat6zO#yTUok3?>
zs**fFXQTkZGFXQCkNR&(^&i9mi`@+wvIp6N>_PS*d&mg^jYK2SNHh|SL?h|cO5gFp
zGFT>F%7B&zjF$Gier$MgFF?n?%RuW<G!zX*>n90l{eWqGzlYgcbmgh?ROxrn?||iD
zU>Fz%hJpKG6SM>^K}*mQv;-|dOaCP;eOFt%+EQN@+^L1*-=BQ{u-&{EjDE1WBOO`R
zRNbH6VD`eTxc@QbKh<i3q#oFIHVlWi_k)A(IkMrKa*T9e>S)Kw+nJ5;{QI>0S@QOR
zX#K=2T8}u{rymH7M~pbXcNjKC!o-~IGp<|E`O}+h;}He@TP9`B_Mh{-k~^~L8S|H&
zmE8IJ``>VT^0M#Oy~4g(ZG1a*Z*F;CYjjMmqL&N@rD}17@$Hm@>iV`}JE!VpTpV6<
zXdGU0XdGUQFBHC)$i$9>!b=K1&<fwY`rxBV<*tkug9A7}&L43Ncq76cJTK7}JTK7}
zJTKA~1+0{CC}1VpqGKbr1O~Zdb0cq`64P!{TK~*_{qe2l?a8w%MR7?u(6bG-<CU>J
T3lo>7RrE8yeQ&Y0wN&{FC{1(F

literal 0
HcmV?d00001

diff --git a/src/assets/images/engine.png b/src/assets/images/engine.png
new file mode 100644
index 0000000000000000000000000000000000000000..72f17914ab23ff2f9b0244216c277d06b603d350
GIT binary patch
literal 770
zcmV+d1O5DoP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px%yh%hsR9HvtmOp3|K@`TnZ*sT0gb)-Y1QIZTfGJa0C<Ky53>Yz1Dq2`5Dp*=5
z7DliTY|_{XA~p&sv<L(gEJQ36A}AO^34&Y|G2rFyW_NF%?41`jm%W=^y^tnb?!5QC
z-+XWW5j*^GhwEb(AhQG1dWGOnyVe;|)9`W&Y1*3^KxzLMfIV#ii1ToqN818`Aeew*
z4S=X#CO8EkG>~&ZSEW`|m)@YacXfLJVya39w*Z+1ux4CmZ<>P5F_~MiNkC*jf?yKH
ztitnB^}MqH|1#yKoNNwgeO7^y<+=8?<%x0K8)^8`1C+}{N_Bk(;H42ZkkfG8r?%L1
z03tc+;01|En_y#HfHfheu)h8UK@g&^ub7m(6(9_c)hy2Co;MPd4sHT+r&&ONNHmQ7
z?_rDf7$?6E<WDr|Zvjx+myK;zxBVl4o-M^i7R7argWLd6THgbBEor7k@+0v0O=<sk
zq-R{GR=Yhw(H~QJEG65{S>xt!$H%DsB?4nf@dA7TP$Y0D8vkzqLtKU9+}|js!xIYT
zS=u#X0|<?9S}~f9+)cE!>AYvfe@$Y%Qvg;S12qHp??SD}0mWe1niLDLIbhY=1hBH=
zVPN1?ZBZFqNaKVRKp^uF_O}uf$f6VqCow!+zX799>rn;1OWHNfGqM5HZ@0F)01%O7
zG1VjJ?*4&td5BbRN%mXq>%=Z-6shfoYIT81y|TTO;$WR|0H_EtPLX+AaS{0%ojL?Z
zZ0EpZBPhaiu0SLQT|Ej`J%ZN>9E{IGfcJp(5FBl1yAeEq=Uj|pl=dG+7n*UMGl?f*
zOQBL}kg6-{@nD)BH(~_xK?;S#n-*(KAl+@)NC<)nW#py(Jy1`Os6|eG6y*0-(AfYY
z72m%^!5l5`0s%r1Gh=(IWe3ROe~Q>$fE{<>4+DE7Fdm^BQ~&?~07*qoM6N<$f|^rF
AH2?qr

literal 0
HcmV?d00001

diff --git a/src/assets/images/unengine.png b/src/assets/images/unengine.png
new file mode 100644
index 0000000000000000000000000000000000000000..a817d32579b311adb320a38634b38a820e10ac27
GIT binary patch
literal 796
zcmV+%1LOROP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px%)=5M`R9HvtmN94(Q5eVn|Lb8du|q2k9SU|R*s+6yLcte7ELgElDmpkQDg>KC
zLB*jBI4BCaif)34i$Vt-3I(+}5b2;$K|uvY1jkAWmgI^_KD|p*W4zqG*p@EMc=_J{
z`@R47z3)9@gMZxM{MZC&+JRWY{z9NTtaK&F;8J#EN~gR{1H=<{4nTXDcv*PLb%yV+
z3xJilwby`D07TA#7!XJi!jmLj?{i*$zJxP6zb*i^qH#4b2Ff^qg?u*Ep_8yars)#Y
z3RwGY??AbvgynhNny)Fq|Lk~G0G7&}_-)xZK{G7501pdJ>aq@?b_pz%=_dJ}fTbfW
zf@1|I^(ZP<4?vBXF?2j7p`rv={ue9=F;Ecs2rLxgq!)wM{sRzCWDWv`na>VCsV=Zo
z=88dHtrrkrkwCHfT_A0Z%9A(D?RcL2UaubjU`zE_E!+N<KwEwCvS8Xp?hu^x3P4O{
zZjc-e+G&YK&(h3=&#{F4!_&)WQ-1DHfUPRiC*)k9?ZWZAGo1c=F4%J*`hw%}&UcL1
z?GLNf14uIOjNGXvizg-y1M*n6M?wL-(OL!v4M87?YeAy*^FFTZ7a;oA1VB%OL)AuY
zP1rkIfDd}>Dp64-(9rq=05xV=*mktiRC1acPDBET$RxndhGK&0JaR|ir2QMv`)yG-
zds}F}3OY6QJBkAEZ@17>;NQlc?MwR$&c$!uku}I!0G%54MV3Gdz)vKSECW*{vr#Xl
zTClZo0C0<7zX_R)N-iRw{2n2DLYpwA><8Y!aGlh7s4+9n_5%W15V=HhSM4rD<Tb!H
z61`!zmqqTn&d3=rCa&yz0$2qnbv$qqHWG@d>s>_aEQl_h8dqaP@TP#=p4w)uU9Wc=
zF0b(3gGA|B)O%nhIp7M-UUw$>wGnhv0G>#zvd<cX9rZ4#Oj8U+J=K~9XvTh>*iC>9
aci<QLB{eX+dZC{H0000<MNUMnLSTZn`(+UT

literal 0
HcmV?d00001

diff --git a/src/components/Correspondence/index.vue b/src/components/Correspondence/index.vue
index ba0c3d8..291c33e 100644
--- a/src/components/Correspondence/index.vue
+++ b/src/components/Correspondence/index.vue
@@ -32,30 +32,32 @@
       </div>
     </div>
   </div>
-  <el-dialog :title="gridTitle" center v-model="dialogTableVisible">
-    <div class="bom-box">
-      <div class="table">
-        <div class="header">
-          <div>姓名</div>
-          <div>部门</div>
-          <div>职位</div>
-          <div>电话号码</div>
-          <div>操作</div>
-        </div>
-        <div class="list">
-          <div class="item" v-for="(item, index) in gridData" :key="index">
-            <div>{{ item.nickName }}</div>
-            <div>{{ item.depthName }}</div>
-            <div>{{ item.postName }}</div>
-            <div>{{ item.phoneNumber }}</div>
-            <div>
-              <img class="sp-ico" src="@/assets/images/sp-icom.png" />
+  <div>
+    <el-dialog :title="gridTitle" center v-model="dialogTableVisible">
+      <div class="bom-box">
+        <div class="table">
+          <div class="header">
+            <div>姓名</div>
+            <div>部门</div>
+            <div>职位</div>
+            <div>电话号码</div>
+            <div>操作</div>
+          </div>
+          <div class="list">
+            <div class="item" v-for="(item, index) in gridData" :key="index">
+              <div>{{ item.nickName }}</div>
+              <div>{{ item.depthName }}</div>
+              <div>{{ item.postName }}</div>
+              <div>{{ item.phoneNumber }}</div>
+              <div>
+                <img class="sp-ico" src="@/assets/images/sp-icom.png" />
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </el-dialog>
+    </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);
   }
diff --git a/src/views/scenic/components/big-map.vue b/src/views/scenic/components/big-map.vue
index fbb6800..a669d2f 100644
--- a/src/views/scenic/components/big-map.vue
+++ b/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;
   }
diff --git a/src/views/scenic/components/box-2.vue b/src/views/scenic/components/box-2.vue
index 5096265..11d1dad 100644
--- a/src/views/scenic/components/box-2.vue
+++ b/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 {