优化端子关联关系配置

src/pages/components/drawModal/LineDouble.vue

@@ -9,7 +9,7 @@
                     margin: 25px auto;
                     padding-bottom: 10px;
                     ">{{ startTxt }}</h1>
-                    <div style="height: calc(100vh - 520px);">
+                    <div style="height: auto;">
                         <div style="margin-bottom: 10px;" v-for="(item, index) in curList" @click="setIndex(item, index)">
                             <span :class="index == leftIndex ? 'result' : 'anther'">{{ index + 1 }}</span>
                             <span :class="index == leftIndex ? 'results' : 'anthers'" :id="item.id">{{ item.fcda_name
@@ -28,7 +28,7 @@
                     margin: 25px auto;
                     padding-bottom: 10px;
                     ">{{ endTxt }}</h1>
-                    <div style="height: calc(100vh - 520px);">
+                    <div style="height: auto;">
                         <!-- <div v-for="(item, index) in outList" :id="item.id">
                             <el-checkbox-group v-model="checkList" @change="checkChange">
                                 <el-checkbox :label="item.id" :key="item.id">
@@ -36,10 +36,11 @@
                                 </el-checkbox>
                             </el-checkbox-group>
                         </div> -->
-                        <div v-for="(item, index) in outList" :id="item.id">
-                            <el-radio-group v-model="checkList" @change="checkChange">
+                        <div style="margin-bottom: 10px;" v-for="(item, index) in outList" :id="item.id" class="anthers">
+                            <el-radio-group v-if="item.from_ied_type==''" v-model="checkList" @change="checkChange">
                                 <el-radio :label="item.id" :key="item.id"> {{ item.fcda_name }}</el-radio>
                             </el-radio-group>
+                            <span v-else >{{ item.fcda_name }}</span>
                         </div>
                     </div>
                 </div>
@@ -149,7 +150,17 @@ export default {
                 in_or_out: "输出"
             }).then(res => {
                 if (res.code == 0) {
-                    curList.value = res.data
+                    let tmpList=[];
+                    //对结果进行重排排序：将已关联到输出装置的端子排在前面
+                    res.data.forEach((item, index) => {
+                        if(item.to_ied_type==ends.value.ied_type){
+                            tmpList.unshift(item)
+                        }else{
+                            //未关联的端子按原结果顺序排列
+                            tmpList.push(item)
+                        }
+                    })
+                    curList.value = tmpList
                 } else {
                     ElMessage({
                         message: res.msg,
@@ -164,7 +175,17 @@ export default {
                 in_or_out: "接收"
             }).then(res => {
                 if (res.code == 0) {
-                    outList.value = res.data;
+                    //对结果进行重排排序：将已关联到输出装置的端子排在前面
+                    let tmpList=[];
+                    res.data.forEach((item, index) => {
+                        if(item.from_ied_type==starts.value.ied_type){
+                            tmpList.unshift(item)
+                        }else{
+                            //未关联的端子按原结果顺序排列
+                            tmpList.push(item)
+                        }
+                    })
+                    outList.value = tmpList;
                     // 将 setTimeout 移动到 then 方法中
                     setTimeout(() => {
                         res.data.forEach((item, index) => {
@@ -261,10 +282,11 @@ export default {
         })
         // 下标选择
         function setIndex(row, num) {
-            loading.value = true
+            //loading.value = true
             if (row && num) {
                 leftFcda.value = row.id
                 leftIndex.value = num
+                /*
                 flow.getModelOn({
                     model_id: modelIds.value - 0,
                     from_fcda_id: row.id - 0
@@ -280,10 +302,12 @@ export default {
                         loading.value = false
                     }
                 })
+                */
             } else {
                 if (curList.value.length > 0) {
                     leftFcda.value = curList.value[0].id
                     leftIndex.value = 0
+                    /*
                     flow.getModelOn({
                         model_id: modelIds.value - 0,
                         from_fcda_id: curList.value[0].id - 0
@@ -299,7 +323,7 @@ export default {
                             checkList.value = []
                             loading.value = false
                         }
-                    })
+                    })*/
                 } else {
                     ElMessage({
                         type: "info",
@@ -393,6 +417,7 @@ export default {
     justify-content: space-around;
     align-items: center;
     overflow-y: auto;
+    position: relative;
 }
 
 .leftBox {
@@ -401,15 +426,20 @@ export default {
     text-align: center;
     background-color: #F7F8FB;
     border: 2px dashed #A3ADE0;
-    /* overflow-y: auto; */
+    position: absolute;
+    top:2%;
+    left:5%;
 }
 
 .middleBox {
-    width: 32%;
+    width: 22%;
     height: calc(100vh - 420px);
     display: flex;
     justify-content: space-around;
     align-items: center;
+    position: absolute;
+    top:5%;
+    left:39%;
 }
 
 .rightBox {
@@ -418,7 +448,9 @@ export default {
     text-align: center;
     background-color: #EDF3FF;
     border: 2px dashed #A3ADE0;
-    /* overflow-y: auto; */
+    position: absolute;
+    top:2%;
+    right:5%;
 }
 
 .result {
@@ -447,24 +479,26 @@ export default {
 
 .results {
     display: inline-block;
-    width: 55%;
+    width: 75%;
     height: 40px;
     border: 1px solid blue;
-    text-align: center;
+    text-align: left;
     line-height: 40px;
     background-color: #D9E6FE;
     color: blue;
+    padding-left: 5px;
 }
 
 .anthers {
     display: inline-block;
-    width: 55%;
+    width: 75%;
     height: 40px;
     border: 1px solid black;
-    text-align: center;
+    text-align: left;
     line-height: 40px;
     background-color: #F5FAFE;
     color: black;
+    padding-left: 5px;
 }
 
 .background {
@@ -522,8 +556,8 @@ export default {
 }
 
 :deep(.el-radio__inner) {
-    width: 40px;
-    height: 40px;
+    width: 32px;
+    height: 32px;
 }
 
 :deep(.el-radio__input.is-checked .el-radio__inner::after) {
@@ -532,8 +566,8 @@ export default {
 }
 
 :deep(.el-radio-group) {
-    width: 200px;
+    width: 100%;
     justify-content: space-between;
-    margin: 8px;
+    margin: 4px;
 }
 </style>