From fd9caf8da6867109d5fa5aa0ac557c93d194289e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Sat, 19 Jul 2025 14:14:21 +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 | 627 +++++++++++++++++++-----------
 1 file changed, 410 insertions(+), 217 deletions(-)

diff --git a/src/views/ems/dzjk/zxlt/index.vue b/src/views/ems/dzjk/zxlt/index.vue
index 105df57..e453ce2 100644
--- a/src/views/ems/dzjk/zxlt/index.vue
+++ b/src/views/ems/dzjk/zxlt/index.vue
@@ -20,62 +20,122 @@
         <div class="bottom">
 <!--          四列设备-->
           <div class="zxlt-row">
-            <div class="col-items" v-if="bms.length>0">
-              <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 class="row-lists pcs-row-lists">
+              <div class="item-square">
+                <div class="row-lists-title">PCS</div>
+                <div class="row-lists-title">BMS</div>
+              </div>
+<!--              上下级块 class区分-->
+              <div class="item-square pcs-has-children-item-square" v-for="(item,index) in pcsHasChildren" :key="index+'pcsHasChildren'">
+                <!--                左边的上级 上级只有一个-->
+                <div class="item-lists">
+                  <!--                  上级设备-->
+                  <div class="items normal-items-arrow">
+                    <div class="items-inner">
+                      <div style="text-align: center;margin-bottom:10px;">
+                        <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
+                      </div>
+                      <img v-if="item.pictureUrl" :src="item.pictureUrl">
+                      <img v-else :src="require('@/assets/images/ems/pcs.png')"/>
+                      <div class="name">{{item.deviceName}}</div>
+                    </div>
+                  </div>
+                </div>
+<!--                右边的下级 下级有多个-->
+                <div class="item-lists children-item-lists">
+<!--                  下级设备 循环生成-->
+                  <div class="items children-items-arrow bms-children-arrow" v-for="children in  item.children" :key="children.deviceId">
+                    <div class="items-inner">
+                        <div style="text-align: center;margin-bottom:10px;">
+                          <div class="status" :class="children.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[children.communicationStatus] || '-'}}</div>
+                        </div>
+                        <img v-if="children.pictureUrl" :src="children.pictureUrl">
+                        <img v-else :src="require('@/assets/images/ems/bms.png')"/>
+                        <div class="name">{{children.deviceName}}</div>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+
+              <div class="item-square">
+<!--                左边没有下级的pcs-->
+                <div class="item-lists">
+                  <div class="items normal-items-arrow" v-for="item in  pcsNoChildren" :key="item.deviceId">
+                    <div class="items-inner">
+                      <div style="text-align: center;margin-bottom:10px;">
+                        <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
+                      </div>
+                      <img v-if="item.pictureUrl" :src="item.pictureUrl">
+                      <img v-else :src="require('@/assets/images/ems/pcs.png')"/>
+                      <div class="name">{{item.deviceName}}</div>
+                    </div>
+                  </div>
+                </div>
+                <!--                右边没有上级的bms-->
+                <div class="item-lists">
+                  <!--                  下级设备 循环生成-->
+                  <div class="items children-items-arrow" v-for="item in  bms" :key="item.deviceId">
+                    <div class="items-inner">
+                      <div style="text-align: center;margin-bottom:10px;">
+                        <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
+                      </div>
+                      <img v-if="item.pictureUrl" :src="item.pictureUrl">
+                      <img v-else :src="require('@/assets/images/ems/bms.png')"/>
+                      <div class="name">{{item.deviceName}}</div>
+                    </div>
                   </div>
-                    <img v-if="item.pictureUrl" :src="item.pictureUrl">
-                    <img v-else :src="require('@/assets/images/ems/bms.png')"/>
-                  <div class="name">{{item.deviceName}}</div>
                 </div>
               </div>
+
             </div>
-            <div class="col-items" v-if="pcs.length>0">
-              <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 class="row-lists">
+              <div class="item-square">
+                <div class="row-lists-title" style="width:100%;">电表</div>
+              </div>
+              <div class="item-square">
+                <!--                左边的下级 下级有多个-->
+                <div class="item-lists">
+                  <!--                  下级设备 循环生成-->
+                  <div class="items normal-items-arrow" v-for="item in  db" :key="item.deviceId">
+                    <div class="items-inner">
+                      <div style="text-align: center;margin-bottom:10px;">
+                        <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
+                      </div>
+                      <img v-if="item.pictureUrl" :src="item.pictureUrl">
+                      <img v-else :src="require('@/assets/images/ems/bms.png')"/>
+                      <div class="name">{{item.deviceName}}</div>
+                    </div>
                   </div>
-                  <img v-if="item.pictureUrl" :src="item.pictureUrl">
-                  <img v-else :src="require('@/assets/images/ems/pcs.png')"/>
-                  <div class="name">{{item.deviceName}}</div>
                 </div>
               </div>
+
             </div>
-            <div class="col-items" v-if="db.length>0">
-              <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 class="row-lists">
+              <div class="item-square">
+                <div class="row-lists-title" style="width:100%;">冷却</div>
+              </div>
+              <div class="item-square">
+                <div class="item-lists">
+                  <div class="items normal-items-arrow" v-for="item in  lq" :key="item.deviceId">
+                    <div class="items-inner">
+                      <div style="text-align: center;margin-bottom:10px;">
+                        <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
+                      </div>
+                      <img v-if="item.pictureUrl" :src="item.pictureUrl">
+                      <img v-else :src="require('@/assets/images/ems/bms.png')"/>
+                      <div class="name">{{item.deviceName}}</div>
+                    </div>
                   </div>
-                  <img v-if="item.pictureUrl" :src="item.pictureUrl">
-                  <img v-else :src="require('@/assets/images/ems/db.png')"/>
-                  <div class="name">{{item.deviceName}}</div>
-                </div>
-              </div>
-            </div>
-            <div class="col-items" v-if="lq.length>0">
-              <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>
-                  <img v-if="item.pictureUrl" :src="item.pictureUrl">
-                  <img v-else :src="require('@/assets/images/ems/lq.png')"/>
-                  <div class="name">{{item.deviceName}}</div>
                 </div>
               </div>
+
             </div>
+
+
           </div>
         </div>
       </div>
@@ -83,65 +143,11 @@
     </div>
 </template>
 
-<script>
-import {getDeviceList} from'@/api/ems/site'
-import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {mapState} from "vuex";
-export default {
-  name: 'DzjkZxlt',
-  mixins: [getQuerySiteId],
-  data() {
-    return {
-      loading:false,
-      pcs :[],
-      bms:[],
-      db:[],
-      lq:[]
-    }
-  },
-  computed:{
-    ...mapState({
-      communicationStatusOptions:(state)=>state.ems.communicationStatusOptions
-    }),
-    empty(){
-      const {pcs = [], bms = [], db = [], lq = []} =this
-      return pcs.length === 0 && bms.length === 0 && db.length === 0 && lq.length === 0
-    }
-  },
-  methods: {
-    init(){
-      this.pcs = []
-      this.bms = []
-      this.lq=[]
-      this.db=[]
-      this.loading = true
-      getDeviceList(this.siteId).then(response => {
-        const data =JSON.parse(JSON.stringify(response?.data || []))
-        const pcs = [],bms=[],db=[],lq=[]
-        data.forEach(item=>{
-          if(item.deviceCategory === 'AMMETER'){
-            db.push(item)
-          }else if(item.deviceCategory === 'PCS'){
-            pcs.push(item)
-          }else if(item.deviceCategory === 'STACK'){
-            bms.push(item)
-          }else if(item.deviceCategory === 'COOLING'){
-            lq.push(item)
-          }
-        })
-        this.pcs = pcs
-        this.bms = bms
-        this.lq=lq
-        this.db=db
-      }).finally(() => {
-        this.loading = false
-      })
-    }
-  },
-}
-</script>
-
 <style lang="scss" scoped>
+$distance:60px;
+$arrowDistance:80px;//margin:60+quare的padding10
+$arrowColoe:#5ea9df;
+$lineColoe:#5ea9df;
 .ems-dashboard-editor-container {
   background-color: #ffffff;
   padding:0;
@@ -149,6 +155,7 @@ export default {
     position: relative;
     overflow-x: auto;
   }
+  //云 、计算机 、箭头
   .top{
     width: 280px;
     font-size: 30px;
@@ -188,13 +195,13 @@ export default {
     }
     //双箭头
     .double-arrows {
-      height: 95px;
+      height: 50px;
       margin:20px 0;
       text-align: center;
       .top-arrows,.bottom-arrows{
         height: 100%;
         width: 6px;
-        background-color: #5ea9df;
+        background-color: $arrowColoe;
         display: inline-block;
         margin: 0 10px;
         position: relative;
@@ -216,7 +223,7 @@ export default {
         border-bottom: 12px solid transparent;
         border-left: 12px solid transparent;
         border-right: 12px solid transparent;
-        border-top: 14px solid #5ea9df;
+        border-top: 14px solid $arrowColoe;
         left: -9px;
       }
       .bottom-arrows{
@@ -226,7 +233,7 @@ export default {
           border-top: 12px solid transparent;
           border-left: 12px solid transparent;
           border-right: 12px solid transparent;
-          border-bottom: 14px solid #5ea9df;
+          border-bottom: 14px solid $arrowColoe;
           left: -9px;
         }
       }
@@ -246,10 +253,10 @@ export default {
       }
     }
     .arrow{
-      height: 95px;
+      height: 50px;
       width: 30px;
       border-radius: 5px;
-      background-color: #5ea9df;
+      background-color: $arrowColoe;
       position: relative;
       margin:0 auto;
       &::after{
@@ -258,7 +265,7 @@ export default {
         width: 0;
         height: 0;
         left: -9px;
-        border-top: 24px solid #5ea9df;
+        border-top: 24px solid $arrowColoe;
         border-left: 24px solid transparent;
         border-bottom: 24px solid transparent;
         border-right: 24px solid transparent;
@@ -270,144 +277,330 @@ export default {
   .bottom{
     z-index:1;
     box-sizing: border-box;
-    margin-top:100px;
+    margin-top:50px;
     .zxlt-row{
       display: flex;
-    }
-    .col-items{
-      padding-right: 120px;
+      padding:20px $distance;
       position: relative;
       &:before{
         content: '';
         display: block;
-        height: 2px;
-        width: 100%;
-        background-color: #5ea9df;
-        position: absolute;
-        top: -50px;//高出的50px
-        left: 0;
+        width:calc(100% - 120px);
+        height:1px;
+        background-color: $lineColoe;
+        position:absolute;
+        top:0;
+        left: $distance/2;
       }
-      &:last-child{
-        margin-bottom: 0;
+      .row-lists{
+        height: fit-content;
+        position: relative;
         &:before{
           content: '';
           display: block;
-          height: 2px;
-          width: calc(100% - 60px);
-          background-color: #5ea9df;
+          height: 100%;
+          width: 1px;
           position: absolute;
-          top: -50px;//高出的50px
-          left: 0;
+          left:-($distance/2);
+          top:-20px;
+          background-color: $lineColoe;
         }
-      }
-    }
-    .item-lists{
-      position: relative;
-      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;
-        color: #333333;
-        font-weight: 500;
-        text-align: center;
-        margin-bottom:20px;
-
-      }
-      .items{
-        background-color: #ffffff;
-        position: relative;
-        border-radius: 5px;
-        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
+        //pcs列 bms右侧的边框
+        &.pcs-row-lists{
           &: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;
+            height: 100%;
+            width: 1px;
             position: absolute;
-            top: -8px;
-            left: -20px;
+            right:-(($distance/2) + 1);
+            top:-20px;
+            background-color: $lineColoe;
           }
         }
+        &:not(:last-child){
+          margin-right: $distance;
+        }
+        .item-square{
+          //左右 两列
+          display: flex;
+          vertical-align: middle;
+          align-items: flex-start;
+          padding:10px;
+          border-radius: 5px;
+          &:not(:last-child){
+            margin-bottom: 40px;
+          }
+          .row-lists-title{
+            font-size: 20px;
+            line-height: 20px;
+            color: #333333;
+            font-weight: 500;
+            text-align: center;
+            width: 50%;
+          }
+          .item-lists{
+            position: relative;
+            &:not(:last-child){
+              margin-right: $distance;
+            }
+              //每个设备
+            .items{
+              background-color: #cbebfd;
+              position: relative;
+              border-radius: 5px;
+              padding: 10px;
+              box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 rgba(0, 0, 0, 0.5);
+              //普通设备 箭头方向
+              &.normal-items-arrow{
+                &:before{
+                  content: '';
+                  display: block;
+                  width:($arrowDistance/2) - 15;
+                  height: 4px;
+                  background-color: $arrowColoe;
+                  position: absolute;
+                  top:50%;
+                  left: -($arrowDistance/2);
+                  transform: translateY(-50%);
+                }
+                &:after{
+                  content: '';
+                  display: block;
+                  height: 0;
+                  width: 0;
+                  border-left: 10px solid #5ea9df;
+                  border-right: 10px solid transparent;
+                  border-bottom: 10px solid transparent;
+                  border-top: 10px solid transparent;
+                  position: absolute;
+                  top: 50%;
+                  left: -15px;
+                  transform: translateY(-50%);
+                }
+              }
+              //下级的箭头
+              &.children-items-arrow{
+                &:before{
+                  content: '';
+                  display: block;
+                  width:($arrowDistance/2) - 15;
+                  height: 4px;
+                  background-color: $arrowColoe;
+                  position: absolute;
+                  top:50%;
+                  right: -($arrowDistance/2);
+                  transform: translateY(-50%);
+                }
+                &: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: 50%;
+                  right: -15px;
+                  transform: translateY(-50%);
+                }
+              }
+              &:not(:last-child){
+                margin-bottom: 15px;
+              }
 
-        img{
-          width: 120px;
-          height: auto;
-          display: block;
-          z-index:2;
-        }
-        .name{
-          text-align: center;
-          margin-top:10px;
-          font-size: 14px;
-          line-height: 20px;
-          z-index:2;
-        }
-        .status{
-          z-index:2;
-          margin-top:10px;
-          font-size: 14px;
-          line-height: 20px;
-          position: relative;
-          padding-left:20px;
-          display: inline;
-          &.status-normal {
-            &:before {
-              content: "";
-              display: block;
-              width: 15px;
-              height: 15px;
-              border-radius: 50%;
-              background-color: #05AEA3;
-              position: absolute;
-              top:50%;
-              left:0;
-              transform: translate(0,-50%);
+              .items-inner{
+                background-color: #ffffff;
+                border-radius: 5px;
+                padding:10px;
+                width:130px;
+                text-align: center;
+              }
+
+              img{
+                width: 80px;
+                height: auto;
+                display: block;
+                z-index:2;
+                margin: 0 auto;
+              }
+              .name{
+                text-align: center;
+                margin-top:10px;
+                font-size: 14px;
+                line-height: 20px;
+                z-index:2;
+              }
+              .status{
+                z-index:2;
+                margin-top:10px;
+                font-size: 14px;
+                line-height: 20px;
+                position: relative;
+                padding-left:20px;
+                display: inline;
+                &.status-normal {
+                  &:before {
+                    content: "";
+                    display: block;
+                    width: 15px;
+                    height: 15px;
+                    border-radius: 50%;
+                    background-color: #05AEA3;
+                    position: absolute;
+                    top:50%;
+                    left:0;
+                    transform: translate(0,-50%);
+                  }
+                }
+                &.status-warn{
+                  &:before{
+                    content: "";
+                    display: inline-block;
+                    width: 15px;
+                    height: 15px;
+                    border-radius: 50%;
+                    background-color: #FC6B69;
+                    position: absolute;
+                    top:50%;
+                    left:0;
+                    transform: translate(0,-50%);
+                  }
+                }
+              }
             }
           }
-          &.status-warn{
+          .children-item-lists{
+            //todo 手动修改
             &:before{
-              content: "";
-              display: inline-block;
-              width: 15px;
-              height: 15px;
-              border-radius: 50%;
-              background-color: #FC6B69;
+              content: '';
+              display: block;
+              width:40px;
+              height: 4px;
+              background-color: $arrowColoe;
               position: absolute;
               top:50%;
-              left:0;
-              transform: translate(0,-50%);
+              left: -50px;
+              transform:translateY(-50%);
+            }
+            &:after{
+              content: '';
+              display: block;
+              height: 0;
+              width: 0;
+              border-left: 10px solid #5ea9df;
+              border-right: 10px solid transparent;
+              border-bottom: 10px solid transparent;
+              border-top: 10px solid transparent;
+              position: absolute;
+              top: 50%;
+              left: -14px;
+              transform:translateY(-50%);
             }
           }
         }
+        .pcs-has-children-item-square{
+          vertical-align: middle;
+          align-items: center;
+          background-color: #ffefad;
+        }
       }
     }
 
+
   }
 }
 </style>
+
+<script>
+import {getDeviceList} from'@/api/ems/site'
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {mapState} from "vuex";
+export default {
+  name: 'DzjkZxlt',
+  mixins: [getQuerySiteId],
+  data() {
+    return {
+      loading:false,
+      pcs :[],
+      bms:[],
+      db:[],
+      lq:[],
+      pcsHasChildren:[],
+      pcsNoChildren:[],
+      list:{
+        pcs :[],
+        bms:[],
+        db:[],
+        lq:[],
+      }
+    }
+  },
+  computed:{
+    ...mapState({
+      communicationStatusOptions:(state)=>state.ems.communicationStatusOptions
+    }),
+    empty(){
+      const {pcs = [], bms = [], db = [], lq = []} =this
+      return pcs.length === 0 && bms.length === 0 && db.length === 0 && lq.length === 0
+    }
+  },
+  methods: {
+    init(){
+      this.pcs = []
+      this.bms = []
+      this.lq=[]
+      this.db=[]
+      this.loading = true
+      getDeviceList(this.siteId).then(response => {
+        const data =JSON.parse(JSON.stringify(response?.data || []))
+        const pcs = [],bms=[],db=[],lq=[]
+        data.forEach(item=>{
+          // 电表
+          if(item.deviceCategory === 'AMMETER'){
+            db.push({...item,children:[]})
+          }else if(item.deviceCategory === 'PCS'){
+            // pcs
+            pcs.push({...item,children:[]})
+          }else if(item.deviceCategory === 'STACK'){
+            // bms
+            bms.push({...item,children:[]})
+          }else if(item.deviceCategory === 'COOLING'){
+            // 液冷
+            lq.push({...item,children:[]})
+          }
+        })
+        bms.forEach((item,index)=>{
+          if(item.parentId){
+            //todo 删除第二个children
+            pcs.find(pcsItem=>pcsItem.deviceId === item.parentId).children.push(item)
+            pcs.find(pcsItem=>pcsItem.deviceId === item.parentId).children.push(item)
+            bms.splice(index,1)
+          }
+        })
+        // todo
+        // delete
+        this.pcs = pcs
+        this.bms = bms
+        this.lq=lq
+        this.db=db
+        this.pcsHasChildren = pcs.filter(item=>item.children.length > 0)
+        this.pcsNoChildren = pcs.filter(item=>item.children.length === 0)
+
+        this.list={
+          pcs,
+          bms,
+          lq,
+          db
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    }
+  },
+}
+</script>
+
+