|
|
@@ -1,7 +1,26 @@
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, ref, watch } from "vue";
|
|
|
+import { nextTick, onMounted, ref, watch } from "vue";
|
|
|
import { compIedstatType, compResult } from "@/api/scdCheck/scdCheck2";
|
|
|
+import squer from "@/assets/image/CID/squer.png";
|
|
|
+import b_get4 from "@/assets/image/CID/b_get4.png";
|
|
|
+import b_go5 from "@/assets/image/CID/b_go5.png";
|
|
|
+import b_goose2 from "@/assets/image/CID/b_goose2.png";
|
|
|
+import b_navicat_plus17 from "@/assets/image/CID/b_navicat_plus17.png";
|
|
|
+import b_navicat16 from "@/assets/image/CID/b_navicat16.png";
|
|
|
+import b_pole6 from "@/assets/image/CID/b_pole6.png";
|
|
|
+import b_report14 from "@/assets/image/CID/b_report14.png";
|
|
|
+import b_setting15 from "@/assets/image/CID/b_setting15.png";
|
|
|
+import b_speed9 from "@/assets/image/CID/b_speed9.png";
|
|
|
+import b_stand1 from "@/assets/image/CID/b_stand1.png";
|
|
|
+import b_stknum11 from "@/assets/image/CID/b_stknum11.png";
|
|
|
+import b_sv3 from "@/assets/image/CID/b_sv3.png";
|
|
|
+import b_wifi7 from "@/assets/image/CID/b_wifi7.png";
|
|
|
+import bb10 from "@/assets/image/CID/bb10.png";
|
|
|
+import btn8 from "@/assets/image/CID/btn8.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";
|
|
|
const props = defineProps({
|
|
|
clickRowDatas: {
|
|
|
type: Object,
|
|
|
@@ -15,10 +34,14 @@ const props = defineProps({
|
|
|
type: Object,
|
|
|
default: () => {},
|
|
|
},
|
|
|
+ clickCodeValue: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
});
|
|
|
-//IED版本数据，diff_opt中u是修改，i是新增，d是删除
|
|
|
+
|
|
|
const clickRow = ref(props.clickRowDatas);
|
|
|
-let tagList = ref(Object.values(props.iedRelation)[0]); //左侧更改的设备列表
|
|
|
+let tagList = ref(null); //左侧更改的设备列表
|
|
|
|
|
|
watch(
|
|
|
() => props.clickRowDatas,
|
|
|
@@ -33,7 +56,6 @@ watch(
|
|
|
(newValue) => {
|
|
|
if (newValue) {
|
|
|
tagList.value = Object.values(newValue)[0];
|
|
|
- console.log(" tagList.value", tagList.value);
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
@@ -45,27 +67,398 @@ watch(
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
+const cClickCode = ref(props.clickCodeValue); //点击侧边栏差异项的code
|
|
|
+watch(
|
|
|
+ () => props.clickCodeValue,
|
|
|
+ (newValue) => {
|
|
|
+ if (newValue) {
|
|
|
+ cClickCode.value = newValue;
|
|
|
+ result();
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
const mapList = ref(null);
|
|
|
+//IED版本数据，diff_opt中u是修改，i是新增，d是删除
|
|
|
+const leftI = ref([]); //新增
|
|
|
+const dataU = ref([]); //修改
|
|
|
+const rightD = ref([]); //删除
|
|
|
+const dones = () => {
|
|
|
+ //重置
|
|
|
+ leftI.value = [];
|
|
|
+ dataU.value = [];
|
|
|
+ rightD.value = [];
|
|
|
+};
|
|
|
+const leftItem = ref(null);
|
|
|
+const heights = ref(0);
|
|
|
+const middleLine = ref(null);
|
|
|
+const IorDClick = ref({}); //点击或默认显示的连线数据
|
|
|
const result = async () => {
|
|
|
+ dones();
|
|
|
+ const ids = clickRow.value ? clickRow.value.id : "";
|
|
|
+ const names = tagList.value ? tagList.value.ied_name : "";
|
|
|
const res = await compResult({
|
|
|
- comp_id: clickRow.value.id,
|
|
|
- ied_name: tagList.value.ied_name,
|
|
|
+ comp_id: ids,
|
|
|
+ ied_name: names,
|
|
|
comptype: "u",
|
|
|
- itemcode: tagList.value.diff_object_type,
|
|
|
- });
|
|
|
- res.data.forEach(item => {
|
|
|
+ itemcode: cClickCode.value,
|
|
|
});
|
|
|
- console.log("first", JSON.parse(res.data[0]));
|
|
|
+ if (res.data) {
|
|
|
+ res.data.forEach((item) => {
|
|
|
+ item.diff_desc = JSON.parse(item.diff_desc);
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log("first", leftI.value, "rightD.value", "dataU.value", dataU.value);
|
|
|
+ // IorDClick;
|
|
|
mapList.value = res.data;
|
|
|
+ nextTick(() => {
|
|
|
+ middleLine.value.style.height = 0;
|
|
|
+ middleLine.value.style.height = leftItem.value.scrollHeight + "px";
|
|
|
+ console.log("first", middleLine.value.style.height);
|
|
|
+ });
|
|
|
+};
|
|
|
+//点击新增或删除的图片
|
|
|
+const clickTypeImg = (item, event) => {
|
|
|
+ IorDClick.value = {};
|
|
|
+ comonTypeImg(item, event)
|
|
|
+};
|
|
|
+const clickTypeImgDel = (item,event) =>{
|
|
|
+ IorDClick.value = {};
|
|
|
+ comonTypeImg(item,event)
|
|
|
+}
|
|
|
+const comonTypeImg = (item,event) =>{
|
|
|
+ console.log("event111111111", 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"
|
|
|
+ ) {
|
|
|
+ IorDClick.value[key] = value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(" IorDClick.value", IorDClick.value);
|
|
|
+}
|
|
|
+//点击修改的图片
|
|
|
+const newleftData = ref(null);
|
|
|
+const newrightData = ref(null);
|
|
|
+const clickUpTypeImg = (arr, event) => {
|
|
|
+ console.log("event", event);
|
|
|
+ IorDClick.value = null;
|
|
|
+ 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;
|
|
|
+ console.log("newleft =", newleftData.value);
|
|
|
+ console.log("newright =", newrightData.value);
|
|
|
};
|
|
|
onMounted(() => {
|
|
|
+ if (props.iedRelation) {
|
|
|
+ tagList.value = Object.values(props.iedRelation)[0];
|
|
|
+ }
|
|
|
result();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div></div>
|
|
|
+ <div class="main" ref="leftItem">
|
|
|
+ <!-- 左侧 -->
|
|
|
+ <div
|
|
|
+ class="left-main"
|
|
|
+ v-if="(leftI && leftI.length) || dataU & dataU.length"
|
|
|
+ >
|
|
|
+ <!-- 名称 -->
|
|
|
+ <div class="ied-name">
|
|
|
+ <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,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <!-- 修改 -->
|
|
|
+ <div v-show="dataU.length > 0">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in dataU"
|
|
|
+ :key="index"
|
|
|
+ class="left-item-cont"
|
|
|
+ @click="clickUpTypeImg(item.diff_desc, $event)"
|
|
|
+ >
|
|
|
+ <div class="item-img">
|
|
|
+ <img :src="b_report14" alt="" class="type-img" />
|
|
|
+ <img :src="modify0" alt="" class="type-img-mini" />
|
|
|
+ </div>
|
|
|
+ <div>{{ item.diff_object_name }}</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)"
|
|
|
+ >
|
|
|
+ <div class="item-img">
|
|
|
+ <img :src="b_report14" alt="" class="type-img" />
|
|
|
+ <img :src="newly0" alt="" class="type-img-mini" />
|
|
|
+ </div>
|
|
|
+ <div>{{ item.diff_object_name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-difference" v-if="IorDClick">
|
|
|
+ <!-- key是键,value是值,循环的是对象 -->
|
|
|
+ <div v-for="(value, key) in IorDClick" :key="key">
|
|
|
+ <div class="type-text">
|
|
|
+ {{ key }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="middle-line" ref="middleLine"></div>
|
|
|
+ <!-- 右侧 -->
|
|
|
+ <div
|
|
|
+ class="right-main"
|
|
|
+ v-if="(rightD && rightD.length) || (dataU && dataU.length)"
|
|
|
+ >
|
|
|
+ <!-- 名称 -->
|
|
|
+ <div class="ied-name">
|
|
|
+ <img :src="squer" alt="" />
|
|
|
+ <div v-if="tagList">{{ tagList.ied_name }}</div>
|
|
|
+ </div>
|
|
|
+ <!-- 各个图片数据版块 -->
|
|
|
+ <div
|
|
|
+ class="right-item-min"
|
|
|
+ :class="{
|
|
|
+ 'right-item-max':
|
|
|
+ rightD.length > 5 ||
|
|
|
+ dataU.length > 5 ||
|
|
|
+ rightD.length + dataU.length > 5,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <!-- 修改 -->
|
|
|
+ <div v-show="dataU.length > 0">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in dataU"
|
|
|
+ :key="index"
|
|
|
+ class="left-item-cont"
|
|
|
+ @click="clickUpTypeImg(item.diff_desc, $event)"
|
|
|
+ >
|
|
|
+ <div class="item-img">
|
|
|
+ <img :src="b_report14" alt="" class="type-img" />
|
|
|
+ <img :src="modify0" alt="" class="type-img-mini" />
|
|
|
+ </div>
|
|
|
+ <div>{{ item.diff_object_name }}</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)"
|
|
|
+ >
|
|
|
+ <div class="item-img">
|
|
|
+ <img :src="b_report14" alt="" class="type-img" />
|
|
|
+ <img :src="del0" alt="" class="type-img-mini" />
|
|
|
+ </div>
|
|
|
+ <div>{{ item.diff_object_name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-difference" v-if="IorDClick">
|
|
|
+ <!-- key是键,value是值,循环的是对象 -->
|
|
|
+ <div v-for="(value, key) in IorDClick" :key="key">
|
|
|
+ <div class="type-text">
|
|
|
+ {{ key }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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 !important;
|
|
|
+ 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 {
|
|
|
+ text-align: center;
|
|
|
+ width: 110px;
|
|
|
+ height: 110px;
|
|
|
+ & > 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%;
|
|
|
+ .type-text{
|
|
|
+ border:1px solid #134BEA;
|
|
|
+ color:#134BEA;
|
|
|
+ margin-bottom: 47px;
|
|
|
+ padding: 3px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.right-difference{
|
|
|
+ position: absolute;
|
|
|
+ right: 28%;
|
|
|
+ .type-text{
|
|
|
+ border:1px solid #FF0000;
|
|
|
+ color:#FF0000;
|
|
|
+ margin-bottom: 47px;
|
|
|
+ padding: 3px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
“yueshang”
