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

<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 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"
            >
              <!-- 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
                  v-for="(childrenItem, childrenIndex) in item.children"
                  :key="childrenIndex + 'childrenBms'"
                ></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;
    },
    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>
$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: 2px solid $borderColor;
    padding-left: 120px;
    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;
      // 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 {
        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;
          }
        }
      }
    }
  }
  //pcs 特殊样式
  .row-lists-container-pcs {
    // margin-top: -100px;
  }
}
</style>