|
@@ -4,7 +4,12 @@
|
|
|
<!-- 关联图 -->
|
|
|
<div class="main-cont" id="treedom3">
|
|
|
<div class="main-left">
|
|
|
- <div v-for="(item, index) in leftList" :key="index" class="conts" @click="clickImg(item)">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in leftList"
|
|
|
+ :key="index"
|
|
|
+ class="conts"
|
|
|
+ @click="clickImg(item)"
|
|
|
+ >
|
|
|
<div class="cont-title">
|
|
|
<img :src="devicePng" alt="" class="img-item" />
|
|
|
<div class="cont-item">
|
|
@@ -12,11 +17,15 @@
|
|
|
<div>{{ item.ref_ied_name }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-for="(cItem, index2) in item.titleItems" :key="index2" :ref="(el) => setdomLeftChild3(el, cItem)">
|
|
|
+ <div
|
|
|
+ v-for="(cItem, index2) in item.titleItems"
|
|
|
+ :key="index2"
|
|
|
+ :ref="(el) => setdomLeftChild3(el, cItem)"
|
|
|
+ >
|
|
|
<div class="text-midle">
|
|
|
<div>
|
|
|
{{
|
|
|
- `${cItem.attr_ld_inst}/${cItem.attr_prefix}${cItem.attr_ln_class}.${cItem.attr_do_name}.${cItem.attr_da_name}`
|
|
|
+ `${cItem.attr_ld_inst}/${cItem.attr_prefix}${cItem.attr_ln_class}${cItem.attr_ln_inst}.${cItem.attr_do_name}.${cItem.attr_da_name}`
|
|
|
}}
|
|
|
</div>
|
|
|
<div>{{ cItem.do_source_desc }}</div>
|
|
@@ -34,18 +43,28 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="middle-item">
|
|
|
- <div class="midle-cont" v-for="(item, index) in svInfo" :key="index" :ref="(el) => setdomMiddle3(el, item)">
|
|
|
+ <div
|
|
|
+ class="midle-cont"
|
|
|
+ v-for="(item, index) in svInfo"
|
|
|
+ :key="index"
|
|
|
+ :ref="(el) => setdomMiddle3(el, item)"
|
|
|
+ >
|
|
|
<div style="margin: 0 4px" v-if="!item.isDecollate">
|
|
|
{{ item.no }}
|
|
|
</div>
|
|
|
<div class="midlestyle" v-if="!item.isDecollate">
|
|
|
- <div v-if="item.attr_da_name == 'in'">
|
|
|
+ <div v-if="item.inout_type == 'out'">
|
|
|
{{
|
|
|
- `${item.attr_ld_inst}/${item.attr_ln_class}${item.attr_ln_inst}.${item.attr_do_name}.${item.attr_da_name}`
|
|
|
+ `${item.attr_ld_inst}/${item.attr_prefix}/${item.attr_ln_class}${item.attr_ln_inst}.${item.attr_do_name}.${item.attr_da_name}`
|
|
|
}}
|
|
|
</div>
|
|
|
- <div v-else>{{ item.attr_int_addr }}</div>
|
|
|
- <div>{{ item.do_source_desc }}</div>
|
|
|
+ <div v-else-if="item.inout_type == 'in'">{{ item.attr_int_addr }}</div>
|
|
|
+ <div v-if="item.inout_type == 'out'">
|
|
|
+ {{ item.do_source_desc }}
|
|
|
+ </div>
|
|
|
+ <div v-else-if="item.inout_type == 'in'">
|
|
|
+ {{ item.do_target_desc }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="midlestyle omit" v-if="item.isDecollate">
|
|
|
{{ item.do_source_desc }}
|
|
@@ -55,7 +74,12 @@
|
|
|
</div>
|
|
|
<!-- 右侧 -->
|
|
|
<div class="main-right">
|
|
|
- <div v-for="(item, index) in rightList" :key="index" class="conts" @click="clickImg(item)">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in rightList"
|
|
|
+ :key="index"
|
|
|
+ class="conts"
|
|
|
+ @click="clickImg(item)"
|
|
|
+ >
|
|
|
<div class="cont-title">
|
|
|
<img :src="devicePng" alt="" class="img-item" />
|
|
|
<div class="cont-item">
|
|
@@ -63,7 +87,11 @@
|
|
|
<div>{{ item.ref_ied_name }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-for="(cItem, index2) in item.titleItems" :key="index2" :ref="(el) => setdomRightChild3(el, cItem)">
|
|
|
+ <div
|
|
|
+ v-for="(cItem, index2) in item.titleItems"
|
|
|
+ :key="index2"
|
|
|
+ :ref="(el) => setdomRightChild3(el, cItem)"
|
|
|
+ >
|
|
|
<div class="text-midle">
|
|
|
<div>{{ `${cItem.attr_int_addr}` }}</div>
|
|
|
<div>{{ cItem.do_target_desc }}</div>
|
|
@@ -83,13 +111,14 @@ import AnimEvent from "../../../../public/anim-event.min.js";
|
|
|
import {
|
|
|
//虚短子关系
|
|
|
getMiddleinputs,
|
|
|
+ scdIedRelation,
|
|
|
} from "@/api/iedNetwork";
|
|
|
import { useRoute } from "vue-router";
|
|
|
const route = useRoute();
|
|
|
const props = defineProps({
|
|
|
checkData: {
|
|
|
type: Object,
|
|
|
- default: () => { },
|
|
|
+ default: () => {},
|
|
|
},
|
|
|
isOpen: {
|
|
|
type: Boolean,
|
|
@@ -97,16 +126,22 @@ const props = defineProps({
|
|
|
},
|
|
|
iedRelation: {
|
|
|
type: Object,
|
|
|
- default: () => { },
|
|
|
+ default: () => {},
|
|
|
},
|
|
|
delScdId: {
|
|
|
type: String,
|
|
|
default: "",
|
|
|
- }
|
|
|
+ },
|
|
|
+ isScdView: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
});
|
|
|
const svInfo = ref(null);
|
|
|
//处理两边的数据
|
|
|
const processBoth = (list, svResInfo, inoutType) => {
|
|
|
+ console.log('svResInfo.data', svResInfo.data)
|
|
|
+ if (!list||!svResInfo.data) return;
|
|
|
list.forEach((item, index) => {
|
|
|
item.titleItems = [];
|
|
|
svResInfo.data.forEach((key) => {
|
|
@@ -123,6 +158,7 @@ const processBoth = (list, svResInfo, inoutType) => {
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
+ // console.log('listaaaaaaaaa', list)
|
|
|
};
|
|
|
let leaderLines3 = ref([]); //控制线条显示
|
|
|
const leftList = ref([]);
|
|
@@ -153,11 +189,11 @@ const setdomRightChild3 = (el, item) => {
|
|
|
|
|
|
let tagList = ref(null); //左侧更改的设备列表
|
|
|
//得到中间的子版块数据
|
|
|
-const getNetworkInfo3 = async () => {
|
|
|
+const getNetworkInfo3 = async (names) => {
|
|
|
let svResInfo;
|
|
|
svResInfo = await getMiddleinputs({
|
|
|
scd_id: scdIdValue,
|
|
|
- ied_name: props.checkData.ied_name,
|
|
|
+ ied_name: names,
|
|
|
});
|
|
|
const data = {
|
|
|
attr_ld_inst: "",
|
|
@@ -170,6 +206,7 @@ const getNetworkInfo3 = async () => {
|
|
|
isDecollate: true,
|
|
|
};
|
|
|
//处理两边的数据
|
|
|
+ console.log('leftList.value2222', leftList.value,rightList.value)
|
|
|
if (svResInfo.data.length > 0) {
|
|
|
processBoth(leftList.value, svResInfo, "in");
|
|
|
processBoth(rightList.value, svResInfo, "out");
|
|
@@ -189,31 +226,32 @@ const getNetworkInfo3 = async () => {
|
|
|
|
|
|
svInfo.value = newData;
|
|
|
};
|
|
|
-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) {
|
|
|
- listData3.value = item;
|
|
|
- }
|
|
|
- });
|
|
|
+const clickImg = async (dataItem) => {
|
|
|
+ if (!props.isScdView) {
|
|
|
+ Object.values(props.iedRelation).find((item) => {
|
|
|
+ if (item.ied_name == dataItem.ref_ied_name) {
|
|
|
+ listData3.value = item;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log('dataItem', dataItem)
|
|
|
+ // listData3.value.ied_name = dataItem.ref_ied_name;
|
|
|
+ // listData3.value.ied_desc = dataItem.ref_ied_desc;
|
|
|
+ //如果是从scdView进来点到直接调用接口
|
|
|
+ const resRla = await scdIedRelation({
|
|
|
+ scd_id: scdIdValue,
|
|
|
+ ied_name: dataItem.ref_ied_name,
|
|
|
+ reset: 1,
|
|
|
+ });
|
|
|
+ if (!resRla.data) return;
|
|
|
+ listData3.value = resRla.data[dataItem.ref_ied_name];
|
|
|
+ getNetworkInfo3(dataItem.ref_ied_name)
|
|
|
+ // const ResInput = await getMiddleinputs({
|
|
|
+ // ied_name: dataItem.ref_ied_name,
|
|
|
+ // scd_id: scdIdValue,
|
|
|
+ // });
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
//点击后重置数据和线条
|
|
@@ -230,6 +268,8 @@ const clickResetLine3 = () => {
|
|
|
const bothSide = (data) => {
|
|
|
leftList.value = [];
|
|
|
rightList.value = [];
|
|
|
+ console.log('data=------------', data)
|
|
|
+ if (!data) return;
|
|
|
data.forEach((item) => {
|
|
|
if (item.ref_type == 2 || item.ref_type == 1) {
|
|
|
item.titleItems = [];
|
|
@@ -245,6 +285,7 @@ const setLeaderline = () => {
|
|
|
for (let [key, value] of domListMiddle3.value) {
|
|
|
for (const [key2, value2] of domListLeftChild3.value) {
|
|
|
const endDom = value2;
|
|
|
+ LeaderLine.positionByWindowResize = false;
|
|
|
if (key.node_id == key2.node_id) {
|
|
|
const line = new LeaderLine(endDom, value, {
|
|
|
color: "#7484AB",
|
|
@@ -264,6 +305,7 @@ const setLeaderline = () => {
|
|
|
//右侧子组件
|
|
|
for (const [key2, value2] of domListRightChild3.value) {
|
|
|
const endDom = value2;
|
|
|
+ LeaderLine.positionByWindowResize = false;
|
|
|
if (key.node_id == key2.node_id) {
|
|
|
const line2 = new LeaderLine(value, endDom, {
|
|
|
color: "#7484AB",
|
|
@@ -285,6 +327,7 @@ const newPositionLine = () => {
|
|
|
document.getElementById("treedom3").addEventListener(
|
|
|
"scroll",
|
|
|
AnimEvent.add(() => {
|
|
|
+ if (!leaderLines3.value) return;
|
|
|
leaderLines3.value.forEach((line) => {
|
|
|
if (line) {
|
|
|
hiddenLine();
|
|
@@ -299,6 +342,7 @@ const newPositionLine = () => {
|
|
|
document.getElementById("treedom3").addEventListener(
|
|
|
"resize",
|
|
|
AnimEvent.add(function () {
|
|
|
+ if (!diffline) return;
|
|
|
diffline.forEach((line) => {
|
|
|
hiddenLine();
|
|
|
line.position();
|
|
@@ -318,8 +362,9 @@ const hiddenLine = () => {
|
|
|
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)`;
|
|
|
+ elmWrapper.style.transform = `translate(${
|
|
|
+ (rectWrapper.left + window.scrollY) * -1
|
|
|
+ }px, ${(rectWrapper.top + window.scrollX) * -1}px)`;
|
|
|
};
|
|
|
const setLine = () => {
|
|
|
if (listData3.value) {
|
|
@@ -347,9 +392,8 @@ onMounted(() => {
|
|
|
} else {
|
|
|
scdIdValue = route.query.id;
|
|
|
}
|
|
|
-
|
|
|
if (props.checkData != null) {
|
|
|
- getNetworkInfo3();
|
|
|
+ getNetworkInfo3(listData3.value.ied_name);
|
|
|
}
|
|
|
//不加条件切换下方tab时会出现bug
|
|
|
nextTick(() => {
|
|
@@ -362,8 +406,9 @@ watch(
|
|
|
listData3.value = [];
|
|
|
svInfo.value = [];
|
|
|
listData3.value = newValue;
|
|
|
+ console.log('newValue======', newValue)
|
|
|
if (newValue != null) {
|
|
|
- getNetworkInfo3();
|
|
|
+ getNetworkInfo3(listData3.value.ied_name);
|
|
|
}
|
|
|
clickResetLine3();
|
|
|
emit("result", newValue);
|