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"
              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.deviceStatus === '1' ? 'status-running' : ''
                    "
                  >
                    {{ deviceStatusOptions[item.deviceStatus] }}
                  </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>
            </template>
          </div>
        </div>

        <!--            冷却-->
        <div class="row-lists-container" v-if="showLq">
          <div class="row-title">冷却({{ lq.length }})</div>
          <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.deviceStatus === '1' ? 'status-running' : ''
                    "
                  >
                    {{ deviceStatusOptions[item.deviceStatus] }}
                  </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>
            </template>
          </div>
        </div>

        <!--            没有上级设备的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)"
            >
              <div :key="index" class="row-items">
                <div
                    style="position: relative; z-index: 2; background-color: #fff"
                >
                  <div
                      class="status"
                      :class="
                      item.deviceStatus === '1' ? 'status-running' : ''
                    "
                  >
                    {{ deviceStatusOptions[item.deviceStatus] }}
                  </div>
                  <div class="row-items-img row-items-img-bms">
                    <div style="position:relative;">
                      <img
                          class="img-bms"
                          :src="require('@/assets/images/ems/bms.png')"
                      />
                      <div class="num">{{ item.batteryNum || 0 }}</div>
                    </div>
                    <div class="name">{{ item.deviceName }}</div>
                  </div>
                </div>
              </div>
            </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.deviceStatus === '1' ? 'status-running' : ''
                    "
                  >
                    {{ deviceStatusOptions[item.deviceStatus] }}
                  </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
                    class="children-dash"
                    v-if="item.children && item.children.length > 0"
                >
                  <div
                      class="status"
                      :class="
                      item.children[0].deviceStatus === '1'
                        ? 'status-running'
                        : ''
                    "
                  >
                    {{
                      deviceStatusOptions[
                          item.children[0].deviceStatus
                          ]
                    }}
                  </div>
                  <div class="row-items-img row-items-img-bms">
                    <div style="position: relative">
                      <img
                          class="img-bms"
                          :src="require('@/assets/images/ems/bms.png')"
                      />
                      <div class="num">{{ item.batteryNum || 0 }}</div>
                    </div>
                    <div class="name">{{ item.children[0].deviceName }}</div>
                  </div>
                </div>
              </div>
            </template>
          </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: [],
      bmsNoParent: [],
    };
  },
  computed: {
    ...mapState({
      deviceStatusOptions: (state) =>
          state.ems.deviceStatusOptions,
    }),

    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;
    },
    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 = [];
      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.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: 30px;
  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;
    padding-left: 40px;
    margin-left: -40px;
    display: flex;
    // 设备列表
    .row-lists-container {
      font-size: 10px;
      position: relative;
      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;

        .row-items {
          position: relative;
          padding: 5px 0;
          background: #fff;
          // &:not(:first-child) {
          padding-top: 20px; //todo
          // }
          &::after {
            z-index: 1;
            content: "";
            display: block;
            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;
            }
          }

          // 图片+设备名称
          .row-items-img {
            position: relative;
            padding-top: 12px;

            &.row-items-img-bms {
              padding-top: 14px;

              .num {
                position: absolute;
                top: -2px;
                right: -2px;
                font-size: 10px;
                line-height: 10px;
                padding: 2px 4px;
                text-align: center;
                border-radius: 10px;
                background-color: #03c69d;
                color: #fff;
              }
            }

            img {
              width: 80px;
              height: auto;
              display: block;
              position: relative;

              &.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);
            }
          }
        }
      }
    }
  }
}
</style>