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

<!-- 一致性对比结果的画图 -->
<script setup>
import { nextTick, onMounted, ref, watch } from "vue";
import { compResult } from "@/api/scdCheck/scdCheck2";
import squer from "@/assets/image/CID/squer.png";
import del0 from "@/assets/image/CID/del0.png";
import modify0 from "@/assets/image/CID/modify0.png";
import newly0 from "@/assets/image/CID/newly0.png";
import LeaderLine from "../../../../public/leader-line.min.js";
import AnimEvent from "../../../../public/anim-event.min.js";
import { hiddenLine2, hiddenLineDialog } from "@/utils/linesPosition";
import jiantou from "@/assets/image/CID/jiantou.png";
const props = defineProps({
  clickRowDatas: {
    type: Object,
    default: () => {},
  },
  iedRelation: {
    type: Object,
    default: () => {},
  },
  clickList: {
    type: Object,
    default: () => {},
  },
  clickCodeValue: {
    type: String,
    default: "",
  },
});

const clickRow = ref(props.clickRowDatas);
let tagList = ref(null); //左侧更改的设备列表
//对比文件：头部对比的单个数据
watch(
  () => props.clickRowDatas,
  (newValue) => {
    if (newValue) {
      clickRow.value = newValue;
    }
  }
);
//点击装置列表的数据变化
watch(
  () => props.clickList,
  (newValue) => {
    if (newValue) {
      tagList.value = newValue;
      clickLineResult();
      clickLineResultMain();
      getData();
      nextTick(() => {
        setTimeout(() => {
          setLeaderlineMain();
        }, 300);
        if (cClickCode.value == "scd.ied") {
          setTimeout(() => {
            setLeaderlines("UpLeftBasic");
            newPositionLine2(leaderLineShow.value);
          }, 300);
        }
      });
    }
  }
);
const cClickCode = ref(props.clickCodeValue); //点击侧边栏差异项的code
watch(
  () => props.clickCodeValue,
  (newValue) => {
    if (newValue) {
      isDiffdesc.value = false; //点击侧边栏的时候站控层的这个先置为空
      cClickCode.value = newValue;
      CodeImg(newValue); //找到差异项对应的图片进行展示
      clickLineResult(); //重置
      clickLineResultMain(); //重置
      loading.value = true;
      getData();
      nextTick(() => {
        //一来左右两侧展示的线条
        setTimeout(() => {
          setLeaderlineMain();
        }, 300);
        //如果是基本信息则不用点击图片直接调用画线
        if (newValue == "scd.ied") {
          setTimeout(() => {
            setLeaderlines("UpLeftBasic");
            newPositionLine2(leaderLineShow.value);
          }, 300);
        }
      });
    }
  }
);
const mapList = ref(null);
//IED版本数据，diff_opt中u是修改，i是新增，d是删除
const leftI = ref([]); //新增
const dataU = ref([]); //修改
const rightD = ref([]); //删除
const loading = ref(true);
const dones = () => {
  //重置
  leftI.value = [];
  dataU.value = [];
  rightD.value = [];
};
const mianItem = ref(null);
const heights = ref(0);
const middleLine = ref(null);
const IorDClick = ref({}); //点击或默认显示的连线数据
const rightStartDom = ref(null); //右侧图片带差异名字大板块的dom
const leftStartDom = ref(null); //左侧图片带差异名字大板块的dom
const middleMain = ref(null);
const isDiffdesc = ref(false); //判断是否是数组，如果是数组并且又是修改，那么修改的数据显示需要重新处理
const getData = async () => {
  dones();
  const ids = clickRow.value ? clickRow.value.id : "";
  const names = tagList.value ? tagList.value.ied_name : "";
  const res = await compResult({
    comp_id: ids,
    ied_name: names,
    comptype: "u",
    itemcode: cClickCode.value,
  });
  if (res.data && cClickCode.value != "scd.ied") {
    res.data.forEach((item) => {
      let text;
      text = item.diff_desc.replace(/[\r|\n|\t]/g, ""); //处理返回的数据中换行等，整理好规整数据
      item.diff_desc = JSON.parse(text);
      isDiffdesc.value = false;
      switch (item.diff_opt) {
        case "i": //新增
          leftI.value.push(item);
          break;
        case "d":
          rightD.value.push(item);
          break;
        case "u": //修改
          dataU.value.push(item);
          break;
      }
    });
  } else {
  }
  mapList.value = res.data;
  nextTick(() => {
    middleLine.value.style.height = 0;
    middleLine.value.style.height = mianItem.value.scrollHeight + "px";
  });
  // loading.value = false;
};
//点击新增或删除的图片
const DelClick = ref({});
const clickTypeImg = (item, event) => {
  clickLineResult();
  domListAdd.value = event.target;
  setTimeout(() => {
    setLeaderlines("add");
    newPositionLine2(leaderLineShow.value);
  }, 100);
  comonTypeImg(item, event);
};
const clickTypeImgDel = (item, event) => {
  clickLineResult();
  domListDel.value = event.target;
  setTimeout(() => {
    setLeaderlines("del");
    newPositionLine2(leaderLineShow.value);
  }, 100);
  comonTypeImg(item, event, 2);
};
const clickReset = () => {
  DelClick.value = {};
  mapList.value = null;
  IorDClick.value = {};
  newrightData.value = {};
  newleftData.value = {};
  newrightDataMiddle.value = {};
  newleftDataMiddle.value = {};
  leaderLineShow.value = [];
  if (addDiff.value && delDiff.value) {
    addDiff.value.style.top = 0;
    delDiff.value.style.top = 0;
  }
};

const addDiff = ref(0);
const delDiff = ref(0);
const comonTypeImg = (item, event, num) => {
  clickLineResult();
  setTopDiffName(event);
  newrightData.value = null;
  newleftData.value = null;
  for (let key in item.diff_desc) {
    if (item.diff_desc.hasOwnProperty(key)) {
      const value = item.diff_desc[key];
      if (
        typeof value === "string" ||
        typeof value === "boolean" ||
        typeof value === "number"
      ) {
        if (num == 2) {
          DelClick.value[key] = value;
        } else {
          IorDClick.value[key] = value;
        }
      }
    }
  }
};
//点击修改的图片
const newleftData = ref(null);
const newrightData = ref(null);
const clickUpIdDomName = ref(null); //点击的name
const Communication = (arr, list) => {
  //站控层数据特殊处理
  if (
    Array.isArray(arr) &&
    list.diff_opt == "u" &&
    cClickCode.value == "scd.ied.Communication.S1"
  ) {
    //如果是站控层，数据要从新处理并且是数组
    isDiffdesc.value = true;
  } else {
    isDiffdesc.value = false;
  }
};
const clickUpTypeImgLeft = (arr, event, name, list) => {
  clickLineResult();
  Communication(arr, list);
  clickUpIdDomName.value = name.replace(/[^\w\s]/g, ""); //如果有冒号query查找会报错，所以替换 成了点
  domListUpLeft.value = event.target;
  setTimeout(() => {
    setLeaderlines("UpLeft");
    newPositionLine2(leaderLineShow.value);
  }, 100);
  if (!isDiffdesc.value && arr.length > 0) {
    //如果不是修改数据并且diff_desc不是数组
    clickUpTypeImg(arr, event);
  } else if (isDiffdesc.value) {
    //修改里面包含新增和删除
    clickUpTypeImgUpdate(arr, event);
  }
};
const clickUpTypeImgRight = (arr, event, name, list) => {
  clickLineResult();
  Communication(arr, list);
  clickUpIdDomName.value = name.replace(/[^\w\s]/g, "");
  domListUpRight.value = event.target;
  setTimeout(() => {
    setLeaderlines("UpRight");
    newPositionLine2(leaderLineShow.value);
  }, 100);
  if (!isDiffdesc.value && arr.length > 0) {
    clickUpTypeImg(arr, event);
  } else if (isDiffdesc.value) {
    //修改里面包含新增和删除
    clickUpTypeImgUpdate(arr, event);
  }
};
const CommunicationS1 = ref([]); //站控层的修改时有新增和修改的数据
const clickUpTypeImgUpdate = (arr, event) => {
  //点击修改的图片
  console.log("arr-----", arr);
  clickLineResult();
  setTopDiffName(event);
  if (arr.length && arr.length > 0) {
    arr[0].P.forEach((item1) => {
      let foundMatch = false;

      for (let item2 of arr[1].P) {
        if (item1.Type === item2.Type) {
          foundMatch = true;
          // 正则是为了删除所有的空格
          if (
            item1.InnerText.replace(/\s+/g, "") !=
            item2.InnerText.replace(/\s+/g, "")
          ) {
            CommunicationS1.value.unshift({
              InnerText: item1.InnerText,
              Type: item1.Type,
              nnerTextRight: item2.InnerText,
            });
          }
          break;
        }
      }

      if (!foundMatch) {
        CommunicationS1.value.unshift({
          InnerText: item1.InnerText,
          Type: item1.Type,
          nnerTextRight: "空",
        });
      }
    });
  }
  CommunicationS1.value.forEach(item=>{
    if(item.nnerTextRight == ''){
      item.add = true;
      CommunicationS1.value.push(item)
    }
  })
  console.log(" CommunicationS1.value", CommunicationS1.value);
  // const data = [
  //   {
  //     P: [
  //       { InnerText: "255.255.0.0", Type: "IP-SUBNET" },
  //       { nnerText: "255.255.0.0", Type: "IP-GATEWAY" },
  //       { nnerText: "00 01", Type: "OSI-TSEL" },
  //       { nnerText: "00 01", Type: "OSI-SSEL" },
  //       { InnerText: "00 00 00 01", Type: "OSI-PSEL" },
  //       { nnerText: "OSI-NSAP", Type: "OSI-NSAP" },
  //       { nnerText: "1 3 9999 33", Type: "OSI-AP-Title" },
  //       { nnerText: "OSI-AP-Invoke", Type: "OSI-AP-Invoke" },
  //       { nnerText: "33", Type: "OSI-AE-Qualifier" },
  //       { nnerText: "OSI-AE-Invoke", Type: "OSI-AE-Invoke" },
  //       { nnerText: "172.20.11.2", Type: "IP" },
  //     ],
  //   },
  //   {
  //     P: [
  //       { nnerText: "198.120.0.58", Type: "IP" },
  //       { nnerText: "255.255.0.0", Type: "IP-SUBNET" },
  //     ],
  //   },
  // ];
  // // data中[0]的属性的数组中的Type值等于了data中[1]的属性的数组中的Type值,并且nnerText值也相同就不用放在newdata新数组中
  // // 如果data中[0]的属性的数组中的Type值等于了data中[1]的属性的数组中的Type值并且nnerText值不 相同，
  // // 那么把data中[1]中的Type相等的nnerText值赋给data中[0]的nnerTextRight，如果data中[0]的Type值，data[1]中没有，那么data中[0]属性nnerTextRight的值为  空  字符串
  // //nnerText是展示在左侧的数据，nnerTextRight是展示在右侧的数据，如果nnerTextRight为空，那么同时展示在左侧最下方表示新增
  // // 示例结果
  // const newdata = [
  //   { nnerText: "255.255.0.0", Type: "IP-GATEWAY", nnerTextRight: "空" },
  //   { nnerText: "00 01", Type: "OSI-TSEL", nnerTextRight: "空" },
  //   { nnerText: "00 01", Type: "OSI-SSEL", nnerTextRight: "空" },
  //   { InnerText: "00 00 00 01", Type: "OSI-PSEL", nnerTextRight: "空" },
  //   { nnerText: "OSI-NSAP", Type: "OSI-NSAP", nnerTextRight: "空" },
  //   { nnerText: "1 3 9999 33", Type: "OSI-AP-Title", nnerTextRight: "空" },
  //   { nnerText: "OSI-AP-Invoke", Type: "OSI-AP-Invoke", nnerTextRight: "空" },
  //   { nnerText: "33", Type: "OSI-AE-Qualifier", nnerTextRight: "空" },
  //   { nnerText: "OSI-AE-Invoke", Type: "OSI-AE-Invoke", nnerTextRight: "空" },
  //   { nnerText: "172.20.11.2", Type: "IP", nnerTextRight: "198.120.0.58" },
  // ];
};
const setTopDiffName = (event) => {
  const dom1Rect = rightStartDom.value.getBoundingClientRect();
  const dom2Rect = leftStartDom.value.getBoundingClientRect();
  //设置差异位置
  nextTick(() => {
    const evt = event.target.getBoundingClientRect();
    let keyCount = newrightData.value
      ? Object.keys(newrightData.value).length
      : 0;
    let keyCount2 = newrightData.value
      ? Object.keys(newleftData.value).length
      : 0;
    if ((keyCount != 0 && keyCount < 3) || (keyCount != 0 && keyCount2 < 3)) {
      const nums = evt.top - dom2Rect.top + 160 + "px";
      const numsR = evt.top - dom1Rect.top + 160 + "px";
      addDiff.value.style.top = nums;
      delDiff.value.style.top = numsR;
      middleMain.value.style.top = nums;
    } else {
      const nums2 = evt.top - dom2Rect.top + 60 + "px";
      const numsR = evt.top - dom1Rect.top + 60 + "px";
      addDiff.value.style.top = nums2;
      delDiff.value.style.top = numsR;
      middleMain.value.style.top = nums2;
    }
  });
};
const newleftDataMiddle = ref(null); //处理修改居中展示的数据
const newrightDataMiddle = ref(null);
const clickUpTypeImg = (arr, event) => {
  clickLineResult();
  setTopDiffName(event);
  let newleft = {};
  let newright = {};
  for (let key in arr[0]) {
    //检查当前属性是否存在于两个输入对象中，并且它们的值是否不同。
    if (
      arr[0].hasOwnProperty(key) &&
      arr[1].hasOwnProperty(key) &&
      arr[0][key] !== arr[1][key]
    ) {
      if (typeof arr[0][key] === "object") {
        // 如果当前属性的值是另一个对象，则进一步检查
        for (let subKey in arr[0][key]) {
          //遍历当前对象的所有子属性。
          // 检查子属性是否存在于两个输入对象中，并且它们的值是否不同。
          if (
            arr[0][key].hasOwnProperty(subKey) &&
            arr[1][key].hasOwnProperty(subKey) &&
            arr[0][key][subKey] !== arr[1][key][subKey]
          ) {
            // 如果满足上述条件，则将子属性添加到 newleft 对象中。
            // 同时将子属性添加到 newright 对象中。
            newleft[key] = {
              ...newleft[key],
              [subKey]: arr[0][key][subKey],
            };
            newright[key] = {
              ...newright[key],
              [subKey]: arr[1][key][subKey],
            };
          }
        }
      } else {
        // 如果当前属性的值不是另一个对象，则直接将它们添加到对应的输出对象中。
        newleft[key] = arr[0][key];
        newright[key] = arr[1][key];
      }
    } else if (!arr[1].hasOwnProperty(key)) {
      // 如果第二个输入对象没有当前属性，则将该属性添加到 newleft 对象中。
      newleft[key] = arr[0][key];
    } else if (!arr[0].hasOwnProperty(key)) {
      // 如果第一个输入对象没有当前属性，则将该属性添加到 newright 对象中。
      newright[key] = arr[1][key];
    }
  }
  newrightData.value = newright;
  newleftData.value = newleft;
  //处理中间展示的数据===
  newrightDataMiddle.value = flattenObject(newright);
  newleftDataMiddle.value = flattenObject(newleft);
};
function flattenObject(obj, prefix = "") {
  const flattenedObj = {};
  //函数会遍历对象的属性，并根据属性的类型将其拆分成扁平的形式。
  for (let key in obj) {
    //如果属性的值是一个对象，并且不为nul，则递归调用 flattenobiect 函数来处理嵌套对象，同时更新前缀。
    if (typeof obj[key] === "object" && obj[key] !== null) {
      const nestedObj = flattenObject(obj[key], `${prefix}${key}.`);
      Object.assign(flattenedObj, nestedObj);
    } else {
      flattenedObj[`${prefix}${key}`] = obj[key];
    }
  }
  console.log("flattenedObj", flattenedObj);
  return flattenedObj;
}
//动态处理点击右侧code左右侧大板块图片
const codeImg = ref(null);
const codeImgs = {
  "scd.ied.ExtRef": require("@/assets/image/CID/b_get4.png"),
  "scd.ied.FCDA": require("@/assets/image/CID/b_go5.png"),
  "scd.ied.GSEControl": require("@/assets/image/CID/b_goose2.png"),
  "scd.ied.Communication.GSE": require("@/assets/image/CID/b_goose2.png"),
  "scd.ied.DatSet": require("@/assets/image/CID/b_navicat_plus17.png"),
  "scd.ied.DatSetMeber": require("@/assets/image/CID/b_navicat16.png"),
  "scd.ied": require("@/assets/image/CID/b_pole6.png"),
  "scd.ied.ReportControl": require("@/assets/image/CID/b_report14.png"),
  "scd.ied.LogControl": require("@/assets/image/CID/b_setting15.png"),
  "scd.ied.YC": require("@/assets/image/CID/b_speed9.png"),
  "scd.ied.Communication.S1": require("@/assets/image/CID/b_stand1.png"),
  "scd.ied.DZ": require("@/assets/image/CID/b_stknum11.png"),
  "scd.ied.SampledValueControl": require("@/assets/image/CID/b_sv3.png"),
  "scd.ied.YX": require("@/assets/image/CID/b_wifi7.png"),
  "scd.ied.Communication": require("@/assets/image/CID/b_wifi7.png"),
  "scd.ied.YM": require("@/assets/image/CID/bb10.png"),
  "scd.ied.YK": require("@/assets/image/CID/btn8.png"),
};
const CodeImg = (val) => {
  if (val) {
    codeImg.value = codeImgs[val];
  }
};
//处理中间展示的数据===
// 连线====
const leaderLineShow = ref([]); //控制线条显示
// 新增差异名字dom
const domListAdd = ref(null); //获取左侧点击新增图片的dom
const domListDel = ref(null); //获取右侧点击删除图片的dom
const domListUpLeft = ref(null); //获取左侧侧点击修改图片的dom
const domListUpRight = ref(null); //获取右侧侧点击修改图片的dom
const domListAddName = ref(new Map()); //获取所有新增差异名字
const domListAddValue = ref(new Map()); //获取所有新增差异属性
const domListDelName = ref(new Map()); //获取所有删除差异名字
const domListDelValue = ref(new Map()); //获取所有删除差异属性
const domListLeftMain = ref(new Map()); //获取左侧所有图片的dom
const domListRightMain = ref(new Map()); //获取右侧所有图片的dom
const domListUpLeftName = ref(new Map()); //获取点击左侧属性名差异名字
const domListUpMiddleName = ref(new Map()); //获取点击修改中间属性
const domListUpRightName = ref(new Map()); //获取点击右侧属性名差异名字
const setdomAddName = (el, item) => {
  //左侧点击新增差异名字dom
  if (el) {
    domListAddName.value.set(item, el);
  }
};
const setdomAddValue = (el, item) => {
  //左侧点击新增差异值dom
  if (el) {
    domListAddValue.value.set(item, el);
  }
};
const setdomDelName = (el, item) => {
  //左侧点击删除差异名字dom
  if (el) {
    domListDelName.value.set(item, el);
  }
};
const setdomDelValue = (el, item) => {
  //左侧点击删除差异值dom
  if (el) {
    domListDelValue.value.set(item, el);
  }
};
const setdomLeftMain = (el, item) => {
  //左侧侧灰色一对多主连线
  if (el) {
    domListLeftMain.value.set(item, el);
  }
};
const setdomRightMain = (el, item) => {
  //右侧灰色一对多主连线
  if (el) {
    domListRightMain.value.set(item, el);
  }
};
const setdomUPLeftName = (el, item) => {
  //左侧点击修改差异名字dom
  if (el) {
    domListUpLeftName.value.set(item, el);
  }
};
const setdomUPMiddleName = (el, item) => {
  //左侧点击修改差异名字dom
  if (el) {
    domListUpMiddleName.value.set(item, el);
  }
};
const setdomUpRightName = (el, item) => {
  //左侧点击修改差异值dom
  if (el) {
    domListUpRightName.value.set(item, el);
  }
};
const lineStyleAdd = {
  color: "#134bea",
  size: 2,
  path: "grid",
  endPlug: "behind",
  startSocket: "right",
  endSocket: "left",
};
const lineStyleDel = {
  color: "#FF0000",
  size: 2,
  path: "grid",
  endPlug: "behind",
  startSocket: "right",
  endSocket: "left",
};
//左右两侧一来显示的连线
const leaderLineMain = ref([]);
const setLeaderlineMain = () => {
  const lineStyleLeftMain = {
    ...lineStyleAdd,
    color: "#C8D4E2",
  };
  const lineStyleRightMain = {
    ...lineStyleAdd,
    color: "#C8D4E2",
    startSocket: "right",
    endSocket: "left",
  };
  const mainLeftStartDom = document.getElementById("leftMainDom");
  const mainRightStartDom = document.getElementById("rightMainDom");
  if (domListLeftMain.value.size > 0) {
    for (const [key, value] of domListLeftMain.value) {
      let line;
      line = new LeaderLine(mainLeftStartDom, value, lineStyleLeftMain);
      leaderLineMain.value.push(line);
      hiddenLineDialog();
    }
  }
  if (domListRightMain.value.size > 0) {
    for (const [key, value] of domListRightMain.value) {
      let lines;
      lines = new LeaderLine(value, mainRightStartDom, lineStyleRightMain);
      leaderLineMain.value.push(lines);
      hiddenLineDialog();
    }
  }
  loading.value = false;
};
//左右两侧点击图片显示的连线
const setLeaderlines = (types) => {
  const lineStyleAdd2 = {
    ...lineStyleAdd,
    path: "straight",
  };
  const lineStyleDel2 = {
    ...lineStyleDel,
    path: "straight",
    startSocket: "right",
    endSocket: "left",
  };
  if (types == "add" && domListAddName.value.size > 0) {
    //新增
    for (const [key, value] of domListAddName.value) {
      for (const [key2, value2] of domListAddValue.value) {
        if (key == key2) {
          const startDom = domListAdd.value;
          let line;
          line = new LeaderLine(startDom, value, lineStyleAdd);
          leaderLineShow.value.push(line);
          let lineValue;
          lineValue = new LeaderLine(value, value2, lineStyleAdd2);
          leaderLineShow.value.push(lineValue);
          //弹窗打开后使得线条在指定区域中
          hiddenLine2();
        }
      }
    }
  } else if (types == "del" && domListDelName.value.size > 0) {
    //删除
    for (const [key, value] of domListDelName.value) {
      for (const [key2, value2] of domListDelValue.value) {
        if (key == key2) {
          const startDom = domListDel.value;
          let line;
          line = new LeaderLine(value, startDom, lineStyleDel);
          leaderLineShow.value.push(line);
          let lineValue;
          lineValue = new LeaderLine(value, value2, lineStyleDel2);
          leaderLineShow.value.push(lineValue);
          //弹窗打开后使得线条在指定区域中
          hiddenLine2();
        }
      }
    }
  } else if (
    (types == "UpLeft" && domListUpLeft.value) ||
    (types == "UpLeftBasic" && cClickCode.value == "scd.ied")
  ) {
    const startDom =
      types == "UpLeft"
        ? domListUpLeft.value
        : document.getElementById("leftBasic");
    console.log(
      "first",
      document.querySelectorAll(`#${clickUpIdDomName.value}`)
    );
    const doms =
      types == "UpLeftBasic"
        ? domListUpRight.value
        : document.querySelectorAll(`#${clickUpIdDomName.value}`);
    let sameDom;
    if (types == "UpLeft") {
      sameDom = doms && doms.length > 1 ? doms[1] : doms[0]; //点击修改左侧或右侧每点击相同名字的dom
    } else {
      sameDom = document.getElementById("rightBasic"); //相同名字的dom
    }
    const lineStylUp = {
      ...lineStyleAdd,
      color: "#FFA011",
    };
    const lineStylSame = {
      ...lineStyleAdd,
      color: "#FFA011",
      startSocket: "right",
      endSocket: "left",
    };
    //左侧点击修改数据
    for (const [key, value] of domListUpLeftName.value) {
      for (const [key2, value2] of domListUpMiddleName.value) {
        for (const [key3, value3] of domListUpRightName.value) {
          if (key == key2 && key2 == key3) {
            let line; //从左往右的线条
            line = new LeaderLine(startDom, value, lineStylUp);
            leaderLineShow.value.push(line);
            let lineValue;
            lineValue = new LeaderLine(value, value2, lineStylUp);
            leaderLineShow.value.push(lineValue);
            let lineValue3;
            lineValue3 = new LeaderLine(value2, value3, lineStylUp);
            leaderLineShow.value.push(lineValue3);
            let lineValue4;
            lineValue4 = new LeaderLine(value3, sameDom, lineStylUp);
            leaderLineShow.value.push(lineValue4);
            //弹窗打开后使得线条在指定区域中
            hiddenLine2();
          }
        }
      }
    }
  } else if (types == "UpRight" && domListUpRight.value) {
    const startDom = domListUpRight.value;
    const sameDom = document.querySelectorAll(`#${clickUpIdDomName.value}`); //点击修改左侧或右侧每点击相同名字的dom
    const lineStylUp = {
      ...lineStyleAdd,
      color: "#FFA011",
    };
    const lineStylSame = {
      ...lineStyleAdd,
      color: "#FFA011",
      startSocket: "left",
      endSocket: "right",
    };
    //左侧点击修改数据
    for (const [key, value] of domListUpRightName.value) {
      for (const [key2, value2] of domListUpMiddleName.value) {
        for (const [key3, value3] of domListUpLeftName.value) {
          if (key == key2 && key2 == key3) {
            let line; //从左往右的线条
            line = new LeaderLine(value, startDom, lineStylUp);
            leaderLineShow.value.push(line);
            let lineValue;
            lineValue = new LeaderLine(value2, value, lineStylUp);
            leaderLineShow.value.push(lineValue);
            let lineValue3;
            lineValue3 = new LeaderLine(value3, value2, lineStylUp);
            leaderLineShow.value.push(lineValue3);
            let lineValue4;
            lineValue4 = new LeaderLine(sameDom[0], value3, lineStylUp);
            leaderLineShow.value.push(lineValue4);
            //弹窗打开后使得线条在指定区域中
            hiddenLine2();
          }
        }
      }
    }
  }
  // else if(types=='UpLeftBasic'&&cClickCode.value=='scd.ied'){
  //   console.log('domListUpLeftName.value', domListUpLeftName.value)

  // }
};
//滚动时重定位线条
const newPositionLine2 = (diffline) => {
  document.getElementById("wrapper").addEventListener(
    "scroll",
    AnimEvent.add(() => {
      leaderLineMain.value.forEach((line) => {
        if (line) {
          hiddenLineDialog();
          line.position();
          line.positionByWindowResize = false;
        }
      });
      leaderLineShow.value.forEach((line) => {
        if (line) {
          hiddenLine2();
          line.position();
          line.positionByWindowResize = false;
        }
      });
      //中间展示图片的
    }),
    false
  );
  document.getElementById("treedomCid").addEventListener(
    "resize",
    AnimEvent.add(function () {
      leaderLineMain.value.forEach((line) => {
        hiddenLineDialog();
        line.position();
        line.positionByWindowResize = false;
      });
      leaderLineShow.value.forEach((line) => {
        hiddenLine2();
        line.position();
        line.positionByWindowResize = false;
      });
    }),
    false
  );
};
const removeLine2 = () => {
  const elmWrapper = document.getElementById("wrapper");
  if (elmWrapper) {
    elmWrapper.querySelectorAll("#wrapper .leader-line").forEach((node) => {
      // elmWrapper.removeChild(node);
      node.remove();
    });
  }
};
//点击的线条重置
const clickLineResult = () => {
  clickReset();
  CommunicationS1.value = [];
  domListAddName.value.clear();
  domListAddValue.value.clear();
  domListDelName.value.clear();
  domListDelValue.value.clear();
  domListUpLeftName.value.clear();
  domListUpRightName.value.clear();
  domListUpMiddleName.value.clear();
  leaderLineShow.value = [];
  removeLine2();
};
//主线条重置
const clickLineResultMain = () => {
  domListRightMain.value.clear();
  domListLeftMain.value.clear();
  leaderLineMain.value = [];
  document.body.querySelectorAll("body .leader-line").forEach((node) => {
    node.remove();
    // elmWrapper.removeChild(node);
  });
};
watch(
  () => mapList.value,
  (newValue) => {
    if (newValue) {
      setTimeout(() => {
        setLeaderlineMain();
        newPositionLine2(leaderLineMain.value);
      }, 300);
    }
  }
);
//连线===
onMounted(() => {
  CodeImg(props.clickCodeValue);
  if (props.iedRelation) {
    tagList.value = Object.values(props.iedRelation)[0];
  }
  getData();
});
</script>

<template>
  <div
    class="main"
    ref="mianItem"
    v-loading="loading"
    id="treedomCid"
    element-loading-text="数据加载中..."
  >
    <!-- 左侧 -->
    <div class="left-main" v-if="(leftI && leftI.length) || dataU">
      <!-- 名称 -->
      <div class="ied-name" id="leftMainDom">
        <img :src="squer" alt="" />
        <div v-if="tagList">{{ tagList.ied_name }}</div>
      </div>
      <!-- 各个图片数据版块 -->
      <div
        class="left-item-min"
        :class="{
          'left-item-max':
            leftI.length > 5 ||
            dataU.length > 5 ||
            leftI.length + dataU.length > 5,
        }"
        ref="leftStartDom"
      >
        <!-- 左侧修改 -->
        <div v-if="dataU.length > 0 && cClickCode != 'scd.ied'">
          <div
            v-for="(item, index) in dataU"
            :key="index"
            class="left-item-cont"
            @click="
              clickUpTypeImgLeft(
                item.diff_desc,
                $event,
                item.diff_object_name,
                item
              )
            "
            :ref="(el) => setdomLeftMain(el, item.diff_object_name)"
            :id="item.diff_object_name.replace(/[^\w\s]/g, '')"
          >
            <div class="item-img">
              <img :src="codeImg" alt="" class="type-img" />
              <img :src="modify0" alt="" class="type-img-mini" />
            </div>
            <div class="wraps">{{ item.diff_object_name }}</div>
          </div>
        </div>
        <div v-else-if="cClickCode == 'scd.ied'">
          <div
            class="left-item-cont"
            :ref="(el) => setdomLeftMain(el, 'leftmain')"
            id="leftBasic"
          >
            <div class="item-img">
              <img :src="codeImg" alt="" class="type-img" />
              <img :src="modify0" alt="" class="type-img-mini" />
            </div>
            <div class="wraps">基本信息</div>
          </div>
        </div>
        <!-- 新增 -->
        <div v-show="leftI.length > 0">
          <div
            v-for="(item, index) in leftI"
            :key="index"
            class="left-item-cont"
            @click="clickTypeImg(item, $event)"
            :ref="(el) => setdomLeftMain(el, item.diff_object_name)"
          >
            <div class="item-img">
              <img :src="codeImg" alt="" class="type-img" />
              <img :src="newly0" alt="" class="type-img-mini" />
            </div>
            <div class="wraps">{{ item.diff_object_name }}</div>
          </div>
        </div>
      </div>
      <!-- 左侧新增差异名字 -->
      <div class="left-difference" v-if="IorDClick" ref="addDiff">
        <!-- key是键,value是值,循环的是对象 -->
        <div v-for="(value, key) in IorDClick" :key="key">
          <div class="type-text" :ref="(el) => setdomAddName(el, key)">
            {{ key }}
          </div>
          <div :ref="(el) => setdomAddValue(el, key)" class="add-type">
            <div class="type-text add-type-text wraps" v-if="value">
              {{ value }}
            </div>
            <div class="type-text add-type-text wraps" v-else>【空】</div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle-line" ref="middleLine"></div>
    <!-- 右侧 -->
    <div class="right-main" v-if="(rightD && rightD.length) || dataU">
      <!-- 名称 -->
      <div class="ied-name" id="rightMainDom">
        <img :src="squer" alt="" />
        <div v-if="tagList">{{ tagList.ied_name }}</div>
      </div>
      <!-- 各个图片数据版块 -->
      <div
        ref="rightStartDom"
        class="right-item-min"
        :class="{
          'right-item-max':
            rightD.length > 5 ||
            dataU.length > 5 ||
            rightD.length + dataU.length > 5,
        }"
      >
        <!-- 修改 -->
        <div v-if="dataU.length > 0 && cClickCode != 'scd.ied'">
          <div
            v-for="(item, index) in dataU"
            :key="index"
            class="left-item-cont"
            @click="
              clickUpTypeImgRight(
                item.diff_desc,
                $event,
                item.diff_object_name,
                item
              )
            "
            :id="item.diff_object_name.replace(/[^\w\s]/g, '')"
            :ref="(el) => setdomRightMain(el, item.diff_object_name)"
          >
            <div class="item-img">
              <img :src="codeImg" alt="" class="type-img" />
              <img :src="modify0" alt="" class="type-img-mini" />
            </div>
            <div class="wraps">{{ item.diff_object_name }}</div>
          </div>
        </div>
        <div v-else-if="cClickCode == 'scd.ied'">
          <div
            class="left-item-cont"
            :ref="(el) => setdomRightMain(el, 'rightmain')"
            id="rightBasic"
          >
            <div class="item-img">
              <img :src="codeImg" alt="" class="type-img" />
              <img :src="modify0" alt="" class="type-img-mini" />
            </div>
            <div class="wraps">基本信息</div>
          </div>
        </div>
        <!-- 删除 -->
        <div v-show="rightD.length">
          <div
            v-for="(item, index) in rightD"
            :key="index"
            class="left-item-cont"
            @click="clickTypeImgDel(item, $event)"
            :ref="(el) => setdomRightMain(el, item.diff_object_name)"
          >
            <div class="item-img">
              <img :src="codeImg" alt="" class="type-img" />
              <img :src="del0" alt="" class="type-img-mini" />
            </div>
            <div class="wraps">{{ item.diff_object_name }}</div>
          </div>
        </div>
      </div>
      <!-- 右侧删除差异名字 -->
      <div class="right-difference" v-if="DelClick" ref="delDiff">
        <!-- key是键,value是值,循环的是对象 -->
        <div v-for="(value, key) in DelClick" :key="key">
          <div :ref="(el) => setdomDelValue(el, key)" class="del-type">
            <div class="type-text del-type-text wraps" v-if="value">
              {{ value }}
            </div>
            <div class="type-text del-type-text wraps" v-else>【空】</div>
          </div>
          <div class="type-text" :ref="(el) => setdomDelName(el, key)">
            {{ key }}
          </div>
        </div>
      </div>
    </div>
    <div
      class="middle-main"
      :class="{ 'middle-main-basic': cClickCode == 'scd.ied' }"
      ref="middleMain"
    >
      <!-- 修改中间数据的名字 -->
      <div v-if="cClickCode != 'scd.ied' && !isDiffdesc">
        <div v-for="(value, key) in newleftDataMiddle" :key="key">
          <div
            v-for="(value2, key2) in newrightDataMiddle"
            :key="key2"
            class="middle-frame"
          >
            <div
              v-if="key == key2"
              class="middle-type-text"
              :ref="(el) => setdomUPLeftName(el, key)"
            >
              {{ key }}
            </div>
            <div
              v-if="key == key2"
              class="middle-item"
              :ref="(el) => setdomUPMiddleName(el, key)"
            >
              <div class="middle-left">
                <div class="type-text up-type-text wraps middle-up-type-text">
                  <span v-if="value">{{ value }}</span>
                  <span v-else>【空】</span>
                </div>
              </div>
              <img :src="jiantou" alt="" style="width: 40px" />
              <div class="middle-right">
                <div class="type-text up-type-text wraps middle-up-type-text">
                  <span v-if="value2">{{ value2 }}</span>
                  <span v-else>【空】</span>
                </div>
              </div>
            </div>
            <div
              v-if="key == key2"
              class="middle-type-text"
              :ref="(el) => setdomUpRightName(el, key)"
            >
              {{ key2 }}
            </div>
          </div>
        </div>
      </div>
      <!-- 站控层通信参数 -->
      <div v-else-if="cClickCode != 'scd.ied' && isDiffdesc">
        <!-- 11111CommunicationS1 -->
        <div
          v-for="(value, key) in CommunicationS1"
          :key="key"
          class="middle-frame"
        >
        <!-- !value.add 是修改的，否则是新增的 -->
          <div
            v-if="!value.add"
            class="middle-type-text"
            :ref="(el) => setdomUPLeftName(el, key)"
          >
            <!-- 左侧类型修改 -->
            {{ value.Type }}
          </div>
          <div
            v-if="value.add"
            class="middle-type-text"
            :ref="(el) => setdomUPLeftName(el, key)"
          >
            <!-- 左侧类型修改 -->
            {{ value.Type }}
          </div>
          <!-- 类型的值 -->
          <div class="middle-item" :ref="(el) => setdomUPMiddleName(el, key)" v-if="!value.add">
            <div class="middle-left">
              <div class="type-text up-type-text wraps middle-up-type-text">
                <span v-if="value.InnerText">{{ value.InnerText }}</span>
                <span v-else>【空】</span>
              </div>
            </div>
            <img :src="jiantou" alt="" style="width: 40px" />
            <div class="middle-right">
              <div class="type-text up-type-text wraps middle-up-type-text">
                <span v-if="value.nnerTextRight != '空'">{{
                  value.nnerTextRight
                }}</span>
                <span v-else>【空】</span>
              </div>
            </div>
          </div>
          <!-- <div
            v-if="value.nnerTextRight == '空'"
            class="middle-type-text"
            :ref="(el) => setdomUPLeftName(el, key)"
          >
            左侧类型新增的值
            {{ value.InnerText }}
          </div> -->
          <!-- 右侧类型 -->
          <div
          v-if="!value.add"
            class="middle-type-text"
            :ref="(el) => setdomUpRightName(el, key)"
          >
            {{ value.Type }}
          </div>
        </div>
      </div>
      <!-- 装置信息基本信息修改 -->
      <div v-else-if="mapList && mapList.length > 0 && cClickCode == 'scd.ied'">
        <div v-for="(value, key) in mapList[0]" :key="key">
          <div
            v-for="(value2, key2) in mapList[1]"
            :key="key2"
            class="middle-frame"
          >
            <div
              v-if="
                key == key2 &&
                key != 'lineno' &&
                key != 'name' &&
                key != 'node_id'
              "
              class="middle-type-text"
              :ref="(el) => setdomUPLeftName(el, key)"
            >
              {{
                key == "config_version"
                  ? "配置版本"
                  : key == "desc"
                  ? "装置描述"
                  : key == "manufacturer"
                  ? "厂商"
                  : "装置类型"
              }}
            </div>
            <div
              v-if="
                key == key2 &&
                key != 'lineno' &&
                key != 'name' &&
                key != 'node_id'
              "
              class="middle-item"
              :ref="(el) => setdomUPMiddleName(el, key)"
            >
              <div class="middle-left">
                <div class="type-text up-type-text wraps middle-up-type-text">
                  <span v-if="value">{{ value }}</span>
                  <span v-else>【空】</span>
                </div>
              </div>
              <img :src="jiantou" alt="" style="width: 40px" />
              <div class="middle-right">
                <div class="type-text up-type-text wraps middle-up-type-text">
                  <span v-if="value2">{{ value2 }}</span>
                  <span v-else>【空】</span>
                </div>
              </div>
            </div>
            <div
              v-if="
                key == key2 &&
                key != 'lineno' &&
                key != 'name' &&
                key != 'node_id'
              "
              class="middle-type-text"
              :ref="(el) => setdomUpRightName(el, key)"
            >
              {{
                key2 == "config_version"
                  ? "配置版本"
                  : key2 == "desc"
                  ? "装置描述"
                  : key2 == "manufacturer"
                  ? "厂商"
                  : "装置类型"
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="wrapper"></div>
    <div id="dilogwrapper"></div>
  </div>
</template>

<style scoped lang="scss">
@mixin size {
  width: 80px;
  height: 80px;
}
.bigBox {
  height: calc(100vh - 230px) !important;
}
.main {
  height: 90%;
  display: flex;
  position: relative;
  overflow-y: auto;
}
.ied-name {
  width: 80px;
  height: 110px;
  text-align: center;
  & > img {
    @include size;
  }
}
.left-main {
  .ied-name {
    position: absolute;
    top: 50%;
    transform: translateY(-100%);
    left: 5%;
  }
  .left-item-min {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15%;
  }
  .left-item-max {
    position: absolute;
    top: 60px;
    transform: translateY(0%);
    left: 15% !important;
  }
}
.right-main {
  .ied-name {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5%;
  }
  .right-item-min {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15%;
  }
  .right-item-max {
    position: absolute;
    top: 60px;
    transform: translateY(0%);
    right: 15%;
  }
}
.left-item-max,
.right-item-max,
.left-item-min,
.right-item-min {
  .left-item-cont {
    cursor: pointer;
    text-align: center;
    width: 110px;
    height: 120px;
    & > div {
      color: #255ce7;
      font-size: 12px;
    }
  }
  .type-img {
    @include size;
  }
  .item-img {
    position: relative;
    .type-img-mini {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 24px;
      right: 21px;
    }
  }
}
.middle-line {
  position: absolute;
  left: 50%;
  border: 1px solid #e0e7f0;
}
//差异项
.left-difference {
  position: absolute;
  left: 28%;
  & > div {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .type-text {
    width: 80px;
    border: 1px solid #134bea;
    color: #134bea;
    text-align: center;
    margin-bottom: 47px;
    padding: 3px;
    font-size: 14px;
  }
  .add-type {
    margin-left: 40px;
    margin-bottom: 47px;
    .add-type-text {
      margin-bottom: 0;
      border: 2px dashed #134bea;
      color: #134bea;
      width: 113px;
      padding: 12px 8px;
    }
  }

  .up-type-text {
    border: 1px solid #ffa011;
    color: #ffa011;
  }
}
.middle-type-text {
  border: 1px solid #ffa011;
  color: #ffa011;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 45px;
  width: 120px;
  height: 23px;
}
.right-difference {
  position: absolute;
  right: 28%;
  .type-text {
    width: 80px;
    border: 1px solid #ff0000;
    color: #ff0000;
    text-align: center;
    margin-bottom: 47px;
    padding: 3px;
    font-size: 14px;
  }
  & > div {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .del-type {
    margin-right: 40px;
    margin-bottom: 47px;
    .del-type-text {
      margin-bottom: 0;
      border: 2px dashed #ff0000;
      color: #ff0000;
      width: 113px;
      padding: 12px 8px;
    }
  }
}
.middle-up-type-text {
  width: 100px;
}
// 文字换行
.wraps {
  word-wrap: break-word;
}
.middle-main,
.middle-main-basic {
  width: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  .middle-frame {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .middle-item {
    border: 2px dashed #ffa011;
    color: #09162c;
    font-size: 13px;
    // margin-bottom: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 10px;
    margin-bottom: 45px;
  }
}
.middle-main-basic {
  top: 50% !important;
  transform: translate(-50%, -50%);
}
</style>