diff --git a/src/views/ems/dzjk/zxlt/index copy 2.vue b/src/views/ems/dzjk/zxlt/index copy 2.vue
new file mode 100644
index 0000000..b367064
--- /dev/null
+++ b/src/views/ems/dzjk/zxlt/index copy 2.vue	
@@ -0,0 +1,577 @@
+<template>
+  <div class="ems-dashboard-editor-container" v-loading="loading">
+    <div class="container" v-show="!empty">
+      <!-- 云、电脑 -->
+      <div class="top">
+        <div class="cloud-container">
+          <div class="cloud">
+            <span style="z-index: 2; position: relative">云</span>
+          </div>
+        </div>
+        <div class="double-arrows">
+          <div class="top-arrows"></div>
+          <div class="bottom-arrows"></div>
+        </div>
+        <div class="computer">
+          <img src="@/assets/images/ems/computer.png" alt="" />
+          <span style="z-index: 2; position: relative">ems</span>
+        </div>
+      </div>
+      <div class="outer-border">
+        <!--            电表-->
+        <div class="row-lists-container" v-if="showDb">
+          <div class="row-title">电表({{ db.length }})</div>
+          <div class="row-lists">
+            <div v-for="item in db" :key="item.deviceId" class="row-items">
+              <div
+                class="status"
+                :class="
+                  item.communicationStatus === '0' ? 'status-running' : ''
+                "
+              >
+                {{ communicationStatusOptions[item.communicationStatus] }}
+              </div>
+              <div class="row-items-img">
+                <img
+                  class="img-db"
+                  :src="require('@/assets/images/ems/db.png')"
+                />
+                <div class="name">{{ item.deviceName }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!--            液冷-->
+        <div class="row-lists-container" v-if="showLq">
+          <div class="row-title">冷却({{ lq.length }})</div>
+          <div class="row-lists">
+            <div v-for="item in lq" :key="item.deviceId" class="row-items">
+              <div
+                class="status"
+                :class="
+                  item.communicationStatus === '0' ? 'status-running' : ''
+                "
+              >
+                {{ communicationStatusOptions[item.communicationStatus] }}
+              </div>
+              <div class="row-items-img">
+                <img
+                  class="img-lq"
+                  :src="require('@/assets/images/ems/lq.png')"
+                />
+                <div class="name">{{ item.deviceName }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!--            PCS-->
+        <div class="row-lists-container" v-if="showPcs">
+          <div class="row-lists">
+            <div class="row-title">PCS({{ pcs.length }})</div>
+            <div
+              v-for="(item, index) in pcs"
+              :key="item.deviceId"
+              class="row-items row-items-pcs"
+            >
+              <!-- pcs -->
+              <div class="parent-dash">
+                <div
+                  class="status"
+                  :class="
+                    item.communicationStatus === '0' ? 'status-running' : ''
+                  "
+                >
+                  {{ communicationStatusOptions[item.communicationStatus] }}
+                </div>
+                <div class="row-items-img">
+                  <img
+                    class="img-pcs"
+                    :src="require('@/assets/images/ems/pcs.png')"
+                  />
+                  <div class="name">{{ item.deviceName }}</div>
+                </div>
+              </div>
+              <!-- 子设备 bms -->
+              <div
+                v-if="item.children && item.children.length > 0"
+                class="children-dash"
+              >
+                <div
+                  class="row-children-title"
+                  v-if="bmsHasParentLength > 0 && index === 0"
+                >
+                  BMS({{ bmsHasParentLength }})
+                </div>
+                <div
+                  v-for="(childrenItem, childrenIndex) in item.children"
+                  :key="childrenIndex + 'childrenBms'"
+                  class="children-dash-items"
+                >
+                  <div
+                    class="status"
+                    :class="
+                      childrenItem.communicationStatus === '0'
+                        ? 'status-running'
+                        : ''
+                    "
+                  >
+                    {{
+                      communicationStatusOptions[
+                        childrenItem.communicationStatus
+                      ]
+                    }}
+                  </div>
+                  <div class="row-items-img">
+                    <img
+                      class="img-pcs"
+                      :src="require('@/assets/images/ems/bms.png')"
+                    />
+                    <div class="name">{{ childrenItem.deviceName }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row-lists-container" v-if="showPcs">
+          <div class="row-title">PCS({{ pcs.length }})</div>
+          <div class="row-lists">
+            <div
+              v-for="item in bmsNoParent"
+              :key="item.deviceId"
+              class="row-items row-items-pcs"
+            >
+              <!-- pcs -->
+              <div class="parent-dash">
+                <div
+                  class="status"
+                  :class="
+                    item.communicationStatus === '0' ? 'status-running' : ''
+                  "
+                >
+                  {{ communicationStatusOptions[item.communicationStatus] }}
+                </div>
+                <div class="row-items-img">
+                  <img :src="require('@/assets/images/ems/bms.png')" />
+                  <div class="name">{{ item.deviceName }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--            bms没有上级设备-->
+        <div class="row-lists-container" v-if="bmsNoParent.length > 0">
+          <div class="row-title">BMS({{ bmsNoParent.length }})</div>
+          <div class="row-lists">
+            <div
+              v-for="item in bmsNoParent"
+              :key="item.deviceId"
+              class="row-items row-items-pcs"
+            >
+              <!-- pcs -->
+              <div class="parent-dash">
+                <div
+                  class="status"
+                  :class="
+                    item.communicationStatus === '0' ? 'status-running' : ''
+                  "
+                >
+                  {{ communicationStatusOptions[item.communicationStatus] }}
+                </div>
+                <div class="row-items-img">
+                  <img :src="require('@/assets/images/ems/bms.png')" />
+                  <div class="name">{{ item.deviceName }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-empty v-show="empty" :image-size="200"></el-empty>
+  </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;
+    },
+    bmsHasParentLength() {
+      let count = 0;
+      this.pcs.forEach((item) => (count += item.children.length));
+      return count;
+    },
+    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>
+$sqDistance: 30px;
+$borderColor: #174a8e;
+$lineColor: #86bcc7;
+
+.ems-dashboard-editor-container {
+  background-color: #ffffff;
+  padding: 0;
+  color: #666666;
+
+  .container {
+    display: flex;
+    position: relative;
+  }
+  //云 、计算机 、箭头
+  .top {
+    z-index: 2;
+    width: fit-content;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // position: absolute;
+    // top: 50%;
+    // left: 0;
+    // transform: translateY(-50%);
+    //云 样式
+    .cloud-container {
+      margin: 0 auto;
+      .cloud {
+        width: 60px;
+        height: 26px;
+        background: #cbebfd;
+        border-radius: 100px;
+        position: relative;
+        text-align: center;
+        font-weight: bold;
+        font-size: 14px;
+        line-height: 26px;
+      }
+      .cloud:before,
+      .cloud:after {
+        content: "";
+        position: absolute;
+        background: #cbebfd;
+        width: 30px;
+        height: 30px;
+        border-radius: 100%;
+      }
+      .cloud:before {
+        top: -9px;
+        left: 8px;
+      }
+      .cloud:after {
+        top: -6px;
+        right: 9px;
+      }
+    }
+    //双箭头
+    .double-arrows {
+      height: fit-content;
+      margin: 0 10px;
+      text-align: center;
+      .top-arrows,
+      .bottom-arrows {
+        height: 4px;
+        width: 30px;
+        background-color: #5ea9df;
+        margin: 0 10px;
+        position: relative;
+        &::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          width: 0;
+          height: 0;
+        }
+      }
+      .top-arrows {
+        vertical-align: super;
+      }
+      .top-arrows::after {
+        top: -4px;
+        border-bottom: 6px solid transparent;
+        border-left: 6px solid transparent;
+        border-right: 6px solid #5ea9df;
+        border-top: 6px solid transparent;
+        left: -11px;
+      }
+      .bottom-arrows {
+        margin-top: 8px;
+        &::after {
+          top: -4px;
+          border-top: 6px solid transparent;
+          border-left: 6px solid #5ea9df;
+          border-right: 6px solid transparent;
+          border-bottom: 6px solid transparent;
+          right: -11px;
+          left: auto;
+        }
+      }
+    }
+
+    //电脑
+    .computer {
+      text-align: center;
+      font-size: 14px;
+      line-height: 16px;
+      font-weight: bold;
+      position: relative;
+      background: #fff;
+      img {
+        width: 80px;
+        height: auto;
+        display: block;
+      }
+    }
+  }
+  .outer-border {
+    position: relative;
+    width: fit-content;
+    border: 1.5px solid $borderColor;
+    border-radius: 5px;
+    padding-left: 120px;
+    padding-right: 20px;
+    margin-left: -40px;
+  }
+
+  // 设备列表
+  .row-lists-container {
+    font-size: 10px;
+    position: relative;
+    padding: 10px;
+    .row-title {
+      position: absolute;
+      left: -$sqDistance - 30px;
+      top: calc(50% + 10px);
+      transform: translateY(-50%);
+      color: #000;
+      font-weight: bolder;
+    }
+    .row-lists {
+      display: flex;
+      position: relative;
+      .row-items {
+        position: relative;
+        padding: 5px 0;
+        &:not(:first-child) {
+          margin-left: $sqDistance; //和外层父元素上下padding一致
+        }
+        &::before {
+          content: "";
+          display: block;
+          height: 3px;
+          width: $sqDistance - 2px;
+          background: $lineColor;
+          position: absolute;
+          left: -$sqDistance;
+          top: calc(50% + 10px);
+          transform: scale(1, 0.4);
+        }
+        // 一列 第一个设备最上面的线
+        &:first-child {
+          &::before {
+            width: $sqDistance + 20px;
+            // top: -$sqDistance - 20px;
+          }
+        }
+        // 一列 最后一个设备最下面的线
+        // &:last-child {
+        //   &::after {
+        //     content: "";
+        //     display: block;
+        //     width: 3px;
+        //     height: $sqDistance - 2px;
+        //     background: $lineColor;
+        //     position: absolute;
+        //     bottom: -$sqDistance;
+        //     left: 50%;
+        //     transform: scale(0.4, 1);
+        //   }
+        // }
+        // 设备状态
+        .status {
+          margin: 0 auto 4px;
+          width: fit-content;
+          height: 18px;
+          padding: 0 8px;
+          box-sizing: border-box;
+          text-align: center;
+          font-size: 8px;
+          line-height: 18px;
+          border: 1px solid #08ffff;
+          border-radius: 2px;
+          background: #aaaaaa;
+          color: #ffffff;
+          &.status-running {
+            background: #00c69c;
+          }
+        }
+        // 图片+设备名称
+        .row-items-img {
+          position: relative;
+          padding-top: 12px;
+          img {
+            width: 80px;
+            height: auto;
+            display: block;
+            &.img-lq {
+              width: 50px;
+            }
+            &.img-pcs {
+              width: 50px;
+            }
+            &.img-db {
+              width: 56px;
+            }
+          }
+          .name {
+            position: absolute;
+            top: 1px;
+            left: 0;
+            color: #666;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+  }
+
+  //子设备
+  .row-lists-container-children {
+    margin: 10px 0 0 $sqDistance;
+    .parent-dash {
+      position: relative;
+      &::before {
+        content: "";
+        display: block;
+        height: 40px;
+        width: 3px;
+        background: #ec7f8c;
+        position: absolute;
+        left: 20%;
+        top: -40px;
+        transform: scale(0.4, 1) rotate(-40deg);
+      }
+    }
+  }
+  .parent-dash {
+    width: fit-content;
+  }
+  .children-dash {
+    margin: $sqDistance 0 0 $sqDistance;
+    position: relative;
+    .row-children-title {
+      position: absolute;
+      left: -$sqDistance - 30px;
+      top: calc(50% + 10px);
+      transform: translateY(-50%);
+      color: #000;
+      font-weight: bolder;
+    }
+    .children-dash-items {
+      position: relative;
+      &::before {
+        content: "";
+        display: block;
+        height: $sqDistance;
+        width: 3px;
+        background: #ec7f8c;
+        position: absolute;
+        left: 20%;
+        top: -$sqDistance;
+        transform: scale(0.4, 1) rotate(-40deg);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/ems/dzjk/zxlt/index.vue b/src/views/ems/dzjk/zxlt/index.vue
index eef7b78..98a3999 100644
--- a/src/views/ems/dzjk/zxlt/index.vue
+++ b/src/views/ems/dzjk/zxlt/index.vue
@@ -21,89 +21,174 @@
         <!--            电表-->
         <div class="row-lists-container" v-if="showDb">
           <div class="row-title">电表({{ db.length }})</div>
-          <div class="row-lists">
-            <div v-for="item in db" :key="item.deviceId" class="row-items">
-              <div
-                class="status"
-                :class="
-                  item.communicationStatus === '0' ? 'status-running' : ''
-                "
-              >
-                {{ communicationStatusOptions[item.communicationStatus] }}
+          <div
+            class="row-lists"
+            v-for="outter in Math.ceil(db.length / 3)"
+            :key="outter + 'row'"
+          >
+            <template v-for="(item, index) in handlerList('db', outter)">
+              <div :key="index" class="row-items">
+                <div
+                  style="position: relative; z-index: 2; background-color: #fff"
+                >
+                  <div
+                    class="status"
+                    :class="
+                      item.communicationStatus === '0' ? 'status-running' : ''
+                    "
+                  >
+                    {{ communicationStatusOptions[item.communicationStatus] }}
+                  </div>
+                  <div class="row-items-img">
+                    <img
+                      class="img-db"
+                      :src="require('@/assets/images/ems/db.png')"
+                    />
+                    <div class="name">{{ item.deviceName }}</div>
+                  </div>
+                </div>
               </div>
-              <div class="row-items-img">
-                <img
-                  class="img-db"
-                  :src="require('@/assets/images/ems/db.png')"
-                />
-                <div class="name">{{ item.deviceName }}</div>
-              </div>
-            </div>
+            </template>
           </div>
         </div>
 
-        <!--            液冷-->
+        <!--            冷却-->
         <div class="row-lists-container" v-if="showLq">
           <div class="row-title">冷却({{ lq.length }})</div>
-          <div class="row-lists">
-            <div v-for="item in lq" :key="item.deviceId" class="row-items">
-              <div
-                class="status"
-                :class="
-                  item.communicationStatus === '0' ? 'status-running' : ''
-                "
-              >
-                {{ communicationStatusOptions[item.communicationStatus] }}
+          <div
+            class="row-lists"
+            v-for="outter in Math.ceil(lq.length / 3)"
+            :key="outter + 'row'"
+          >
+            <template v-for="(item, index) in handlerList('lq', outter)">
+              <div :key="index" class="row-items">
+                <div
+                  style="position: relative; z-index: 2; background-color: #fff"
+                >
+                  <div
+                    class="status"
+                    :class="
+                      item.communicationStatus === '0' ? 'status-running' : ''
+                    "
+                  >
+                    {{ communicationStatusOptions[item.communicationStatus] }}
+                  </div>
+                  <div class="row-items-img">
+                    <img
+                      class="img-lq"
+                      :src="require('@/assets/images/ems/lq.png')"
+                    />
+                    <div class="name">{{ item.deviceName }}</div>
+                  </div>
+                </div>
               </div>
-              <div class="row-items-img">
-                <img
-                  class="img-lq"
-                  :src="require('@/assets/images/ems/lq.png')"
-                />
-                <div class="name">{{ item.deviceName }}</div>
-              </div>
-            </div>
+            </template>
           </div>
         </div>
 
-        <!--            PCS-->
-        <div class="row-lists-container row-lists-container-pcs" v-if="showPcs">
-          <div class="row-title">PCS({{ pcs.length }})</div>
-          <div class="row-lists">
-            <div
-              v-for="item in pcs"
-              :key="item.deviceId"
-              class="row-items row-items-pcs"
+        <!--            没有上级设备的bms -->
+        <div
+          class="row-lists-container"
+          v-if="bmsHasParentLength !== bms.length"
+        >
+          <div class="row-title">BMS({{ bmsNoParent.length }})</div>
+          <div
+            class="row-lists"
+            v-for="outter in Math.ceil(bmsNoParent.length / 3)"
+            :key="outter + 'row'"
+          >
+            <template
+              v-for="(item, index) in handlerList('bmsNoParent', outter)"
             >
-              <!-- pcs -->
-              <div class="parent-dash">
+              <div :key="index" class="row-items">
                 <div
-                  class="status"
-                  :class="
-                    item.communicationStatus === '0' ? 'status-running' : ''
-                  "
+                  style="position: relative; z-index: 2; background-color: #fff"
                 >
-                  {{ communicationStatusOptions[item.communicationStatus] }}
-                </div>
-                <div class="row-items-img">
-                  <img
-                    class="img-pcs"
-                    :src="require('@/assets/images/ems/pcs.png')"
-                  />
-                  <div class="name">{{ item.deviceName }}</div>
+                  <div
+                    class="status"
+                    :class="
+                      item.communicationStatus === '0' ? 'status-running' : ''
+                    "
+                  >
+                    {{ communicationStatusOptions[item.communicationStatus] }}
+                  </div>
+                  <div class="row-items-img">
+                    <img
+                      class="img-bms"
+                      :src="require('@/assets/images/ems/bms.png')"
+                    />
+                    <div class="name">{{ item.deviceName }}</div>
+                  </div>
                 </div>
               </div>
-              <!-- 子设备 bms -->
-              <div
-                v-if="item.children && item.children.length > 0"
-                class="children-dash"
-              >
+            </template>
+          </div>
+        </div>
+
+        <!--  pcs -->
+        <div
+          class="row-lists-container row-lists-container-with-children"
+          v-if="showPcs"
+        >
+          <div class="row-title">
+            PCS({{ pcs.length }}){{
+              pcsHasChildren.length > 0 ? `、BMS(${pcsHasChildren.length})` : ""
+            }}
+          </div>
+          <div
+            class="row-lists"
+            v-for="outter in Math.ceil(pcs.length / 3)"
+            :key="outter + 'row'"
+          >
+            <template v-for="(item, index) in handlerList('pcs', outter)">
+              <div :key="index" class="row-items">
+                <!-- 上级设备 -->
+                <div class="parent-dash">
+                  <div
+                    class="status"
+                    :class="
+                      item.communicationStatus === '0' ? 'status-running' : ''
+                    "
+                  >
+                    {{ communicationStatusOptions[item.communicationStatus] }}
+                  </div>
+                  <div class="row-items-img">
+                    <img
+                      class="img-pcs"
+                      :src="require('@/assets/images/ems/pcs.png')"
+                    />
+                    <div class="name">{{ item.deviceName }}</div>
+                  </div>
+                </div>
+                <!-- 下级设备 -->
                 <div
-                  v-for="(childrenItem, childrenIndex) in item.children"
-                  :key="childrenIndex + 'childrenBms'"
-                ></div>
+                  class="children-dash"
+                  v-if="item.children && item.children.length > 0"
+                >
+                  <div
+                    class="status"
+                    :class="
+                      item.children[0].communicationStatus === '0'
+                        ? 'status-running'
+                        : ''
+                    "
+                  >
+                    {{
+                      communicationStatusOptions[
+                        item.children[0].communicationStatus
+                      ]
+                    }}
+                  </div>
+                  <div class="row-items-img">
+                    <img
+                      class="img-pcs"
+                      :src="require('@/assets/images/ems/bms.png')"
+                    />
+                    <div class="name">{{ item.children[0].deviceName }}</div>
+                  </div>
+                </div>
               </div>
-            </div>
+            </template>
           </div>
         </div>
       </div>
@@ -126,8 +211,6 @@ export default {
       bms: [],
       db: [],
       lq: [],
-      pcsHasChildren: [],
-      pcsNoChildren: [],
       bmsNoParent: [],
     };
   },
@@ -149,14 +232,30 @@ export default {
     showLq() {
       return this.lq.length > 0;
     },
-    showPcsAndBms() {
-      return this.showPcs || this.showBms;
+    bmsHasParentLength() {
+      let count = 0;
+      this.pcs.forEach((item) => (count += item.children.length));
+      return count;
+    },
+    pcsHasChildren() {
+      return this.pcs.filter(
+        (item) => item.children && item.children.length > 0
+      );
     },
     empty() {
       return !this.showBms && !this.showPcs && !this.showDb && !this.showLq;
     },
   },
   methods: {
+    handlerList(type, index) {
+      const arr = this[type];
+      const max = index * 3 > arr.length ? arr.length % 3 : 3;
+      let result = [];
+      for (let i = 1; i <= max; i++) {
+        result.push(arr[i - 1 + 3 * (index - 1)]);
+      }
+      return result;
+    },
     init() {
       this.pcs = [];
       this.bms = [];
@@ -200,8 +299,6 @@ export default {
           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(() => {
@@ -332,126 +429,166 @@ $lineColor: #86bcc7;
   .outer-border {
     position: relative;
     width: fit-content;
-    border: 2px solid $borderColor;
-    padding-left: 120px;
+    border: 1.5px solid $borderColor;
+    padding-left: 40px;
     margin-left: -40px;
-  }
-
-  // 设备列表
-  .row-lists-container {
-    font-size: 10px;
-    position: relative;
-    padding: 10px;
-    .row-title {
-      position: absolute;
-      left: -$sqDistance - 30px;
-      top: calc(50% + 10px);
-      transform: translateY(-50%);
-      color: #000;
-      font-weight: bolder;
-    }
-    .row-lists {
-      display: flex;
+    display: flex;
+    // 设备列表
+    .row-lists-container {
+      font-size: 10px;
       position: relative;
-      // width: fit-content;
-      // &::before {
-      //   content: "";
-      //   display: block;
-      //   height: 3px;
-      //   width: 100%;
-      //   background: $lineColor;
-      //   position: absolute;
-      //   right: 60px;
-      //   top: 50%;
-      //   transform: scale(0.4, 1);
-      // }
-      .row-items {
+      padding: 10px 20px;
+      display: flex;
+
+      &:not(:first-child) {
+        background: linear-gradient(
+          to top,
+          transparent 0%,
+          transparent 50%,
+          #ccc 50%,
+          #ccc 100%
+        );
+        background-size: 1px 10px;
+        background-repeat: repeat-y;
+      }
+
+      .row-title {
+        position: absolute;
+        left: -$sqDistance - 30px;
+        top: -20px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: #000;
+        font-weight: bolder;
+      }
+      .row-lists {
         position: relative;
-        padding: 5px 0;
-        &:not(:first-child) {
-          margin-left: $sqDistance; //和外层父元素上下padding一致
-        }
-        &::before {
-          content: "";
-          display: block;
-          height: 3px;
-          width: $sqDistance - 2px;
-          background: $lineColor;
-          position: absolute;
-          left: -$sqDistance;
-          top: calc(50% + 10px);
-          transform: scale(1, 0.4);
-        }
-        // 一列 第一个设备最上面的线
-        &:first-child {
-          &::before {
-            width: $sqDistance + 20px;
-            // top: -$sqDistance - 20px;
-          }
-        }
-        // 一列 最后一个设备最下面的线
-        // &:last-child {
-        //   &::after {
-        //     content: "";
-        //     display: block;
-        //     width: 3px;
-        //     height: $sqDistance - 2px;
-        //     background: $lineColor;
-        //     position: absolute;
-        //     bottom: -$sqDistance;
-        //     left: 50%;
-        //     transform: scale(0.4, 1);
-        //   }
-        // }
-        // 设备状态
-        .status {
-          margin: 0 auto 4px;
-          width: fit-content;
-          height: 18px;
-          padding: 0 8px;
-          box-sizing: border-box;
-          text-align: center;
-          font-size: 8px;
-          line-height: 18px;
-          border: 1px solid #08ffff;
-          border-radius: 2px;
-          background: #aaaaaa;
-          color: #ffffff;
-          &.status-running {
-            background: #00c69c;
-          }
-        }
-        // 图片+设备名称
-        .row-items-img {
+        .row-items {
           position: relative;
-          padding-top: 12px;
-          img {
-            width: 80px;
-            height: auto;
+          padding: 5px 0;
+          background: #fff;
+          // &:not(:first-child) {
+          padding-top: 20px; //todo
+          // }
+          &::after {
+            z-index: 1;
+            content: "";
             display: block;
-            &.img-lq {
-              width: 50px;
-            }
-            &.img-pcs {
-              width: 50px;
-            }
-            &.img-db {
-              width: 56px;
+            height: 25px;
+            width: 3px;
+            background: $lineColor;
+            position: absolute;
+            left: 50%;
+            top: -10px;
+            transform: scale(0.4, 1);
+          }
+
+          // 设备状态
+          .status {
+            margin: 0 auto 4px;
+            width: fit-content;
+            height: 18px;
+            padding: 0 8px;
+            box-sizing: border-box;
+            text-align: center;
+            font-size: 8px;
+            line-height: 18px;
+            border: 1px solid #08ffff;
+            border-radius: 2px;
+            background: #aaaaaa;
+            color: #ffffff;
+            &.status-running {
+              background: #00c69c;
             }
           }
-          .name {
-            position: absolute;
-            top: 1px;
-            left: 0;
-            color: #666;
+          // 图片+设备名称
+          .row-items-img {
+            position: relative;
+            padding-top: 12px;
+            img {
+              width: 80px;
+              height: auto;
+              display: block;
+              &.img-lq {
+                width: 50px;
+              }
+              &.img-pcs {
+                width: 50px;
+              }
+              &.img-db {
+                width: 56px;
+              }
+            }
+            .name {
+              position: absolute;
+              top: 1px;
+              left: 0;
+              color: #666;
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+    }
+
+    // 有下级设备
+    .row-lists-container-with-children {
+      .row-lists {
+        &:not(:last-child) {
+          margin-right: 30px;
+        }
+        .row-items {
+          display: flex;
+          &::after {
+            display: none;
+          }
+          .parent-dash {
+            position: relative;
+            z-index: 2;
+            background-color: #fff;
+            > div {
+              z-index: 2;
+              position: inherit;
+            }
+            &::after {
+              z-index: 1;
+              content: "";
+              display: block;
+              height: 45px;
+              width: 3px;
+              background: $lineColor;
+              position: absolute;
+              left: 50%;
+              top: -30px;
+              transform: scale(0.4, 1);
+            }
+          }
+          .children-dash {
+            position: relative;
+            z-index: 2;
+            background-color: #fff;
+            margin: -20px 0 0 26px;
+            height: fit-content;
+            > div {
+              z-index: 2;
+              position: inherit;
+            }
+            &::after {
+              z-index: 1;
+              content: "";
+              display: block;
+              width: 44px;
+              height: 1px;
+              background: #ec7f8c;
+              position: absolute;
+              left: -33px;
+              bottom: -10px;
+              transform: rotate(-34deg);
+            }
           }
         }
       }
     }
   }
-  //pcs 特殊样式
-  .row-lists-container-pcs {
-    // margin-top: -100px;
-  }
 }
 </style>