关联元素修改

src/views/codeRule/ConditionsSet.vue

@@ -555,7 +555,7 @@ export default {
               flex-shrink: 0;
                   margin-left: 5px;
        
-                padding: 8px 8px;
+                padding:8px;
               
               
               background: rgb(213, 222, 255);;
@@ -563,7 +563,7 @@ export default {
                 border-radius: 4px;
                 cursor: pointer;  // 添加指针样式
                 transition: all 0.3s;  // 添加过渡效果
-                height: 40px;
+                height: 50px;
                 
               .code-title{
                 color: black;

src/views/codeRule/LinkEle.vue

@@ -91,6 +91,30 @@
         </div>
       </div>
     </div>
+     <div class="result-container">
+            <div class="condition-header">
+               <i class="el-icon-connection" style="color: rgb(46, 123, 115);"></i>
+            <span>关联关系</span>
+            </div>
+            <div class="link-list">
+                <div v-for="(item, index) in linkListData" :key="index" class="link-item">
+                    <div class="link-name">
+                        <span>{{ item.paramName }}</span>
+                    </div>
+                  <div>
+                       <i class="el-icon-connection" style="color: black; font-size: larger;"></i>
+                  </div>
+                  <div class="code-list">
+                    <div v-for="(codeItem, codeIndex) in item.codeList" :key="codeIndex" class="code-item">
+                        <div class="code-title">{{ codeItem.codeName }}</div>
+                        <div class="code-detail">{{ codeItem.codeValueName }}</div>
+                    </div>
+
+                  </div>
+                </div>
+            </div>
+            
+          </div>
     <div slot="footer" class="dialog-footer">
    
       <el-button type="primary" @click="handleConfirm" :style="{ background: 'rgb(37, 80, 162)', borderColor: 'rgb(37, 80, 162)' }">保存</el-button>
@@ -222,6 +246,24 @@ export default {
       projectid:'',
       checkTableRow: {}, // 当前选中的表单行数据
       checkEleList: [], // 存储选中的元素
+      linkListData: [
+        {paramName:'<0.75',codeList:[
+          {codeName: 'C3A', codeValue: [
+            {name:'矿渣硅酸盐水泥',value:'1'},
+            {name:'矿渣硅酸盐水泥2',value:'1'}
+          ],codeValueName: '矿渣硅酸盐水泥/矿渣硅酸盐水泥2'},
+          {codeName: 'C3A33', codeValue: [
+            {name:'矿渣硅酸盐水泥77',value:'1'},
+            {name:'矿渣硅酸盐水泥2',value:'1'}
+          ],codeValueName: '矿渣硅酸盐水泥/矿渣硅酸盐水泥2'},
+          {codeName: 'C3A33', codeValue: [
+            {name:'矿渣硅酸盐水泥77',value:'1'},
+            {name:'矿渣硅酸盐水泥2',value:'1'}
+          ],codeValueName: '矿渣硅酸盐水泥/矿渣硅酸盐水泥2'},
+    
+        ]},
+           
+      ], // 关联关系数据
 
     
    
@@ -371,6 +413,7 @@ export default {
 .conditions-container {
   display: flex;
   gap: 20px;
+  font-weight: bold;
 //   height: 200px;
 .green-txt{
     color: rgb(46, 123, 115);;
@@ -383,19 +426,7 @@ export default {
       background: #f5f7fa;
   }
 
-  .condition-header {
-    display: flex;
-    // justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    border-bottom: 1px solid #EBEEF5;
-  
 
-    span {
-      font-weight: bold;
-      margin-left: 10px;
-    }
-  }
 
   .condition-list,
   .condition-content {
@@ -541,10 +572,75 @@ export default {
   border-radius: 10px;
   margin-bottom: 10px;
 }
-.condition-header1-html-box{
-  // height: 600px;
-  // border: 1px solid red;
-}
+  .condition-header {
+    display: flex;
+    // justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1px solid #EBEEF5;
+  
+
+    span {
+      font-weight: bold;
+      margin-left: 10px;
+    }
+  }
+  .link-list{
+    max-height: 350px;
+    overflow-y: auto;
+    padding: 10px;
+      font-weight: bold;
+    .link-item{
+      display: flex;
+      align-items: center;
+      padding: 10px;
+      background-color: white;
+      border-radius: 10px;
+      padding: 10px;
+      .link-name{
+        flex-shrink: 0;
+        background-color: rgb(167, 224, 218);
+        color: rgba(46, 123, 115, 1);
+        border-radius: 5px;
+        text-align: center;
+    
+        padding:8px;
+        margin-right: 15px;
+
+      }
+      .code-list{
+        margin-left: 15px;
+        display: flex;
+       
+        overflow-x: auto;
+           font-weight: bold;
+          .code-item {
+              // display: flex;
+              margin-bottom: 10px;
+              flex-shrink: 0;
+                  margin-left: 5px;
+       
+                padding: 8px 8px;
+              
+              
+              background: rgb(213, 222, 255);;
+                color: #409EFF;
+                border-radius: 4px;
+                cursor: pointer;  // 添加指针样式
+                transition: all 0.3s;  // 添加过渡效果
+                height: 50px;
+                
+              .code-title{
+                color: black;
+                margin-bottom: 10px;
+              }
+              .code-detail{
+                color:  rgba(37,80,162,1);
+              }
+            }
+      }
+    }
+  }
 </style>
 <style lang="scss">
 .dialog-set {