scd_tools_ui/src/pages/netStructPicture/components/basicInfo.vue

<template>
  <div id="treedom4">
    <div style="position: relative">
      <div class="nav" id="topLine">
        <div class="nav-cont" v-for="(item, index) in navList" :key="index">
          <img :src="cylinder" alt="" class="nav-img" />
          <div>{{ item.attr_name }}</div>
          <div class="describe-text">{{ `(${item.attr_desc})` }}</div>
        </div>
      </div>
    </div>
    <div class="wrapper">
      <div class="grid">
        <div class="col fluid" style="margin-left: 20px" id="leftLine">
          <div>
            <div class="title">M1 (一)</div>
            <div>
              <span class="decrip">SDFDSF:</span
              ><span class="decrip-item">SDFSFF</span>
            </div>
          </div>
          <div class="child-item">
            <div class="ldevice">LDevice</div>
            <div>
              <img :src="legislation" alt="" />
              <div class="img-title">SVLD_PROT</div>
              <div class="decrip-child">(录波LD)</div>
            </div>
            <div>
              <img :src="legislation" alt="" />
              <div class="img-title">SVLD_PROT</div>
            </div>
            <div>
              <img :src="legislation" alt="" />
              <div class="img-title">SVLD_PROT</div>
            </div>
          </div>
        </div>
        <div class="col main-middle" id="middleLine"></div>
        <div class="col fluid" style="margin-right: 20px" id="rightLine">
          <div>
            <div class="title">M1 (一)</div>
            <div>
              <span class="decrip">SDFDSF:</span
              ><span class="decrip-item">SDFSFF</span>
            </div>
          </div>
          <div class="child-item">
            <div class="ldevice">LDevice</div>
            <div>
              <img :src="legislation" alt="" />
              <div class="img-title">SVLD_PROT</div>
              <div class="decrip-child">(录波LD)</div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-bottom" id="bottomLine">
        <div v-if="titleName && titleName.length > 0">
          <div class="title">
            {{ `${titleName[0].name}(${titleName[0].desc})` }}
          </div>
          <div class="attr-desc">
            <div>
              <span class="decrip">MAC-Address:</span>
              <span class="decrip-item" v-if="!moBottom.address">无</span>
              <span v-else>{{ moBottom.address }}</span>
            </div>
            <div>
              <span class="decrip">VLAN-PRIORITY:</span>
              <span class="decrip-item" v-if="!moBottom.priority">无</span>
              <span v-else>{{ moBottom.priority }}</span>
            </div>
            <div>
              <span class="decrip">APPID:</span>
              <span class="decrip-item" v-if="!moBottom.APPID">无</span>
              <span v-else>{{ moBottom.APPID }}</span>
            </div>
            <div>
              <span class="decrip">VLAN-ID:</span>
              <span class="decrip-item" v-if="!moBottom.vlanId">无</span>
              <span v-else>{{ moBottom.vlanId }}</span>
            </div>
          </div>
          <div v-if="mainList" style="margin-bottom: 10px">
            <span
              v-for="(item, index) in mainList[titleName[0].name].list"
              :key="index"
              class="circel"
              @click="clickCircel(item)"
              >{{ index + 1 }}</span
            >
          </div>
        </div>
        <div class="child-item" v-if="titleName && titleName.length > 0">
          <div class="ldevice">LDevice</div>
          <div>
            <img :src="legislation" alt="" />
            <div class="img-title">SVLD_PROT</div>
            <div class="decrip-child">(录波LD)</div>
          </div>
          <div>
            <img :src="legislation" alt="" />
            <div class="img-title">SVLD_PROT</div>
          </div>
          <div>
            <img :src="legislation" alt="" />
            <div class="img-title">SVLD_PROT</div>
          </div>
        </div>
      </div>
    </div>
    <div id="wrappers"></div>
  </div>
</template>

<script setup>
import { defineProps, onMounted, ref, inject, nextTick, watch } from "vue";
import legislation from "@/assets/image/instruct/legislation.png";
import cylinder from "@/assets/image/instruct/cylinder.png";
import { getNodeList, getNetworkInfo } from "@/api/iedNetwork";
import LeaderLine from "../../../../public/leader-line.min.js";
import AnimEvent from "../../../../public/anim-event.min.js";
import { CloseBold } from "@element-plus/icons-vue";
const props = defineProps({
  checkData: {
    type: Object,
    default: () => {},
  },
  isOpen: {
    type: Boolean,
    default: false,
  },
});
const scdIdValue = inject("scdId");
const navList = ref(null); //最头部的数据
const mainTitle = ref(null); //每个方框的标题
const moBottom = ref(null); //底部方框所展示的MAC-Address等desc
const moLeft = ref(null); //左侧方框所展示的MAC-Address等desc
const moRight = ref(null); //右侧方框所展示的MAC-Address等desc
const getNav = async () => {
  const navRes = await getNodeList({
    scd_id: scdIdValue,
    pagesize: 10000,
    ied_name: props.checkData.ied_name,
    name: "DataSet",
  });
  navList.value = navRes.data;
};
const getMainTitle = async () => {
  const mainRes = await getNodeList({
    scd_id: scdIdValue,
    pagesize: 10000,
    ied_name: props.checkData.ied_name,
    name: "AccessPoint",
  });
  mainTitle.value = mainRes.data;
};
const mainList = ref({});
const titleName = ref([]);
//几个方框的数据
const getMainList = async () => {
  mainList.value = {};
  titleName.value = [];
  const newarr = [];
  const infoRes = await getNetworkInfo({
    scd_id: scdIdValue,
    ied_name: props.checkData.ied_name,
  });
  //处理分类数据
  for (let i = 0; i < infoRes.data.length; i++) {
    if (infoRes.data[i].address_json != "") {
      infoRes.data[i].address_json.replace("MAC-Address", "address");
      infoRes.data[i].address_json.replace("VLAN-PRIORITY", "priority");
      infoRes.data[i].address_json.replace("VLAN-ID", "vlanId");
      infoRes.data[i].address_json = JSON.parse(infoRes.data[i].address_json);
    }
    let item = infoRes.data[i];
    const key = item.ap_name;
    newarr.push(key);
    if (mainList.value[key] == null) {
      mainList.value[key] = {
        name: key,
        list: [item],
      };
    } else {
      mainList.value[key].list.push(item);
    }
  }
  const newarr2 = [...new Set(newarr)];
  //处理表头描述
  if (newarr2 && mainTitle.value) {
    newarr2.map((item) => {
      const descObj = mainTitle.value.find((key) => key.attr_name == item);
      if (descObj) {
        titleName.value.push({ name: item, desc: descObj.attr_desc });
      }
    });
  }
  if (titleName.value.length > 0 && mainList.value) {
    moBottom.value =
      mainList.value[titleName.value[0].name].list[0].address_json;
    console.log("address_json", moBottom.value);
    console.log("first", titleName.value, mainList.value);
  }
};
//弹窗打开后使得线条在指定区域中
const hiddenLine2 = () => {
  const elmWrapper = document.getElementById("wrappers");
  // 移动 line
  document.body.querySelectorAll("body .leader-line").forEach((node) => {
    elmWrapper.appendChild(node);
  });
  elmWrapper.style.transform = "none";
  var rectWrapper = elmWrapper.getBoundingClientRect();
  elmWrapper.style.transform = `translate(${
    (rectWrapper.left + window.scrollY) * -1
  }px, ${(rectWrapper.top + window.scrollX) * -1}px)`;
};
const leaderLines = ref([]); //控制线条显示
//滚动时重定位线条
const newPositionLine2 = () => {
  document.getElementById("treedom4").addEventListener(
    "scroll",
    AnimEvent.add(() => {
      leaderLines.value.forEach((line) => {
        if (line) {
          hiddenLine2();
          line.position();
          line.positionByWindowResize = false;
        }
      });
      //中间展示图片的
    }),
    false
  );
};
const getLine = () => {
  const topDom = document.getElementById("topLine");
  const leftDom = document.getElementById("leftLine");
  const rightDom = document.getElementById("rightLine");
  const bottomDom = document.getElementById("bottomLine");
  const middlDom = document.getElementById("middleLine");
  let lineStyle = {
    color: "#134BEA",
    size: 2,
    path: "straight",
    endPlug: "disc",
    startPlug: "disc",
    middleLabel: LeaderLine.captionLabel("AccessPoint", {
      fontSize: 10,
      color: "#7F8EB2",
    }),
  };
  let lineStyleTop = {
    ...lineStyle,
    middleLabel: LeaderLine.captionLabel({
      text: "DataSet",
      fontSize: 10,
      color: "#7F8EB2",
    }),
  };
  let lineStyleright = {
    ...lineStyle,
    middleLabel: LeaderLine.captionLabel("AccessPoint", {
      fontSize: 10,
      color: "#7F8EB2",
    }),
  };
  let lineStylebottom = {
    ...lineStyle,
    middleLabel: LeaderLine.captionLabel({
      text: "AccessPoint",
      fontSize: 10,
      color: "#7F8EB2",
    }),
  };
  leaderLines.value.push(new LeaderLine(middlDom, topDom, lineStyleTop)); //上面和中间连线
  leaderLines.value.push(new LeaderLine(middlDom, rightDom, lineStyleright));
  leaderLines.value.push(new LeaderLine(middlDom, bottomDom, lineStylebottom));
  leaderLines.value.push(new LeaderLine(leftDom, middlDom, lineStyle));
  newPositionLine2();
  hiddenLine2();
};
//点击数字
const clickCircel = (item) => {

  const data = JSON.stringify(item.address_json);
  // data.replace("MAC-Address", "address");
  // data.replace("VLAN-PRIORITY", "priority");
  // data.replace("VLAN-ID", "vlanId");
  moBottom.value = JSON.parse(data);
};
onMounted(() => {
  getNav();
  getMainTitle();
  getMainList();
  nextTick(() => {
    getLine();
  });
});
watch(
  () => props.isOpen,
  (newValue) => {
    nextTick(() => {
      if (!newValue) {
        removeLine2();
        leaderLines.value = [];
      } else {
        getLine();
      }
    });
  }
);
watch(
  () => props.checkData,
  (newValue) => {
    getNav();
    getMainTitle();
    getMainList();
    nextTick(() => {
      getLine();
    });
  }
);
const removeLine2 = () => {
  const elmWrapper = document.getElementById("wrappers");
  document.body.querySelectorAll("body .leader-line").forEach((node) => {
    elmWrapper.removeChild(node);
  });
};
</script>

<style scoped lang="scss">
#treedom4 {
  height: 72vh;
  overflow-y: auto;
}
.wrapper {
  position: relative;
}
.nav {
  height: 160px;
  background: #f3f5fa;
  overflow-y: auto;
  border: 2px dashed #a3ade0;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  position: relative;
  margin: 16px;
  .nav-img {
    width: 30px;
    height: 30px;
  }
  .nav-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 8px 0;
    flex-basis: 14%;
    .describe-text {
      color: #134bea;
    }
  }
}
.main-bottom,
.fluid {
  border: 2px dashed #a3ade0;
  display: flex;
  flex-direction: column;
  max-width: 36%;
  img {
    width: 40px;
    height: 40px;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    margin: 12px 0;
    text-align: center;
  }
  .attr-desc {
    margin: 10px;
  }
  .decrip {
    color: #7484ab;
    font-size: 14px;
    margin-right: 15px;
    width: 130px;
    display: inline-block;
  }
  .decrip-child {
    color: #7484ab;
    font-size: 14px;
  }
  .decrip-item {
    font-weight: bold;
    font-size: 14px;
  }
  .child-item {
    display: flex;
    margin: 12px;
    flex-wrap: wrap;
    border: 1px solid #5182ff;
    position: relative;
    & > div {
      margin: 8px;
    }
    .ldevice {
      position: absolute;
      top: -20px;
      left: -10px;
      padding: 0 4px;
      background: #5182ff;
      color: white;
      border-radius: 10px;
    }
  }
  .img-title {
    color: #134bea;
  }
}
.circel {
  color: #7c58a8;
  padding: 0rem 0.4rem;
  border: 1px solid #606c93;
  border-radius: 1rem;
  margin-left: 0.5rem;
  cursor: pointer;
}
.Image {
  width: 193px;
  height: 150px;
}
/* 设置网格布局相关的样式 */
.grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
}

.grid > .col {
  box-sizing: border-box;
  // padding: 10px;
}

/* 设置fixed2样式 */
.main-middle {
  width: 160px;
  height: 160px;
  background: #fff url("~@/assets/image/instruct/network_slices.png") no-repeat
    center;
  background-size: 160px;
}

/* 设置fluid样式 */
.fluid {
  flex-grow: 1;
  background-color: #f7f8f8;
}
.main-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;
}
</style>