|
@@ -1,59 +1,91 @@
|
|
|
<template>
|
|
|
- <div class="main">
|
|
|
- <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="" />
|
|
|
- <span>V1.1.0</span>
|
|
|
+ <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>
|
|
|
- <img :src="jiantouPng" alt="" class="jiantou" />
|
|
|
- <div id="newScd">
|
|
|
- <img src="../../../assets/icon/clice_blue.png" alt="" />
|
|
|
- <span>1000000111100022</span>
|
|
|
+ <div>
|
|
|
+ <div id="oldScd">
|
|
|
+ <img
|
|
|
+ src="../../../assets/icon/cilce_gray.png"
|
|
|
+ alt=""
|
|
|
+ class="circel-png"
|
|
|
+ />
|
|
|
+ <span v-if="scdVer && scdVer[1] != ''">{{ scdVer[0] }}</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>
|
|
|
- <div class="crcBox">
|
|
|
- <div class="navs">
|
|
|
- <img src="../../../assets/image/squer_crc.png" alt="" />
|
|
|
- <p>CRC</p>
|
|
|
+ <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>
|
|
|
- <div id="oldCrc">
|
|
|
- <img src="../../../assets/icon/cilce_gray.png" alt="" />
|
|
|
- <span>1000000111100000</span>
|
|
|
+ <div class="iedBox">
|
|
|
+ <div id="oldIed">
|
|
|
+ <img src="../../../assets/image/squer_ied.png" alt="" />
|
|
|
+ <p>IED</p>
|
|
|
</div>
|
|
|
- <img :src="jiantouPng" alt="" class="jiantou" />
|
|
|
- <div id="newCrc">
|
|
|
- <img src="../../../assets/icon/clice_blue.png" alt="" />
|
|
|
- <span>1000000111100022</span>
|
|
|
+ <div id="newIed" v-if="iedVer">
|
|
|
+ <p id="addId" @click="lookAdd">
|
|
|
+ <img :src="newlyPng" alt="" class="icons" />
|
|
|
+ <span style="color: #134bea">新增({{ iedVer.i.list.length }})</span>
|
|
|
+ </p>
|
|
|
+ <p id="editId" @click="lookEdit">
|
|
|
+ <img :src="modifyPng" alt="" class="icons" />
|
|
|
+ <span style="color: #ffcb11">修改({{ iedVer.u.list.length }})</span>
|
|
|
+ </p>
|
|
|
+ <p id="delId" @click="lookDel">
|
|
|
+ <img :src="delPng" alt="" class="icons" />
|
|
|
+ <span style="color: #e50505">删除({{ iedVer.d.list.length }})</span>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="iedBox">
|
|
|
- <div id="oldIed">
|
|
|
- <img src="../../../assets/image/squer_ied.png" alt="" />
|
|
|
- <p>IED</p>
|
|
|
- </div>
|
|
|
- <div id="newIed">
|
|
|
- <p id="addId" @click="lookAdd">
|
|
|
- <img :src="newlyPng" alt="" class="icons"/>
|
|
|
- <span style="color: #134BEA">新增(5)</span>
|
|
|
- </p>
|
|
|
- <p id="editId" @click="lookEdit">
|
|
|
- <img :src="modifyPng" alt="" class="icons" />
|
|
|
- <span style="color: #FFCB11">修改(10)</span>
|
|
|
- </p>
|
|
|
- <p id="delId" @click="lookDel">
|
|
|
- <img :src="delPng" alt="" class="icons"/>
|
|
|
- <span style="color: #E50505">删除(2)</span>
|
|
|
- </p>
|
|
|
- </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"
|
|
|
+ ></dialog-index>
|
|
|
+ <div id="wrapperscd"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -67,20 +99,35 @@ import {
|
|
|
defineEmits,
|
|
|
} from "vue";
|
|
|
import LeaderLine from "../../../../public/leader-line.min.js";
|
|
|
+import dialogIndex from "./dialogIndex.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";
|
|
|
-let lineList = [];
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+import { scdIedRelation } from "@/api/iedNetwork";
|
|
|
+const props = defineProps({
|
|
|
+ scdipadMini: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ clickView: {
|
|
|
+ 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");
|
|
|
- lineList.push(
|
|
|
+ lineList.value.push(
|
|
|
new LeaderLine(oldIed, addId, {
|
|
|
color: "#7484AB", //连接线颜色
|
|
|
size: 2, //连接线宽度
|
|
@@ -91,7 +138,7 @@ const lineWrite = () => {
|
|
|
endPlugSize: 2, //结束箭头size
|
|
|
})
|
|
|
);
|
|
|
- lineList.push(
|
|
|
+ lineList.value.push(
|
|
|
new LeaderLine(oldIed, editId, {
|
|
|
color: "#7484AB", //连接线颜色
|
|
|
size: 2, //连接线宽度
|
|
@@ -102,7 +149,7 @@ const lineWrite = () => {
|
|
|
endPlugSize: 2, //结束箭头size
|
|
|
})
|
|
|
);
|
|
|
- lineList.push(
|
|
|
+ lineList.value.push(
|
|
|
new LeaderLine(oldIed, delId, {
|
|
|
color: "#7484AB", //连接线颜色
|
|
|
size: 2, //连接线宽度
|
|
@@ -113,11 +160,118 @@ const lineWrite = () => {
|
|
|
endPlugSize: 2, //结束箭头size
|
|
|
})
|
|
|
);
|
|
|
+ hiddenLine2();
|
|
|
+ console.log("lineList.value", lineList.value);
|
|
|
};
|
|
|
-const lookAdd = () => {
|
|
|
- lookType.value = 1;
|
|
|
- emit("nowBack", lookType.value);
|
|
|
+const clickRow = ref(false);
|
|
|
+watch(
|
|
|
+ () => props.clickView,
|
|
|
+ (newValue) => {
|
|
|
+ if (newValue) {
|
|
|
+ clickRow.value = true;
|
|
|
+ detailData.value = null;
|
|
|
+ iedVer.value = {};
|
|
|
+ lineList.value.forEach((item) => item.remove());
|
|
|
+ lineList.value = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+const detailData = ref(null);
|
|
|
+const scdVer = ref(null);
|
|
|
+const crcVer = ref(null);
|
|
|
+const iedVer = ref({});
|
|
|
+watch(
|
|
|
+ () => props.scdipadMini,
|
|
|
+ (newValue) => {
|
|
|
+ if (newValue && clickRow) {
|
|
|
+ detailData.value = newValue;
|
|
|
+ // SCD版本数据
|
|
|
+ const scdv = detailData.value.filter(
|
|
|
+ (item) => item.diff_object_type == "scd.version"
|
|
|
+ );
|
|
|
+ scdVer.value =
|
|
|
+ scdv && 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 && 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ lineWrite();
|
|
|
+ }, 50);
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+//弹窗====
|
|
|
+const checkDialogData = ref(null);//选择弹框的第一条数据
|
|
|
+const done = (emits) => {
|
|
|
+ openBig.value = emits;
|
|
|
+ checkDialogData.value = null;
|
|
|
+ scdView.value = false;
|
|
|
+};
|
|
|
+const iedRelationData = ref({});//左侧所有数据
|
|
|
+const scdView = ref(false);//是否是点击Scd文件一致性校核进入的
|
|
|
+const lookAdd =async () => {
|
|
|
+ scdView.value = true;
|
|
|
+
|
|
|
+ for (let k = 0; k < iedVer.value.i.list.length; k++) {
|
|
|
+ let item = iedVer.value.i.list[k];
|
|
|
+ const key = item.ied_name;
|
|
|
+ iedRelationData.value[key] = item;
|
|
|
+ }
|
|
|
+ console.log('iedRelationData.value', iedRelationData.value)
|
|
|
+ const iedRes = await scdIedRelation({ scd_id: route.query.id,ied_name:'CE2201',reset: 1 });
|
|
|
+ checkDialogData.value = iedRes.data['CE2201'];
|
|
|
+ openBig.value = true;
|
|
|
+
|
|
|
+ // lookType.value = 1;
|
|
|
+ // 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 lookEdit = () => {
|
|
|
lookType.value = 2;
|
|
|
emit("nowBack", lookType.value);
|
|
@@ -126,13 +280,9 @@ const lookDel = () => {
|
|
|
lookType.value = 3;
|
|
|
emit("nowBack", lookType.value);
|
|
|
};
|
|
|
-onMounted(() => {
|
|
|
- setTimeout(() => {
|
|
|
- lineWrite();
|
|
|
- }, 500);
|
|
|
-});
|
|
|
+onMounted(() => {});
|
|
|
onBeforeUnmount(() => {
|
|
|
- lineList.forEach((item) => item.remove());
|
|
|
+ // lineList.value.forEach((item) => item.remove());
|
|
|
});
|
|
|
</script>
|
|
|
|
|
@@ -146,8 +296,10 @@ p {
|
|
|
padding: 0;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
-.scdBox,.crcBox,.iedBox {
|
|
|
- width:23%;
|
|
|
+.scdBox,
|
|
|
+.crcBox,
|
|
|
+.iedBox {
|
|
|
+ width: 23%;
|
|
|
height: auto;
|
|
|
text-align: center;
|
|
|
/* border: 1px solid red; */
|
|
@@ -163,18 +315,20 @@ p {
|
|
|
position: absolute;
|
|
|
right: -50px;
|
|
|
margin-top: 24px;
|
|
|
- span{
|
|
|
+ span {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-#addId,#editId,#delId {
|
|
|
+#addId,
|
|
|
+#editId,
|
|
|
+#delId {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
width: 112px;
|
|
|
height: 40px;
|
|
|
- border: 2px dashed #255CE7;
|
|
|
+ border: 2px dashed #255ce7;
|
|
|
background-color: rgb(239, 243, 255);
|
|
|
border-radius: 2px;
|
|
|
margin-bottom: 20px;
|
|
@@ -182,12 +336,12 @@ p {
|
|
|
}
|
|
|
|
|
|
#editId {
|
|
|
- border: 2px dashed #FFCB11;
|
|
|
+ border: 2px dashed #ffcb11;
|
|
|
background-color: rgb(255, 251, 242);
|
|
|
}
|
|
|
|
|
|
#delId {
|
|
|
- border: 2px dashed #E50505;
|
|
|
+ border: 2px dashed #e50505;
|
|
|
background-color: rgb(255, 236, 236);
|
|
|
}
|
|
|
.jiantou {
|
|
@@ -209,9 +363,16 @@ p {
|
|
|
font-size: 16px;
|
|
|
margin-bottom: 24px;
|
|
|
}
|
|
|
-.icons{
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin-right: 4px;
|
|
|
+.icons {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+.circel-png {
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+.no-data {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 40px;
|
|
|
}
|
|
|
</style>
|