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

<template>
  <div>
    <div class="main" v-if="detailData">
      <div class="scdBox">
        <div class="navs">
          <img src="../../../assets/image/squer_scd.png" alt="" />
          <p>SCD版本</p>
        </div>
        <div>
          <div id="oldScd">
            <img
              src="../../../assets/icon/cilce_gray.png"
              alt=""
              class="circel-png"
            />
            <span v-if="scdVer && scdVer[1] != ''">{{ scdVer[1] }}</span>
            <span v-else>无</span>
          </div>
          <img :src="jiantouPng" alt="" class="jiantou" />
          <div id="newScd">
            <img
              src="../../../assets/icon/clice_blue.png"
              alt=""
              class="circel-png"
            />
            <span v-if="scdVer">{{ scdVer[0] }}</span>
          </div>
        </div>
      </div>
      <div class="crcBox">
        <div class="navs">
          <img
            src="../../../assets/image/squer_crc.png"
            alt=""
            class="circel-png"
          />
          <p>CRC</p>
        </div>
        <div>
          <div id="oldCrc">
            <img
              src="../../../assets/icon/cilce_gray.png"
              alt=""
              class="circel-png"
            />
            <span v-if="crcVer && crcVer[1] != ''">{{ crcVer[1] }}</span>
            <span v-else>无</span>
          </div>
          <img :src="jiantouPng" alt="" class="jiantou" />
          <div id="newCrc">
            <img src="../../../assets/icon/clice_blue.png" alt="" />
            <span v-if="crcVer">{{ crcVer[0] }}</span>
          </div>
        </div>
      </div>
      <div class="iedBox">
        <div id="oldIed">
          <img src="../../../assets/image/squer_ied.png" alt="" />
          <p>IED</p>
        </div>
        <div id="newIed" v-if="iedVer">
          <p id="addId" @click="lookAdd(iedVer.i.list)">
            <img :src="newlyPng" alt="" class="icons" />
            <span style="color: #134bea">新增({{ iedVer.i.list.length }})</span>
          </p>
          <p id="editId" @click="lookEdit(iedVer.u.list)">
            <img :src="modifyPng" alt="" class="icons" />
            <span style="color: #ffcb11">修改({{ iedVer.u.list.length }})</span>
          </p>
          <p id="delId" @click="lookDel(iedVer.d.list)">
            <img :src="delPng" alt="" class="icons" />
            <span style="color: #e50505">删除({{ iedVer.d.list.length }})</span>
          </p>
        </div>
      </div>
    </div>
    <div v-else-if="clickRow" class="no-data">当前两个SCD文件没有差异!</div>
    <div v-else-if="!clickRow" class="no-data">
      请选择比对记录或创建新的比对
    </div>
    <dialog-index
      :openBig="openBig"
      @done="done"
      :checkDialogData="checkDialogData"
      :iedRelationData="iedRelationData"
      :scdView="scdView"
      :delScdId="delScdId"
    ></dialog-index>
    <scl-update
      :openScl="openScl"
      @doneScl="doneScl"
      :checkDialogData="checkDialogData"
      :iedRelationData="iedRelationData"
      :clickRowData="clickRowData"
      :recordDelIedVer="recordDelIedVer"
    ></scl-update>
    <div id="wrapperscd"></div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  toRefs,
  watch,
  onBeforeUnmount,
  defineEmits,
} from "vue";
import LeaderLine from "../../../../public/leader-line.min.js";
import dialogIndex from "./dialogIndex.vue";
import SclUpdate from "./SclUpdate.vue";
import jiantouPng from "@/assets/image/scdcheck/jiantou.png";
import modifyPng from "@/assets/image/scdcheck/modify.png";
import newlyPng from "@/assets/image/scdcheck/newly.png";
import delPng from "@/assets/image/scdcheck/del.png";
import { useRoute } from "vue-router";
import { scdIedRelation } from "@/api/iedNetwork";
const props = defineProps({
  scdipadMini: {
    type: Array,
    default: () => [],
  },
  clickViewData: {
    type: Object,
    default: () => {},
  },
});
let lineList = ref([]);
let lookType = ref(0);
const route = useRoute();
const emit = defineEmits(["nowBack"]);
const openBig = ref(false);
const lineWrite = () => {
  let oldIed = document.getElementById("oldIed");
  let newIed = document.getElementById("newIed");
  let addId = document.getElementById("addId");
  let editId = document.getElementById("editId");
  let delId = document.getElementById("delId");
  LeaderLine.positionByWindowResize = false;
  lineList.value.push(
    new LeaderLine(oldIed, addId, {
      color: "#7484AB", //连接线颜色
      size: 2, //连接线宽度
      path: "grid", //连接线样式
      startSocket: "bottom", //开始链接元素位置
      endSocket: "left", //结束链接元素位置
      endPlug: "disc", //结束箭头
      endPlugSize: 2, //结束箭头size
    })
  );
  lineList.value.push(
    new LeaderLine(oldIed, editId, {
      color: "#7484AB", //连接线颜色
      size: 2, //连接线宽度
      path: "grid", //连接线样式
      startSocket: "bottom", //开始链接元素位置
      endSocket: "left", //结束链接元素位置
      endPlug: "disc", //结束箭头
      endPlugSize: 2, //结束箭头size
    })
  );
  lineList.value.push(
    new LeaderLine(oldIed, delId, {
      color: "#7484AB", //连接线颜色
      size: 2, //连接线宽度
      path: "grid", //连接线样式
      startSocket: "bottom", //开始链接元素位置
      endSocket: "left", //结束链接元素位置
      endPlug: "disc", //结束箭头
      endPlugSize: 2, //结束箭头size
    })
  );
  hiddenLine2();
};
const clickRow = ref(false);
const clickRowData = ref({}); //对比列表点击的数据
watch(
  () => props.clickViewData,
  (newValue) => {
    iedVer.value = {};
    clickRowData.value = {};
    recordDelIedVer.value = null;
    if (newValue) {
      clickRowData.value = newValue;
      clickRow.value = true;
      detailData.value = null;
      lineList.value = [];
      const elmWrapper = document.getElementById("wrapperscd");
      if (elmWrapper) {
        elmWrapper.querySelectorAll(".leader-line").forEach((node) => {
          node.remove();
        });
      }
    }
  }
);
const detailData = ref(null);
const scdVer = ref(null);
const crcVer = ref(null);
const iedVer = ref({});
const recordDelIedVer = ref(null); //把删除的弹窗左侧列表记录传给点击修改后的弹窗，用于根据name找到删除项的ied_desc
watch(
  () => props.scdipadMini,
  (newValue) => {
    if (newValue && clickRow.value) {
      iedVer.value = {};
      detailData.value = newValue;
      // SCD版本数据
      const scdv = detailData.value.filter(
        (item) => item.diff_object_type == "scd.version"
      );
      scdVer.value =
        scdv.length && scdv[0].diff_desc ? JSON.parse(scdv[0].diff_desc) : null;
      // CRC版本数据
      const crcV = detailData.value.filter(
        (item) => item.diff_object_type == "scd.crc"
      );
      crcVer.value =
        crcV.length && crcV[0].diff_desc ? JSON.parse(crcV[0].diff_desc) : null;
      //IED版本数据，diff_opt中u是修改，i是新增，d是删除
      const iedV = detailData.value.filter(
        (item) => item.diff_object_type == "scd.ied"
      );
      for (let k = 0; k < iedV.length; k++) {
        let item = iedV[k];
        const key = item.diff_opt;
        if (iedVer.value[key] == null) {
          iedVer.value[key] = {
            list: [item],
          };
        } else {
          iedVer.value[key].list.push(item);
        }
      }
      console.log('iedVer.valu===', iedVer.value)
      setTimeout(() => {
        lineWrite();
      }, 50);
    }
  }
);
//弹窗====
const checkDialogData = ref(null); //选择弹框的第一条数据
const done = (emits) => {
  openBig.value = emits;
  checkDialogData.value = null;
  scdView.value = false;
  delScdId.value = "";
};
const iedRelationData = ref({}); //左侧所有数据
const scdView = ref(false); //是否是点击Scd文件一致性校核进入的
const delScdId = ref(""); //点击删除的scd_id
const lookAddOrDel = async (comData, del) => {
  iedRelationData.value = {};
  checkDialogData.value = null;
  scdView.value = true;
  const iedDetail = {};
  for (let k = 0; k < comData.length; k++) {
    let item = comData[k];
    const key = item.ied_name;
    iedDetail[key] = item;
  }
  // 获取对象的所有键，并存入数组
  let keys = Object.keys(iedDetail);
  // 对键进行排序按a,b,c===
  keys.sort();
  for (let key of keys) {
    iedRelationData.value[key] = iedDetail[key];
  }
  if (del == "del" && clickRowData.value.target_id) {
    delScdId.value = clickRowData.value.target_id; //点击删除的scdid要用对比文件的
  } else if (del == "add") {
    delScdId.value = route.query.id;
  } else if (del == "edit") {
    recordDelIedVer.value = iedVer.value ? iedVer.value.d.list : null;
  }
  // 对键进行排序===
  // if (del != "edit") {
  const iedRes = await scdIedRelation({
    scd_id: delScdId.value,
    ied_name: comData[0].ied_name,
    reset: 1,
  });
  console.log('iedRelationData.value111111111', iedRelationData.value)
  checkDialogData.value = iedRes.data ? iedRes.data[comData[0].ied_name] : null;
  if (del != "edit") {
    openBig.value = true;
  }
};
const lookAdd = async (comData) => {
  console.log("comData=====", comData);
  lookAddOrDel(comData, "add");
  // lookType.value = 1;
  // emit("nowBack", lookType.value);
};
const lookDel = (comData) => {
  lookAddOrDel(comData, "del");
  // lookType.value = 3;
  // emit("nowBack", lookType.value);
};
const hiddenLine2 = () => {
  const elmWrapper = document.getElementById("wrapperscd");
  // 移动 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)`;
};
watch(
  () => openBig.value,
  (newValue) => {
    lineList.value = [];
    const elmWrapper = document.getElementById("wrapperscd");
    if (elmWrapper) {
      elmWrapper.querySelectorAll(".leader-line").forEach((node) => {
        node.remove();
      });
    }
    if (!newValue) {
      setTimeout(() => {
        lineWrite(); //时间400是一定需要的，不然显示了会马上删除，暂未找到原因
      }, 400);
    }
  }
);
const openScl = ref(false);
watch(()=>openScl.value,(newValue)=>{
  if (!newValue) {
      setTimeout(() => {
        lineWrite(); //时间400是一定需要的，不然显示了会马上删除，暂未找到原因
      }, 400);
    }
})

const lookEdit = (comData) => {
  openScl.value = true;
  lookAddOrDel(comData, "edit");
  // emit("nowBack", lookType.value);
};
//关闭scl修改弹窗
const doneScl = () => {
  openScl.value = false;
  checkDialogData.value = null;
  iedRelationData.value = {};
};
onMounted(() => {});
onBeforeUnmount(() => {
  // lineList.value.forEach((item) => item.remove());
});
</script>

<style scoped lang="scss">
.main {
  display: flex;
  justify-content: center;
}
p {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.scdBox,
.crcBox,
.iedBox {
  width: 23%;
  height: auto;
  text-align: center;
  /* border: 1px solid red; */
}

.crcBox {
}

.iedBox {
  position: relative;
}
#newIed {
  position: absolute;
  right: -50px;
  margin-top: 24px;
  span {
    font-size: 16px;
  }
}

#addId,
#editId,
#delId {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 112px;
  height: 40px;
  border: 2px dashed #255ce7;
  background-color: rgb(239, 243, 255);
  border-radius: 2px;
  margin-bottom: 20px;
  cursor: pointer;
}

#editId {
  border: 2px dashed #ffcb11;
  background-color: rgb(255, 251, 242);
}

#delId {
  border: 2px dashed #e50505;
  background-color: rgb(255, 236, 236);
}
.jiantou {
  width: 10px;
  height: 42px;
  margin: 4px 0;
}
#oldScd,
#oldCrc {
  color: #7484ab;
  font-size: 16px;
}
#newScd,
#newCrc {
  font-size: 16px;
}
.navs {
  color: #1a2447;
  font-size: 16px;
  margin-bottom: 24px;
}
.icons {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}
.circel-png {
  margin-right: 4px;
}
.no-data {
  text-align: center;
  margin-top: 40px;
}
</style>