Gsix.vue 49 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580
  1. <!-- 一致性对比结果的画图 -->
  2. <script setup>
  3. import { nextTick, onMounted, ref, watch } from "vue";
  4. import { compResult } from "@/api/scdCheck/scdCheck2";
  5. import squer from "@/assets/image/CID/squer.png";
  6. import del0 from "@/assets/image/CID/del0.png";
  7. import modify0 from "@/assets/image/CID/modify0.png";
  8. import newly0 from "@/assets/image/CID/newly0.png";
  9. import LeaderLine from "../../../../public/leader-line.min.js";
  10. import AnimEvent from "../../../../public/anim-event.min.js";
  11. import { hiddenLine2, hiddenLineDialog } from "@/utils/linesPosition";
  12. import cid from "@/api/cid/cid";
  13. import jiantou from "@/assets/image/CID/jiantou.png";
  14. import { useRoute } from "vue-router";
  15. const route = useRoute();
  16. const props = defineProps({
  17. clickRowDatas: {
  18. type: Object,
  19. default: () => {},
  20. },
  21. iedRelation: {
  22. type: Object,
  23. default: () => {},
  24. },
  25. clickList: {
  26. type: [Object, String],
  27. default: () => {},
  28. },
  29. clickCodeValue: {
  30. type: String,
  31. default: "",
  32. },
  33. //在CID处点击差异得到的数据
  34. clickCodeInfoCid: {
  35. type: [Array, Object],
  36. default: () => [],
  37. },
  38. isCid: {
  39. type: Boolean,
  40. default: false,
  41. },
  42. });
  43. const clickRow = ref(props.clickRowDatas);
  44. let tagList = ref(null); //左侧更改的设备列表
  45. //CID数据,点击差异的每一条数据
  46. const CodeInfoCid = ref(props.clickCodeInfoCid);
  47. watch(
  48. () => props.clickCodeInfoCid,
  49. (newValue) => {
  50. if (newValue) {
  51. console.log("newValue", newValue);
  52. if (newValue.childItemCid && newValue.childItemCid.length != 0) {
  53. loading.value = true;
  54. } else {
  55. loading.value = false;
  56. }
  57. CodeInfoCid.value = newValue;
  58. getDataCid();
  59. }
  60. }
  61. );
  62. //对比文件:头部对比的单个数据
  63. watch(
  64. () => props.clickRowDatas,
  65. (newValue) => {
  66. if (newValue) {
  67. clickRow.value = newValue;
  68. }
  69. }
  70. );
  71. //点击装置列表的数据变化
  72. watch(
  73. () => props.clickList,
  74. (newValue) => {
  75. if (newValue) {
  76. dones();
  77. tagList.value = newValue;
  78. clickLineResult();
  79. clickLineResultMain();
  80. if (clickRow.value && clickRow.value.id) {
  81. getData();
  82. } else if (CodeInfoCid.value) {
  83. getDataCid();
  84. }
  85. nextTick(() => {
  86. setTimeout(() => {
  87. setLeaderlineMain();
  88. }, 300);
  89. if (cClickCode.value == "scd.ied") {
  90. setTimeout(() => {
  91. setLeaderlines("UpLeftBasic");
  92. newPositionLine2(leaderLineShow.value);
  93. }, 300);
  94. }
  95. });
  96. }
  97. }
  98. );
  99. const cClickCode = ref(props.clickCodeValue); //点击侧边栏差异项的code
  100. watch(
  101. () => props.clickCodeValue,
  102. (newValue) => {
  103. if (newValue) {
  104. console.log('newValue', newValue)
  105. isDiffdescUpAdd.value = false; //点击侧边栏的时候站控层的这个先置为空
  106. isDiffdescUpDel.value = false;
  107. cClickCode.value = newValue;
  108. CodeImg(newValue); //找到差异项对应的图片进行展示
  109. clickLineResult(); //重置
  110. clickLineResultMain(); //重置
  111. if (clickRow.value && clickRow.value.id) {
  112. getData();
  113. } else if (CodeInfoCid.value) {
  114. getDataCid();
  115. }
  116. nextTick(() => {
  117. //一来左右两侧展示的线条
  118. setTimeout(() => {
  119. setLeaderlineMain();
  120. }, 300);
  121. //如果是基本信息则不用点击图片直接调用画线
  122. if (newValue == "scd.ied") {
  123. setTimeout(() => {
  124. setLeaderlines("UpLeftBasic");
  125. newPositionLine2(leaderLineShow.value);
  126. }, 300);
  127. }
  128. });
  129. }
  130. }
  131. );
  132. const mapList = ref(null);
  133. //IED版本数据,diff_opt中u是修改,i是新增,d是删除
  134. const leftI = ref([]); //新增
  135. const dataU = ref([]); //修改
  136. const rightD = ref([]); //删除
  137. // const loading = ref(props.isCid ? false : true);
  138. const loading = ref(false);
  139. const dones = () => {
  140. //重置
  141. leftI.value = [];
  142. dataU.value = [];
  143. rightD.value = [];
  144. };
  145. const mianItem = ref(null);
  146. const heights = ref(0);
  147. const middleLine = ref(null);
  148. const IorDClick = ref({}); //点击或默认显示的连线数据
  149. const rightStartDom = ref(null); //右侧图片带差异名字大板块的dom
  150. const leftStartDom = ref(null); //左侧图片带差异名字大板块的dom
  151. const middleMain = ref(null);
  152. const isDiffdescUpAdd = ref(false); //判断是否是数组,如果是数组并且又是修改并且有属性P,那么表示修改新增,修改的数据显示需要重新处理
  153. const isDiffdescUpDel = ref(false); //判断是否是数组,如果是数组并且又是修改并且有属性DAI,那么表示修改删除,那么修改的数据显示需要重新处理
  154. const getData = async () => {
  155. dones();
  156. const ids = clickRow.value ? clickRow.value.id : "";
  157. const names = tagList.value ? tagList.value.ied_name : "";
  158. const res = await compResult({
  159. comp_id: ids,
  160. ied_name: names,
  161. comptype: "u",
  162. itemcode: cClickCode.value,
  163. });
  164. if (!res.data || !res.data.length) return (loading.value = false);
  165. if (res.data && cClickCode.value != "scd.ied") {
  166. res.data.forEach((item) => {
  167. let text;
  168. text = item.diff_desc.replace(/[\r|\n|\t]/g, ""); //处理返回的数据中换行等,整理好规整数据
  169. item.diff_desc = JSON.parse(text);
  170. commonGetData(item);
  171. });
  172. }
  173. mapList.value = res.data;
  174. nextTick(() => {
  175. if (!middleLine.value) return;
  176. middleLine.value.style.height = 0;
  177. middleLine.value.style.height = mianItem.value.scrollHeight + "px";
  178. });
  179. };
  180. const getDataCid = () => {
  181. dones()
  182. const cidsnode = CodeInfoCid.value.childItemCid;
  183. if (cClickCode.value == "scd.ied" && cidsnode && cidsnode.length > 0) {
  184. //装置基本信息
  185. mapList.value = cidsnode[0].diff_desc;
  186. } else if (cClickCode.value != "scd.ied" && cidsnode && cidsnode.length > 0) {
  187. //除开装置信息
  188. mapList.value = cidsnode;
  189. dones();
  190. mapList.value.forEach((item) => {
  191. commonGetData(item);
  192. });
  193. }
  194. nextTick(() => {
  195. middleLine.value.style.height = 0;
  196. middleLine.value.style.height = mianItem.value.scrollHeight + "px";
  197. });
  198. };
  199. const commonGetData = (item) => {
  200. isDiffdescUpAdd.value = false;
  201. isDiffdescUpDel.value = false;
  202. switch (item.diff_opt) {
  203. case "i": //新增
  204. leftI.value.push(item);
  205. break;
  206. case "d":
  207. rightD.value.push(item);
  208. break;
  209. case "u": //修改
  210. dataU.value.push(item);
  211. break;
  212. }
  213. };
  214. //点击新增或删除的图片
  215. const DelClick = ref({});
  216. const clickTypeImg = (item, event) => {
  217. clickLineResult();
  218. domListAdd.value = event.target;
  219. setTimeout(() => {
  220. setLeaderlines("add");
  221. newPositionLine2(leaderLineShow.value);
  222. }, 100);
  223. comonTypeImg(item, event);
  224. };
  225. const clickTypeImgDel = (item, event) => {
  226. clickLineResult();
  227. domListDel.value = event.target;
  228. setTimeout(() => {
  229. setLeaderlines("del");
  230. newPositionLine2(leaderLineShow.value);
  231. }, 100);
  232. comonTypeImg(item, event, 2);
  233. };
  234. const clickReset = () => {
  235. DelClick.value = {};
  236. mapList.value = null;
  237. IorDClick.value = {};
  238. newrightData.value = {};
  239. newleftData.value = {};
  240. newrightDataMiddle.value = {};
  241. newleftDataMiddle.value = {};
  242. leaderLineShow.value = [];
  243. if (addDiff.value && delDiff.value) {
  244. addDiff.value.style.top = 0;
  245. delDiff.value.style.top = 0;
  246. }
  247. };
  248. const addDiff = ref(0);
  249. const delDiff = ref(0);
  250. const comonTypeImg = (item, event, num) => {
  251. clickLineResult();
  252. setTopDiffName(event);
  253. newrightData.value = null;
  254. newleftData.value = null;
  255. for (let key in item.diff_desc) {
  256. if (item.diff_desc.hasOwnProperty(key)) {
  257. const value = item.diff_desc[key];
  258. if (
  259. typeof value === "string" ||
  260. typeof value === "boolean" ||
  261. typeof value === "number"
  262. ) {
  263. if (num == 2) {
  264. DelClick.value[key] = value;
  265. } else {
  266. IorDClick.value[key] = value;
  267. }
  268. }
  269. }
  270. }
  271. };
  272. //点击修改的图片
  273. const newleftData = ref(null);
  274. const newrightData = ref(null);
  275. const clickUpIdDomName = ref(null); //点击的name
  276. const Communication = (arr, list) => {
  277. //站控层数据特殊处理
  278. if (Array.isArray(arr) && arr[0].P && list.diff_opt == "u") {
  279. //如果是站控层,数据要从新处理并且是数组
  280. isDiffdescUpAdd.value = true;
  281. } else if (Array.isArray(arr) && arr[0].DAI && list.diff_opt == "u") {
  282. isDiffdescUpDel.value = true;
  283. } else {
  284. isDiffdescUpAdd.value = false;
  285. isDiffdescUpDel.value = false;
  286. }
  287. };
  288. const clickUpTypeImgLeft = (arr, event, name, list) => {
  289. clickLineResult();
  290. Communication(arr, list);
  291. clickUpIdDomName.value = name.replace(/[^\w\s]/g, ""); //如果有冒号query查找会报错,所以替换 成了点
  292. domListUpLeft.value = event.target;
  293. setTimeout(() => {
  294. setLeaderlines("UpLeft");
  295. newPositionLine2(leaderLineShow.value);
  296. }, 100);
  297. if (!isDiffdescUpAdd.value && !isDiffdescUpDel.value && arr.length > 0) {
  298. //只有修改
  299. clickUpTypeImg(arr, event);
  300. } else if (isDiffdescUpDel.value) {
  301. //修改里面包含删除
  302. clickUpTypeImgUpDel(arr, event);
  303. } else if (isDiffdescUpAdd.value) {
  304. //修改里面包含新增和删除
  305. clickUpTypeImgUpAdd(arr, event);
  306. }
  307. };
  308. const clickUpTypeImgRight = (arr, event, name, list) => {
  309. clickLineResult();
  310. Communication(arr, list);
  311. clickUpIdDomName.value = name.replace(/[^\w\s]/g, "");
  312. domListUpRight.value = event.target;
  313. setTimeout(() => {
  314. setLeaderlines("UpRight");
  315. newPositionLine2(leaderLineShow.value);
  316. }, 100);
  317. if (!isDiffdescUpAdd.value && arr && arr.length > 0) {
  318. //只有修改
  319. clickUpTypeImg(arr, event);
  320. } else if (isDiffdescUpDel.value) {
  321. //修改里面包含删除
  322. clickUpTypeImgUpDel(arr, event);
  323. } else if (isDiffdescUpAdd.value) {
  324. //修改里面包含新增和删除
  325. clickUpTypeImgUpAdd(arr, event);
  326. }
  327. };
  328. const CommunicationS1 = ref([]); //站控层的修改时有新增和修改的数据
  329. const clickUpTypeImgUpDel = (arr, event) => {
  330. if (!arr || !arr[1] || !arr[1].DAI) return;
  331. arr[1].DAI.forEach((item1) => {
  332. let found = false;
  333. arr[0].DAI.forEach((item2) => {
  334. if (item1.Name === item2.Name) {
  335. CommunicationS1.value.push({ ...item1, upAndDel: true });
  336. found = true;
  337. }
  338. });
  339. if (!found) {
  340. CommunicationS1.value.push({ ...item1, del: true, upAndDel: true });
  341. }
  342. });
  343. CommunicationS1.value.sort((a, b) => {
  344. if (a.del && !b.del) {
  345. return 1; // 如果a.del为true且b.del为false,a排在b后面
  346. } else if (!a.del && b.del) {
  347. return -1; // 如果a.del为false且b.del为true,a排在b前面
  348. } else {
  349. return 0; // 其他情况保持原来的顺序
  350. }
  351. });
  352. //修改遥控 如果data[0].DAI数组对象中的Name和如果data[0].DAI数组中的Name和data[1].DAI数组对象中的Name相同,
  353. // 添加data[0].DAI中的那一项到新数组中,如果data[1].DAI数组对象中的Name,data[0]中没有,那么添加到数组中并添加一个属性del:true
  354. //示例结果,给出js代码
  355. };
  356. const clickUpTypeImgUpAdd = (arr, event) => {
  357. //点击修改的图片
  358. // // data中[0]的属性的数组中的Type值等于了data中[1]的属性的数组中的Type值,并且nnerText值也相同就不用放在newdata新数组中
  359. // // 如果data中[0]的属性的数组中的Type值等于了data中[1]的属性的数组中的Type值并且nnerText值不 相同,
  360. // // 那么把data中[1]中的Type相等的nnerText值赋给data中[0]的nnerTextRight,如果data中[0]的Type值,data[1]中没有,那么data中[0]属性nnerTextRight的值为 空 字符串
  361. // //nnerText是展示在左侧的数据,nnerTextRight是展示在右侧的数据,如果nnerTextRight为空,那么同时展示在左侧最下方表示新增
  362. clickLineResult();
  363. setTopDiffName(event);
  364. if (arr.length && arr.length > 0 && arr[0].P) {
  365. arr[0].P.forEach((item1) => {
  366. let foundMatch = false;
  367. for (let item2 of arr[1].P) {
  368. if (item1.Type === item2.Type) {
  369. foundMatch = true;
  370. // 正则是为了删除所有的空格
  371. if (
  372. item1.InnerText.replace(/\s+/g, "") !=
  373. item2.InnerText.replace(/\s+/g, "")
  374. ) {
  375. CommunicationS1.value.unshift({
  376. InnerText: item1.InnerText,
  377. Type: item1.Type,
  378. nnerTextRight: item2.InnerText,
  379. });
  380. }
  381. break;
  382. }
  383. }
  384. if (!foundMatch) {
  385. CommunicationS1.value.unshift({
  386. InnerText: item1.InnerText,
  387. Type: item1.Type,
  388. nnerTextRight: "空",
  389. });
  390. }
  391. });
  392. }
  393. //新增 的数据
  394. let itemsToAdd = [];
  395. CommunicationS1.value.forEach((item) => {
  396. if (item.nnerTextRight == "空") {
  397. itemsToAdd.push({ ...item, add: true });
  398. }
  399. });
  400. CommunicationS1.value.push(...itemsToAdd);
  401. };
  402. const setTopDiffName = (event) => {
  403. const dom1Rect = rightStartDom.value.getBoundingClientRect();
  404. const dom2Rect = leftStartDom.value.getBoundingClientRect();
  405. //设置差异位置
  406. nextTick(() => {
  407. const evt = event.target.getBoundingClientRect();
  408. let keyCount = newrightData.value
  409. ? Object.keys(newrightData.value).length
  410. : 0;
  411. let keyCount2 = newleftData.value
  412. ? Object.keys(newleftData.value).length
  413. : 0;
  414. if ((keyCount > 0 && keyCount < 3) || (keyCount > 1 && keyCount2 < 0)) {
  415. const nums = evt.top - dom2Rect.top + 160 + "px";
  416. const numsR = evt.top - dom1Rect.top + 160 + "px";
  417. addDiff.value.style.top = nums;
  418. delDiff.value.style.top = numsR;
  419. middleMain.value.style.top = nums;
  420. } else {
  421. const nums2 = evt.top - dom2Rect.top + 60 + "px";
  422. const numsR = evt.top - dom1Rect.top + 60 + "px";
  423. addDiff.value.style.top = nums2;
  424. delDiff.value.style.top = numsR;
  425. middleMain.value.style.top = nums2;
  426. }
  427. });
  428. };
  429. const newleftDataMiddle = ref(null); //处理修改居中展示的数据
  430. const newrightDataMiddle = ref(null);
  431. const clickUpTypeImg = (arr, event) => {
  432. clickLineResult();
  433. setTopDiffName(event);
  434. let newleft = {};
  435. let newright = {};
  436. for (let key in arr[0]) {
  437. //检查当前属性是否存在于两个输入对象中,并且它们的值是否不同。
  438. if (
  439. arr[0].hasOwnProperty(key) &&
  440. arr[1].hasOwnProperty(key) &&
  441. arr[0][key] !== arr[1][key]
  442. ) {
  443. if (typeof arr[0][key] === "object") {
  444. // 如果当前属性的值是另一个对象,则进一步检查
  445. for (let subKey in arr[0][key]) {
  446. //遍历当前对象的所有子属性。
  447. // 检查子属性是否存在于两个输入对象中,并且它们的值是否不同。
  448. if (
  449. arr[0][key].hasOwnProperty(subKey) &&
  450. arr[1][key].hasOwnProperty(subKey) &&
  451. arr[0][key][subKey] !== arr[1][key][subKey]
  452. ) {
  453. // 如果满足上述条件,则将子属性添加到 newleft 对象中。
  454. // 同时将子属性添加到 newright 对象中。
  455. newleft[key] = {
  456. ...newleft[key],
  457. [subKey]: arr[0][key][subKey],
  458. };
  459. newright[key] = {
  460. ...newright[key],
  461. [subKey]: arr[1][key][subKey],
  462. };
  463. }
  464. }
  465. } else {
  466. // 如果当前属性的值不是另一个对象,则直接将它们添加到对应的输出对象中。
  467. newleft[key] = arr[0][key];
  468. newright[key] = arr[1][key];
  469. }
  470. } else if (!arr[1].hasOwnProperty(key)) {
  471. // 如果第二个输入对象没有当前属性,则将该属性添加到 newleft 对象中。
  472. newleft[key] = arr[0][key];
  473. } else if (!arr[0].hasOwnProperty(key)) {
  474. // 如果第一个输入对象没有当前属性,则将该属性添加到 newright 对象中。
  475. newright[key] = arr[1][key];
  476. }
  477. }
  478. newrightData.value = newright;
  479. newleftData.value = newleft;
  480. //处理中间展示的数据===
  481. newrightDataMiddle.value = flattenObject(newright);
  482. newleftDataMiddle.value = flattenObject(newleft);
  483. };
  484. function flattenObject(obj, prefix = "") {
  485. const flattenedObj = {};
  486. //函数会遍历对象的属性,并根据属性的类型将其拆分成扁平的形式。
  487. for (let key in obj) {
  488. //如果属性的值是一个对象,并且不为nul,则递归调用 flattenobiect 函数来处理嵌套对象,同时更新前缀。
  489. if (typeof obj[key] === "object" && obj[key] !== null) {
  490. const nestedObj = flattenObject(obj[key], `${prefix}${key}.`);
  491. Object.assign(flattenedObj, nestedObj);
  492. } else {
  493. flattenedObj[`${prefix}${key}`] = obj[key];
  494. }
  495. }
  496. return flattenedObj;
  497. }
  498. //动态处理点击右侧code左右侧大板块图片
  499. const codeImg = ref(null);
  500. const codeImgs = {
  501. "scd.ied.ExtRef": require("@/assets/image/CID/b_get4.png"),
  502. "scd.ied.FCDA": require("@/assets/image/CID/b_go5.png"),
  503. "scd.ied.GSEControl": require("@/assets/image/CID/b_goose2.png"),
  504. "scd.ied.Communication.GSE": require("@/assets/image/CID/b_goose2.png"),
  505. "scd.ied.DatSet": require("@/assets/image/CID/b_navicat_plus17.png"),
  506. "scd.ied.DatSetMeber": require("@/assets/image/CID/b_navicat16.png"),
  507. "scd.ied": require("@/assets/image/CID/b_pole6.png"),
  508. "scd.ied.ReportControl": require("@/assets/image/CID/b_report14.png"),
  509. "scd.ied.LogControl": require("@/assets/image/CID/b_setting15.png"),
  510. "scd.ied.YC": require("@/assets/image/CID/b_speed9.png"),
  511. "scd.ied.Communication.S1": require("@/assets/image/CID/b_stand1.png"),
  512. "scd.ied.DZ": require("@/assets/image/CID/b_stknum11.png"),
  513. "scd.ied.SampledValueControl": require("@/assets/image/CID/b_sv3.png"),
  514. "scd.ied.YX": require("@/assets/image/CID/b_wifi7.png"),
  515. "scd.ied.Communication": require("@/assets/image/CID/b_wifi7.png"),
  516. "scd.ied.YM": require("@/assets/image/CID/bb10.png"),
  517. "scd.ied.YK": require("@/assets/image/CID/btn8.png"),
  518. };
  519. const CodeImg = (val) => {
  520. if (val) {
  521. codeImg.value = codeImgs[val];
  522. }
  523. };
  524. //处理中间展示的数据===
  525. // 连线====
  526. const leaderLineShow = ref([]); //控制线条显示
  527. // 新增差异名字dom
  528. const domListAdd = ref(null); //获取左侧点击新增图片的dom
  529. const domListDel = ref(null); //获取右侧点击删除图片的dom
  530. const domListUpLeft = ref(null); //获取左侧侧点击修改图片的dom
  531. const domListUpRight = ref(null); //获取右侧侧点击修改图片的dom
  532. const domListAddName = ref(new Map()); //获取所有新增差异名字
  533. const domListAddValue = ref(new Map()); //获取所有新增差异属性
  534. const domListDelName = ref(new Map()); //获取所有删除差异名字
  535. const domListDelValue = ref(new Map()); //获取所有删除差异属性
  536. const domListLeftMain = ref(new Map()); //获取左侧所有图片的dom
  537. const domListRightMain = ref(new Map()); //获取右侧所有图片的dom
  538. const domListUpLeftName = ref(new Map()); //获取点击左侧属性名差异名字
  539. const domListUpMiddleName = ref(new Map()); //获取点击修改中间属性
  540. const domListUpRightName = ref(new Map()); //获取点击右侧属性名差异名字
  541. const setdomAddName = (el, item) => {
  542. //左侧点击新增差异名字dom
  543. if (el) {
  544. domListAddName.value.set(item, el);
  545. }
  546. };
  547. const setdomAddValue = (el, item) => {
  548. //左侧点击新增差异值dom
  549. if (el) {
  550. domListAddValue.value.set(item, el);
  551. }
  552. };
  553. const setdomDelName = (el, item) => {
  554. //左侧点击删除差异名字dom
  555. if (el) {
  556. domListDelName.value.set(item, el);
  557. }
  558. };
  559. const setdomDelValue = (el, item) => {
  560. //左侧点击删除差异值dom
  561. if (el) {
  562. domListDelValue.value.set(item, el);
  563. }
  564. };
  565. const setdomLeftMain = (el, item) => {
  566. //左侧侧灰色一对多主连线
  567. if (el) {
  568. domListLeftMain.value.set(item, el);
  569. }
  570. };
  571. const setdomRightMain = (el, item) => {
  572. //右侧灰色一对多主连线
  573. if (el) {
  574. domListRightMain.value.set(item, el);
  575. }
  576. };
  577. const setdomUPLeftName = (el, item) => {
  578. //左侧点击修改差异名字dom
  579. if (el) {
  580. domListUpLeftName.value.set(item, el);
  581. }
  582. };
  583. const setdomUPMiddleName = (el, item) => {
  584. //左侧点击修改差异名字dom
  585. if (el) {
  586. domListUpMiddleName.value.set(item, el);
  587. }
  588. };
  589. const setdomUpRightName = (el, item) => {
  590. //左侧点击修改差异值dom
  591. if (el) {
  592. domListUpRightName.value.set(item, el);
  593. }
  594. };
  595. const lineStyleAdd = {
  596. color: "#134bea",
  597. size: 2,
  598. path: "grid",
  599. endPlug: "behind",
  600. startSocket: "right",
  601. endSocket: "left",
  602. };
  603. const lineStyleDel = {
  604. color: "#FF0000",
  605. size: 2,
  606. path: "grid",
  607. endPlug: "behind",
  608. startSocket: "right",
  609. endSocket: "left",
  610. };
  611. //左右两侧一来显示的连线
  612. const leaderLineMain = ref([]);
  613. const setLeaderlineMain = () => {
  614. const lineStyleLeftMain = {
  615. ...lineStyleAdd,
  616. color: "#C8D4E2",
  617. };
  618. const lineStyleRightMain = {
  619. ...lineStyleAdd,
  620. color: "#C8D4E2",
  621. startSocket: "right",
  622. endSocket: "left",
  623. };
  624. const mainLeftStartDom = document.getElementById("leftMainDom");
  625. const mainRightStartDom = document.getElementById("rightMainDom");
  626. if (domListLeftMain.value.size > 0) {
  627. LeaderLine.positionByWindowResize = false;
  628. for (const [key, value] of domListLeftMain.value) {
  629. let line;
  630. line = new LeaderLine(mainLeftStartDom, value, lineStyleLeftMain);
  631. leaderLineMain.value.push(line);
  632. hiddenLineDialog();
  633. loading.value = false;
  634. }
  635. }
  636. if (domListRightMain.value.size > 0) {
  637. for (const [key, value] of domListRightMain.value) {
  638. let lines;
  639. lines = new LeaderLine(value, mainRightStartDom, lineStyleRightMain);
  640. leaderLineMain.value.push(lines);
  641. hiddenLineDialog();
  642. loading.value = false;
  643. }
  644. }
  645. };
  646. //左右两侧点击图片显示的连线
  647. const setLeaderlines = (types) => {
  648. const lineStyleAdd2 = {
  649. ...lineStyleAdd,
  650. path: "straight",
  651. };
  652. const lineStyleDel2 = {
  653. ...lineStyleDel,
  654. path: "straight",
  655. startSocket: "right",
  656. endSocket: "left",
  657. };
  658. if (types == "add" && domListAddName.value.size > 0) {
  659. //新增
  660. for (const [key, value] of domListAddName.value) {
  661. for (const [key2, value2] of domListAddValue.value) {
  662. if (key == key2) {
  663. const startDom = domListAdd.value;
  664. let line;
  665. LeaderLine.positionByWindowResize = false;
  666. line = new LeaderLine(startDom, value, lineStyleAdd);
  667. leaderLineShow.value.push(line);
  668. let lineValue;
  669. lineValue = new LeaderLine(value, value2, lineStyleAdd2);
  670. leaderLineShow.value.push(lineValue);
  671. //弹窗打开后使得线条在指定区域中
  672. hiddenLine2();
  673. }
  674. }
  675. }
  676. } else if (types == "del" && domListDelName.value.size > 0) {
  677. //删除
  678. for (const [key, value] of domListDelName.value) {
  679. for (const [key2, value2] of domListDelValue.value) {
  680. if (key == key2) {
  681. const startDom = domListDel.value;
  682. let line;
  683. LeaderLine.positionByWindowResize = false;
  684. line = new LeaderLine(value, startDom, lineStyleDel);
  685. leaderLineShow.value.push(line);
  686. let lineValue;
  687. lineValue = new LeaderLine(value, value2, lineStyleDel2);
  688. leaderLineShow.value.push(lineValue);
  689. //弹窗打开后使得线条在指定区域中
  690. hiddenLine2();
  691. }
  692. }
  693. }
  694. } else if (
  695. //点击修改的左侧图标或装置信息中的基本信息
  696. (types == "UpLeft" && domListUpLeft.value) ||
  697. (types == "UpLeftBasic" && cClickCode.value == "scd.ied")
  698. ) {
  699. const startDom =
  700. types == "UpLeft"
  701. ? domListUpLeft.value
  702. : document.getElementById("leftBasic");
  703. const doms =
  704. types == "UpLeftBasic"
  705. ? domListUpRight.value
  706. : document.querySelectorAll(`#${clickUpIdDomName.value}`); //基本信息固定了id,其他的是动态生成的
  707. let sameDom;
  708. if (types == "UpLeft") {
  709. sameDom = doms && doms.length > 1 ? doms[1] : doms[0]; //点击修改左侧或右侧每点击相同名字的dom
  710. } else {
  711. sameDom = document.getElementById("rightBasic"); //相同名字的dom
  712. }
  713. const lineStylUp = {
  714. ...lineStyleAdd,
  715. color: "#FFA011",
  716. };
  717. const lineStylSame = {
  718. ...lineStyleAdd,
  719. color: "#FFA011",
  720. startSocket: "right",
  721. endSocket: "left",
  722. };
  723. //左侧点击修改数据
  724. for (const [key, value] of domListUpLeftName.value) {
  725. for (const [key2, value2] of domListUpMiddleName.value) {
  726. //又有新增又有修改,站控层===
  727. if (typeof key == "string" && key.includes("add") && key == key2) {
  728. let line4; //从左往右的线条
  729. LeaderLine.positionByWindowResize = false;
  730. line4 = new LeaderLine(startDom, value, lineStyleAdd);
  731. leaderLineShow.value.push(line4);
  732. let lineValue5;
  733. lineValue5 = new LeaderLine(value, value2, lineStyleAdd);
  734. leaderLineShow.value.push(lineValue5);
  735. hiddenLine2();
  736. }
  737. //又有新增又有修改,站控层===
  738. for (const [key3, value3] of domListUpRightName.value) {
  739. LeaderLine.positionByWindowResize = false;
  740. //修改和删除
  741. if (typeof key2 == "string" && key2.includes("del") && key2 == key3) {
  742. let line4; //从右往左的线条
  743. line4 = new LeaderLine(value3, sameDom, lineStyleDel);
  744. leaderLineShow.value.push(line4);
  745. let lineValue5;
  746. lineValue5 = new LeaderLine(value2, value3, lineStyleDel);
  747. leaderLineShow.value.push(lineValue5);
  748. hiddenLine2();
  749. }
  750. if (key == key2 && key2 == key3) {
  751. let line; //从左往右的线条
  752. line = new LeaderLine(startDom, value, lineStylUp);
  753. leaderLineShow.value.push(line);
  754. let lineValue;
  755. lineValue = new LeaderLine(value, value2, lineStylUp);
  756. leaderLineShow.value.push(lineValue);
  757. let lineValue3;
  758. lineValue3 = new LeaderLine(value2, value3, lineStylUp);
  759. leaderLineShow.value.push(lineValue3);
  760. let lineValue4;
  761. lineValue4 = new LeaderLine(value3, sameDom, lineStylUp);
  762. leaderLineShow.value.push(lineValue4);
  763. //弹窗打开后使得线条在指定区域中
  764. hiddenLine2();
  765. }
  766. }
  767. }
  768. }
  769. } else if (types == "UpRight" && domListUpRight.value) {
  770. const startDom = domListUpRight.value;
  771. const sameDom = document.querySelectorAll(`#${clickUpIdDomName.value}`); //点击修改左侧或右侧每点击相同名字的dom
  772. const lineStylUp = {
  773. ...lineStyleAdd,
  774. color: "#FFA011",
  775. };
  776. const lineStylSame = {
  777. ...lineStyleAdd,
  778. color: "#FFA011",
  779. startSocket: "right",
  780. endSocket: "left",
  781. };
  782. //右侧点击修改数据
  783. for (const [key, value] of domListUpRightName.value) {
  784. for (const [key2, value2] of domListUpMiddleName.value) {
  785. for (const [key3, value3] of domListUpLeftName.value) {
  786. if (key == key2 && key2 == key3) {
  787. LeaderLine.positionByWindowResize = false;
  788. let line; //从左往右的线条
  789. line = new LeaderLine(value, startDom, lineStylUp);
  790. leaderLineShow.value.push(line);
  791. let lineValue;
  792. lineValue = new LeaderLine(value2, value, lineStylUp);
  793. leaderLineShow.value.push(lineValue);
  794. let lineValue3;
  795. lineValue3 = new LeaderLine(value3, value2, lineStylUp);
  796. leaderLineShow.value.push(lineValue3);
  797. let lineValue4;
  798. lineValue4 = new LeaderLine(sameDom[0], value3, lineStylUp);
  799. leaderLineShow.value.push(lineValue4);
  800. //弹窗打开后使得线条在指定区域中
  801. hiddenLine2();
  802. }
  803. if (typeof key3 == "string" && key3.includes("add") && key3 == key2) {
  804. let line4; //从左往右的线条
  805. line4 = new LeaderLine(value3, value2, lineStyleAdd);
  806. leaderLineShow.value.push(line4);
  807. let lineValue5;
  808. lineValue5 = new LeaderLine(sameDom[0], value3, lineStyleAdd);
  809. leaderLineShow.value.push(lineValue5);
  810. hiddenLine2();
  811. }
  812. // 又有新增又有修改,站控层===
  813. }
  814. }
  815. }
  816. }
  817. };
  818. //滚动时重定位线条
  819. const newPositionLine2 = (diffline) => {
  820. document.getElementById("wrapper").addEventListener(
  821. "scroll",
  822. AnimEvent.add(() => {
  823. leaderLineMain.value.forEach((line) => {
  824. if (line) {
  825. hiddenLineDialog();
  826. line.position();
  827. }
  828. });
  829. leaderLineShow.value.forEach((line) => {
  830. if (line) {
  831. hiddenLine2();
  832. line.position();
  833. }
  834. });
  835. //中间展示图片的
  836. }),
  837. false
  838. );
  839. // document.getElementById("treedomCid").addEventListener(
  840. // "resize",
  841. // AnimEvent.add(function () {
  842. // leaderLineMain.value.forEach((line) => {
  843. // hiddenLineDialog();
  844. // line.position();
  845. // });
  846. // leaderLineShow.value.forEach((line) => {
  847. // hiddenLine2();
  848. // line.position();
  849. // });
  850. // }),
  851. // false
  852. // );
  853. };
  854. const removeLine2 = () => {
  855. const elmWrapper = document.getElementById("wrapper");
  856. if (elmWrapper) {
  857. elmWrapper.querySelectorAll("#wrapper .leader-line").forEach((node) => {
  858. // elmWrapper.removeChild(node);
  859. node.remove();
  860. });
  861. }
  862. };
  863. //点击的线条重置
  864. const clickLineResult = () => {
  865. clickReset();
  866. CommunicationS1.value = [];
  867. CommunicationS1.value = [];
  868. domListAddName.value.clear();
  869. domListAddValue.value.clear();
  870. domListDelName.value.clear();
  871. domListDelValue.value.clear();
  872. domListUpLeftName.value.clear();
  873. domListUpRightName.value.clear();
  874. domListUpMiddleName.value.clear();
  875. leaderLineShow.value = [];
  876. removeLine2();
  877. };
  878. //主线条重置
  879. const clickLineResultMain = () => {
  880. domListRightMain.value.clear();
  881. domListLeftMain.value.clear();
  882. leaderLineMain.value = [];
  883. document.body.querySelectorAll("body .leader-line").forEach((node) => {
  884. node.remove();
  885. // elmWrapper.removeChild(node);
  886. });
  887. };
  888. watch(
  889. () => mapList.value,
  890. (newValue) => {
  891. if (newValue) {
  892. setTimeout(() => {
  893. setLeaderlineMain();
  894. newPositionLine2(leaderLineMain.value);
  895. }, 300);
  896. }
  897. }
  898. );
  899. //CID右侧数据
  900. //连线===
  901. onMounted(() => {
  902. CodeImg(props.clickCodeValue);
  903. if (props.iedRelation) {
  904. tagList.value = Object.values(props.iedRelation)[0];
  905. }
  906. if (clickRow.value && clickRow.value.id) {
  907. getData();
  908. }
  909. });
  910. </script>
  911. <template>
  912. <div
  913. class="main"
  914. ref="mianItem"
  915. v-loading="loading"
  916. id="treedomCid"
  917. element-loading-text="数据加载中,请勿点击..."
  918. >
  919. <!-- 左侧 -->
  920. <div class="left-main" v-if="(leftI && leftI.length) || dataU">
  921. <!-- 名称 -->
  922. <div class="ied-name" id="leftMainDom">
  923. <img :src="squer" alt="" />
  924. <div v-if="tagList">{{ tagList.ied_name }}</div>
  925. </div>
  926. <!-- 各个图片数据版块 -->
  927. <div
  928. class="left-item-min"
  929. :class="{
  930. 'left-item-max':
  931. leftI.length > 5 ||
  932. dataU.length > 5 ||
  933. leftI.length + dataU.length > 5,
  934. }"
  935. ref="leftStartDom"
  936. >
  937. <!-- 左侧修改 -->
  938. <div v-if="dataU.length > 0 && cClickCode != 'scd.ied'">
  939. <div
  940. v-for="(item, index) in dataU"
  941. :key="index"
  942. class="left-item-cont"
  943. @click="
  944. clickUpTypeImgLeft(
  945. item.diff_desc,
  946. $event,
  947. item.diff_object_name,
  948. item
  949. )
  950. "
  951. :ref="(el) => setdomLeftMain(el, item.diff_object_name)"
  952. :id="item.diff_object_name.replace(/[^\w\s]/g, '')"
  953. >
  954. <div class="item-img">
  955. <img :src="codeImg" alt="" class="type-img" />
  956. <img :src="modify0" alt="" class="type-img-mini" />
  957. </div>
  958. <div class="wraps">{{ item.diff_object_name }}</div>
  959. </div>
  960. </div>
  961. <div v-else-if="cClickCode == 'scd.ied'">
  962. <div
  963. class="left-item-cont"
  964. :ref="(el) => setdomLeftMain(el, 'leftmain')"
  965. id="leftBasic"
  966. >
  967. <div class="item-img">
  968. <img :src="codeImg" alt="" class="type-img" />
  969. <img :src="modify0" alt="" class="type-img-mini" />
  970. </div>
  971. <div class="wraps">基本信息</div>
  972. </div>
  973. </div>
  974. <!-- 新增 -->
  975. <div v-show="leftI.length > 0">
  976. <div
  977. v-for="(item, index) in leftI"
  978. :key="index"
  979. class="left-item-cont"
  980. @click="clickTypeImg(item, $event)"
  981. :ref="(el) => setdomLeftMain(el, item.diff_object_name)"
  982. >
  983. <div class="item-img">
  984. <img :src="codeImg" alt="" class="type-img" />
  985. <img :src="newly0" alt="" class="type-img-mini" />
  986. </div>
  987. <div class="wraps">{{ item.diff_object_name }}</div>
  988. </div>
  989. </div>
  990. </div>
  991. <!-- 左侧新增差异名字 -->
  992. <div class="left-difference" v-if="IorDClick" ref="addDiff">
  993. <!-- key是键,value是值,循环的是对象 -->
  994. <div v-for="(value, key) in IorDClick" :key="key">
  995. <div class="type-text" :ref="(el) => setdomAddName(el, key)">
  996. {{ key }}
  997. </div>
  998. <div :ref="(el) => setdomAddValue(el, key)" class="add-type">
  999. <div class="type-text add-type-text wraps" v-if="value">
  1000. {{ value }}
  1001. </div>
  1002. <div class="type-text add-type-text wraps" v-else>【空】</div>
  1003. </div>
  1004. </div>
  1005. </div>
  1006. </div>
  1007. <div class="middle-line" ref="middleLine"></div>
  1008. <!-- 右侧 -->
  1009. <div class="right-main" v-if="(rightD && rightD.length) || dataU">
  1010. <!-- 名称 -->
  1011. <div class="ied-name" id="rightMainDom">
  1012. <img :src="squer" alt="" />
  1013. <div v-if="tagList">{{ tagList.ied_name }}</div>
  1014. </div>
  1015. <!-- 各个图片数据版块 -->
  1016. <div
  1017. ref="rightStartDom"
  1018. class="right-item-min"
  1019. :class="{
  1020. 'right-item-max':
  1021. rightD.length > 5 ||
  1022. dataU.length > 5 ||
  1023. rightD.length + dataU.length > 5,
  1024. }"
  1025. >
  1026. <!-- 修改 -->
  1027. <div v-if="dataU.length > 0 && cClickCode != 'scd.ied'">
  1028. <div
  1029. v-for="(item, index) in dataU"
  1030. :key="index"
  1031. class="left-item-cont"
  1032. @click="
  1033. clickUpTypeImgRight(
  1034. item.diff_desc,
  1035. $event,
  1036. item.diff_object_name,
  1037. item
  1038. )
  1039. "
  1040. :id="item.diff_object_name.replace(/[^\w\s]/g, '')"
  1041. :ref="(el) => setdomRightMain(el, item.diff_object_name)"
  1042. >
  1043. <div class="item-img">
  1044. <img :src="codeImg" alt="" class="type-img" />
  1045. <img :src="modify0" alt="" class="type-img-mini" />
  1046. </div>
  1047. <div class="wraps">{{ item.diff_object_name }}</div>
  1048. </div>
  1049. </div>
  1050. <div v-else-if="cClickCode == 'scd.ied'">
  1051. <div
  1052. class="left-item-cont"
  1053. :ref="(el) => setdomRightMain(el, 'rightmain')"
  1054. id="rightBasic"
  1055. >
  1056. <div class="item-img">
  1057. <img :src="codeImg" alt="" class="type-img" />
  1058. <img :src="modify0" alt="" class="type-img-mini" />
  1059. </div>
  1060. <div class="wraps">基本信息</div>
  1061. </div>
  1062. </div>
  1063. <!-- 删除 -->
  1064. <div v-show="rightD.length">
  1065. <div
  1066. v-for="(item, index) in rightD"
  1067. :key="index"
  1068. class="left-item-cont"
  1069. @click="clickTypeImgDel(item, $event)"
  1070. :ref="(el) => setdomRightMain(el, item.diff_object_name)"
  1071. >
  1072. <div class="item-img">
  1073. <img :src="codeImg" alt="" class="type-img" />
  1074. <img :src="del0" alt="" class="type-img-mini" />
  1075. </div>
  1076. <div class="wraps">{{ item.diff_object_name }}</div>
  1077. </div>
  1078. </div>
  1079. </div>
  1080. <!-- 右侧删除差异名字 -->
  1081. <div class="right-difference" v-if="DelClick" ref="delDiff">
  1082. <!-- key是键,value是值,循环的是对象 -->
  1083. <div v-for="(value, key) in DelClick" :key="key">
  1084. <div :ref="(el) => setdomDelValue(el, key)" class="del-type">
  1085. <div class="type-text del-type-text wraps" v-if="value">
  1086. {{ value }}
  1087. </div>
  1088. <div class="type-text del-type-text wraps" v-else>【空】</div>
  1089. </div>
  1090. <div class="type-text" :ref="(el) => setdomDelName(el, key)">
  1091. {{ key }}
  1092. </div>
  1093. </div>
  1094. </div>
  1095. </div>
  1096. <div
  1097. class="middle-main"
  1098. :class="{ 'middle-main-basic': cClickCode == 'scd.ied' }"
  1099. ref="middleMain"
  1100. >
  1101. <!-- 修改中间数据的名字 -->
  1102. <div
  1103. v-if="cClickCode != 'scd.ied' && !isDiffdescUpAdd && !isDiffdescUpDel"
  1104. >
  1105. <div v-for="(value, key) in newleftDataMiddle" :key="key">
  1106. <div
  1107. v-for="(value2, key2) in newrightDataMiddle"
  1108. :key="key2"
  1109. class="middle-frame"
  1110. >
  1111. <div
  1112. v-if="key == key2"
  1113. class="middle-type-text"
  1114. :ref="(el) => setdomUPLeftName(el, key)"
  1115. >
  1116. {{ key }}
  1117. </div>
  1118. <div
  1119. v-if="key == key2"
  1120. class="middle-item"
  1121. :ref="(el) => setdomUPMiddleName(el, key)"
  1122. >
  1123. <div class="middle-left">
  1124. <div class="type-text up-type-text wraps middle-up-type-text">
  1125. <span v-if="value">{{ value }}</span>
  1126. <span v-else>【空】</span>
  1127. </div>
  1128. </div>
  1129. <img :src="jiantou" alt="" style="width: 40px" />
  1130. <div class="middle-right">
  1131. <div class="type-text up-type-text wraps middle-up-type-text">
  1132. <span v-if="value2">{{ value2 }}</span>
  1133. <span v-else>【空】</span>
  1134. </div>
  1135. </div>
  1136. </div>
  1137. <div
  1138. v-if="key == key2"
  1139. class="middle-type-text"
  1140. :ref="(el) => setdomUpRightName(el, key)"
  1141. >
  1142. {{ key2 }}
  1143. </div>
  1144. </div>
  1145. </div>
  1146. </div>
  1147. <!-- 修改加新增的或修改加删除 -->
  1148. <div
  1149. v-else-if="
  1150. (cClickCode != 'scd.ied' && isDiffdescUpAdd) ||
  1151. (cClickCode != 'scd.ied' && isDiffdescUpDel)
  1152. "
  1153. >
  1154. <div
  1155. v-for="(value, key) in CommunicationS1"
  1156. :key="key"
  1157. class="middle-frame"
  1158. :class="{
  1159. 'del-middle-frame': value.del,
  1160. 'add-middle-frame': value.add,
  1161. }"
  1162. >
  1163. <!-- 是修改的,!value.add 是修改加新增的 !value.del是修改加删除的 -->
  1164. <div
  1165. v-if="!value.add && !value.del"
  1166. class="middle-type-text"
  1167. :ref="(el) => setdomUPLeftName(el, key)"
  1168. >
  1169. <!-- 左侧类型修改 -->
  1170. <span v-if="value.Type && !value.upAndDel"> {{ value.Type }}</span>
  1171. <span v-else-if="value.Name && value.upAndDel">
  1172. {{ value.Name }}</span
  1173. >
  1174. </div>
  1175. <div
  1176. v-if="value.add"
  1177. class="middle-type-text"
  1178. style="color: #134bea; border: 1px solid #134bea"
  1179. :ref="(el) => setdomUPLeftName(el, key + key + 'add')"
  1180. >
  1181. <!-- 左侧类型新增 -->
  1182. {{ value.Type }}
  1183. </div>
  1184. <!-- 左侧类型新增的值 -->
  1185. <div
  1186. class="middle-item"
  1187. style="
  1188. border: 2px dashed #134bea;
  1189. justify-content: start;
  1190. margin-left: 10px;
  1191. "
  1192. :ref="(el) => setdomUPMiddleName(el, key + key + 'add')"
  1193. v-if="value.add"
  1194. >
  1195. <div class="middle-left">
  1196. <div
  1197. class="type-text up-type-text wraps middle-up-type-text"
  1198. style="color: #134bea"
  1199. >
  1200. <span v-if="value.InnerText">{{ value.InnerText }}</span>
  1201. <span v-else>【空】</span>
  1202. </div>
  1203. </div>
  1204. </div>
  1205. <!-- 中间纯修改类型的值 -->
  1206. <div
  1207. class="middle-item"
  1208. :ref="(el) => setdomUPMiddleName(el, key)"
  1209. v-if="!value.add && !value.del"
  1210. >
  1211. <div class="middle-left">
  1212. <div class="type-text up-type-text wraps middle-up-type-text">
  1213. <span v-if="value.InnerText && !value.upAndDel">{{
  1214. value.InnerText
  1215. }}</span>
  1216. <span v-else-if="value.Val && value.upAndDel">{{
  1217. value.Val.InnerText
  1218. }}</span>
  1219. <span v-else>【空】</span>
  1220. </div>
  1221. </div>
  1222. <img :src="jiantou" alt="" style="width: 40px" />
  1223. <div class="middle-right">
  1224. <div class="type-text up-type-text wraps middle-up-type-text">
  1225. <span v-if="(value.nnerTextRight != '空') & !value.upAndDel">{{
  1226. value.nnerTextRight
  1227. }}</span>
  1228. <span v-else-if="value.Val && value.upAndDel">{{
  1229. value.Val.InnerText
  1230. }}</span>
  1231. <span v-else>【空】</span>
  1232. </div>
  1233. </div>
  1234. </div>
  1235. <!-- 右侧类型修改删除的值 -->
  1236. <div
  1237. class="middle-item"
  1238. style="
  1239. border: 2px dashed #e50505;
  1240. justify-content: start;
  1241. margin-right: 50px;
  1242. "
  1243. :ref="(el) => setdomUPMiddleName(el, key + key + 'del')"
  1244. v-if="value.del"
  1245. >
  1246. <div class="middle-right">
  1247. <div
  1248. class="type-text up-type-text wraps middle-up-type-text"
  1249. style="color: #e50505"
  1250. >
  1251. <span v-if="value.Val">{{ value.Val.InnerText }}</span>
  1252. <span v-else>【空】</span>
  1253. </div>
  1254. </div>
  1255. </div>
  1256. <!-- 右侧类型修改和删除 -->
  1257. <div
  1258. v-if="value.del"
  1259. class="middle-type-text"
  1260. style="color: #e50505; border: 2px solid #e50505"
  1261. :ref="(el) => setdomUpRightName(el, key + key + 'del')"
  1262. >
  1263. {{ value.Name }}
  1264. </div>
  1265. <div
  1266. v-if="!value.add && !value.del"
  1267. class="middle-type-text"
  1268. :ref="(el) => setdomUpRightName(el, key)"
  1269. >
  1270. <span v-if="value.Type && !value.upAndDel"> {{ value.Type }}</span>
  1271. <span v-else-if="value.Name && value.upAndDel">
  1272. {{ value.Name }}</span
  1273. >
  1274. </div>
  1275. </div>
  1276. </div>
  1277. <!-- 装置信息基本信息修改 -->
  1278. <div v-else-if="mapList && mapList.length > 0 && cClickCode == 'scd.ied'">
  1279. <div v-for="(value, key) in mapList[0]" :key="key">
  1280. <div
  1281. v-for="(value2, key2) in mapList[1]"
  1282. :key="key2"
  1283. class="middle-frame"
  1284. >
  1285. <div
  1286. v-if="
  1287. key == key2 &&
  1288. key != 'lineno' &&
  1289. key != 'name' &&
  1290. key != 'node_id'
  1291. "
  1292. class="middle-type-text"
  1293. :ref="(el) => setdomUPLeftName(el, key)"
  1294. >
  1295. {{
  1296. key == "config_version"
  1297. ? "配置版本"
  1298. : key == "desc"
  1299. ? "装置描述"
  1300. : key == "manufacturer"
  1301. ? "厂商"
  1302. : "装置类型"
  1303. }}
  1304. </div>
  1305. <div
  1306. v-if="
  1307. key == key2 &&
  1308. key != 'lineno' &&
  1309. key != 'name' &&
  1310. key != 'node_id'
  1311. "
  1312. class="middle-item"
  1313. :ref="(el) => setdomUPMiddleName(el, key)"
  1314. >
  1315. <div class="middle-left">
  1316. <div class="type-text up-type-text wraps middle-up-type-text">
  1317. <span v-if="value">{{ value }}</span>
  1318. <span v-else>【空】</span>
  1319. </div>
  1320. </div>
  1321. <img :src="jiantou" alt="" style="width: 40px" />
  1322. <div class="middle-right">
  1323. <div class="type-text up-type-text wraps middle-up-type-text">
  1324. <span v-if="value2">{{ value2 }}</span>
  1325. <span v-else>【空】</span>
  1326. </div>
  1327. </div>
  1328. </div>
  1329. <div
  1330. v-if="
  1331. key == key2 &&
  1332. key != 'lineno' &&
  1333. key != 'name' &&
  1334. key != 'node_id'
  1335. "
  1336. class="middle-type-text"
  1337. :ref="(el) => setdomUpRightName(el, key)"
  1338. >
  1339. {{
  1340. key2 == "config_version"
  1341. ? "配置版本"
  1342. : key2 == "desc"
  1343. ? "装置描述"
  1344. : key2 == "manufacturer"
  1345. ? "厂商"
  1346. : "装置类型"
  1347. }}
  1348. </div>
  1349. </div>
  1350. </div>
  1351. </div>
  1352. </div>
  1353. <div id="wrapper"></div>
  1354. <div id="dilogwrapper"></div>
  1355. </div>
  1356. </template>
  1357. <style scoped lang="scss">
  1358. @mixin size {
  1359. width: 80px;
  1360. height: 80px;
  1361. }
  1362. .bigBox {
  1363. height: calc(100vh - 230px) !important;
  1364. }
  1365. .main {
  1366. height: 90%;
  1367. display: flex;
  1368. position: relative;
  1369. overflow-y: auto;
  1370. }
  1371. .ied-name {
  1372. width: 80px;
  1373. height: 110px;
  1374. text-align: center;
  1375. & > img {
  1376. @include size;
  1377. }
  1378. }
  1379. .left-main {
  1380. .ied-name {
  1381. position: absolute;
  1382. top: 50%;
  1383. // transform: translateY(-100%);
  1384. transform: translateY(-50%);
  1385. left: 5%;
  1386. }
  1387. .left-item-min {
  1388. position: absolute;
  1389. top: 50%;
  1390. transform: translateY(-50%);
  1391. left: 15%;
  1392. }
  1393. .left-item-max {
  1394. position: absolute;
  1395. top: 60px;
  1396. transform: translateY(0%);
  1397. left: 15% !important;
  1398. }
  1399. }
  1400. .right-main {
  1401. .ied-name {
  1402. position: absolute;
  1403. top: 50%;
  1404. transform: translateY(-50%);
  1405. right: 5%;
  1406. }
  1407. .right-item-min {
  1408. position: absolute;
  1409. top: 50%;
  1410. transform: translateY(-50%);
  1411. right: 15%;
  1412. }
  1413. .right-item-max {
  1414. position: absolute;
  1415. top: 60px;
  1416. transform: translateY(0%);
  1417. right: 15%;
  1418. }
  1419. }
  1420. .left-item-max,
  1421. .right-item-max,
  1422. .left-item-min,
  1423. .right-item-min {
  1424. .left-item-cont {
  1425. cursor: pointer;
  1426. text-align: center;
  1427. width: 110px;
  1428. height: 120px;
  1429. & > div {
  1430. color: #255ce7;
  1431. font-size: 12px;
  1432. }
  1433. }
  1434. .type-img {
  1435. @include size;
  1436. }
  1437. .item-img {
  1438. position: relative;
  1439. .type-img-mini {
  1440. width: 20px;
  1441. height: 20px;
  1442. position: absolute;
  1443. top: 24px;
  1444. right: 21px;
  1445. }
  1446. }
  1447. }
  1448. .middle-line {
  1449. position: absolute;
  1450. left: 50%;
  1451. border: 1px solid #e0e7f0;
  1452. }
  1453. //差异项
  1454. .left-difference {
  1455. position: absolute;
  1456. left: 28%;
  1457. & > div {
  1458. display: flex;
  1459. justify-content: space-around;
  1460. align-items: center;
  1461. }
  1462. .type-text {
  1463. width: 80px;
  1464. border: 1px solid #134bea;
  1465. color: #134bea;
  1466. text-align: center;
  1467. margin-bottom: 47px;
  1468. padding: 3px;
  1469. font-size: 14px;
  1470. }
  1471. .add-type {
  1472. margin-left: 40px;
  1473. margin-bottom: 47px;
  1474. .add-type-text {
  1475. margin-bottom: 0;
  1476. border: 2px dashed #134bea;
  1477. color: #134bea;
  1478. width: 113px;
  1479. padding: 12px 8px;
  1480. }
  1481. }
  1482. .up-type-text {
  1483. border: 1px solid #ffa011;
  1484. color: #ffa011;
  1485. }
  1486. }
  1487. .middle-type-text {
  1488. border: 1px solid #ffa011;
  1489. color: #ffa011;
  1490. display: flex;
  1491. align-items: center;
  1492. justify-content: center;
  1493. margin-bottom: 45px;
  1494. width: 120px;
  1495. height: 23px;
  1496. }
  1497. .right-difference {
  1498. position: absolute;
  1499. right: 28%;
  1500. .type-text {
  1501. width: 80px;
  1502. border: 1px solid #ff0000;
  1503. color: #ff0000;
  1504. text-align: center;
  1505. margin-bottom: 47px;
  1506. padding: 3px;
  1507. font-size: 14px;
  1508. }
  1509. & > div {
  1510. display: flex;
  1511. justify-content: space-around;
  1512. align-items: center;
  1513. }
  1514. .del-type {
  1515. margin-right: 40px;
  1516. margin-bottom: 47px;
  1517. .del-type-text {
  1518. margin-bottom: 0;
  1519. border: 2px dashed #ff0000;
  1520. color: #ff0000;
  1521. width: 113px;
  1522. padding: 12px 8px;
  1523. }
  1524. }
  1525. }
  1526. .middle-up-type-text {
  1527. width: 100px;
  1528. }
  1529. // 文字换行
  1530. .wraps {
  1531. word-wrap: break-word;
  1532. }
  1533. .middle-main,
  1534. .middle-main-basic {
  1535. width: 50%;
  1536. position: absolute;
  1537. left: 50%;
  1538. transform: translateX(-50%);
  1539. .middle-frame,
  1540. .add-middle-frame {
  1541. display: flex;
  1542. justify-content: space-around;
  1543. align-items: center;
  1544. }
  1545. .add-middle-frame {
  1546. width: 50%;
  1547. }
  1548. .del-middle-frame {
  1549. width: 50%;
  1550. position: absolute;
  1551. right: 20px;
  1552. }
  1553. .middle-item {
  1554. border: 2px dashed #ffa011;
  1555. color: #09162c;
  1556. font-size: 13px;
  1557. // margin-bottom: 47px;
  1558. display: flex;
  1559. justify-content: center;
  1560. align-items: center;
  1561. text-align: center;
  1562. padding: 10px 10px;
  1563. margin-bottom: 45px;
  1564. }
  1565. }
  1566. .middle-main-basic {
  1567. top: 50% !important;
  1568. transform: translate(-50%, -50%);
  1569. }
  1570. </style>