主线路图样式

src/views/ems/dzjk/zxlt/index.vue

@@ -20,16 +20,16 @@
         <div class="bottom">
 <!--          四列设备-->
           <div class="zxlt-row">
-<!--            三列 下级和上级在一列 -->
+<!--            bms、pcs 下级和上级在一列 -->
-            <div class="row-lists pcs-row-lists">
+            <div class="row-lists pcs-row-lists" v-if="showPcsAndBms">
               <div class="item-square">
-                <div class="row-lists-title">PCS</div>
+                <div class="row-lists-title" v-if="showPcs">PCS</div>
-                <div class="row-lists-title">BMS</div>
+                <div class="row-lists-title" v-if="showBms">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-square pcs-has-children-item-square" :class="{'no-bms-list':!showBms}" v-for="(item,index) in pcsHasChildren" :key="index+'pcsHasChildren'">
                 <!--                左边的上级 上级只有一个-->
-                <div class="item-lists">
+                <div class="item-lists parent-item-lists">
                   <!--                  上级设备-->
                   <div class="items normal-items-arrow">
                     <div class="items-inner">
@@ -58,8 +58,8 @@
                 </div>
 
               </div>
-
+<!--                没有上下级关系的bms、pcs-->
-              <div class="item-square">
+              <div class="item-square" :class="{'no-bms-list':!showBms}">
 <!--                左边没有下级的pcs-->
                 <div class="item-lists">
                   <div class="items normal-items-arrow" v-for="item in  pcsNoChildren" :key="item.deviceId">
@@ -76,7 +76,7 @@
                 <!--                右边没有上级的bms-->
                 <div class="item-lists">
                   <!--                  下级设备 循环生成-->
-                  <div class="items children-items-arrow" v-for="item in  bms" :key="item.deviceId">
+                  <div class="items children-items-arrow" v-for="item in  bmsNoParent" :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>
@@ -88,10 +88,9 @@
                   </div>
                 </div>
               </div>
-
             </div>
-<!--            -->
+<!--            电表-->
-            <div class="row-lists">
+            <div class="row-lists" v-if="showDb">
               <div class="item-square">
                 <div class="row-lists-title" style="width:100%;">电表</div>
               </div>
@@ -113,8 +112,8 @@
               </div>
 
             </div>
-
+<!--冷却-->
-            <div class="row-lists">
+            <div class="row-lists" v-if="showLq">
               <div class="item-square">
                 <div class="row-lists-title" style="width:100%;">冷却</div>
               </div>
@@ -132,10 +131,7 @@
                   </div>
                 </div>
               </div>
-
             </div>
-
-
           </div>
         </div>
       </div>
@@ -143,6 +139,99 @@
     </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:[],
+      pcsHasChildren:[],
+      pcsNoChildren:[],
+      bmsNoParent:[]
+    }
+  },
+  computed:{
+    ...mapState({
+      communicationStatusOptions:(state)=>state.ems.communicationStatusOptions
+    }),
+
+    showPcs(){
+      return this.pcs.length>0
+    },
+    showBms(){
+      return this.bms.length>0
+    },
+    showDb(){
+      return this.db.length>0
+    },
+    showLq(){
+      return this.lq.length>0
+    },
+    showPcsAndBms(){
+      return this.showPcs || this.showBms
+    },
+    empty(){
+      return !this.showBms && !this.showPcs && !this.showDb && !this.showLq
+    },
+
+  },
+  methods: {
+    init(){
+      this.pcs = []
+      this.bms = []
+      this.lq=[]
+      this.db=[]
+      this.bmsNoParent=[]
+      this.loading = true
+      getDeviceList(this.siteId).then(response => {
+        const data =JSON.parse(JSON.stringify(response?.data || []))
+        let pcs = [],bms=[],db=[],lq=[],bmsNoParent=[]
+        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){
+            pcs.find(pcsItem=>pcsItem.deviceId === item.parentId).children.push(item)
+          }else{
+            bmsNoParent.push(item)
+          }
+        })
+        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.bmsNoParent = bmsNoParent
+      }).finally(() => {
+        this.loading = false
+      })
+    }
+  },
+}
+</script>
+
 <style lang="scss" scoped>
 $distance:60px;
 $arrowDistance:80px;//margin:60+quare的padding10
@@ -282,10 +371,11 @@ $lineColoe:#5ea9df;
       display: flex;
       padding:20px $distance;
       position: relative;
+      width: fit-content;
       &:before{
         content: '';
         display: block;
-        width:calc(100% - 120px);
+        width:calc(100% - 100px);
         height:1px;
         background-color: $lineColoe;
         position:absolute;
@@ -337,7 +427,7 @@ $lineColoe:#5ea9df;
             color: #333333;
             font-weight: 500;
             text-align: center;
-            width: 50%;
+            flex: 1;
           }
           .item-lists{
             position: relative;
@@ -506,6 +596,13 @@ $lineColoe:#5ea9df;
           align-items: center;
           background-color: #ffefad;
         }
+        .no-bms-list{
+          .item-lists{
+            &:not(:last-child){
+              margin-right:0;
+            }
+          }
+        }
       }
     }
 
@@ -514,93 +611,4 @@ $lineColoe:#5ea9df;
 }
 </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>
-