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

<!-- 装置关联关系 -->
<template>
  <div>
    <div class="main-cont" ref="myElement" id="treedom">
      <div class="main-left" ref="leftElement">
        <div
          v-for="(item, index) in leftList"
          :key="index"
          class="cont"
          @click="clickImg(item)"
        >
          <img
            :src="devicePng"
            alt=""
            class="img-item"
            :ref="(el) => setdom(el, item)"
          />
          <div>{{ item.ref_ied_name }}</div>
          <div class="ied-desc">{{ item.ref_ied_desc }}</div>
        </div>
      </div>
      <div class="main-middle">
        <div class="middle-item" ref="middleElement">
          <img :src="devicePng" alt="" id="end" />
          <div v-if="listData">{{ listData.ied_name }}</div>
          <div v-if="listData">{{ listData.desc }}</div>
        </div>
      </div>
      <div class="main-right" ref="rightElement">
        <div
          v-for="(item, index) in rightList"
          :key="index"
          class="cont"
          @click="clickImg(item)"
        >
          <img
            :src="devicePng"
            alt=""
            class="img-item"
            :ref="(el) => setdomRight(el, item)"
          />
          <div>{{ item.ref_ied_name }}</div>
          <div class="ied-desc">{{ item.ref_ied_desc }}</div>
        </div>
      </div>
    </div>
    <div id="wrapper"></div>
  </div>
</template>
  <script setup>
import { onMounted, watch, ref, nextTick, defineEmits } from "vue";
import devicePng from "@/assets/image/instruct/device.png";
import LeaderLine from "../../../../public/leader-line.min.js";
import AnimEvent from "../../../../public/anim-event.min.js";
const props = defineProps({
  checkData: {
    type: Object,
    default: () => {},
  },
  isOpen: {
    type: Boolean,
    default: false,
  },
  iedRelation: {
    type: Object,
    default: () => {},
  },
  tabName: {
    type: String,
    default: "",
  },
});
const middleElement = ref(null);
const rightElement = ref(null);
const leftElement = ref(null);
const myElement = ref(null);
let leaderLines = ref([]); //控制线条显示
const leftList = ref([]);
const rightList = ref([]);
const domList = ref(new Map()); //获取 所有的ref
const domListRight = ref(new Map()); //获取 所有的ref
const listData = ref(props.checkData); //线条左右两侧的数据
const emit = defineEmits(["result"]); //如果不加这个再次点击左侧会没有反应
const setdom = (el, item) => {
  //左侧dom
  if (el) {
    domList.value.set(item, el);
  }
};
const setdomRight = (el, item) => {
  //右侧dom
  if (el) {
    domListRight.value.set(item, el);
  }
};
const processArray = (arr) => {
  // ref_ied_id作为键，obj作为值
  const uniqueObjects = new Map();
  // 遍历数组
  for (const obj of arr) {
    const { ref_ied_id } = obj;
    // 如果当前对象的 ref_ied_id 属性已经存在于 uniqueObjects 中
    if (uniqueObjects.has(ref_ied_id)) {
      // 将对应对象的 ref_type 属性设为 2,箭头双向
      uniqueObjects.get(ref_ied_id).ref_type = 2;
    } else {
      // 否则，将当前对象添加到 uniqueObjects 中
      uniqueObjects.set(ref_ied_id, obj);
    }
  }
  // 将 uniqueObjects 中的值转为数组并返回
  return Array.from(uniqueObjects.values());
};
//点击图片的时候筛选出数据
const clickImg = (dataItem) => {
  Object.values(props.iedRelation).find((item) => {
    if (item.ied_name == dataItem.ref_ied_name) {
      listData.value = item;
    }
  });
};
watch(
  () => props.checkData,
  (newValue, oldV) => {
    listData.value = newValue;
    if (newValue && leaderLines.value.length > 0) {
      // leaderLines.value.forEach((line) => line.remove()); //清除连线
      leaderLines.value = [];
    }
  },
  { deep: true }
);
watch(
  () => listData.value,
  (newValue) => {
    emit("result", newValue);
    clickResetLine();
  }
);
watch(
  () => props.isOpen,
  (newValue) => {
    if (newValue) {
      domList.value.clear();
      domListRight.value.clear();
      leaderLines.value = [];
      nextTick(() => {
        // middleLinePosition();
        removeLine();
      });
    }
  }
);
//点击后重置数据和线条
const clickResetLine = () => {
  domList.value.clear();
  domListRight.value.clear();
  leaderLines.value = [];
  removeLine();
  middleLinePosition();
  setLine();
};
// 将设备列表分成两份
const bothSide = (data) => {
  const formatArr = processArray(data);
  const arrlenght = formatArr.length;
  const long1 = Math.ceil(arrlenght / 2);
  leftList.value = formatArr.splice(0, long1);
  rightList.value = formatArr.splice(0);
};

const setLeaderline = () => {
  // lineArr.value = [];
  //线条样式
  const lineStyle0 = {
    color: "#51637F",
    size: 2,
    path: "straight",
    startPlug: "arrow1",
    endPlug: "behind",
    startSocket: "right",
    endSocket: "left",
  };
  const lineStyle1 = {
    color: "#51637F",
    size: 2,
    path: "straight",
    endPlug: "arrow1",
    startSocket: "right",
    endSocket: "left",
  };
  const lineStyle2 = {
    color: "#134BEA",
    size: 2,
    path: "straight",
    startPlug: "arrow1",
    endPlug: "arrow1",
    startSocket: "right",
    endSocket: "left",
  };
  const lineStyleRight0 = {
    color: "#51637F",
    size: 2,
    path: "straight",
    startPlug: "arrow1",
    endPlug: "behind",
    startSocket: "left",
    endSocket: "right",
  };
  const lineStyleRight1 = {
    color: "#51637F",
    size: 2,
    path: "straight",
    endPlug: "arrow1",
    startSocket: "left",
    endSocket: "right",
  };
  const lineStyleRight2 = {
    color: "#134BEA",
    size: 2,
    path: "straight",
    startPlug: "arrow1",
    endPlug: "arrow1",
    startSocket: "left",
    endSocket: "right",
  };
  const startDom = document.getElementById("end");
  let count = 56;
  //循环画线
  for (const [key, value] of domList.value) {
    const endDom = value;
    let line;
    count += 5;
    if (key.ref_type == 0) {
      line = new LeaderLine(
        endDom,
        LeaderLine.pointAnchor(startDom, { x: 0, y: count }),
        lineStyle0
      );
    } else if (key.ref_type == 1) {
      line = new LeaderLine(
        endDom,
        LeaderLine.pointAnchor(startDom, { x: 0, y: count }),
        lineStyle1
      );
    } else if (key.ref_type == 2) {
      line = new LeaderLine(
        endDom,
        LeaderLine.pointAnchor(startDom, { x: 0, y: count }),
        lineStyle2
      );
    }
    //  保存进数组，方便进行遍历删除
    leaderLines.value.push(line);
  }
  let count2 = 56;
  //循环画线右侧
  for (const [key, value] of domListRight.value) {
    const endDom = value;
    let line2;
    count2 += 5;
    if (key.ref_type == 0) {
      line2 = new LeaderLine(
        endDom,
        LeaderLine.pointAnchor(startDom, { x: "100%", y: count2 }),
        lineStyleRight0
      );
    } else if (key.ref_type == 1) {
      line2 = new LeaderLine(
        endDom,
        LeaderLine.pointAnchor(startDom, { x: "100%", y: count2 }),
        lineStyleRight1
      );
    } else if (key.ref_type == 2) {
      line2 = new LeaderLine(
        endDom,
        LeaderLine.pointAnchor(startDom, { x: "100%", y: count2 }),
        lineStyleRight2
      );
    }
    //  保存进数组，方便进行遍历删除
    leaderLines.value.push(line2);
  }
  hiddenLine();
};
//设置中间盒子的所在位置
const middleLinePosition = () => {
  setTimeout(() => {
    const heights = myElement.value.scrollHeight;
    const leftListLength = leftList.value.length;
    const rightListLength = rightList.value.length;
    const setElementMarginTop = (element, value) => {
      element.value.style.marginTop = `${value}px`;
    };
    if (leftList.value.length > 3 || rightList.value.length > 3) {
      middleElement.value.style.marginTop = `${(heights - 60) / 2}px`; // 设置元素的垂直位置
    } else {
      setElementMarginTop(leftElement, 0);
      setElementMarginTop(rightElement, 0);
      setElementMarginTop(middleElement, 150);
    }
    if (rightListLength == 1) {
      setElementMarginTop(rightElement, 165);
    }
    if (leftListLength == 1) {
      setElementMarginTop(leftElement, 165);
    }
  }, 0);
};
onMounted(() => {
  nextTick(() => {
    setLine();
    middleLinePosition();
    nextTick(() => {
      newPositionLine();
    });
  });
});
//滚动时重定位线条
const newPositionLine = () => {
  document.getElementById("treedom").addEventListener(
    "scroll",
    AnimEvent.add(() => {
      leaderLines.value.forEach((line) => {
        hiddenLine();
        line.position();
        line.positionByWindowResize = false;
      });
    }),
    false
  );
  window.addEventListener(
    "resize",
    AnimEvent.add(function () {
      leaderLines.value.forEach((line) => {
        hiddenLine();
        line.position();
        line.positionByWindowResize = false;
      });
    }),
    false
  );
};
//弹窗打开后使得线条在指定区域中
const hiddenLine = () => {
  const elmWrapper = document.getElementById("wrapper");
  // 移动 line
  document.body.querySelectorAll("body .leader-line").forEach((node) => {
    elmWrapper.appendChild(node);
  });
  elmWrapper.style.transform = "none";
  var rectWrapper = elmWrapper.getBoundingClientRect();
  // Move to the origin of coordinates as the document
  elmWrapper.style.transform = `translate(${
    (rectWrapper.left + window.scrollY) * -1
  }px, ${(rectWrapper.top + window.scrollX) * -1}px)`;
};
const setLine = () => {
  if (listData.value) {
    bothSide(listData.value.list);
  }
  setTimeout(() => {
    setLeaderline();
  }, 300);
};
const removeLine = () => {
  const elmWrapper = document.getElementById("wrapper");
  if (elmWrapper) {
    document.body.querySelectorAll("body .leader-line").forEach((node) => {
      elmWrapper.removeChild(node);
    });
  }
};
</script>
  <style lang="scss">
@mixin img-size {
  width: 150px;
  height: 90px;
  margin-bottom: 10px;
}
@mixin left-and-right {
  display: flex;
  flex-direction: column;
}
.main-cont {
  margin-top: 60px;
  display: flex;
  justify-content: space-evenly;
}

.leader-line {
  z-index: 3000;
}
.main-left {
  display: flex;
  @include left-and-right;
  .img-item {
    @include img-size;
  }
}
.main-middle {
  box-sizing: border-box;
  img {
    margin-bottom: 10px;
  }
  .middle-item {
    @include left-and-right;
    align-items: center;
    color: #ffcb11;
  }
}
.main-right {
  display: flex;
  @include left-and-right;
  .img-item {
    @include img-size;
  }
}

.cont {
  @include left-and-right;
  align-items: center;
  margin-bottom: 10px;
  .ied-desc {
    color: #255ce7;
  }
}

#wrapper {
  width: 0;
  height: 0;
  position: relative; /* Origin of coordinates for lines, and scrolled content (i.e. not `absolute`) */
}
</style>