From e9c8b10d29b5f6d2f52a294b556a7565cd86ac79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Wed, 16 Jul 2025 22:23:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E7=BA=BF=E8=B7=AF=E5=9B=BE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ems/dzjk/zxlt/index.vue | 152 +++++++++++++++++++++---------
 1 file changed, 110 insertions(+), 42 deletions(-)

diff --git a/src/views/ems/dzjk/zxlt/index.vue b/src/views/ems/dzjk/zxlt/index.vue
index 6b392d9..105df57 100644
--- a/src/views/ems/dzjk/zxlt/index.vue
+++ b/src/views/ems/dzjk/zxlt/index.vue
@@ -14,8 +14,8 @@
           <div class="computer">
             <img src="@/assets/images/ems/computer.png" alt="">
             <span style="z-index:2;position: relative;">ems</span>
-            <div class="arrow"></div>
           </div>
+          <div class="arrow"></div>
         </div>
         <div class="bottom">
 <!--          四列设备-->
@@ -24,6 +24,7 @@
               <div class="item-lists">
                 <div class="items-title">bms</div>
                 <div class="items" v-for="(item,index) in bms" :key="index+'bms'">
+                  <div class="items-line"></div>
                   <div style="text-align: center;margin-bottom:10px;">
                     <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
                   </div>
@@ -37,6 +38,7 @@
               <div class="item-lists">
                 <div class="items-title">pcs</div>
                 <div class="items" v-for="(item,index) in pcs" :key="index+'pcs'">
+                  <div class="items-line"></div>
                   <div style="text-align: center;margin-bottom:10px;">
                     <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
                   </div>
@@ -50,6 +52,7 @@
               <div class="item-lists">
                 <div class="items-title">电表</div>
                 <div class="items"  v-for="(item,index) in db" :key="index+'db'">
+                  <div class="items-line"></div>
                   <div style="text-align: center;margin-bottom:10px;">
                     <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
                   </div>
@@ -63,6 +66,7 @@
               <div class="item-lists">
                 <div class="items-title">冷却</div>
                 <div class="items"  v-for="(item,index) in lq" :key="index+'lq'">
+                  <div class="items-line"></div>
                   <div style="text-align: center;margin-bottom:10px;">
                     <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
                   </div>
@@ -143,17 +147,19 @@ export default {
   padding:0;
   .container{
     position: relative;
+    overflow-x: auto;
   }
   .top{
+    width: 280px;
     font-size: 30px;
     line-height: 40px;
     font-weight: 500;
     display: flex;
-    vertical-align: middle;
-    align-items: center;
+    flex-direction: column;
     //云 样式
     .cloud-container{
       padding-top:40px;
+      margin:0 auto;
       .cloud {
         width: 150px;
         height: 60px;
@@ -180,40 +186,48 @@ export default {
         right: 20px;
       }
     }
+    //双箭头
     .double-arrows {
-      width: 120px;
-      margin:0 20px;
+      height: 95px;
+      margin:20px 0;
+      text-align: center;
       .top-arrows,.bottom-arrows{
-        width: 100%;
-        height: 5px;
+        height: 100%;
+        width: 6px;
         background-color: #5ea9df;
+        display: inline-block;
+        margin: 0 10px;
         position: relative;
+        vertical-align: super;
         &::after {
           content: '';
           position: absolute;
-          top:0;
+          left:0;
           width: 0;
           height: 0;
 
         }
       }
+      .top-arrows{
+        vertical-align: super;
+      }
       .top-arrows::after {
-        right: -20px;
-        border-top: 10px solid transparent;
-        border-right: 10px solid transparent;
-        border-bottom: 10px solid transparent;
-        border-left: 10px solid #5ea9df;
-        top: -8px;
+        bottom: -24px;
+        border-bottom: 12px solid transparent;
+        border-left: 12px solid transparent;
+        border-right: 12px solid transparent;
+        border-top: 14px solid #5ea9df;
+        left: -9px;
       }
       .bottom-arrows{
         margin-top:12px;
         &::after {
-          left: -20px;
-          border-top: 10px solid transparent;
-          border-left: 10px solid transparent;
-          border-bottom: 10px solid transparent;
-          border-right: 10px solid #5ea9df;
-          top: -8px;
+          top: -24px;
+          border-top: 12px solid transparent;
+          border-left: 12px solid transparent;
+          border-right: 12px solid transparent;
+          border-bottom: 14px solid #5ea9df;
+          left: -9px;
         }
       }
 
@@ -221,6 +235,7 @@ export default {
 
     //电脑
     .computer{
+      margin:20px auto;
       text-align: center;
       color:#666666;
       position: relative;
@@ -229,27 +244,25 @@ export default {
         height: 100px;
         display: block;
       }
-      .arrow{
-        height: 95px;
-        width: 30px;
-        border-radius: 5px;
-        background-color: #5ea9df;
+    }
+    .arrow{
+      height: 95px;
+      width: 30px;
+      border-radius: 5px;
+      background-color: #5ea9df;
+      position: relative;
+      margin:0 auto;
+      &::after{
+        content: "";
         position: absolute;
-        bottom: -115px;
-        left: 50%;
-        transform: translateX(-50%);
-        &::after{
-          content: "";
-          position: absolute;
-          width: 0;
-          height: 0;
-          left: -9px;
-          border-top: 24px solid #5ea9df;
-          border-left: 24px solid transparent;
-          border-bottom: 24px solid transparent;
-          border-right: 24px solid transparent;
-          bottom: -44px;
-        }
+        width: 0;
+        height: 0;
+        left: -9px;
+        border-top: 24px solid #5ea9df;
+        border-left: 24px solid transparent;
+        border-bottom: 24px solid transparent;
+        border-right: 24px solid transparent;
+        bottom: -44px;
       }
     }
 
@@ -257,14 +270,35 @@ export default {
   .bottom{
     z-index:1;
     box-sizing: border-box;
-    margin-top:150px;
+    margin-top:100px;
     .zxlt-row{
       display: flex;
     }
     .col-items{
-      margin-right: 20px;
+      padding-right: 120px;
+      position: relative;
+      &:before{
+        content: '';
+        display: block;
+        height: 2px;
+        width: 100%;
+        background-color: #5ea9df;
+        position: absolute;
+        top: -50px;//高出的50px
+        left: 0;
+      }
       &:last-child{
         margin-bottom: 0;
+        &:before{
+          content: '';
+          display: block;
+          height: 2px;
+          width: calc(100% - 60px);
+          background-color: #5ea9df;
+          position: absolute;
+          top: -50px;//高出的50px
+          left: 0;
+        }
       }
     }
     .item-lists{
@@ -272,6 +306,17 @@ export default {
       padding:25px;
       background-color: #cbebfd;//#ffdc70;
       border-radius: 10px;
+      &:before{
+        content: '';
+        display: block;
+        height: calc(100% + 50px);
+        width: 2px;
+        background-color: #5ea9df;
+        position: absolute;
+        top: -50px;//高出的50px
+        right: -60px;
+      }
+
       .items-title{
         font-size: 20px;
         line-height: 30px;
@@ -279,6 +324,7 @@ export default {
         font-weight: 500;
         text-align: center;
         margin-bottom:20px;
+
       }
       .items{
         background-color: #ffffff;
@@ -287,6 +333,28 @@ export default {
         padding: 20px 25px;
         margin-bottom: 20px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 rgba(0, 0, 0, 0.5);
+        .items-line{
+          height: 4px;
+          width: 66px;
+          background-color: #5ea9df;
+          position: absolute;
+          top: 50%;
+          right: -85px;//60+25
+          &:after{
+            content: '';
+            display: block;
+            height: 0;
+            width: 0;
+            border-right: 10px solid #5ea9df;
+            border-left: 10px solid transparent;
+            border-bottom: 10px solid transparent;
+            border-top: 10px solid transparent;
+            position: absolute;
+            top: -8px;
+            left: -20px;
+          }
+        }
+
         img{
           width: 120px;
           height: auto;