效果预览修改

src/views/codeRule/ConditionsSet.vue

@@ -176,7 +176,7 @@ export default {
   name: 'ConditionsSet',
   data() {
     return {
-      visible: true,
+      visible: false,
        paramList: [
         {
           paramName: '<0.75',

src/views/codeRule/PreviewResult.vue

@@ -0,0 +1,161 @@
+<template>
+  <el-dialog
+    title="效果预览"
+    :visible.sync="visible"
+    width="80%"
+    append-to-body
+  >
+    <div class="title-container">
+            <span>样品信息</span>
+    </div>
+    <div class="preview-container">
+      <!-- 样品信息区域 -->
+        
+      <div class="sample-info">
+        <div class="info-row">
+          <el-select v-model="sampleValue" placeholder="样品品种" class="info-select">
+            <el-option label="硅酸盐水泥" value="1"></el-option>
+          </el-select>
+        </div>
+
+        <div class="info-row">
+          <el-select v-model="codeValue" placeholder="代号" class="info-select">
+            <el-option label="P.I" value="1"></el-option>
+          </el-select>
+        </div>
+
+        <div class="info-row">
+          <el-select v-model="strengthValue" placeholder="强度等级" class="info-select">
+            <el-option label="42.5" value="1"></el-option>
+          </el-select>
+        </div>
+      </div>
+
+      <!-- 技术指标区域 -->
+      <div class="tech-specs">
+           <div class="title-container">
+                    <span>技术指标</span>
+            </div>
+                <div class="tech-content">
+          <div class="tech-item">
+            <span class="tech-label">粉煤灰</span>
+            <el-input v-model="techValue1" class="tech-input">
+              <template slot="append">≤4.0</template>
+            </el-input>
+          </div>
+
+          <div class="tech-item">
+            <span class="tech-label">水泥试验报告单</span>
+            <el-input v-model="techValue2" class="tech-input" disabled>
+              <template slot="append">不溶物_技术标准</template>
+            </el-input>
+          </div>
+
+          <div class="tech-item">
+            <span class="tech-label">水泥试验报告单#1</span>
+            <el-input v-model="techValue3" class="tech-input" disabled>
+              <template slot="append">不溶物_技术标准</template>
+            </el-input>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'PreviewResult',
+  data() {
+    return {
+      visible: true,
+      sampleValue: '',
+      codeValue: '',
+      strengthValue: '',
+      techValue1: '',
+      techValue2: '',
+      techValue3: ''
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+    },
+    hide() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.title-container{
+    color:  rgba(130, 130, 130, 1);
+    margin-bottom: 10px;
+    font-weight: bold;
+    background: rgb(240, 240, 240);
+ 
+    padding: 10px 20px;
+    border-radius: 5px;
+
+}
+.preview-container {
+ 
+
+  .sample-info {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    
+
+  }
+
+  .info-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1px;
+
+
+    .label {
+      width: 80px;
+      color: #606266;
+    }
+
+    .info-select {
+      width: 400px
+    }
+  }
+
+  .tech-specs {
+    .tech-title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 20px;
+      color: #303133;
+    }
+
+    .tech-content {
+      .tech-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+
+        .tech-label {
+          width: 120px;
+          color: #606266;
+        }
+
+        .tech-input {
+          width: 300px;
+
+          ::v-deep .el-input-group__append {
+            background-color: #f5f7fa;
+            color: #909399;
+            min-width: 120px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/codeRule/ruleManage.vue

@@ -148,7 +148,7 @@
                       </div>
                     </div>
                     <div  class="box-card-content1-right">
-                        <el-button type="danger" size="small">效果预览</el-button>
+                        <el-button type="danger" size="small" @click="previewRes">效果预览</el-button>
                         <el-button type="warning" size="small">规范更新</el-button>
                     </div>
                 </div>
@@ -371,16 +371,20 @@
         <ConditionsSet ref="conditionsSetRef" @confirm="handleConditionsConfirm" />
         <!-- 关联元素 -->
         <LinkEle ref="linkEleRef" @confirm="confirmLinkEle" />
+        <!-- 效果预览 -->
+          <PreviewResult ref="previewResultRef" />
    </div>
 </template>
 <script>
 import {getLazytree} from "@/api/manager/wbsprivate";
 import ConditionsSet from './ConditionsSet.vue'
 import LinkEle from "./LinkEle.vue";
+import PreviewResult from './PreviewResult.vue'
   export default {
   components: {
     ConditionsSet,
-    LinkEle
+    LinkEle,
+    PreviewResult
   },
     data() {
       return {
@@ -645,6 +649,10 @@ import LinkEle from "./LinkEle.vue";
 
     
     },
+    //效果预览
+    previewRes() {
+      this.$refs.previewResultRef.show()
+    }
   }
   }
 </script>