From d987fef68056849ff56d4261b43bce13554631ca Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 11 Sep 2024 17:59:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E9=AA=8C=E6=8A=A5=E5=91=8A=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/report/index.vue | 435 +++++++++++++++++--------------------
 src/setting.js             |   2 +-
 src/styles/common.scss     |   3 +
 3 files changed, 206 insertions(+), 234 deletions(-)

diff --git a/src/pages/report/index.vue b/src/pages/report/index.vue
index 173f5cc..73cb483 100644
--- a/src/pages/report/index.vue
+++ b/src/pages/report/index.vue
@@ -1,199 +1,134 @@
 <template>
   <!--  实验报告  -->
-  <div class="wrap">
+  <div class="wrap" v-loading="loading">
     <breadcrumb data="返回实验/实验报告"></breadcrumb>
-    <div class="content"
-         :class="{loading}"
-         id="pdfDom">
-      <div style="text-align: right"
-           v-if="!loading">
-        <el-button size="mini"
-                   @click="editReport">
+    <div class="content">
+      <div style="text-align: right" v-if="!loading">
+        <el-button size="mini" @click="editReport">
           {{ editing ? "保存" : "编辑" }}
         </el-button>
-        <el-button type="primary"
-                   size="mini"
-                   @click="exportPage">导出报告</el-button>
+        <el-button type="primary" size="mini" @click="exportPage">导出报告</el-button>
       </div>
       <h6 class="r-title">标准实验报告</h6>
       <div class="info">
         <h6 class="l-title">
-          <img src="@/assets/img/report1.png"
-               alt="">
+          <img src="@/assets/img/report1.png" alt="">
           基本信息
         </h6>
-        <ul :class="['info-list', {edit: editing}]">
+        <ul :class="['info-list', { edit: editing }]">
           <li>
             <label>学生姓名：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.userName"
-                      disabled></el-input>
+            <el-input v-if="editing" v-model="infoData.userName" disabled></el-input>
             <span v-else>{{ infoData.userName }}</span>
           </li>
           <li>
             <label>学生学号：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.workNumber"
-                      disabled></el-input>
+            <el-input v-if="editing" v-model="infoData.workNumber" disabled></el-input>
             <span v-else>{{ infoData.workNumber }}</span>
           </li>
           <li>
             <label>实验时间：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.submitTime"
-                      disabled></el-input>
+            <el-input v-if="editing" v-model="infoData.submitTime" disabled></el-input>
             <span v-else>{{ infoData.submitTime }}</span>
           </li>
           <li>
             <label>实验成绩：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.score"
-                      disabled></el-input>
-            <div v-else
-                 class="score-wrap">
+            <el-input v-if="editing" v-model="infoData.score" disabled></el-input>
+            <div v-else class="score-wrap">
               <em>{{ infoData.score }}</em>
-              <img src="@/assets/img/point.png"
-                   alt="">
+              <img src="@/assets/img/point.png" alt="">
             </div>
           </li>
           <li>
             <label>学生班级：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.className"></el-input>
+            <el-input v-if="editing" v-model="infoData.className"></el-input>
             <span v-else>{{ infoData.className }}</span>
           </li>
           <li>
             <label>指导老师：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.instructor"></el-input>
+            <el-input v-if="editing" v-model="infoData.instructor"></el-input>
             <span v-else>{{ infoData.instructor }}</span>
           </li>
           <li>
             <label>实验学时：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.period"></el-input>
+            <el-input v-if="editing" v-model="infoData.period"></el-input>
             <span v-else>{{ infoData.period }}</span>
           </li>
         </ul>
         <div class="m-b-20">
           <h6 class="l-title">
-            <img src="@/assets/img/report2.png"
-                 alt="">
+            <img src="@/assets/img/report2.png" alt="">
             实验项目名称
           </h6>
-          <el-input v-if="editing"
-                    v-model="infoData.projectName"
-                    type="textarea"></el-input>
-          <div v-else
-               class="pre-wrap"
-               v-html="infoData.projectName"></div>
+          <el-input v-if="editing" v-model="infoData.projectName" type="textarea"></el-input>
+          <div v-else class="pre-wrap" v-html="infoData.projectName"></div>
         </div>
         <div class="m-b-20">
           <h6 class="l-title">
-            <img src="@/assets/img/report3.png"
-                 alt="">
+            <img src="@/assets/img/report3.png" alt="">
             实验目的
           </h6>
-          <quill v-if="editing"
-                 :border="true"
-                 v-model="infoData.purpose"
-                 :height="150" />
-          <div v-else
-               :class="['pre-wrap', {edit: editing}]"
-               v-html="infoData.purpose"></div>
+          <quill v-if="editing" :border="true" v-model="infoData.purpose" :height="150" />
+          <div v-else :class="['pre-wrap', { edit: editing }]" v-html="infoData.purpose"></div>
         </div>
         <div class="m-b-20">
           <h6 class="l-title">
-            <img src="@/assets/img/report4.png"
-                 alt="">
+            <img src="@/assets/img/report4.png" alt="">
             实验数据
           </h6>
-          <el-table :data="expData"
-                    class="table"
-                    border
-                    stripe
-                    header-align="center">
-            <el-table-column type="index"
-                             label="序号"
-                             align="center"
-                             width="60">
+          <el-table :data="expData" class="table" border stripe header-align="center">
+            <el-table-column type="index" label="序号" align="center" width="60">
               <template slot-scope="scope">
                 {{ scope.$index + 1 }}
               </template>
             </el-table-column>
-            <el-table-column prop="judgmentName"
-                             label="判分点"
-                             width="200"
-                             align="center"></el-table-column>
-            <el-table-column prop="judgmentName"
-                             label="考核点"
-                             align="center"
-                             width="150">
+            <el-table-column prop="judgmentName" label="判分点" width="200" align="center"></el-table-column>
+            <el-table-column prop="judgmentName" label="考核点" align="center" width="150">
               <template slot-scope="scope">
-                <div v-for="(item, index) in scope.row.lcRuleRecords"
-                     :key="index">
+                <div v-for="(item, index) in scope.row.lcRuleRecords" :key="index">
                   <span>
-                    <span>{{index+1}}. </span>{{item.name}}
+                    <span>{{ index + 1 }}. </span>{{ item.name }}
                   </span>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="ruleAnswer"
-                             label="参考答案"
-                             width="280"
-                             style='word-wrap: break-word'>
+            <el-table-column prop="ruleAnswer" label="参考答案" width="280">
               <template slot-scope="scope">
-                <div v-if='scope.row.lcRuleRecords'>
-                  <div v-for="(item, index) in scope.row.lcRuleRecords"
-                       :key="index">
+                <div v-if="scope.row.lcRuleRecords" style="word-wrap: break-word">
+                  <div v-for="(item, index) in scope.row.lcRuleRecords" :key="index">
                     <span>
-                      <span>{{index+1}}. </span>{{item.ruleAnswer}}
+                      <span>{{ index + 1 }}. </span>{{ item.ruleAnswer }}
                     </span>
                   </div>
                 </div>
-                <div v-else
-                     v-html="scope.row.referenceAnswer"></div>
+                <div v-else v-html="scope.row.referenceAnswer"></div>
               </template>
             </el-table-column>
-            <el-table-column prop="userAnswer"
-                             label="学生答案">
+            <el-table-column prop="userAnswer" label="学生答案" width="280">
               <template slot-scope="scope">
                 <div v-if='scope.row.lcRuleRecords'>
-                  <div v-for="(item, index) in scope.row.lcRuleRecords"
-                       :key="index">
+                  <div v-for="(item, index) in scope.row.lcRuleRecords" :key="index">
                     <span v-if='item.userAnswer'>
-                      <span>{{index+1}}. </span>{{item.userAnswer}}
+                      <span>{{ index + 1 }}. </span>{{ item.userAnswer }}
                     </span>
                     <span v-else>
-                      <span>{{index+1}}. </span>未填写
+                      <span>{{ index + 1 }}. </span>未填写
                     </span>
                   </div>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="quesScore"
-                             label="分值"
-                             width="80"
-                             align="center"></el-table-column>
-            <el-table-column prop="score"
-                             label="得分"
-                             width="80"
-                             align="center"></el-table-column>
+            <el-table-column prop="quesScore" label="分值" width="80" align="center"></el-table-column>
+            <el-table-column prop="score" label="得分" width="80" align="center"></el-table-column>
           </el-table>
         </div>
         <div class="m-b-20">
           <h6 class="l-title">
-            <img src="@/assets/img/report5.png"
-                 alt="">
+            <img src="@/assets/img/report5.png" alt="">
             实验总结与体会
           </h6>
-          <quill v-show="editing"
-                 :border="true"
-                 v-model="infoData.summarize"
-                 :height="150" />
-          <div v-show="!editing"
-               class="pre-wrap"
-               v-html="infoData.summarize"></div>
+          <quill v-show="editing" :border="true" v-model="infoData.summarize" :height="150" />
+          <div v-show="!editing" class="pre-wrap" v-html="infoData.summarize"></div>
         </div>
       </div>
     </div>
@@ -211,12 +146,12 @@ export default {
     return {
       reportId: this.$route.query.reportId,
       title: "实验报告",
+      loading: false,
       form: {},
       infoData: {},
       expData: [],
       editing: false,
       loadIns: null,
-      loading: false,
       project: false,
       userScores: []
     };
@@ -230,6 +165,7 @@ export default {
   },
   methods: {
     getData () { // 查询详情
+      this.loading = true
       const { reportId } = this
       reportDetail(reportId).then(({ data }) => {
         const { report, userScores } = data
@@ -255,14 +191,18 @@ export default {
         // 如果没有data，则添加，否则，直接使用
         if (!expData) {
           this.handleList(userScores)
-          this.$post(this.api.editExperimentalData, {
-            reportId,
-            data: JSON.stringify(userScores)
-          }).then(res => { }).catch(err => { })
+          // this.$post(this.api.editExperimentalData, {
+          //   reportId,
+          //   data: JSON.stringify(userScores)
+          // }).then(res => { }).catch(err => { })
         } else {
           this.handleList(userScores)
         }
-      }).catch(res => { })
+
+        this.loading = false
+      }).catch(res => {
+        this.loading = false
+      })
     },
     // 处理实验数据
     handleList (list) {
@@ -325,150 +265,179 @@ export default {
 
 <style lang="scss" scoped>
 .m-b-20 {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
+
 .wrap {
-    padding: 12px 300px 20px;
+  padding: 12px 300px 20px;
 }
+
 code,
 kbd,
 samp {
-    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
-    word-wrap: break-word;
-    white-space: pre-wrap;
+  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
+  word-wrap: break-word;
+  white-space: pre-wrap;
 }
+
 /deep/ pre {
-    white-space: pre-wrap; /* css-3 */
-    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
-    white-space: pre-wrap; /* Opera 4-6 */
-    white-space: -o-pre-wrap; /* Opera 7 */
-    word-wrap: break-word; /* Internet Explorer 5.5+ */
-    word-break: break-all;
-    overflow: hidden;
-    font-size: 12px;
-    font-weight: 400;
-    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
+  white-space: pre-wrap;
+  /* css-3 */
+  white-space: -moz-pre-wrap;
+  /* Mozilla, since 1999 */
+  white-space: pre-wrap;
+  /* Opera 4-6 */
+  white-space: -o-pre-wrap;
+  /* Opera 7 */
+  word-wrap: break-word;
+  /* Internet Explorer 5.5+ */
+  word-break: break-all;
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
 }
+
 .content {
-    padding: 16px 0;
-    background: #fff;
-    &.loading {
-        padding-top: 30px;
-    }
-    .r-title {
-        margin-bottom: 40px;
-        font-size: 24px;
-        text-align: center;
-        color: #333;
+  padding: 16px 0;
+  background: #fff;
+
+  .r-title {
+    margin-bottom: 40px;
+    font-size: 24px;
+    text-align: center;
+    color: #333;
+  }
+
+  .info {
+    padding: 20px 16px;
+    border: 1px solid #e1e6f2;
+  }
+
+  .l-title {
+    display: flex;
+    align-items: center;
+    padding: 5px 8px;
+    margin-bottom: 12px;
+    font-size: 14px;
+    color: #333;
+    background-color: #f7f9fc;
+
+    img {
+      margin-right: 5px;
     }
-    .info {
-        padding: 20px 16px;
-        border: 1px solid #e1e6f2;
+  }
+
+  .info-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px 0 0 20px;
+
+    li {
+      display: inline-flex;
+      width: 25%;
+      padding: 0 10px;
+      margin-bottom: 34px;
     }
-    .l-title {
-        display: flex;
+
+    &.edit {
+      li {
         align-items: center;
-        padding: 5px 8px;
-        margin-bottom: 12px;
-        font-size: 14px;
-        color: #333;
-        background-color: #f7f9fc;
-        img {
-            margin-right: 5px;
-        }
+      }
     }
-    .info-list {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 10px 0 0 20px;
-        li {
-            display: inline-flex;
-            width: 25%;
-            padding: 0 10px;
-            margin-bottom: 34px;
-        }
-        &.edit {
-            li {
-                align-items: center;
-            }
-        }
-        label {
-            font-size: 14px;
-            color: #333;
-            white-space: nowrap;
-        }
-        span {
-            min-width: 150px;
-            padding: 0 10px 3px;
-            border-bottom: 1px solid #e1e6f2;
-        }
-        /deep/.el-input {
-            width: 174px;
-        }
+
+    label {
+      font-size: 14px;
+      color: #333;
+      white-space: nowrap;
     }
-    .score-wrap {
-        position: relative;
-        min-width: 150px;
-        border-bottom: 1px solid #e1e6f2;
-        em {
-            position: absolute;
-            top: -12px;
-            left: 30px;
-            font-family: din;
-            font-size: 30px;
-            font-weight: 600;
-            color: #0b1d30;
-        }
-        img {
-            position: absolute;
-            bottom: -15px;
-            left: 0;
-        }
+
+    span {
+      min-width: 150px;
+      padding: 0 10px 3px;
+      border-bottom: 1px solid #e1e6f2;
     }
-    /deep/.el-textarea .el-textarea__inner,
-    .pre-wrap {
-        min-height: 72px;
-        padding: 10px 16px;
-        font-size: 14px;
-        color: #333;
-        &.edit {
-            color: #abb3c6;
-            border: 1px solid #cacfdb;
-            border-radius: 4px;
-            background-color: #f6f7f9;
-        }
+
+    /deep/.el-input {
+      width: 174px;
     }
-    /deep/ .table th {
-        background-color: #e1eaff !important;
-        .cell {
-            line-height: 35px;
-            color: #555555;
-        }
+  }
+
+  .score-wrap {
+    position: relative;
+    min-width: 150px;
+    border-bottom: 1px solid #e1e6f2;
+
+    em {
+      position: absolute;
+      top: -12px;
+      left: 30px;
+      font-family: din;
+      font-size: 30px;
+      font-weight: 600;
+      color: #0b1d30;
     }
-}
-/deep/ .el-table {
-    width: 100%;
-    .el-table__header-wrapper table,
-    .el-table__body-wrapper table {
-        width: 100% !important;
+
+    img {
+      position: absolute;
+      bottom: -15px;
+      left: 0;
+    }
+  }
+
+  /deep/.el-textarea .el-textarea__inner,
+  .pre-wrap {
+    min-height: 72px;
+    padding: 10px 16px;
+    font-size: 14px;
+    color: #333;
+
+    &.edit {
+      color: #abb3c6;
+      border: 1px solid #cacfdb;
+      border-radius: 4px;
+      background-color: #f6f7f9;
     }
-    .el-table__body,
-    .el-table__footer,
-    .el-table__header {
-        table-layout: auto;
+  }
+
+  /deep/ .table th {
+    background-color: #e1eaff !important;
+
+    .cell {
+      line-height: 35px;
+      color: #555555;
     }
+  }
+}
+
+/deep/ .el-table {
+  width: 100%;
+
+  .el-table__header-wrapper table,
+  .el-table__body-wrapper table {
+    width: 100% !important;
+  }
+
+  .el-table__body,
+  .el-table__footer,
+  .el-table__header {
+    table-layout: auto;
+  }
 }
+
 .result-pic {
-    margin: 10px 0;
+  margin: 10px 0;
 }
+
 @media (max-width: 1650px) {
-    .wrap {
-        padding: 12px 200px 20px;
-    }
+  .wrap {
+    padding: 12px 200px 20px;
+  }
 }
+
 @media (max-width: 1430px) {
-    .wrap {
-        padding: 12px 100px 20px;
-    }
+  .wrap {
+    padding: 12px 100px 20px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/setting.js b/src/setting.js
index 5bb3566..f8e0f62 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -16,7 +16,7 @@ const Setting = {
   showProgressBar: true,
   // 接口请求地址
   // apiBaseURL: env === 'development' ? 'http://192.168.31.125:8888' : 'http://121.37.12.51:8000',
-  apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : 'http://www.liuwanr.cn',
+  apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : location.origin,
   // 接口请求返回错误时，弹窗的持续时间，单位：秒
   modalDuration: 3,
   // 接口请求返回错误时，弹窗的类型，可选值为 Message 或 Notice
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 4d9f530..8281536 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -296,4 +296,7 @@
   font-size: 14px;
   font-weight: 600;
   color: #f00;
+}
+.el-loading-spinner .circular {
+  display: inline;
 }
\ No newline at end of file