cid

src/pages/netStructPicture/components/CidTree.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bigBox">
+    <div class="bigBox" :class="{'bigBoxUp':isUPdate=='update'}">
       <div>
         <div class="titles">
           <img
@@ -14,7 +14,7 @@
       <div class="tagBox">
         <div
           class="cont-line tagP"
-          :class="{ clicktag: tagChoose == index }"
+          :class="{ 'clicktag': tagChoose == index }"
           v-for="(item, index) in tagList"
           :key="index"
           @click="tagClick(item, index)"
@@ -51,10 +51,6 @@ import { stringify } from "uuid";
 import { useRoute } from "vue-router";
 const route = useRoute();
 const props = defineProps({
-  nowScdId: {
-    type: Number || String,
-    required: true,
-  },
   OpensclTrue: {
     type: Boolean,
     default: false,
@@ -63,122 +59,120 @@ const props = defineProps({
     type: Object,
     default: () => {},
   },
+  UPdate: {
+    //判断是否是点击更改 进入的界面
+    type: String,
+    default: "",
+  },
 });
-const emit = defineEmits(["treeBack"]);
+const emit = defineEmits(["treeBack", "clickCode"]);
 let tagList = ref(props.iedRelation);
 let tagChoose = ref(0);
 let treeData = ref([
   {
     label: "装置信息",
-    num: 1,
+    itemcode: "ied",
     children: [
       {
         label: "基本信息",
-        num: 1,
+        itemcode: "scd.ied",
       },
     ],
   },
   {
     label: "通信参数",
-    num: 3,
+    itemcode: "Communication",
     children: [
       {
         label: "通信接入点",
-        num: 2,
+        itemcode: "scd.ied.Communication",
       },
       {
         label: "站控层通信参数",
-        num: 1,
+        itemcode: "scd.ied.Communication.S1",
       },
       {
         label: "GOOSE 通信参数",
-        num: 0,
+        itemcode: "scd.ied.Communication.GSE",
       },
       {
         label: "SV 通信参数",
-        num: 0,
+        itemcode: 'scd.ied.Communication.SMV',
       },
     ],
   },
   {
-    label: "测点",
-    num: 409,
+    label: "测点信息",
+    itemcode: "Point",
     children: [
       {
         label: "遥信",
-        num: 97,
+        itemcode: "scd.ied.YX",
       },
       {
         label: "遥控",
-        num: 14,
+        itemcode: "scd.ied.YK",
       },
       {
         label: "遥测",
-        num: 2,
+        itemcode: "scd.ied.YC",
       },
       {
         label: "遥脉",
         num: 0,
+        itemcode: "scd.ied.YM",
       },
       {
         label: "定值",
-        num: 296,
+        itemcode: "scd.ied.DZ",
       },
     ],
   },
   {
     label: "回路配置",
-    children: [
-      {
-        label: "回路配置-1",
-      },
-    ],
-  },
-  {
-    label: "回路配置",
-    num: 205,
+    itemcode: "config",
     children: [
       {
         label: "发布虚端子",
-        num: 109,
+        itemcode: "scd.ied.FCDA",
       },
       {
         label: "定阅虚端子",
-        num: 96,
+        itemcode: "scd.ied.ExtRef",
       },
       {
         label: "虚回路信息",
-        num: 96,
+        itemcode: "scd.ied.Relation",
       },
     ],
   },
   {
     label: "建模信息",
-    num: 116,
+    itemcode: "model",
     children: [
       {
         label: "数据集",
-        num: 0,
+        itemcode: "scd.ied.DatSet",
       },
       {
         label: "数据集成员",
-        num: 109,
+        itemcode: "scd.ied.DatSetMeber",
       },
       {
         label: "GOOSE控制块",
-        num: 0,
+        itemcode: "scd.ied.GSEControl",
       },
       {
         label: "SV控制块",
-        num: 0,
+        itemcode: "scd.ied.SampledValueControl",
       },
       {
         label: "报告控制块",
-        num: 7,
+        itemcode: "scd.ied.ReportControl",
       },
       {
         label: "日志控制块",
-        num: 0,
+        itemcode: "scd.ied.LogControl",
       },
     ],
   },
@@ -188,27 +182,24 @@ let defaultProps = ref({
   label: "label",
   children: "children",
 });
-let scdId = ref(""); //传递的scdid
+const isUPdate = ref(props.UPdate);
 watch(
-  () => props.nowScdId,
-  (newVal) => {
-    scdId.value = newVal;
+  () => props.UPdate,
+  (newValue) => {
+    isUPdate.value = newValue;
   }
 );
 watch(
   () => props.iedRelation,
   (newValue) => {
     if (newValue) {
-      console.log('first', newValue)
-      tagList.value =newValue;
+      tagList.value = newValue;
     }
-  
   }
 );
 const reload = () => {
-  scdId.value = props.nowScdId;
   if (!props.OpensclTrue) {
-    cid.getAll({ scd_id: scdId.value - 0, ied_name: "" }).then((res) => {
+    cid.getAll({ scd_id: route.query.id, ied_name: "" }).then((res) => {
       tagList.value = res.data;
     });
   }
@@ -217,7 +208,7 @@ const tagClick = (row, num) => {
   tagChoose.value = num;
   cid
     .findFile({
-      scd_id: scdId.value - 0,
+      scd_id: route.query.id,
       ied_name: row.desc,
       pageno: 1,
       pagesize: 10,
@@ -229,14 +220,14 @@ const tagClick = (row, num) => {
       pageindex: 1,
       pagesize: 10,
       station_id: route.query.stationId,
-      scd_id: scdId.value - 0,
+      scd_id: route.query.id,
       is_checkin: 2,
       ied_name: row.ied_name,
     })
     .then((res) => {
       let fileInfo;
       if (res.data) {
-        fileInfo = res.data.filter((item) => item.scd_id == scdId.value);
+        fileInfo = res.data.filter((item) => item.scd_id == route.query.id);
         console.log("res", fileInfo);
         if (fileInfo.length > 0) {
           emit("treeBack", row, fileInfo[0]);
@@ -250,7 +241,7 @@ const tagClick = (row, num) => {
     });
 };
 const handleNodeClick = (e) => {
-  console.log(e, "eee");
+  emit("clickCode", e.itemcode);
 };
 onMounted(() => {
   reload();
@@ -280,6 +271,9 @@ h3 {
     margin: 16px 0 0 16px;
   }
 }
+.bigBoxUp{
+  height: calc(100vh - 230px) !important;
+}
 :deep(.el-tree) {
   --el-fill-color-blank: #f7f8fb;
 }

src/pages/netStructPicture/components/Gsix.vue

@@ -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>

src/pages/netStructPicture/components/SclUpdate.vue

@@ -19,6 +19,7 @@ const props = defineProps({
     default: () => {},
   },
 });
+const UPdate = ref('update');
 const newChicken = route.query.stationName;
 const OpensclTrue = ref(false);
 const emit = defineEmits(["doneScl"]);
@@ -31,7 +32,6 @@ watch(
     iedRelation.value = newValue;
   }
 );
-let nowScdId = ref(null); //路由传参的scdid
 //打开文件
 watch(
   () => props.openScl,
@@ -54,6 +54,7 @@ watch(
 );
 const cancelClick = () => {
   OpensclTrue.value = false;
+  clickCodeValue.value = '';
   emit("doneScl");
 };
 const clickList =ref(null)
@@ -61,8 +62,11 @@ const treeBack = (data, val) => {
   clickList.value = data;
   console.log('data====', data)
 };
+const clickCodeValue = ref(null);
+const clickCode = (code) =>{
+  clickCodeValue.value = code;
+}
 onMounted(() => {
-  nowScdId.value = route.query.id;
 });
 </script>
 
@@ -84,8 +88,9 @@ onMounted(() => {
       </template>
       <div class="right-main">
         <CidTree
-          :nowScdId="nowScdId"
+          :UPdate = "UPdate"
           @treeBack="treeBack"
+          @clickCode ="clickCode"
           :OpensclTrue="OpensclTrue"
           :iedRelation="iedRelation"
         ></CidTree>
@@ -109,6 +114,7 @@ onMounted(() => {
           :clickRowDatas="clickRowDatas"
           :iedRelation="iedRelation"
           :clickList="clickList"
+          :clickCodeValue="clickCodeValue"
           ></Gsix>
         </div>
       </div>