页面完成

src/features/report/ReportCompare.vue

@@ -102,6 +102,7 @@
         <p>{{ resultCont }}</p>
       </div>
     </div>
+    <div class="report-pfoot"></div>
   </div>
 </template>
 

src/features/report/ReportDifficulty.vue

@@ -1,20 +1,24 @@
 <template>
   <div class="report-page report-diff">
     <div class="report-body">
-      <h2 class="report-body-title">六、试卷题目难度编排</h2>
+      <div class="report-body-head">
+        <h2>六、试卷题目难度编排</h2>
+        <p class="report-name"></p>
+      </div>
 
       <div class="report-part diff-part">
         <h4 class="report-part-title">难度系数表</h4>
         <!-- TODO: chart -->
       </div>
 
-      <div class="report-part">
+      <div class="report-part part-intro">
         <p>
           <span>说明：</span
           >按题号顺序将各小题的难度系数连城曲线，整张因此绘制出本科目试卷难度曲线图，按题号顺序，利用试题难度值数据，编制试卷试题难度编排动态折线图（横轴为题号、纵轴为难度值）。据此所绘折线图应呈现出整体下降且相邻试题之间小幅波动的“理想态势”，否则试卷试题编排就可能存在不尽合理之处，须对照出现异常波动试题的内容、题型、分值等进行综合研判，进而改进试题编排以适应考生心理特点和专业选才需求，分析计算基于有效样本。
         </p>
       </div>
     </div>
+    <div class="report-pfoot"></div>
   </div>
 </template>
 

src/features/report/ReportDiscrimination.vue

@@ -1,20 +1,24 @@
 <template>
   <div class="report-page report-diff">
     <div class="report-body">
-      <h2 class="report-body-title">七、试题题目区分度编排</h2>
+      <div class="report-body-head">
+        <h2>七、试题题目区分度编排</h2>
+        <p class="report-name"></p>
+      </div>
 
       <div class="report-part diff-part">
         <h4 class="report-part-title">区分度表</h4>
         <!-- TODO: chart -->
       </div>
 
-      <div class="report-part">
+      <div class="report-part part-intro">
         <p>
           <span>说明：</span
           >区分度是指一道题能多大程度上把不同水平的人区分开来，一个具有良好区分度的题目，在区分被测者时应当是有效的；对于区分度值在0.2以下，甚至为负数的试题，要重点检查试题、标准答案（评分标准）设计及评分标准实际掌握等是否存在谬误，分析计算基于有效样本。
         </p>
       </div>
     </div>
+    <div class="report-pfoot"></div>
   </div>
 </template>
 

src/features/report/ReportMain.vue

@@ -36,7 +36,7 @@ let courseInfo = {
   examName: "",
   schoolName: "",
   courseName: "",
-  startScore: 40,
+  startScore: 0,
   totalScore: 150,
 };
 

src/features/report/ReportQuestion.vue

@@ -1,48 +1,105 @@
 <template>
-  <div class="report-page report-cover">
+  <div class="report-page report-question">
     <div class="report-body">
-      <h2 class="report-body-title">五、试卷题目特征分析</h2>
-    </div>
+      <div class="report-body-head">
+        <h2>五、试卷题目特征分析</h2>
+        <p class="report-name"></p>
+      </div>
 
-    <div class="report-part">
-      <table class="table">
-        <tr>
-          <th>大题号</th>
-          <th>小题号</th>
-          <th>难度系数</th>
-          <th>满分</th>
-          <th>最高分</th>
-          <th>最低分</th>
-          <th>平均分</th>
-          <th>标准差</th>
-          <th>有效卷数</th>
-          <th>差异系数</th>
-          <th>区分度</th>
-          <th>零分人数</th>
-          <th>满分人数</th>
-        </tr>
-        <tr v-for="item in questions" :key="item.id">
-          <td>{{ item.mainNumber }}</td>
-          <td>{{ item.subNumber }}</td>
-          <td>{{ item.difficulty }}</td>
-          <td>{{ item.totalScore }}</td>
-          <td>{{ item.maxScore }}</td>
-          <td>{{ item.minScore }}</td>
-          <td>{{ item.avgScore }}</td>
-          <td>{{ item.stdev }}</td>
-          <td>{{ item.effectiveCount }}</td>
-          <td>{{ item.coefficient }}</td>
-          <td>{{ item.discrimination }}</td>
-          <td>{{ item.zeroCount }}</td>
-          <td>{{ item.fullCount }}</td>
-        </tr>
-      </table>
+      <div class="report-part">
+        <table class="table question-table">
+          <colgroup>
+            <col style="width: 45px" />
+            <col style="width: 45px" />
+            <col style="width: 59px" />
+            <col style="width: 45px" />
+            <col style="width: 45px" />
+            <col style="width: 45px" />
+            <col style="width: 45px" />
+            <col style="width: 45px" />
+            <col style="width: 59px" />
+            <col style="width: 59px" />
+            <col style="width: 45px" />
+            <col style="width: 59px" />
+            <col style="width: 59px" />
+          </colgroup>
+          <tr>
+            <th>大题号</th>
+            <th>小题号</th>
+            <th>难度<br />系数</th>
+            <th>满分</th>
+            <th>最高分</th>
+            <th>最低分</th>
+            <th>平均分</th>
+            <th>标准差</th>
+            <th>有效<br />卷数</th>
+            <th>差异<br />系数</th>
+            <th>区分度</th>
+            <th>零分<br />人数</th>
+            <th>满分<br />人数</th>
+          </tr>
+          <tr v-for="item in questions" :key="item.id">
+            <td>{{ item.mainNumber }}</td>
+            <td>{{ item.subNumber }}</td>
+            <td>{{ item.difficulty }}</td>
+            <td>{{ item.totalScore }}</td>
+            <td>{{ item.maxScore }}</td>
+            <td>{{ item.minScore }}</td>
+            <td>{{ item.avgScore }}</td>
+            <td>{{ item.stdev }}</td>
+            <td>{{ item.effectiveCount }}</td>
+            <td>{{ item.coefficient }}</td>
+            <td>{{ item.discrimination }}</td>
+            <td>{{ item.zeroCount }}</td>
+            <td>{{ item.fullCount }}</td>
+          </tr>
+        </table>
+      </div>
     </div>
+    <div class="report-pfoot"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { SASQuestion } from "@/types";
+// import { SASQuestion } from "@/types";
+
+// let questions = $shallowRef<SASQuestion[]>([]);
+
+interface QuestionType {
+  id: number;
+  mainNumber: number;
+  subNumber: number;
+  difficulty: number;
+  totalScore: number;
+  maxScore: number;
+  minScore: number;
+  avgScore: number;
+  stdev: number;
+  effectiveCount: number;
+  coefficient: number;
+  discrimination: number;
+  zeroCount: number;
+  fullCount: number;
+}
+
+let questions = $shallowRef<QuestionType[]>([]);
 
-let questions = $shallowRef<SASQuestion[]>([]);
+for (let i = 0; i < 37; i++) {
+  questions.push({
+    id: i,
+    mainNumber: 1,
+    subNumber: 2,
+    difficulty: 1,
+    totalScore: 1,
+    maxScore: 1,
+    minScore: 1,
+    avgScore: 1,
+    stdev: 1,
+    effectiveCount: 1,
+    coefficient: 1,
+    discrimination: 1,
+    zeroCount: 1,
+    fullCount: 1,
+  });
+}
 </script>

src/features/report/ReportQuestionGroup.vue

@@ -1,33 +1,47 @@
 <template>
-  <div class="report-page report-cover">
+  <div class="report-page report-question">
     <div class="report-body">
-      <h2 class="report-body-title">九、试题难度分组分布</h2>
-    </div>
+      <div class="report-body-head">
+        <h2>九、试题难度分组分布</h2>
+        <p class="report-name"></p>
+      </div>
 
-    <div class="report-part">
-      <table class="custom-table">
-        <tr>
-          <td>大题号</td>
-          <td>小题号</td>
-          <template
-            v-for="(item, index) in props.totalScore / scoreGap"
-            :key="index"
-          >
-            <td v-if="index >= limitScoreIndex">{{ index * scoreGap }}-</td>
-          </template>
-        </tr>
-        <tr v-for="(item, index) in props.questions" :key="index">
-          <td>{{ item.mainNumber }}</td>
-          <td>{{ item.subNumber }}</td>
-          <template
-            v-for="(item2, index2) in item.difficulityLevel"
-            :key="index2"
-          >
-            <td v-if="index2 >= limitScoreIndex" v-round-number>{{ item2 }}</td>
-          </template>
-        </tr>
-      </table>
+      <div class="report-part">
+        <table class="table question-table question-group-table">
+          <colgroup>
+            <col style="width: 30px" />
+            <col style="width: 30px" />
+            <col
+              v-for="(item, index) in props.totalScore / scoreGap"
+              :key="index"
+            />
+          </colgroup>
+          <tr>
+            <th>大题号</th>
+            <th>小题号</th>
+            <template
+              v-for="(item, index) in props.totalScore / scoreGap"
+              :key="index"
+            >
+              <th v-if="index >= limitScoreIndex">{{ index * scoreGap }}-</th>
+            </template>
+          </tr>
+          <tr v-for="(item, index) in props.questions" :key="index">
+            <td>{{ item.mainNumber }}</td>
+            <td>{{ item.subNumber }}</td>
+            <template
+              v-for="(item2, index2) in item.difficulityLevel"
+              :key="index2"
+            >
+              <td v-if="index2 >= limitScoreIndex" v-round-number>
+                {{ item2 }}
+              </td>
+            </template>
+          </tr>
+        </table>
+      </div>
     </div>
+    <div class="report-pfoot"></div>
   </div>
 </template>
 

src/features/report/ReportScore.vue

@@ -1,10 +1,20 @@
 <template>
-  <div class="report-page report-cover">
+  <div class="report-page report-score">
     <div class="report-body">
-      <h2 class="report-body-title">三、科目成绩频率分布</h2>
+      <div class="report-body-head">
+        <h2>三、科目成绩频率分布</h2>
+        <p class="report-name"></p>
+      </div>
 
-      <div class="report-part score-table">
-        <table class="table">
+      <div class="report-part">
+        <table class="table score-table">
+          <colgroup>
+            <col style="width: 160px" />
+            <col style="width: 120px" />
+            <col style="width: 140px" />
+            <col style="width: 160px" />
+            <col style="width: 95px" />
+          </colgroup>
           <tr>
             <th>分数段</th>
             <th>频数</th>
@@ -22,18 +32,19 @@
         </table>
       </div>
 
-      <div class="report-part">
+      <div class="report-part score-chart">
         <h4 class="report-part-title">频率分布表（{{ scoreGap }}分）</h4>
         <!-- TODO: chart -->
       </div>
 
-      <div class="report-part">
+      <div class="report-part part-intro">
         <p>
           <span>说明：</span
           >根据本表数据可绘制频率分布图，以显示成绩分布是否符合正态分布。据此表绘出的折线图宜呈正偏态，显示出高分段考生人数较多，有利于“优中选优”；若呈正偏态，则高分段考生人数偏少，试卷总体上较难或评分过“紧”；若出现“双峰”或“多峰”，可能存在评分标准控制不一致（不同阅卷老师之间，或不同阅卷时段之间）、试题内容或评分标准较特殊（如教材上的内容已陈旧过时而评分采用的是最新或更为权威的标准），或考生异质性较强且较为集中（如较高水平考生和较低水平考生都较多）的情况。
         </p>
       </div>
     </div>
+    <div class="report-pfoot"></div>
   </div>
 </template>
 
@@ -48,5 +59,15 @@ interface ScoreItemType {
 
 let scoreList = $shallowRef<ScoreItemType[]>([]);
 
+for (let i = 0; i < 15; i++) {
+  scoreList.push({
+    scoreRange: i * 10 + "-" + (i + 1) * 10,
+    frequency: 15,
+    rate: 45,
+    accumulativeFrequency: 45,
+    accumulativeRate: 45,
+  });
+}
+
 let scoreGap = $ref(10);
 </script>

src/features/report/ReportScoreGroup.vue

@@ -1,10 +1,20 @@
 <template>
-  <div class="report-page report-cover">
+  <div class="report-page report-score">
     <div class="report-body">
-      <h2 class="report-body-title">四、科目分数线分组的频率分布</h2>
+      <div class="report-body-head">
+        <h2>四、科目分数线分组的频率分布</h2>
+        <p class="report-name"></p>
+      </div>
 
-      <div class="report-part score-table">
-        <table class="table">
+      <div class="report-part">
+        <table class="table score-table">
+          <colgroup>
+            <col style="width: 160px" />
+            <col style="width: 120px" />
+            <col style="width: 140px" />
+            <col style="width: 160px" />
+            <col style="width: 95px" />
+          </colgroup>
           <tr>
             <th>分数段</th>
             <th>频数</th>
@@ -22,15 +32,19 @@
         </table>
       </div>
 
-      <div class="report-part">
+      <div class="report-part freq-chart">
         <h4 class="report-part-title">频率分布表</h4>
         <!-- TODO: chart -->
       </div>
 
-      <div class="report-part">
-        <p><span>说明：</span>{{ resultCont }}</p>
+      <div class="report-part part-intro">
+        <p>
+          <span>说明：</span
+          >可根据实际情况，例如起始计算分，及格线、国家单科线、复试单科线、自定义等来统计频数、频率，并以表格、曲线图的方式展现出来。
+        </p>
       </div>
     </div>
+    <div class="report-pfoot"></div>
   </div>
 </template>
 
@@ -44,6 +58,4 @@ interface ScoreItemType {
 }
 
 let scoreList = $shallowRef<ScoreItemType[]>([]);
-
-let resultCont = $ref("");
 </script>

src/features/report/ReportSummary.vue

@@ -13,18 +13,24 @@
         </div>
         <div class="summary-body">
           <div class="summary-item">
-            <p>满分：{{ paperInfo.totalScore }}</p>
-            <p>最高分：{{ paperInfo.maxScore }}</p>
-            <p>有效样本数：{{ paperInfo.totalCount }}</p>
+            <div class="summary-item-body">
+              <p>满分：{{ paperInfo.totalScore }}</p>
+              <p>最高分：{{ paperInfo.maxScore }}</p>
+              <p>有效样本数：{{ paperInfo.totalCount }}</p>
+            </div>
           </div>
           <div class="summary-item">
-            <p>平均分：{{ paperInfo.avgScore }}</p>
-            <p>标准差：{{ paperInfo.stdev }}</p>
-            <p>差异系数：{{ paperInfo.coefficient }}</p>
+            <div class="summary-item-body">
+              <p>平均分：{{ paperInfo.avgScore }}</p>
+              <p>标准差：{{ paperInfo.stdev }}</p>
+              <p>差异系数：{{ paperInfo.coefficient }}</p>
+            </div>
           </div>
           <div class="summary-item">
-            <p>信度：{{ paperInfo.reliability1 }}</p>
-            <p>难度系数：{{ paperInfo.difficulty }}</p>
+            <div class="summary-item-body">
+              <p>信度：{{ paperInfo.reliability1 }}</p>
+              <p>难度系数：{{ paperInfo.difficulty }}</p>
+            </div>
           </div>
         </div>
       </div>
@@ -40,34 +46,48 @@
             <span>有效样本数</span
             >总分为起始计算分及以上的试卷数量，如无自定义系统默认满分100的，默认为40，满分150的默认为50，满分300的默认为160；
           </div>
-          <div>
+          <div class="summary-intro-item">
             <span>平均分、标准差、差异系数、信度、难度系数</span
             >均基于有效样本分析计算;
           </div>
-          <div>
+          <div class="summary-intro-item">
             <span>差异系数</span
             >是一组数据的标准差与其均值的百分比，是测算数据离散程度的相对指标，是一种相对差异量数，离散系数大，代表其数据的离散程度大，其平均数的代表性就差，反之亦然；
           </div>
-          <div>
+          <div class="summary-intro-item">
             <span>信度</span
             >一致性、稳定性及可家性，采用克伦巴蒜口系数：“信度值最好在0.8以上，0.7-0.8之间可以接受；分量表的信度
             系数最好在0.7以上，0.6-0.7还可以接受。低于0.6的试卷，若所涉学科知识或能力要素井不庞杂，则页检讨是否存在试题内容或能力要求过偏，超出本专业考生能力范围
             或存在不届于所在学科领域的试题内容或能力要求；
           </div>
-          <div>
+          <div class="summary-intro-item">
             <span>难度系数</span
             >为科目平均分与科目满分的比值，滩度值在0.5-0.6之间较为适宜，高于0.6则可能试卷试题总体上较易或评分过“松”，低于0.5则可能试卷试题总体上较难或评分过“紧”。
           </div>
         </div>
       </div>
     </div>
+    <div class="report-pfoot"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { SASPaper } from "@/types";
+// import type { SASPaper } from "@/types";
 
-let paperInfo = $shallowRef<SASPaper | null>(null);
+// let paperInfo = $shallowRef<SASPaper | null>(null);
+let paperInfo = $ref({
+  projectName: "2021年武汉xx大学",
+  courseCode: 111,
+  courseName: "数学",
+  totalCount: 150,
+  totalScore: 150,
+  maxScore: 145,
+  avgScore: 100,
+  stdev: 1,
+  coefficient: 45,
+  reliability1: 0.54,
+  difficulty: 2,
+});
 
 let resultCont = $ref("");
 </script>

src/features/report/assets/report.css

@@ -15,6 +15,7 @@
   background-color: #f0f0f0;
   color: #172c4d;
   font-size: 15px;
+  user-select: text;
 }
 .report-page {
   width: 793px;
@@ -121,7 +122,14 @@
   line-height: 1;
 }
 
-/* cover */
+.part-intro {
+  line-height: 27px;
+}
+.part-intro span {
+  font-weight: 600;
+}
+
+/* report cover */
 .report-cover {
   background-color: #fff;
   background-image: url(./bg-cover.png);
@@ -235,7 +243,7 @@
   background-color: #e02020;
 }
 
-/* compare */
+/* report compare */
 .summary-tabs {
   margin-bottom: 5px;
 }
@@ -299,3 +307,126 @@
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+/* report summary */
+.summary-part .summary-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  background: #0091ff;
+  border-radius: 3px;
+  padding-left: 43px;
+  padding-right: 13px;
+  position: relative;
+  margin-bottom: 12px;
+}
+.summary-part .summary-title::before {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 19px;
+  top: 50%;
+  left: 13px;
+  margin-top: -8px;
+  border-radius: 3px;
+  border-bottom-right-radius: 9px;
+  background-color: #fff;
+}
+.summary-part .summary-title > div {
+  font-size: 15px;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 21px;
+}
+.summary-part .summary-title > div:nth-of-type(2) {
+  font-weight: 400;
+}
+.summary-part .summary-body {
+  font-size: 0px;
+  margin: 0 -6px;
+}
+.summary-part .summary-item {
+  display: inline-block;
+  vertical-align: top;
+  width: 33.33%;
+  padding: 0 6px;
+}
+.summary-part .summary-item-body {
+  height: 123px;
+  background: rgba(0, 145, 255, 0.1);
+  border-radius: 3px;
+  padding: 21px;
+}
+.summary-part .summary-item-body > p {
+  line-height: 21px;
+  font-size: 15px;
+  margin-bottom: 8px;
+}
+.summary-intro-title {
+  margin-bottom: 20px;
+}
+.summary-intro-item {
+  padding: 17px 0;
+  line-height: 32px;
+  font-weight: 400;
+}
+.summary-intro-item:not(:last-child) {
+  border-bottom: 1px solid #ebeff5;
+}
+.summary-intro-item span {
+  float: left;
+  height: 32px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 32px;
+  padding: 0 5px;
+  margin-right: 11px;
+  background: #e1e9f5;
+  border-radius: 1px;
+}
+/* report score */
+.report-score .score-table {
+  height: 404px;
+}
+.report-score .score-table th {
+  border: none;
+  border-bottom: 1px solid #a3b4cc;
+  padding: 0;
+  height: 24px;
+}
+.report-score .score-table td {
+  border: none;
+  border-bottom: 1px solid #e1e5eb;
+  padding: 0;
+}
+.report-score .score-chart {
+  height: 277px;
+}
+.report-score .freq-chart {
+  height: 384px;
+}
+/* report question */
+.report-question .question-table {
+  text-align: center;
+}
+.report-question .question-table th {
+  height: 84px;
+  font-weight: 500;
+  line-height: 19px;
+  padding: 13px;
+
+  background: #f2f3f6;
+}
+.report-question .question-table td {
+  padding: 0;
+  height: 22px;
+  line-height: 1;
+}
+/* report difficulty */
+.diff-part {
+  height: 776px;
+}
+.report-question .question-group-table th {
+  padding: 0;
+  /* font-size: 14px; */
+}