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

<template>
  <div id="treedomDialog">
    <el-dialog
      @close="cancelClick2"
      v-model="open"
      append-to-body
      draggable
      width="70%"
      style="height: 550px; overflow-y: auto"
    >
      <template #header>
        <div class="my-header">
          <div class="title">
            {{ `虚端子 — 详细信息` }}
          </div>
        </div>
      </template>
      <div class="dialog-circle">
        <div class="dialog-left">
          <div class="nav" v-if="listData">
            <div>{{ listData.ied_name }}</div>
            <div class="desc">{{ listData.desc }}</div>
          </div>
          <p class="title" v-if="dilogData&&dilogData.length>0 && titleUnusual == 'inout'">
            {{ `${dilogData[0].attr_ld_inst} ${dilogData[0].attr_ld_desc}` }}
          </p>
          <p class="title" v-if="dilogData&&dilogData.length>0 && titleUnusual != 'inout'">
            {{ `${dilogData[0].to_ld_inst} ${dilogData[0].to_ld_desc}` }}
          </p>
          <!-- 白色区域的内容 -->
          <div class="main">
            <div class="main-title" v-if="titleUnusual == 'input'"></div>
            <div class="main-title" v-else>
              {{ `${dilogLeftTitle.attr_name}${dilogLeftTitle.datset_desc}` }}
            </div>
            <div
              class="ied-desc-child"
              v-for="(item, index) in dilogData"
              :key="index"
              :ref="(el) => setDialogLeftChild2(el, item)"
            >
              <template v-if="titleUnusual == 'input'">
                <div>{{ item.to_doi_desc }}</div>
                <div>{{ item.attr_int_addr }}</div>
              </template>
              <template v-else>
                <div>{{ item.from_doi_desc }}</div>
                <div>
                  {{
                    `${item.attr_ld_inst}/${item.attr_prefix}${item.attr_ln_class}${item.attr_ln_inst}.${item.attr_do_name}.${item.attr_da_name}`
                  }}
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="dialog-right">
          <div class="nav" v-if="titleUnusual == 'input'">
            <div>{{ dilogTitie.target_ied_name }}</div>
            <div class="desc">
              {{ dilogRightData[dilogTitie.target_ied_name].desc }}
            </div>
          </div>
          <div class="nav" v-else>
            <div>{{ dilogTitie.ref_ied_name }}</div>
            <div class="desc">
              {{ dilogRightData[dilogTitie.ref_ied_name].desc }}
            </div>
          </div>
          <p class="title" v-if="dilogData&&dilogData.length>0 && titleUnusual == 'inout'">
            {{ `${dilogData[0].to_ld_inst} ${dilogData[0].to_ld_desc}` }}
          </p>
          <p class="title" v-if="dilogData&&dilogData.length>0 && titleUnusual != 'inout'">
            {{ `${dilogData[0].attr_ld_inst} ${dilogData[0].attr_ld_desc}` }}
          </p>
          <!-- 白色区域的内容 -->
          <div class="main">
            <div class="main-title" v-if="titleUnusual == 'input'">
              {{ dilogTitie.ctrl_name + dilogTitie.datset_desc }}
            </div>
            <div class="main-title" v-else></div>
            <div
              class="ied-desc-child"
              v-for="(item, index) in dilogData"
              :key="index"
              :ref="(el) => setDialogRightChild2(el, item)"
            >
            <template v-if="titleUnusual == 'input'">
              <div>{{ item.from_doi_desc }}</div>
              <div>
                {{
                  `${item.attr_ld_inst}/${item.attr_prefix}${item.attr_ln_class}${item.attr_ln_inst}.${item.attr_do_name}.${item.attr_da_name}`
                }}
              </div>
            </template>
            <template v-else>
              <div>{{ item.to_doi_desc }}</div>
              <div>{{ item.attr_int_addr }}</div>
            </template>
            </div>
          </div>
        </div>
      </div>
      <div id="dilogwrapperInout"></div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, watch, nextTick, defineEmits, onMounted } from "vue";
import LeaderLine from "../../../../public/leader-line.min.js";
import AnimEvent from "../../../../public/anim-event.min.js";
const props = defineProps({
  checkData: {
    type: Object,
    default: () => {},
  },
  circleOpen: {
    type: Boolean,
    default: false,
  },
  dilogData: {
    type: Array,
    default: () => [],
  },
  dilogTitie: {
    type: Object,
    default: () => {},
  },
  dilogRightData: {
    type: Object,
    default: () => {},
  },
  titleUnusual: {
    type: String,
    default: "",
  },
  dilogLeftTitle: {
    type: Object,
    default: () => {},
  },
  listData2:{
    type: Object,
    default: () => {},
  }
});
const open = ref(false);
const listData = ref(props.listData2); //线条左右两侧的数据
watch(()=>props.listData2,(newValue)=>{
  listData.value = newValue
})

const dialogListRightChild = ref(new Map()); //获取弹窗右侧所有子的ref
const dialogListLeftChild = ref(new Map()); //获取弹窗左侧所有子的ref
const setDialogLeftChild2 = (el, item) => {
  if (el) {
    dialogListLeftChild.value.set(item, el);
  }
};
const setDialogRightChild2 = (el, item) => {
  if (el) {
    dialogListRightChild.value.set(item, el);
  }
};
const emit = defineEmits(["done"]);
const dialogLines = ref([]);
const cancelClick2 = () => {
  open.value = false;
  emit("done", false);
};
//弹框画线
const setDialogLine = () => {
  console.log('======dir:',props.titleUnusual)
  dialogLines.value = [];
  for (const [key, value] of dialogListRightChild.value) {
    let line;
    for (const [key2, value2] of dialogListLeftChild.value) {
      if (key.attr_int_addr == key2.attr_int_addr) {
        LeaderLine.positionByWindowResize = false;
        if (props.titleUnusual == "input") {
          line = new LeaderLine(value2, value, {
            color: "#255CE7",
            size: 2,
            path: "straight",
            startSocket: "right",
            endSocket: "left",
            startPlug: "arrow1",
            endPlug: "behind",
          });
        } else {
          line = new LeaderLine(value2, value, {
            color: "#255CE7",
            size: 2,
            path: "straight",
            startSocket: "right",
            endSocket: "left",
            startPlug: "behind",
            endPlug: "arrow1",
          });
        }

        dialogLines.value.push(line);
      }
    }
  }
};
watch(
  () => props.circleOpen,
  (newValue) => {
    open.value = newValue;
    if (newValue==true) {
      nextTick(() => {
        setDialogLine();
        hiddenLineDialog();
        newPositionLine3(dialogLines.value);
      });
    } else {
      dialogListLeftChild.value.clear();
      dialogListRightChild.value.clear();
      dialogLines.value = [];
      const elmWrapper = document.getElementById("dilogwrapperInout");
      if (elmWrapper) {
        document.body
          .querySelectorAll("#dilogwrapperInout .leader-line")
          .forEach((node) => {
            node.remove();
            // elmWrapper.removeChild(node);
          });
      }
    }
  }
);
//滚动时重定位线条
const newPositionLine3 = (diffline) => {
  document.getElementById("treedomDialog").addEventListener(
    "scroll",
    AnimEvent.add(() => {
      diffline.forEach((line) => {
        if (line) {
          hiddenLineDialog();
          line.position();
          line.positionByWindowResize = false;
        }
      });
      //中间展示图片的
    }),
    false
  );
  document.getElementById("treedomDialog").addEventListener(
    "resize",
    AnimEvent.add(function () {
      diffline.forEach((line) => {
        hiddenLineDialog();
        line.position();
        line.positionByWindowResize = false;
      });
    }),
    false
  );
};
//弹窗打开后使得线条在指定区域中
const hiddenLineDialog = () => {
  const elmWrapper = document.getElementById("dilogwrapperInout");
  if(!elmWrapper) return;
  if (elmWrapper) {
    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)`;
  }
};
onMounted(() => {});
</script>



<style lang="scss" scoped>
@mixin left-and-right {
  display: flex;
  flex-direction: column;
}
.my-header {
  border-bottom: 1px solid #a3ade0;
  font-size: 16px;
  color: #1a2447;
  .title {
    padding-bottom: 15px;
  }
}
.dialog-circle {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  //点击数字弹窗的样式
  .dialog-left,
  .dialog-right {
    flex-basis: 40%;
    border: 2px dashed #98a8ff;
    background: #f7f8fb;
    border-radius: 4px;
    .nav {
      text-align: center;
      border-bottom: 1px solid #c8d4e2;
      .desc {
        color: #255ce7;
        padding-bottom: 4px;
      }
    }
    .title {
      margin: 7px 20px;
    }
    .main {
      margin: 0 20px;
      border: 1px solid #c8d4e2;
      .main-title {
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #fff;
      }
    }
  }
  .dialog-left {
  }
  .dialog-right {
  }
}
#dilogwrapperInout,
#treedomDialog {
  width: 0;
  height: 0;
  position: relative; /* Origin of coordinates for lines, and scrolled content (i.e. not `absolute`) */
}
.ied-desc-child {
  @include left-and-right;
  align-items: center;
  border: 1px solid #7484ab;
  border-radius: 2px;
  margin: 12px 14px;
  padding: 5px;
  color: #1a2447;
  position: relative;
}
.leader-line {
  z-index: 99999;
}
</style>