修改 装置关联关系和输出输入控制块连线样式，修改其他bug

src/main.js

@@ -14,6 +14,7 @@ import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
 //logicflow相关配置
 import LogicFlow from "@logicflow/core";
+import { preventReClick } from "@/utils/common.js";//防止用户频繁点击
 import { BpmnElement, Control, MiniMap,Menu,Snapshot,RectResize  } from '@logicflow/extension';
 // 左边工具栏以及编辑节点的样式
 // import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
@@ -26,6 +27,7 @@ app.use(ElementPlus, { locale: zhCn });//使element全局变为中文
 app._context.components.ElDialog.props.closeOnClickModal.default = false
 app.use(router)
 app.use(store);
+// app.use(preventReClick);
 LogicFlow.use(BpmnElement);
 LogicFlow.use(Control);
 LogicFlow.use(Menu);

src/pages/components/drawModal/LineDouble.vue

@@ -389,6 +389,7 @@ export default {
         //弹窗打开后使得线条在指定区域中
         function hiddenLine() {
             const elmWrapper = document.getElementById("wrapper");
+            if(!elmWrapper) return;
             // 移动 line
             document.body.querySelectorAll("body .leader-line").forEach((node) => {
                 elmWrapper.appendChild(node);

src/pages/netStructPicture/components/CidTree.vue

@@ -332,38 +332,38 @@ const tagClick = (row, num) => {
   })
   tagChoose.value = num;
   clickTage.value = row;
-  cid
-    .findFile({
-      scd_id: route.query.id,
-      ied_name: row.desc,
-      pageno: 1,
-      pagesize: 10,
-      station_id: route.query.stationId,
-    })
-    .then((res) => {});
-  scdCheck
-    .lookCheck({
-      pageindex: 1,
-      pagesize: 10,
-      station_id: route.query.stationId,
-      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 == route.query.id);
-        if (fileInfo.length > 0) {
-          emit("treeBack", row, fileInfo[0]);
-        }
-      }
+  // cid
+  //   .findFile({
+  //     scd_id: route.query.id,
+  //     ied_name: row.desc,
+  //     pageno: 1,
+  //     pagesize: 10,
+  //     station_id: route.query.stationId,
+  //   })
+  //   .then((res) => {});
+  // scdCheck
+  //   .lookCheck({
+  //     pageindex: 1,
+  //     pagesize: 10,
+  //     station_id: route.query.stationId,
+  //     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 == route.query.id);
+  //       if (fileInfo.length > 0) {
+  //         emit("treeBack", row, fileInfo[0]);
+  //       }
+  //     }
       //   let a = res.data.filter((item) => item.type_name == "CID");
       //   if (a.length > 0) {
       //     needName.value = a[0].file_name;
       //     emit("treeBack", needName.value, a[0].id);
       //   }
-    });
+    // });
   if (props.OpensclTrue) {
     codeStatic();
   }

src/pages/netStructPicture/components/ScdNow.vue

@@ -301,6 +301,7 @@ const lookDel = (comData) => {
 };
 const hiddenLine2 = () => {
   const elmWrapper = document.getElementById("wrapperscd");
+  if(!elmWrapper) return;
   // 移动 line
   document.body.querySelectorAll("body>.leader-line").forEach((node) => {
     elmWrapper.appendChild(node);
@@ -443,5 +444,6 @@ p {
 .no-data {
   text-align: center;
   margin-top: 40px;
+  color: #767676;
 }
 </style>

src/pages/netStructPicture/components/basicInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="treedom4" v-loading="loading">
+  <div id="treedom4" v-loading="loading" style="overflow: hidden">
     <div style="position: relative">
       <div class="nav" id="topLine">
         <div
@@ -467,6 +467,7 @@ const getMainList = async () => {
 //弹窗打开后使得线条在指定区域中
 const hiddenLine2 = () => {
   const elmWrapper = document.getElementById("wrappers");
+  if(!elmWrapper) return;
   // 移动 line
   document.body.querySelectorAll("body .leader-line").forEach((node) => {
     elmWrapper.appendChild(node);

src/pages/netStructPicture/components/inoutControl.vue

@@ -1,6 +1,7 @@
 <!-- 输入输出控制块 -->
 <template>
-  <div v-loading="loading" element-loading-text="加载数据中">
+  <!-- overflow: hidden  不加这个线条的结尾和开始位置不对 -->
+  <div v-loading="loading" element-loading-text="加载数据中" style="overflow: hidden">
     <!-- 关联图 -->
     <div
       v-if="tabValue == 'photo'"
@@ -670,6 +671,7 @@ const newPositionLine2 = (diffline) => {
 const hiddenLine2 = () => {
   if (props.isPhoto == "photo" && !circleOpen.value) {
     const elmWrapper = document.getElementById("wrapper");
+      if(!elmWrapper) return;
     // 移动 line
     document.body.querySelectorAll("body .leader-line").forEach((node) => {
       elmWrapper.appendChild(node);

src/pages/netStructPicture/components/inoutDialog.vue

@@ -243,6 +243,7 @@ const newPositionLine3 = (diffline) => {
 //弹窗打开后使得线条在指定区域中
 const hiddenLineDialog = () => {
   const elmWrapper = document.getElementById("dilogwrapper");
+  if(!elmWrapper) return;
   if (elmWrapper) {
     document.body.querySelectorAll("body>.leader-line").forEach((node) => {
       elmWrapper.appendChild(node);

src/pages/netStructPicture/components/netWork.vue

@@ -191,7 +191,7 @@ const getNetWork = async () => {
     name: "SubNetwork",
   });
   if (infoRes.code == 1) {
-    loading.value = false;
+    // loading.value = false;
     loadDating.value = false;
     return;
   }
@@ -199,7 +199,7 @@ const getNetWork = async () => {
   if (nodeInfoData.value != null) {
     getlist();
   }
-  loading.value = false;
+  // loading.value = false;
 };
 const allApData = ref({});
 const initLoad = async () => {
@@ -210,7 +210,7 @@ const initLoad = async () => {
     name: "ConnectedAP",
   });
   if (allAP.code == 1) {
-    loading.value = false;
+    // loading.value = false;
     return;
   }
   //处理数据，找个每个大类下的数组整合成对象加数组的形式parent_node_id.item.attr_ap_name:[]
@@ -489,6 +489,7 @@ const setinlineStyle = (data, dataCat) => {
       });
     }
   });
+  loading.value = false;
 };
 //线条的点击事件
 const clickLine = ref("");
@@ -553,6 +554,7 @@ const clickNetworkInfo = (value) => {
 const iedRelationData = ref([]);
 const iedRelation = async () => {
   const iedRes = await scdIedRelation({ scd_id: scdIdValue });
+  if(!iedRes) return;
   iedRelationData.value = iedRes.data;
 };
 //弹窗=============

src/pages/netStructPicture/components/relationShip.vue

@@ -1,6 +1,10 @@
 <!-- 装置关联关系 -->
 <template>
-  <div v-loading="loading" element-loading-text="加载数据中">
+  <div
+    v-loading="loading"
+    element-loading-text="加载数据中"
+    style="overflow: hidden"
+  >
     <div class="main-cont" ref="myElement" id="treedom">
       <div class="main-left" ref="leftElement">
         <div
@@ -53,7 +57,7 @@ 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 { useRoute } from "vue-router";
-import { clickImgEvent} from "@/utils/common.js";
+import { clickImgEvent } from "@/utils/common.js";
 const route = useRoute();
 const loading = ref(true);
 const props = defineProps({
@@ -118,14 +122,14 @@ const processArray = (arr) => {
 };
 //点击图片的时候筛选出数据
 const clickImg = async (dataItem) => {
-  loading.value =true;
-  listData.value =await clickImgEvent(props,dataItem,scdIdValue);
-  if(!listData.value||!listData.value.length) return  loading.value = false;
+  loading.value = true;
+  listData.value = await clickImgEvent(props, dataItem, scdIdValue);
+  if (!listData.value || !listData.value.length) return (loading.value = false);
 };
 watch(
   () => props.checkData,
   (newValue, oldV) => {
-    loading.value =true;
+    loading.value = true;
     listData.value = newValue;
     if (newValue && leaderLines.value.length > 0) {
       // leaderLines.value.forEach((line) => line.remove()); //清除连线
@@ -167,7 +171,7 @@ const clickResetLine = () => {
 // 将设备列表分成两份
 const bothSide = (data) => {
   const formatArr = processArray(data);
-  if (!formatArr&&formatArr.length) return;
+  if (!formatArr && formatArr.length) return;
   const arrlenght = formatArr.length;
   const long1 = Math.ceil(arrlenght / 2);
   leftList.value = formatArr.splice(0, long1);
@@ -207,7 +211,7 @@ const setLeaderline = () => {
     ...lineStyleRight1,
     startPlug: "arrow1",
     endPlug: "behind",
-  }
+  };
   const lineStyleRight2 = {
     ...lineStyle2,
     startSocket: "left",
@@ -272,35 +276,48 @@ const setLeaderline = () => {
     //  保存进数组，方便进行遍历删除
     leaderLines.value.push(line2);
   }
-  loading.value =false
+  loading.value = false;
   hiddenLine();
 };
 //设置中间盒子的所在位置
 const middleLinePosition = () => {
   setTimeout(() => {
     const heights = myElement.value.scrollHeight;
-    const leftListLength = leftList.value.length;
-    const rightListLength = rightList.value.length;
+    let leftListLength = leftList.value.length;
+    let rightListLength = rightList.value.length;
+    console.log("leftListLength", leftListLength, rightListLength);
     const setElementMarginTop = (element, value) => {
       element.value.style.marginTop = `${value}px`;
     };
-    if (leftList.value.length > 3 || rightList.value.length > 3) {
-      if(!middleElement.value) return;
-      middleElement.value.style.marginTop = `${(heights - 60) / 2}px`; // 设置元素的垂直位置
-    } else {
-      setElementMarginTop(leftElement, 0);
-      setElementMarginTop(rightElement, 0);
-      setElementMarginTop(middleElement, 150);
-    }
-    if (rightListLength == 1) {
-      setElementMarginTop(rightElement, 165);
-    }
-    if (leftListLength == 1) {
-      setElementMarginTop(leftElement, 165);
+    switch (`${rightListLength}${leftListLength}`) {
+      case "11":
+        setElementMarginTop(rightElement, 165);
+        setElementMarginTop(leftElement, 165);
+        setElementMarginTop(middleElement, 150);
+        break;
+      case "22":
+        setElementMarginTop(rightElement, 92);
+        setElementMarginTop(leftElement, 92);
+        setElementMarginTop(middleElement, 150);
+        break;
+      default:
+        if (!middleElement.value) return;
+        if (rightListLength <= 3 && leftListLength <= 3) {
+          setElementMarginTop(middleElement, 150);
+        }
+        if (leftListLength > 2 || rightListLength > 2) {
+          setElementMarginTop(rightElement, 0);
+          setElementMarginTop(leftElement, 0);
+          middleElement.value.style.marginTop = `${(heights - 60) / 2}px`; // 设置元素的垂直位置
+        }
+        break;
     }
+    const marginTopValues = { 1: 165, 2: 92, 3: 50 };
+    setElementMarginTop(rightElement, marginTopValues[rightListLength] || 0);
+    setElementMarginTop(leftElement, marginTopValues[leftListLength] || 0);
   }, 0);
 };
-let scdIdValue ='';
+let scdIdValue = "";
 onMounted(() => {
   if (props.delScdId) {
     scdIdValue = props.delScdId;
@@ -317,7 +334,7 @@ onMounted(() => {
 });
 //滚动时重定位线条
 const newPositionLine = () => {
-  if(!document.getElementById("treedom")) return;
+  if (!document.getElementById("treedom")) return;
   document.getElementById("treedom").addEventListener(
     "scroll",
     AnimEvent.add(() => {
@@ -346,6 +363,7 @@ const newPositionLine = () => {
 //弹窗打开后使得线条在指定区域中
 const hiddenLine = () => {
   const elmWrapper = document.getElementById("wrapper");
+  if (!elmWrapper) return;
   // 移动 line
   document.body.querySelectorAll("body .leader-line").forEach((node) => {
     elmWrapper.appendChild(node);

src/pages/netStructPicture/components/scdDialogIndex.vue

@@ -57,6 +57,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  iedRelationData:{
+    type: Object,
+    default: () => {},
+  }
 });
 const isOpen = ref(props.open);
 watch(
@@ -71,19 +75,13 @@ const cancelClick = () => {
   isOpen.value = false;
   emit("done", false);
 };
-const iedRelationData = ref([]);
 const checkDialogData = ref(null);
-const iedRelation = async () => {
-  const iedRes = await scdIedRelation({ scd_id: scdIdValue });
-  iedRelationData.value = iedRes.data;
-};
-onMounted(()=>{
-  iedRelation();
-})
+onMounted(() => {
+});
 
 const clickIed = (value) => {
   openBig.value = true;
-  Object.values(iedRelationData.value).find((item) => {
+  Object.values(props.iedRelationData).find((item) => {
     if (item.ied_name == value.ied_name) {
       checkDialogData.value = item;
     }

src/pages/netStructPicture/components/scdVisual.vue

@@ -65,13 +65,12 @@
           <el-select
             v-model="queryParams.iedrela"
             placeholder="请输入IED编码或名称"
-            multiple
-            filterable
-            remote
-            reserve-keyword
-            :remote-method="remoteMethod"
+            clearable
+            ref="selectRef"
+            v-if="showIedList"
             :loading="loadingsearch"
             @clear="showIedList = false"
+            @change="searchIedrela"
           >
             <template #header>
               <span class="search-header" v-if="searchIedList.length > 0">
@@ -82,10 +81,10 @@
               v-for="dict in searchIedList"
               :key="dict.node_id"
               :label="dict.desc"
-              :value="dict.node_id"
+              :value="dict"
             ></el-option>
           </el-select>
-          <!-- <el-input
+          <el-input
             ref="selectInputRef"
             v-model="queryParams.iedrela"
             placeholder="请输入IED编码或名称"
@@ -93,11 +92,11 @@
             clearable
             @change="searchInput"
             v-else
-          /> -->
+          />
         </el-form-item>
       </el-form>
     </div>
-    <el-scrollbar height="54vh" v-loading="loading" v-if="loadDating">
+    <el-scrollbar height="64vh" v-loading="loading" v-if="loadDating">
       <div
         v-for="(item, index) in voltageLevel"
         :key="index"
@@ -142,18 +141,19 @@
     @done="done"
     :dialogData="dialogData"
     :checkLabel="checkLabel"
+    :iedRelationData="iedRelationData"
   ></scd-dialog-index>
+  <!-- 快速搜索用的弹窗 -->
+  <dialog-index
+    :openBig="openBig"
+    @done="donesearch"
+    :checkDialogData="checkDialogData"
+    :iedRelationData="iedRelationData"
+  ></dialog-index>
 </template>
 <script setup>
-import {
-  getCurrentInstance,
-  onMounted,
-  reactive,
-  ref,
-  toRefs,
-  nextTick,
-  provide,
-} from "vue";
+import { onMounted, reactive, ref, toRefs, nextTick, provide } from "vue";
+import dialogIndex from "./dialogIndex.vue";
 import scdIed from "@/assets/image/instruct/scdIed.png";
 import {
   iedTypelist,
@@ -169,7 +169,30 @@ const userStoreCode = useDataStore();
 const route = useRoute();
 // const scdIdValue = 1248000337;
 const scdIdValue = route.query.id;
-const loadingsearch = ref(false); //快捷搜索
+//快捷搜索=====
+const loadingsearch = ref(false);
+const openBig = ref(false); //快捷搜索
+const iedRelationData = ref([]);
+const checkDialogData = ref(null);
+const iedRelation = async () => {
+  const iedRes = await scdIedRelation({ scd_id: scdIdValue });
+  if (!iedRes.data) return;
+  iedRelationData.value = iedRes.data;
+};
+const donesearch = (emits) => {
+  openBig.value = emits;
+  checkDialogData.value = null;
+};
+const searchIedrela = (value) => {
+  if (!value) return;
+  openBig.value = true;
+  Object.values(iedRelationData.value).find((item) => {
+    if (item.ied_name == value.ied_name) {
+      checkDialogData.value = item;
+    }
+  });
+};
+//快捷搜索=====
 const data = reactive({
   queryParams: {
     scd_id: scdIdValue,
@@ -188,9 +211,6 @@ const reset = () => {
     device_type_id: null, //装置类型
   };
 };
-const remoteMethod = (value) => {
-  searchInput(value);
-};
 const areaData = ref([]); //获取间隔
 const allLevel = ref([]); // 获取所有电压
 const all = [{ name: "全部", id: "alls" }];
@@ -239,6 +259,7 @@ const getArea = async () => {
 const iedTypeData = ref([]);
 const getTypelist = async () => {
   const typeRes = await iedTypelist({ scd_id: scdIdValue });
+  if (!typeRes) return;
   iedTypeData.value = typeRes.data ? [...allIedType, ...typeRes.data] : [];
 };
 const iedName = ref([]);
@@ -263,9 +284,9 @@ const searchInput = (value) => {
       });
 
       // 选择框自动展开
-      // nextTick(() => {
-      //   selectRef.value.toggleMenu();
-      // });
+      nextTick(() => {
+        selectRef.value.toggleMenu();
+      });
     } else {
       showIedList.value = false;
       searchIedList.value = [];
@@ -324,6 +345,7 @@ onMounted(async () => {
   allLevel.value = await userStoreCode.GlobalCodes();
   getArea();
   getTypelist();
+  iedRelation();
 });
 </script>
 <style scoped lang="scss">

src/pages/netStructPicture/components/virtualRelation.vue

@@ -1,6 +1,6 @@
 <!-- 虚端子关系 -->
 <template>
-  <div v-loading="loading" element-loading-text="加载数据中">
+  <div v-loading="loading" element-loading-text="加载数据中" style="overflow: hidden">
     <!-- 关联图 -->
     <div class="main-cont" id="treedom3">
       <div class="main-left">
@@ -333,6 +333,7 @@ const newPositionLine = () => {
 //弹窗打开后使得线条在指定区域中
 const hiddenLine = () => {
   const elmWrapper = document.getElementById("wrapper");
+  if(!elmWrapper) return;
   // 移动 line
   document.body.querySelectorAll("body .leader-line").forEach((node) => {
     elmWrapper.appendChild(node);

src/pages/netStructPicture/components/virtualnformation.vue

@@ -437,6 +437,7 @@ const newPositionLine = () => {
 //弹窗打开后使得线条在指定区域中
 const hiddenLine = () => {
   const elmWrapper = document.getElementById("wrapper");
+  if(!elmWrapper) return;
   // 移动 line
   document.body.querySelectorAll("body .leader-line").forEach((node) => {
     elmWrapper.appendChild(node);

src/pages/netStructPicture/index.vue

@@ -29,7 +29,12 @@
     </el-tabs>
     <div>
       <!-- CID一致性校核========= -->
-      <div class="disappear" v-if="activeNav == 0" v-loading="isCidLoading">
+      <div
+        class="disappear"
+        v-if="activeNav == 0"
+        v-loading="isCidLoading"
+        element-loading-text="数据加载中，请耐心等待..."
+      >
         <!-- 左侧树形数据 -->
         <div style="width: 15%">
           <CidTree
@@ -168,7 +173,7 @@ import systemRow from "@/api/systemRow";
 import scdCheck from "@/api/scdCheck/scdCheck";
 let route = useRoute();
 const isCid = ref(true); //判断是否是CID界面
-const isCidLoading = ref(false);//判断是否正在解析CID文件
+const isCidLoading = ref(false); //判断是否正在解析CID文件
 const activeName = ref("first"); //默认展示网络结构图
 const navtopData = ref([
   { name: "CID一致性校核", code: "CID" },
@@ -232,6 +237,7 @@ const closeX = () => {
 };
 const allCidStart = ref([]);
 const nowUpload = (file, e) => {
+  console.log('files====', file)
   upFile.value = file.file;
   upName.value = file.file.name;
   clickCodeInfoCid.value = [];
@@ -294,11 +300,11 @@ const nowUpload = (file, e) => {
           isCidLoading.value = false;
         }
       });
-  });
+  }).catch(err=>{});
 };
 
 const handleRemove = (file, e) => {};
-const fileSuccess = (file, e) => {
+const fileSuccess = (files, e) => {
   mustVal.value = true;
 };
 function scdTreeBack(data) {

src/pages/netStructPicture/newTitle/SlcCheck.vue

@@ -515,7 +515,7 @@ em {
 }
 
 .treeBox {
-  width: 16%;
+  width: 20%;
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
@@ -528,7 +528,7 @@ em {
 }
 
 .tableBox {
-  width: 80%;
+  width: 76%;
   height: 100%;
   background: #f7f8fb;
   border-radius: 3px;
@@ -636,7 +636,11 @@ em {
     vertical-align: middle;
   }
 }
-
+::v-deep(.el-tree-node) {
+  word-wrap: break-word;
+  white-space:wrap !important;
+  padding:5px 0;
+}
 // ::v-deep(.tree) {
 //   & > .el-tree-node:after {
 //     border-top: none;
@@ -835,6 +839,7 @@ em {
   align-items: center;
   margin: 16px;
   margin-bottom: 0;
+  font-size: 14px;
 
   img {
     width: 20px;

src/utils/common.js

@@ -49,4 +49,18 @@ export async function clickImgEvent(props,dataItem,scdIdValue){
       false
     );
   };
-  
+  export function preventReClick (Vue){
+      // 防止重复点击
+      Vue.directive('preventReClick', {
+        inserted (el, binding) {
+          el.addEventListener('click', () => { 
+            if (!el.disabled) { 
+              el.disabled = true
+              setTimeout(() => {
+                el.disabled = false
+              },binding.value || 1000)
+            }
+          })
+        }
+      })
+  }

src/utils/linesPosition.js

@@ -1,6 +1,7 @@
 
 export function  hiddenLine2(){
     const elmWrapper = document.getElementById("wrapper");
+    if(!elmWrapper) return;
     // 移动 line
     document.body.querySelectorAll("body>.leader-line").forEach((node) => {
       elmWrapper.appendChild(node);
@@ -14,6 +15,7 @@ export function  hiddenLine2(){
   }
   export function hiddenLineDialog() {
     const elmWrapper = document.getElementById("dilogwrapper");
+    if(!elmWrapper) return;
     if (elmWrapper) {
       document.body.querySelectorAll("body>.leader-line").forEach((node) => {
         elmWrapper.appendChild(node);