性能验证报告bug修复

src/views/business/performance/xnyzReport.vue

@@ -2,6 +2,7 @@
   <div class="layout">
     <div class="tree-container">
       <el-tree
+        :key="treeKey"
         :data="treeData"
         :props="defaultProps"
         lazy
@@ -12,42 +13,50 @@
       </el-tree>
     </div>
     <div class="form-container">
-      <el-form id="pdfDom" :model="form" :label-width="formLabelWidth">
-        <div class="title">
-          {{ form.methodName || '表单标题' }}
-        </div>
-        <experimental-desc
-          :step="form.step || ''"
-          :criterion="form.criterion || ''"
-          :formulas="form.formulas || []"
-          :references="form.references || []"
-          :readonly="true"
-        />
-        <basic-info :info="form" :readonly="true" />
-        <reagent-info :info="form.reagentPoList" :readonly="true" />
-        <param-info
-          v-if="$utils.isNotEmpty(form.params)"
-          :form-id="formId"
-          :info="form.shiYanCanShu"
-          :config-data="form.params || []"
-          :readonly="true"
-        />
-        <experimental-data
-          :exp="form.jiSuanJieGuo"
-          :form-id="formId"
-          :readonly="true"
-        />
-        <precision
-          v-if="$utils.isNotEmpty(form.jiSuanJieGuo)"
-          :info="form.jiSuanJieGuo"
-          :readonly="true"
-        />
-        <conclusion
-          :result="form.shiYanJieLun"
-          :files="form.fuJian"
-          :readonly="true"
-        />
-      </el-form>
+      <div v-if="showForm">
+        <el-form id="pdfDom" :model="form" :label-width="formLabelWidth">
+          <div class="header" id="pdfHeader">
+            <div class="title">
+              {{ form.fangAnLeiXing || '' }}
+            </div>
+            <el-button style="width:80px" type="success" @click="getpdf">导出</el-button>
+          </div>
+          <experimental-desc
+            :step="form.step || ''"
+            :criterion="form.criterion || ''"
+            :formulas="form.formulas || []"
+            :references="form.references || []"
+            :readonly="true"
+          />
+          <basic-info :info="form" :readonly="true" />
+          <reagent-info :info="form.reagentPoList" :readonly="true" />
+          <param-info
+            v-if="$utils.isNotEmpty(form.params)"
+            :form-id="formId"
+            :info="form.shiYanCanShu"
+            :config-data="form.params || []"
+            :readonly="true"
+          />
+          <experimental-data
+            :exp="form.jiSuanJieGuo"
+            :form-id="formId"
+            :readonly="true"
+          />
+          <precision
+            v-if="$utils.isNotEmpty(form.jiSuanJieGuo)"
+            :info="form.jiSuanJieGuo"
+            :readonly="true"
+          />
+          <conclusion
+            :result="form.shiYanJieLun"
+            :files="form.fuJian"
+            :readonly="true"
+          />
+        </el-form>
+      </div>
+      <div v-else class="empty-state">
+        请选择左侧
+      </div>
     </div>
   </div>
 </template>
@@ -61,6 +70,8 @@ import ParamInfo from './components/param-info'
 import ExperimentalData from './components/experimental-data'
 import Precision from './report/precision'
 import Conclusion from './components/conclusion'
+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
 
 export default {
   components: {
@@ -75,6 +86,7 @@ export default {
   data() {
     return {
       treeData: [],
+      treeKey: 0, // Add a key to force re-rendering
       form: {
         methodName: '',
         step: '',
@@ -94,7 +106,8 @@ export default {
         label: 'name',
         children: 'children',
         isLeaf: 'isLeaf'
-      }
+      },
+      showForm: false // 控制表单显示
     }
   },
   methods: {
@@ -148,20 +161,71 @@ export default {
         try {
           const response = await getExperimental({ id: node.id })
           this.form = response.data
+          this.showForm = true // 显示表单
         } catch (error) {
           console.error('Failed to fetch form data:', error)
+          this.showForm = false // 获取数据失败也不显示表单
         }
+      } else {
+        this.showForm = false // 非叶子节点不显示表单
       }
+    },
+
+    getpdf() {
+      const dom = document.querySelector('#pdfDom')
+      const title = this.form.methodName || '表单标题'
+      
+      // 隐藏标题和导出按钮
+      const headerElement = document.getElementById('pdfHeader')
+      const originalDisplay = headerElement.style.display
+      headerElement.style.display = 'none'
+      
+      html2Canvas(dom, {
+        allowTaint: false,
+        taintTest: false,
+        logging: false,
+        useCORS: true,
+        dpi: window.devicePixelRatio * 4,
+        scale: 4
+      }).then((canvas) => {
+        const contentWidth = canvas.width
+        const contentHeight = canvas.height
+        const pageHeight = (contentWidth / 592.28) * 841.89
+        let leftHeight = contentHeight
+        let position = 0
+        const imgWidth = 595.28
+        const imgHeight = (592.28 / contentWidth) * contentHeight
+        const pageData = canvas.toDataURL('image/jpeg', 1.0)
+        const PDF = new JsPDF('', 'pt', 'a4')
+        if (leftHeight < pageHeight) {
+          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+        } else {
+          while (leftHeight > 0) {
+            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+            leftHeight -= pageHeight
+            position -= 841.89
+            if (leftHeight > 0) {
+              PDF.addPage()
+            }
+          }
+        }
+        PDF.save(title + '.pdf')
+      }).finally(() => {
+        // 恢复显示标题和导出按钮
+        headerElement.style.display = originalDisplay
+      })
     }
   },
   async created() {
     try {
+      this.treeData = []; // Clear treeData before loading
       const response = await getExperimentalTree({ level: 1 })
       this.treeData = response.data.map((item) => ({
-        id: item.id || item.name,
+        id: item.id || item.name, 
         name: item.name,
         isLeaf: false
       }))
+      this.treeKey++; // Increment the key to force re-rendering
     } catch (error) {
       console.error('Failed to fetch initial tree data:', error)
     }
@@ -175,7 +239,7 @@ export default {
   height: 100%;
 }
 .tree-container {
-  width: 210px;
+  width: 380px;
   border-right: 1px solid #dcdfe6;
   padding: 10px;
   overflow-y: auto;
@@ -191,4 +255,85 @@ export default {
   font-weight: bold;
   margin-bottom: 20px;
 }
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #909399;
+  font-size: 16px;
+}
+#pdfDom {
+    padding: 60px 100px;
+    box-sizing: border-box;
+
+    .info-container {
+      margin-bottom: 20px !important;
+    }
+
+    ::v-deep {
+      .info-item {
+        .title {
+          height: 20px;
+          line-height: 20px;
+          font-size: 16px;
+          font-weight: bold;
+          margin-bottom: 10px;
+
+          .ibps-icon-star {
+            color: #fb9600;
+            margin-right: 5px;
+          }
+        }
+
+        .el-form-item {
+          margin-bottom: 0 !important;
+
+          &__label {
+            font-size: 14px !important;
+            color: #606266;
+          }
+
+          &__content {
+            .el-input,
+            .el-select,
+            .el-input-number {
+              width: 100%;
+            }
+
+            .el-textarea .el-input__count {
+              padding: 0 5px;
+              line-height: initial;
+            }
+
+            .el-radio,
+            .el-checkbox {
+              margin-right: 10px;
+            }
+          }
+        }
+
+        .el-table th.el-table__cell > .cell,
+        .el-table td.el-table__cell {
+          color: #606266;
+          font-size: 14px !important;
+        }
+
+        .el-button--mini {
+          padding: 5px 12px;
+        }
+      }
+    }
+  }
+
+// 取消当前页面中 el-tree 的边框
+::v-deep .el-tree {
+  border: none;
+}
 </style>