|
@@ -45,7 +45,6 @@ watch(
|
|
|
() => props.clickList,
|
|
|
(newValue) => {
|
|
|
if (newValue) {
|
|
|
- console.log("newVallueclickList", newValue);
|
|
|
tagList.value = newValue;
|
|
|
clickLineResult();
|
|
|
clickLineResultMain();
|
|
@@ -54,6 +53,12 @@ watch(
|
|
|
setTimeout(() => {
|
|
|
setLeaderlineMain();
|
|
|
}, 300);
|
|
|
+ if (cClickCode.value == "scd.ied") {
|
|
|
+ setTimeout(() => {
|
|
|
+ setLeaderlines("UpLeftBasic");
|
|
|
+ newPositionLine2(leaderLineShow.value);
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
}
|
|
@@ -64,14 +69,23 @@ watch(
|
|
|
(newValue) => {
|
|
|
if (newValue) {
|
|
|
cClickCode.value = newValue;
|
|
|
- CodeImg(newValue);
|
|
|
- clickLineResult();
|
|
|
- clickLineResultMain();
|
|
|
+ CodeImg(newValue);//找到差异项对应的图片进行展示
|
|
|
+ clickLineResult();//重置
|
|
|
+ clickLineResultMain();//重置
|
|
|
+ loading.value = true;
|
|
|
getData();
|
|
|
nextTick(() => {
|
|
|
+ //一来左右两侧展示的线条
|
|
|
setTimeout(() => {
|
|
|
setLeaderlineMain();
|
|
|
}, 300);
|
|
|
+ //如果是基本信息则不用点击图片直接调用画线
|
|
|
+ if (newValue == "scd.ied") {
|
|
|
+ setTimeout(() => {
|
|
|
+ setLeaderlines("UpLeftBasic");
|
|
|
+ newPositionLine2(leaderLineShow.value);
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
}
|
|
@@ -105,7 +119,7 @@ const getData = async () => {
|
|
|
comptype: "u",
|
|
|
itemcode: cClickCode.value,
|
|
|
});
|
|
|
- if (res.data) {
|
|
|
+ if (res.data && cClickCode.value != "scd.ied") {
|
|
|
res.data.forEach((item) => {
|
|
|
if (item.diff_desc) {
|
|
|
let text;
|
|
@@ -124,14 +138,14 @@ const getData = async () => {
|
|
|
break;
|
|
|
}
|
|
|
});
|
|
|
+ } else {
|
|
|
}
|
|
|
mapList.value = res.data;
|
|
|
nextTick(() => {
|
|
|
middleLine.value.style.height = 0;
|
|
|
middleLine.value.style.height = mianItem.value.scrollHeight + "px";
|
|
|
});
|
|
|
- loading.value = false;
|
|
|
- console.log("dataU.value", dataU.value);
|
|
|
+ // loading.value = false;
|
|
|
};
|
|
|
//点击新增或删除的图片
|
|
|
const DelClick = ref({});
|
|
@@ -155,6 +169,7 @@ const clickTypeImgDel = (item, event) => {
|
|
|
};
|
|
|
const clickReset = () => {
|
|
|
DelClick.value = {};
|
|
|
+ mapList.value = null;
|
|
|
IorDClick.value = {};
|
|
|
newrightData.value = {};
|
|
|
newleftData.value = {};
|
|
@@ -193,7 +208,7 @@ const comonTypeImg = (item, event, num) => {
|
|
|
//点击修改的图片
|
|
|
const newleftData = ref(null);
|
|
|
const newrightData = ref(null);
|
|
|
-const clickUpIdDomName = ref(null);//点击的name
|
|
|
+const clickUpIdDomName = ref(null); //点击的name
|
|
|
const clickUpTypeImgLeft = (arr, event, name) => {
|
|
|
clickLineResult();
|
|
|
clickUpIdDomName.value = name;
|
|
@@ -382,7 +397,6 @@ const setdomLeftMain = (el, item) => {
|
|
|
if (el) {
|
|
|
domListLeftMain.value.set(item, el);
|
|
|
}
|
|
|
- console.log("item", item, el);
|
|
|
};
|
|
|
const setdomRightMain = (el, item) => {
|
|
|
//右侧灰色一对多主连线
|
|
@@ -455,11 +469,10 @@ const setLeaderlineMain = () => {
|
|
|
hiddenLineDialog();
|
|
|
}
|
|
|
}
|
|
|
+ loading.value = false;
|
|
|
};
|
|
|
//左右两侧点击图片显示的连线
|
|
|
const setLeaderlines = (types) => {
|
|
|
- console.log("domListAddName.value", domListAddName.value);
|
|
|
- console.log("domListAddValue.value", domListAddValue.value);
|
|
|
const lineStyleAdd2 = {
|
|
|
...lineStyleAdd,
|
|
|
path: "straight",
|
|
@@ -504,10 +517,15 @@ const setLeaderlines = (types) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- } else if (types == "UpLeft"&&domListUpLeft.value) {
|
|
|
- const startDom = domListUpLeft.value;
|
|
|
- const doms =document.querySelectorAll(`#${clickUpIdDomName.value}`);
|
|
|
- const sameDom =doms&&doms.length>1?doms[1]:doms[0]; //点击修改左侧或右侧每点击相同名字的dom
|
|
|
+ } else if (types == "UpLeft" && domListUpLeft.value||types=='UpLeftBasic'&&cClickCode.value=='scd.ied') {
|
|
|
+ const startDom = types == "UpLeft"?domListUpLeft.value:document.getElementById('leftBasic');
|
|
|
+ const doms = 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",
|
|
@@ -541,7 +559,7 @@ const setLeaderlines = (types) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- } else if (types == "UpRight"&&domListUpRight.value) {
|
|
|
+ } else if (types == "UpRight" && domListUpRight.value) {
|
|
|
const startDom = domListUpRight.value;
|
|
|
const sameDom = document.querySelectorAll(`#${clickUpIdDomName.value}`); //点击修改左侧或右侧每点击相同名字的dom
|
|
|
const lineStylUp = {
|
|
@@ -560,16 +578,16 @@ const setLeaderlines = (types) => {
|
|
|
for (const [key3, value3] of domListUpLeftName.value) {
|
|
|
if (key == key2 && key2 == key3) {
|
|
|
let line; //从左往右的线条
|
|
|
- line = new LeaderLine(value,startDom, lineStylUp);
|
|
|
+ line = new LeaderLine(value, startDom, lineStylUp);
|
|
|
leaderLineShow.value.push(line);
|
|
|
let lineValue;
|
|
|
- lineValue = new LeaderLine(value2,value, lineStylUp);
|
|
|
+ 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);
|
|
|
+ lineValue4 = new LeaderLine(sameDom[0], value3, lineStylUp);
|
|
|
leaderLineShow.value.push(lineValue4);
|
|
|
//弹窗打开后使得线条在指定区域中
|
|
|
hiddenLine2();
|
|
@@ -578,10 +596,14 @@ const setLeaderlines = (types) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ // else if(types=='UpLeftBasic'&&cClickCode.value=='scd.ied'){
|
|
|
+ // console.log('domListUpLeftName.value', domListUpLeftName.value)
|
|
|
+
|
|
|
+ // }
|
|
|
};
|
|
|
//滚动时重定位线条
|
|
|
const newPositionLine2 = (diffline) => {
|
|
|
- document.getElementById("treedomCid").addEventListener(
|
|
|
+ document.getElementById("wrapper").addEventListener(
|
|
|
"scroll",
|
|
|
AnimEvent.add(() => {
|
|
|
leaderLineMain.value.forEach((line) => {
|
|
@@ -672,7 +694,13 @@ onMounted(() => {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="main" ref="mianItem" v-loading="loading" id="treedomCid">
|
|
|
+ <div
|
|
|
+ class="main"
|
|
|
+ ref="mianItem"
|
|
|
+ v-loading="loading"
|
|
|
+ id="treedomCid"
|
|
|
+ element-loading-text="数据加载中..."
|
|
|
+ >
|
|
|
<!-- 左侧 -->
|
|
|
<div class="left-main" v-if="(leftI && leftI.length) || dataU">
|
|
|
<!-- 名称 -->
|
|
@@ -692,7 +720,7 @@ onMounted(() => {
|
|
|
ref="leftStartDom"
|
|
|
>
|
|
|
<!-- 左侧修改 -->
|
|
|
- <div v-show="dataU.length > 0">
|
|
|
+ <div v-if="dataU.length > 0 && cClickCode != 'scd.ied'">
|
|
|
<div
|
|
|
v-for="(item, index) in dataU"
|
|
|
:key="index"
|
|
@@ -710,6 +738,19 @@ onMounted(() => {
|
|
|
<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
|
|
@@ -763,12 +804,14 @@ onMounted(() => {
|
|
|
}"
|
|
|
>
|
|
|
<!-- 修改 -->
|
|
|
- <div v-show="dataU.length > 0">
|
|
|
+ <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)"
|
|
|
+ @click="
|
|
|
+ clickUpTypeImgRight(item.diff_desc, $event, item.diff_object_name)
|
|
|
+ "
|
|
|
:id="item.diff_object_name"
|
|
|
:ref="(el) => setdomRightMain(el, item.diff_object_name)"
|
|
|
>
|
|
@@ -779,6 +822,19 @@ onMounted(() => {
|
|
|
<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
|
|
@@ -812,46 +868,123 @@ onMounted(() => {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="middle-main" ref="middleMain">
|
|
|
+ <div class="middle-main" :class="{'middle-main-basic':cClickCode == 'scd.ied'}" ref="middleMain">
|
|
|
<!-- 修改中间数据的名字 -->
|
|
|
- <div v-for="(value, key) in newleftDataMiddle" :key="key">
|
|
|
- <div
|
|
|
- v-for="(value2, key2) in newrightDataMiddle"
|
|
|
- :key="key2"
|
|
|
- class="middle-frame"
|
|
|
- >
|
|
|
+ <div v-if="cClickCode != 'scd.ied'">
|
|
|
+ <div v-for="(value, key) in newleftDataMiddle" :key="key">
|
|
|
<div
|
|
|
- v-if="key == key2"
|
|
|
- class="middle-type-text"
|
|
|
- :ref="(el) => setdomUPLeftName(el, key)"
|
|
|
+ v-for="(value2, key2) in newrightDataMiddle"
|
|
|
+ :key="key2"
|
|
|
+ class="middle-frame"
|
|
|
>
|
|
|
- {{ 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
|
|
|
+ v-if="key == key2"
|
|
|
+ class="middle-type-text"
|
|
|
+ :ref="(el) => setdomUPLeftName(el, key)"
|
|
|
+ >
|
|
|
+ {{ key }}
|
|
|
</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
|
|
|
+ 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="mapList && mapList.length > 0 && cClickCode == 'scd.ied'">
|
|
|
+ <div v-for="(value, key) in mapList[0]" :key="key">
|
|
|
<div
|
|
|
- v-if="key == key2"
|
|
|
- class="middle-type-text"
|
|
|
- :ref="(el) => setdomUpRightName(el, key)"
|
|
|
+ v-for="(value2, key2) in mapList[1]"
|
|
|
+ :key="key2"
|
|
|
+ class="middle-frame"
|
|
|
>
|
|
|
- {{ key2 }}
|
|
|
+ <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>
|
|
@@ -898,7 +1031,7 @@ onMounted(() => {
|
|
|
}
|
|
|
.left-item-max {
|
|
|
position: absolute;
|
|
|
- top: 60px !important;
|
|
|
+ top: 60px;
|
|
|
transform: translateY(0%);
|
|
|
left: 15% !important;
|
|
|
}
|
|
@@ -1037,7 +1170,7 @@ onMounted(() => {
|
|
|
.wraps {
|
|
|
word-wrap: break-word;
|
|
|
}
|
|
|
-.middle-main {
|
|
|
+.middle-main,.middle-main-basic{
|
|
|
width: 50%;
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
@@ -1060,4 +1193,8 @@ onMounted(() => {
|
|
|
margin-bottom: 45px;
|
|
|
}
|
|
|
}
|
|
|
+.middle-main-basic{
|
|
|
+ top:50% !important;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+}
|
|
|
</style>
|