单卷试题分析打印样式

梁保满
1 parent 78ea6110
Showing 2 changed files with 118 additions and 49 deletions
src/utils/index.js
src/views/standard/test/analysis.vue
@@ -746,7 +746,7 @@ export function formatGradeNameClass(data) {
   return gradeNameArr;
 }
  
-export function tablePrint(id, title) {
+export function tablePrint(id, title, type = null) {
   let divs = document.getElementById(id);
   let awin = window.open("", "_blank");
   awin.document.getElementsByTagName(
@@ -773,8 +773,7 @@ export function tablePrint(id, title) {
     .el-table__cell.gutter{display:none}
     ul,li{margin:0;padding:0;list-style:none}
     .hui-box{display: flex;text-align: center;}
-    .hui-box .s-txt{width: 60px;line-height: 144px;background: #ccc;font-size: 16px;color: #fff;font-weight: 700;border:1px solid #ccc;box-sizing:border-box}
-    .hui-ul{border-top: 1px solid #ccc;}
+    .hui-box .s-txt{width: 61px;line-height: 144px;background: #ccc;font-size: 16px;color: #fff;font-weight: 700;border:1px solid #ccc;box-sizing:border-box}
     .hui-li{display: flex;}
     .hui-s{height: 48px;line-height: 48px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;box-sizing: border-box;}
     .hui-s.s1{width: 100px;}
@@ -783,12 +782,17 @@ export function tablePrint(id, title) {
     .info { display: flex;flex-wrap: wrap;border-left: 1px solid #ccc;border-top: 1px solid #ccc;margin-bottom: 12px;}
     .info-item {width: 25%;height: 50px;box-sizing: border-box;flex-shrink: 0;background: #f8f8f8;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;line-height: 50px;text-align: center;}
     .el-table__header,.el-table__body{width:100%!important;}
+    #print-table{max-width:1400px;margin: 0 auto;width: 100%;}
+    .hide{max-width:1400px;margin: 0 auto;width: 100%;border-left: 1px solid #ccc;border-spacing:0;box-sizing:border-box}
+    .hide thead th{background:#ccc;line-height: 48px;border-right: 1px solid #ccc;box-sizing:border-box}
+    .hide tbody tr td{line-height: 48px;border-right: 1px solid #ccc;text-align:center;box-sizing:border-box}
+    .hide td{border-bottom: 1px solid #ccc;}
     </style>`;
   let aDom = divs.cloneNode(true);
-  let aTbody = aDom
-    .getElementsByClassName("el-table__body")[0]
-    .getElementsByTagName("tbody")[0];
-  aDom.getElementsByClassName("el-table__header")[0].append(aTbody);
+  if (!type) {
+    let aTbody = aDom.getElementsByClassName("el-table__body")[0]?.getElementsByTagName("tbody")[0];
+    aDom.getElementsByClassName("el-table__header")[0].append(aTbody);
+  }
   if (title) {
     let pTit = awin.document.createElement('p')
     pTit.className = "tit"
@@ -5,7 +5,7 @@
         <span>单卷分析</span>
       </template>
     </back-box>
-    <div class="tips" v-if="paperModifyLog.modifiedTime && !status ">
+    <div class="tips" v-if="paperModifyLog.modifiedTime && !status">
       <p class="tips-p">
         <i class="fa fa-bell-o"></i>
         {{
@@ -131,46 +131,104 @@
             >
           </el-table-column>
         </el-table>
-        <div class="hui-box" v-show="type == 0">
-          <span class="s-txt">汇总</span>
-          <ul class="hui-ul">
-            <li class="hui-li">
-              <span class="hui-s s1">主观题</span>
-              <span class="hui-s s1">{{ examReport.subjectiveScore }}</span>
-              <span class="hui-s s2">{{
-                examReport.subjectiveHighestScore
-              }}</span>
-              <span class="hui-s s2">{{
-                examReport.subjectiveLowestScore
-              }}</span>
-              <span class="hui-s s2">{{ examReport.subjectiveAvgScore }}</span>
-              <span class="hui-s s3"
-                >{{ examReport.subjectiveClassScoringRate }}%</span
-              >
-            </li>
-            <li class="hui-li">
-              <span class="hui-s s1">客观题</span>
-              <span class="hui-s s1">{{ examReport.objectiveScore }}</span>
-              <span class="hui-s s2">{{
-                examReport.objectiveHighestScore
-              }}</span>
-              <span class="hui-s s2">{{
-                examReport.objectiveLowestScore
-              }}</span>
-              <span class="hui-s s2">{{ examReport.objectiveAvgScore }}</span>
-              <span class="hui-s s3"
-                >{{ examReport.objectiveClassScoringRate }}%</span
-              >
-            </li>
-            <li class="hui-li">
-              <span class="hui-s s1">整卷</span>
-              <span class="hui-s s1">{{ examReport.examPaperScore }}</span>
-              <span class="hui-s s2">{{ examReport.highestScore }}</span>
-              <span class="hui-s s2">{{ examReport.lowestScore }}</span>
-              <span class="hui-s s2">{{ examReport.avgScore }}</span>
-              <span class="hui-s s3">{{ examReport.classScoringRate }}%</span>
-            </li>
-          </ul>
+        <div id="print-table">
+          <table class="hide">
+            <thead>
+              <tr>
+                <th>题号</th>
+                <th>题型</th>
+                <th>满分值</th>
+                <th>班最高分</th>
+                <th>班最低分</th>
+                <th>班平均分</th>
+                <th>班级得分率</th>
+                <th>答案</th>
+                <th>选项1</th>
+                <th>选项2</th>
+                <th>选项3</th>
+                <th>选项4</th>
+                <th>未答</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(tr, index) in tableData">
+                <td width="60">{{ index + 1 }}</td>
+                <td width="100">{{ setSubPro(tr.questionType) }}</td>
+                <td width="100">{{ tr.sortable }}</td>
+                <td width="110">{{ tr.highestScore }}</td>
+                <td width="110">{{ tr.lowestScore }}</td>
+                <td width="110">{{ tr.avgScore }}</td>
+                <td width="120">{{ tr.classScoringRate }}%</td>
+                <td>
+                  {{
+                    tr.correctAnswer == 1
+                      ? "✓"
+                      : tr.correctAnswer == 2
+                      ? "✗"
+                      : tr.correctAnswer
+                  }}
+                </td>
+                <td
+                  v-for="(item, index) in optionsList"
+                  :key="index"
+                  width="120"
+                >
+                  <p class="persent">
+                    {{
+                      tr.questionType == "5"
+                        ? ""
+                        : tr["option" + index]
+                        ? `${tr["option" + index]}(${tr["persent" + index]})`
+                        : ""
+                    }}
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="hui-box" v-show="type == 0">
+            <span class="s-txt">汇总</span>
+            <ul class="hui-ul">
+              <li class="hui-li">
+                <span class="hui-s s1">主观题</span>
+                <span class="hui-s s1">{{ examReport.subjectiveScore }}</span>
+                <span class="hui-s s2">{{
+                  examReport.subjectiveHighestScore
+                }}</span>
+                <span class="hui-s s2">{{
+                  examReport.subjectiveLowestScore
+                }}</span>
+                <span class="hui-s s2">{{
+                  examReport.subjectiveAvgScore
+                }}</span>
+                <span class="hui-s s3"
+                  >{{ examReport.subjectiveClassScoringRate }}%</span
+                >
+              </li>
+              <li class="hui-li">
+                <span class="hui-s s1">客观题</span>
+                <span class="hui-s s1">{{ examReport.objectiveScore }}</span>
+                <span class="hui-s s2">{{
+                  examReport.objectiveHighestScore
+                }}</span>
+                <span class="hui-s s2">{{
+                  examReport.objectiveLowestScore
+                }}</span>
+                <span class="hui-s s2">{{ examReport.objectiveAvgScore }}</span>
+                <span class="hui-s s3"
+                  >{{ examReport.objectiveClassScoringRate }}%</span
+                >
+              </li>
+              <li class="hui-li">
+                <span class="hui-s s1">整卷</span>
+                <span class="hui-s s1">{{ examReport.examPaperScore }}</span>
+                <span class="hui-s s2">{{ examReport.highestScore }}</span>
+                <span class="hui-s s2">{{ examReport.lowestScore }}</span>
+                <span class="hui-s s2">{{ examReport.avgScore }}</span>
+                <span class="hui-s s3">{{ examReport.classScoringRate }}%</span>
+              </li>
+            </ul>
+          </div>
         </div>
         <el-table
           v-show="type == 1"
@@ -462,7 +520,11 @@ export default {
   },
   methods: {
     print() {
-      tablePrint("print-content", this.title + this.tabList[this.type]);
+      if (this.type == 0) {
+        tablePrint("print-table", this.title + this.tabList[this.type], true);
+      } else {
+        tablePrint("print-content", this.title + this.tabList[this.type]);
+      }
     },
     upSuccess(res) {
       //导入成功
@@ -695,6 +757,9 @@ div::-webkit-scrollbar-thumb {
 }
 </style>
 <style lang="scss" scoped>
+.hide {
+  display: none;
+}
 .page-container {
   position: relative;
   height: 100%;