虚回路信息的部分内容，未写完

src/pages/netStructPicture/components/CidTree.vue

@@ -65,7 +65,7 @@ const props = defineProps({
     default: "",
   },
 });
-const emit = defineEmits(["treeBack", "clickCode"]);
+const emit = defineEmits(["treeBack", "clickCode","treeBackDefalut"]);
 let tagList = ref(props.iedRelation);
 let tagChoose = ref('');
 let treeData = ref([

src/pages/netStructPicture/components/Gsix.vue

@@ -686,6 +686,7 @@ watch(
 );
 //连线===
 onMounted(() => {
+  CodeImg(props.clickCodeValue);
   if (props.iedRelation) {
     tagList.value = Object.values(props.iedRelation)[0];
   }

src/pages/netStructPicture/components/ScdNow.vue

@@ -251,6 +251,7 @@ const lookAddOrDel = async (comData, del) => {
   checkDialogData.value = null;
   scdView.value = true;
   const iedDetail = {};
+  console.log('comData', comData)
   for (let k = 0; k < comData.length; k++) {
     let item = comData[k];
     const key = item.ied_name;
@@ -261,8 +262,10 @@ const lookAddOrDel = async (comData, del) => {
   // 对键进行排序按a,b,c===
   keys.sort();
   for (let key of keys) {
-    iedRelationData.value[key] = iedDetail[key];
+    // iedRelationData.value[key] = iedDetail[key];
+      // iedRelationData.value[key] = {...iedRelationData.value[key], ...iedDetail[key]};
   }
+  console.log('iedRelationData.value', iedRelationData.value)
   if (del == "del" && clickRowData.value.target_id) {
     delScdId.value = clickRowData.value.target_id;
   } else if (del == "add") {
@@ -283,7 +286,7 @@ const lookAddOrDel = async (comData, del) => {
   }
 };
 const lookAdd = async (comData) => {
-  lookAddOrDel(comData, "add");
+  console.log('comData=====', comData)
   // lookType.value = 1;
   // emit("nowBack", lookType.value);
 };

src/pages/netStructPicture/components/SclUpdate.vue

@@ -3,7 +3,7 @@
 import { ref, defineEmits, watch, onMounted } from "vue";
 import CidTree from "./CidTree.vue";
 import Gsix from "./Gsix.vue";
-import virtualRelation from "./virtualRelation.vue"; //虚端
+import virtualnformation from "./virtualnformation.vue"; //虚端
 import { useRoute } from "vue-router";
 let route = useRoute();
 const props = defineProps({
@@ -21,7 +21,7 @@ const props = defineProps({
   },
   checkDialogData: {
     type: Object,
-    default: () => { },
+    default: () => {},
   },
 });
 const UPdate = ref("update");
@@ -35,6 +35,8 @@ watch(
   (newValue) => {
     console.log("iedRelationscllll", newValue);
     iedRelation.value = newValue;
+    //如果没有点击装置列表直接点击了code的默认装置第一个装置列表的数据
+    clickList.value = Object.values(props.iedRelationData)[0];
   }
 );
 //打开文件
@@ -57,11 +59,11 @@ watch(
     }
   }
 );
-const checkData = ref(null);
+const checkData = ref(props.checkDialogData);
 watch(
   () => props.checkDialogData,
-  (newValue) => {
-    console.log('props.checkDialogData',newValue)
+  (newValue, oldValue) => {
+    console.log("props.checkDialogData", newValue, oldValue);
     checkData.value = newValue;
   }
 );
@@ -75,10 +77,9 @@ const treeBack = (data, val) => {
   clickList.value = data;
   console.log("data====", data);
 };
-const treeBackDefalut = (data) =>{
+const treeBackDefalut = (data) => {
   // clickList.value = data;
-  console.log("data====", data);
-}
+};
 const clickCodeValue = ref(null);
 const clickCode = (code) => {
   clickCodeValue.value = code;
@@ -86,7 +87,7 @@ const clickCode = (code) => {
 const result = (newData) => {
   checkData.value = newData;
 };
-const virtualScd = ref(true);//是scd对比的虚回路信息
+const virtualScd = ref(true); //是scd对比的虚回路信息
 onMounted(() => {});
 </script>
 
@@ -131,27 +132,31 @@ onMounted(() => {});
               >
             </div>
           </div>
-            <Gsix
+          <Gsix
             v-if="clickCodeValue != 'scd.ied.Relation'"
-              :clickRowDatas="clickRowDatas"
-              :iedRelation="iedRelation"
-              :clickList="clickList"
-              :clickCodeValue="clickCodeValue"
-            ></Gsix>
-            <!-- 
+            :clickRowDatas="clickRowDatas"
+            :iedRelation="iedRelation"
+            :clickList="clickList"
+            :clickCodeValue="clickCodeValue"
+          ></Gsix>
+          <!-- 
               :isOpen="isOpen"
               @result = "result"
               -->
-            <virtual-relation
+          <div
             v-else-if="clickCodeValue == 'scd.ied.Relation'"
-            :virtualScd="virtualScd"
-            :clickRowDatas="clickRowDatas"
-            :clickList="clickList"
-            :clickCodeValue="'scd.ied.Relation'"
-            :iedRelation="iedRelation"
-            :checkData="checkData"
-            @result="result"
-            ></virtual-relation>
+            style="height: 67vh; overflow-y: auto"
+          >
+            <virtualnformation
+              :virtualScd="virtualScd"
+              :clickRowDatas="clickRowDatas"
+              :clickList="clickList"
+              :clickCodeValue="clickCodeValue"
+              :checkData="checkData"
+              :OpensclTrue="OpensclTrue"
+              @result="result"
+            ></virtualnformation>
+          </div>
         </div>
       </div>
     </el-dialog>
@@ -173,6 +178,7 @@ onMounted(() => {});
   .right-title {
     width: 85%;
     margin: 20px 0 0 16px;
+
     background: #f7f8fb;
   }
   .abBox {

src/pages/netStructPicture/components/virtualRelation.vue

@@ -104,15 +104,9 @@ import devicePng from "@/assets/image/instruct/device.png";
 import LeaderLine from "../../../../public/leader-line.min.js";
 import AnimEvent from "../../../../public/anim-event.min.js";
 import {
-  //send发送
-  iednetworkInfo,
-  iedSVSendCtrlblock,
-  gooseSendctrlblock,
   //虚短子关系
   getMiddleinputs,
 } from "@/api/iedNetwork";
-import { compResult } from "@/api/scdCheck/scdCheck2";
-import jsPlumb from "jsplumb";
 import { useRoute } from "vue-router";
 const route = useRoute();
 const props = defineProps({
@@ -131,24 +125,7 @@ const props = defineProps({
   delScdId: {
     type: String,
     default: "",
-  },
-  //对比结果scd所传参数
-  virtualScd: {
-    type: Boolean,
-    default: false,
-  },
-  clickRowDatas: {
-    type: Object,
-    default: () => {},
-  },
-  clickList: {
-    type: Object,
-    default: () => {},
-  },
-  clickCodeValue: {
-    type: String,
-    default: "",
-  },
+  }
 });
 const svInfo = ref(null);
 //处理两边的数据
@@ -196,56 +173,15 @@ const setdomRightChild3 = (el, item) => {
     domListRightChild3.value.set(item, el);
   }
 };
-const clickRow = ref(props.clickRowDatas);
+
 let tagList = ref(null); //左侧更改的设备列表
-//scd一致性对比===
-//对比文件：头部对比的单个数据
-watch(
-  () => props.clickRowDatas,
-  (newValue) => {
-    if (newValue) {
-      clickRow.value = newValue;
-    }
-  }
-);
-//点击装置列表的数据变化
-watch(
-  () => props.clickList,
-  (newValue) => {
-    if (newValue) {
-      tagList.value = newValue;
-    }
-  }
-);
-const cClickCode = ref(props.clickCodeValue); //点击侧边栏差异项的code
-watch(
-  () => props.clickCodeValue,
-  (newValue) => {
-    if (newValue) {
-      cClickCode.value = newValue;
-    }
-  }
-);
-//scd一致性对比====
 //得到中间的子版块数据
 const getNetworkInfo3 = async () => {
   let svResInfo;
-  if (!props.virtualScd) {
     svResInfo = await getMiddleinputs({
       scd_id: scdIdValue,
       ied_name: props.checkData.ied_name,
     });
-  } else {
-    //scd一致性对比====
-    const ids = clickRow.value ? clickRow.value.id : "";
-    const names = tagList.value ? tagList.value.ied_name : "";
-    svResInfo = await compResult({
-      comp_id: ids,
-      ied_name: names,
-      comptype: "u",
-      itemcode: cClickCode.value,
-    });
-  }
   const data = {
     attr_ld_inst: "",
     attr_ln_class: "",
@@ -435,7 +371,7 @@ onMounted(() => {
   } else {
     scdIdValue = route.query.id;
   }
-  console.log("props.checkData", props.checkData);
+
   if (props.checkData != null) {
     getNetworkInfo3();
   }

src/pages/netStructPicture/components/virtualnformation.vue

@@ -0,0 +1,588 @@
+<!-- 虚端子关系 -->
+<template>
+  <div class="main">
+    <!-- 关联图 -->
+    <div class="main-cont" id="treedom3">
+      <div class="main-left">
+        <div
+          v-for="(item, index) in leftList"
+          :key="index"
+          class="conts"
+          @click="clickImg(item)"
+        >
+          <div class="cont-title">
+            <img :src="devicePng" alt="" class="img-item" />
+            <div class="cont-item">
+              <div>{{ item.ref_ied_desc }}</div>
+              <div>{{ item.ref_ied_name }}</div>
+            </div>
+          </div>
+          <div
+            v-for="(cItem, index2) in item.titleItems"
+            :key="index2"
+            :ref="(el) => setdomLeftChild3(el, cItem)"
+          >
+            <div class="text-midle">
+              <div>
+                {{
+                  `${cItem.attr_ld_inst}/${cItem.attr_prefix}${cItem.attr_ln_class}.${cItem.attr_do_name}.${cItem.attr_da_name}`
+                }}
+              </div>
+              <div>{{ cItem.do_source_desc }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 中间部分 -->
+      <div class="main-middle" ref="middleHeight" id="end">
+        <div class="cont-title">
+          <img :src="devicePng" alt="" class="img-item" />
+          <div class="middle-title" v-if="tagList">
+            <div>{{ tagList.desc }}</div>
+            <div>{{tagList.ied_name}}</div>
+          </div>
+        </div>
+        <div class="middle-item">
+          <div
+            class="midle-cont"
+            v-for="(item, index) in svInfo"
+            :key="index"
+            :ref="(el) => setdomMiddle3(el, item)"
+          >
+            <div
+              style="margin: 0 4px"
+              v-if="!item.isDecollate"
+              :class="{
+                'del-middle': item.opt == 'd',
+                'upt-middle': item.opt == 'u',
+              }"
+            >
+              {{ item.no }}
+            </div>
+            <div
+              class="midlestyle"
+              v-if="!item.isDecollate"
+              :class="{
+                'add-middle': item.opt == 'i',
+                'del-middle': item.opt == 'd',
+                'upt-middle': item.opt == 'u',
+              }"
+            >
+              <div class="middle-cont">
+                <div v-if="item.inout_type == 'out'">
+                  <span v-if="item.attr_da_name">
+                    {{
+                      `${item.attr_ld_inst}/${item.attr_prefix}${item.attr_ln_class}${item.attr_ln_inst}.${item.attr_do_name}.${item.attr_da_name}`
+                    }}
+                  </span>
+                  <span v-else>
+                    {{
+                      `${item.attr_ld_inst}/${item.attr_prefix}${item.attr_ln_class}${item.attr_ln_inst}.${item.attr_do_name}`
+                    }}
+                  </span>
+                </div>
+                <div v-else-if="item.inout_type == 'in'">
+                  {{ item.attr_int_addr }}
+                </div>
+                <div v-if="item.inout_type == 'out'">
+                  {{ item.do_source_desc }}
+                </div>
+                <div v-else-if="item.inout_type == 'in'">
+                  {{ item.do_target_desc }}
+                </div>
+              </div>
+              <div style="flex: 1">
+                <img
+                  :src="addMiddlePng"
+                  alt=""
+                  class="img-item-middle"
+                  v-if="item.opt == 'i'"
+                />
+                <img
+                  :src="delMiddlePng"
+                  alt=""
+                  class="img-item-middle"
+                  v-else-if="item.opt == 'd'"
+                />
+                <img
+                  :src="uptMiddlePng"
+                  alt=""
+                  class="img-item-middle"
+                  v-else-if="item.opt == 'u'"
+                />
+              </div>
+            </div>
+            <!-- 省略号 -->
+            <div class="midlestyle omit" v-if="item.isDecollate">
+              {{ item.do_source_desc }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 右侧 -->
+      <div class="main-right">
+        <div
+          v-for="(item, index) in rightList"
+          :key="index"
+          class="conts"
+          @click="clickImg(item)"
+        >
+          <div class="cont-title">
+            <img :src="devicePng" alt="" class="img-item" />
+            <div class="cont-item">
+              <div>{{ item.ref_ied_desc }}</div>
+              <div>{{ item.ref_ied_name }}</div>
+            </div>
+          </div>
+          <div
+            v-for="(cItem, index2) in item.titleItems"
+            :key="index2"
+            :ref="(el) => setdomRightChild3(el, cItem)"
+          >
+            <div class="text-midle">
+              <div>{{ `${cItem.attr_int_addr}` }}</div>
+              <div>{{ cItem.do_target_desc }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="wrapper"></div>
+    </div>
+  </div>
+</template>
+  <script setup>
+import { onMounted, watch, ref, nextTick, defineEmits, inject } from "vue";
+import devicePng from "@/assets/image/instruct/device.png";
+import addMiddlePng from "@/assets/image/CID/add_middle.png";
+import delMiddlePng from "@/assets/image/CID/del_middle.png";
+import uptMiddlePng from "@/assets/image/CID/upt_middle.png";
+import LeaderLine from "../../../../public/leader-line.min.js";
+import AnimEvent from "../../../../public/anim-event.min.js";
+import { compResult } from "@/api/scdCheck/scdCheck2";
+import { scdIedRelation } from "@/api/iedNetwork";
+import { useRoute } from "vue-router";
+const route = useRoute();
+const props = defineProps({
+  //对比结果scd所传参数
+  clickRowDatas: {
+    type: Object,
+    default: () => {},
+  },
+  clickList: {
+    type: Object,
+    default: () => {},
+  },
+  clickCodeValue: {
+    type: String,
+    default: "",
+  },
+  OpensclTrue: {
+    type: Boolean,
+    default: false,
+  },
+});
+const svInfo = ref(null);
+//处理两边的数据
+const processBoth = (list, svResInfo, inoutType) => {
+  list.forEach((item, index) => {
+    item.titleItems = [];
+    svResInfo.data.forEach((key) => {
+      if (key.ied_name == item.ref_ied_name) {
+        if (
+          (item.titleItems.length < 1 && key.inout_type == inoutType) ||
+          (!item.titleItems.some(
+            (titleKey) => titleKey.ref_ied_name == key.ied_name
+          ) &&
+            key.inout_type === inoutType)
+        ) {
+          item.titleItems.push(key);
+        }
+      }
+    });
+  });
+  console.log('list=========', list)
+};
+let leaderLines3 = ref([]); //控制线条显示
+const leftList = ref([]);
+const rightList = ref([]);
+const domListMiddle3 = ref(new Map()); //获取中间所有的ref
+const domListRightChild3 = ref(new Map()); //获取右侧所有子的ref
+const domListLeftChild3 = ref(new Map()); //获取中间所有子的ref
+const listData3 = ref(null); //线条左右两侧的数据
+const emit = defineEmits(["result"]); //如果不加这个再次点击左侧会没有反应
+const setdomMiddle3 = (el, item) => {
+  // 中间dom
+  if (el) {
+    domListMiddle3.value.set(item, el);
+  }
+};
+//左侧子Dom
+const setdomLeftChild3 = (el, item) => {
+  if (el) {
+    domListLeftChild3.value.set(item, el);
+  }
+};
+//右侧子Dom
+const setdomRightChild3 = (el, item) => {
+  if (el) {
+    domListRightChild3.value.set(item, el);
+  }
+};
+
+let tagList = ref(props.clickList); //左侧更改的设备列表
+// //scd一致性对比===
+const clickRow = ref(props.clickRowDatas);
+// //对比文件：头部对比的单个数据
+watch(
+  () => props.clickRowDatas,
+  (newValue) => {
+    if (newValue) {
+      clickRow.value = newValue;
+    }
+  }
+);
+//点击装置列表的数据变化
+watch(
+  () => props.clickList,
+  (newValue) => {
+    if (newValue) {
+      tagList.value = newValue;
+      getNetworkInfo3();
+    }
+  }
+);
+const cClickCode = ref(props.clickCodeValue); //点击侧边栏差异项的code
+watch(
+  () => props.clickCodeValue,
+  (newValue) => {
+    if (newValue) {
+      console.log("newValue========", newValue);
+      cClickCode.value = newValue;
+      getNetworkInfo3();
+    }
+  }
+);
+// //scd一致性对比====
+//得到中间的子版块数据
+const getNetworkInfo3 = async () => {
+  let svResInfo;
+  //scd一致性对比====
+  const ids = clickRow.value ? clickRow.value.id : "";
+  const names = tagList.value ? tagList.value.ied_name : "";
+  svResInfo = await compResult({
+    comp_id: ids,
+    ied_name: names,
+    comptype: "u",
+    itemcode: cClickCode.value,
+  });
+  //   const iedRes = await scdIedRelation({
+  //       scd_id: scdIdValue,
+  //       ied_name: names,
+  //       reset: 1,
+  //     });
+  //省略号===
+  const data = {
+    attr_ld_inst: "",
+    attr_ln_class: "",
+    attr_ln_inst: "",
+    attr_do_name: "",
+    attr_da_name: "",
+    do_source_desc: "...",
+    no: "",
+    isDecollate: true,
+  };
+//省略号===
+  svResInfo.data.sort(function (a, b) {
+    return a.no - b.no; // 从小到大排序
+  });
+  //处理两边的数据
+  if (svResInfo.data.length > 0) {
+    processBoth(leftList.value, svResInfo, "in");
+    processBoth(rightList.value, svResInfo, "out");
+  }
+  //处理中间的数据有省略号的
+  let newData = [];
+  for (let i = 0; i < svResInfo.data.length; i++) {
+    newData.push(svResInfo.data[i]);
+    if (
+      i < svResInfo.data.length - 1 &&
+      svResInfo.data[i].ied_name != svResInfo.data[i + 1].ied_name
+    ) {
+      newData.push(data);
+    }
+  }
+
+  svInfo.value = newData;
+};
+//点击后重置数据和线条
+const clickResetLine3 = () => {
+  domListMiddle3.value.clear();
+  domListLeftChild3.value.clear();
+  domListRightChild3.value.clear();
+  leaderLines3.value = [];
+  removeLine3();
+  setLine();
+};
+const setLeaderline = () => {
+  //左侧子组件
+  for (let [key, value] of domListMiddle3.value) {
+    for (const [key2, value2] of domListLeftChild3.value) {
+      const endDom = value2;
+      if (key.node_id == key2.node_id) {
+        const line = new LeaderLine(endDom, value, {
+          color: "#7484AB",
+          size: 2,
+          path: "straight",
+          startSocket: "right",
+          endSocket: "left",
+          y: 50,
+          startPlug: "disc",
+          endPlug: "arrow1",
+        });
+        leaderLines3.value.push(line);
+      }
+    }
+  }
+  for (let [key, value] of domListMiddle3.value) {
+    //右侧子组件
+    for (const [key2, value2] of domListRightChild3.value) {
+      const endDom = value2;
+      if (key.node_id == key2.node_id) {
+        const line2 = new LeaderLine(value, endDom, {
+          color: "#7484AB",
+          size: 2,
+          path: "straight",
+          startSocket: "right",
+          endSocket: "left",
+          startPlug: "disc",
+          endPlug: "arrow1",
+        });
+        leaderLines3.value.push(line2);
+      }
+    }
+  }
+  hiddenLine();
+};
+//滚动时重定位线条
+const newPositionLine = () => {
+  document.getElementById("treedom3").addEventListener(
+    "scroll",
+    AnimEvent.add(() => {
+      leaderLines3.value.forEach((line) => {
+        if (line) {
+          hiddenLine();
+          line.position();
+          line.positionByWindowResize = false;
+        }
+      });
+      //中间展示图片的
+    }),
+    false
+  );
+  document.getElementById("treedom3").addEventListener(
+    "resize",
+    AnimEvent.add(function () {
+      diffline.forEach((line) => {
+        hiddenLine();
+        line.position();
+        line.positionByWindowResize = false;
+      });
+    }),
+    false
+  );
+};
+//弹窗打开后使得线条在指定区域中
+const hiddenLine = () => {
+  const elmWrapper = document.getElementById("wrapper");
+  // 移动 line
+  document.body.querySelectorAll("body .leader-line").forEach((node) => {
+    elmWrapper.appendChild(node);
+  });
+  elmWrapper.style.transform = "none";
+  var rectWrapper = elmWrapper.getBoundingClientRect();
+  // Move to the origin of coordinates as the document
+  elmWrapper.style.transform = `translate(${
+    (rectWrapper.left + window.scrollY) * -1
+  }px, ${(rectWrapper.top + window.scrollX) * -1}px)`;
+};
+const setLine = () => {
+  setTimeout(() => {
+    setLeaderline();
+    newPositionLine();
+  }, 500);
+};
+
+const removeLine3 = () => {
+  leaderLines3.value = [];
+  const elmWrapper = document.getElementById("wrapper");
+  if (elmWrapper) {
+    document.body.querySelectorAll("#wrapper .leader-line").forEach((node) => {
+      elmWrapper.removeChild(node);
+    });
+  }
+};
+let scdIdValue = "";
+onMounted(() => {
+  scdIdValue = route.query.id;
+  getNetworkInfo3();
+  //不加条件切换下方tab时会出现bug
+  nextTick(() => {
+    setLine();
+  });
+});
+watch(
+  () => props.OpensclTrue,
+  (newValue) => {
+    if (newValue) {
+      domListMiddle3.value.clear();
+      domListLeftChild3.value.clear();
+      domListRightChild3.value.clear();
+      leaderLines3.value = [];
+    }
+    nextTick(() => {
+      removeLine3();
+    });
+  }
+);
+</script>
+  <style lang="scss" scoped>
+@mixin img-size {
+  width: 48px;
+  height: 48px;
+}
+@mixin left-and-right {
+  display: flex;
+  flex-direction: column;
+}
+.main-cont {
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 60px;
+  overflow-y: auto;
+}
+
+.leader-line {
+  z-index: 3000;
+}
+.main-left {
+  display: flex;
+  @include left-and-right;
+}
+.main-middle {
+  box-sizing: border-box;
+  border: 2px dashed #98a8ff;
+  background: #edf3ff;
+  margin: 0 60px;
+  img {
+    @include img-size;
+  }
+  .middle-item {
+    @include left-and-right;
+    align-items: center;
+    cursor: pointer;
+  }
+  .cont-title {
+    display: flex;
+    align-items: center;
+    margin: 12px 14px 5px 14px;
+    border-bottom: 1px solid #a3ade0;
+  }
+  .middle-title {
+    color: #ffcb11;
+    margin-left: 8px;
+  }
+}
+.main-right {
+  display: flex;
+  @include left-and-right;
+  .img-item {
+    @include img-size;
+  }
+}
+
+.conts {
+  @include left-and-right;
+  margin-bottom: 24px;
+  border: 2px dashed #98a8ff;
+  cursor: pointer;
+  background: #f7f8fb;
+  padding: 12px;
+  .cont-title {
+    display: flex;
+    align-items: center;
+    margin: 12px 14px 5px 14px;
+    padding: 12px;
+    border-bottom: 1px solid #a3ade0;
+  }
+  .cont-item {
+    color: #1a2447;
+    margin-left: 6px;
+    vertical-align: middle;
+  }
+  .ied-desc {
+    color: #255ce7;
+  }
+  .ied-desc-title {
+    color: #134bea;
+  }
+
+  .ied-desc-child-title {
+    color: #5182ff;
+    margin-left: 14px;
+    display: block;
+  }
+}
+.midle-cont {
+  display: flex;
+  border: 1px solid #7484ab;
+  align-items: center;
+  width: 94%;
+  margin-bottom: 8px;
+  color: #1a2447;
+}
+.ied-desc-child,
+.midlestyle {
+  @include left-and-right;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: 2px;
+  padding: 5px;
+  color: #1a2447;
+  flex: 1;
+  .img-item-middle {
+    width: 22px;
+    height: 22px;
+  }
+  .middle-cont {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 90%;
+  }
+}
+.del-middle {
+  color: #e50505;
+}
+.upt-middle {
+  color: #ffa011;
+}
+.omit {
+  font-weight: bold;
+  letter-spacing: 8px;
+  font-size: 15px;
+}
+#wrapper {
+  width: 0;
+  height: 0;
+  position: relative; /* Origin of coordinates for lines, and scrolled content (i.e. not `absolute`) */
+}
+.text-midle {
+  text-align: center;
+  width: 94%;
+  border: 1px solid #7484ab;
+  margin-bottom: 8px;
+  border-radius: 2px;
+  padding: 5px;
+}
+</style>

src/pages/netStructPicture/index.vue

@@ -151,7 +151,7 @@ import { ref, watch, onMounted } from "vue";
 import netWork from "./components/netWork";
 import scdVisual from "./components/scdVisual";
 import CidTree from "./components/CidTree.vue";
-import Gsix from "./components/gsix2.vue";
+import Gsix from "./components/Gsix.vue";
 import scdTree from "./components/scdTree.vue";
 import scdMap from "./components/scdMap.vue";
 import CrcCheck from "./newTitle/CrcCheck";