report md

src/features/report/ReportCompare.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="report-page report-compare">
+    <div class="report-body">
+      <div class="report-body-head">
+        <h2>一、关联分析</h2>
+        <p class="report-name"></p>
+      </div>
+
+      <div class="compare-summary report-part">
+        <div class="summary-tabs">
+          <div
+            v-for="item in summaryList"
+            :key="item.id"
+            class="summary-tabs-item"
+          >
+            {{ item.projectName }}
+          </div>
+          <div class="summary-tabs-item">12121</div>
+          <div class="summary-tabs-item">12121</div>
+        </div>
+        <table class="table summary-table">
+          <colgroup>
+            <col style="width: 113px" />
+            <col style="width: 47px" />
+            <col style="width: 47px" />
+            <col style="width: 64px" />
+            <col style="width: 64px" />
+            <col style="width: 64px" />
+            <col style="width: 64px" />
+            <col style="width: 64px" />
+            <col style="width: 47px" />
+            <col style="width: 47px" />
+            <col style="width: 47px" />
+          </colgroup>
+          <tr>
+            <th>科目名称</th>
+            <th>科目<br />代码</th>
+            <th>满分</th>
+            <th>最高分</th>
+            <th>起始<br />计算分</th>
+            <th>有效<br />样本数</th>
+            <th>平均分</th>
+            <th>标准差</th>
+            <th>差异<br />系数</th>
+            <th>信度</th>
+            <th>难度<br />系数</th>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+            <td>1</td>
+          </tr>
+          <tr v-for="item in summaryList" :key="item.id">
+            <td>{{ item.courseName }}</td>
+            <td>{{ item.courseCode }}</td>
+            <td>{{ item.totalScore }}</td>
+            <td>{{ item.maxScore }}</td>
+            <td>{{ item.startScore }}</td>
+            <td>{{ item.totalCount }}</td>
+            <td>{{ item.avgScore }}</td>
+            <td>{{ item.stdev }}</td>
+            <td>{{ item.coefficient }}</td>
+            <td>{{ item.reliability1 }}</td>
+            <td>{{ item.difficulty }}</td>
+          </tr>
+        </table>
+      </div>
+
+      <div class="compare-count report-part">
+        <h3 class="report-part-title">翻译硕士英语试卷特征数量对比分析</h3>
+        <!-- TODO: chart -->
+      </div>
+      <div class="compare-rate report-part">
+        <h3 class="report-part-title">
+          翻译硕士英语科目成绩(总分)等距(10分)分组频数分布对比分析
+        </h3>
+        <p class="count-info">分数间隔：{{ scoreGap }}</p>
+        <!-- TODO: chart -->
+      </div>
+      <div class="count-intro report-part result-part">
+        <p>{{ resultCont }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SASPaper } from "@/types";
+
+let summaryList = $shallowRef<SASPaper[]>([]);
+let scoreGap = $ref(10);
+let resultCont = $ref("");
+</script>

src/features/report/ReportCover.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="report-page report-cover">
+    <div class="report-body">
+      <h1 class="cover-title">成绩分析研究报告</h1>
+
+      <div class="cover-info">
+        <p>考试名称：{{ props.coverInfo.examName }}</p>
+        <p>学校：{{ props.coverInfo.schoolName }}</p>
+        <p>科目：{{ props.coverInfo.courseName }}</p>
+      </div>
+    </div>
+  </div>
+  <div class="report-page report-intro">
+    <div class="report-phead">{{ props.coverInfo.schoolName }}成绩分析报告</div>
+    <div class="report-body">
+      <h2 class="intro-title">报告说明</h2>
+      <p>
+        研究生成绩分析系统依托于启明泰和研究生问卷系统，直接从阅卷系统获取相关试卷结构数据、评分数据，将相关数据进行各种维度的分析。其中设计，不同年度总体对比分析，总分、得分分布、各小题特征分析等分析，国绕本套试题的分析报告可总结本年度命题质量，为来年命题提供参考。以下为本报告的分析说明：
+      </p>
+      <table class="table intro-table">
+        <colgroup>
+          <col style="width: 60px" />
+          <col style="width: 197px" />
+          <col />
+        </colgroup>
+        <tr>
+          <th>序号</th>
+          <th>分析</th>
+          <th>说明</th>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>关联分析</td>
+          <td>
+            对比分析不同年度的整体分致数据变化，若无其它年度分析项目，此投告为空。
+          </td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>科目试卷特征量数</td>
+          <td>针对本年度数据做整体总结。</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td>科目成绩频率分布</td>
+          <td>分析各区间段内人数频率以表格及曲线图展示，整体获知出题情况。</td>
+        </tr>
+        <tr>
+          <td>4</td>
+          <td>科目分数线分组频率分布</td>
+          <td>
+            可自定义分数点，如无自定义则系统默认三个点：零、默认起始计算分、满分，便于划线录取。
+          </td>
+        </tr>
+        <tr>
+          <td>5</td>
+          <td>试题特征量数分析</td>
+          <td>
+            分析每道题的特征：谁度、平均值、方差、区分度等，反映出每道题的出题质量。
+          </td>
+        </tr>
+        <tr>
+          <td>6</td>
+          <td>试卷题目难度编排曲线</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>7</td>
+          <td>试题题目区分度编排</td>
+          <td>曲线展示整卷区分度的变化，反应各题对本次选材的贡献度。</td>
+        </tr>
+        <tr>
+          <td>8</td>
+          <td>试题难度分组分布</td>
+          <td>
+            根据阅卷的打分结构计算每一道大题下展每一道小题，在各总分分数区间段的难度系效并形成曲线圈，并可自定义总分分数区间段，并计算难度系数，当某些题目在高分段的难度表现的比低分段的表现更难时需要考恧出题是否过偏或。
+          </td>
+        </tr>
+        <tr>
+          <td>9</td>
+          <td>题型难度分组分布</td>
+          <td>
+            在难度系数上可将各题按题型、考查知识点、考查能力点
+            等多维度来分析全卷在各考查维度的难度占比 （需要定义
+            并导入各题的属性）。
+          </td>
+        </tr>
+        <tr>
+          <td>10</td>
+          <td>题型区分度分组分布</td>
+          <td>
+            在区分度上可将各题按题型、考查知识点、考查能力点等多维度来分析全卷在各考查维度的区分度占比（需要定义
+            并导入各题的属性）。
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div class="report-pfoot"></div>
+  </div>
+  <div class="report-page report-noun">
+    <div class="report-phead">{{ props.coverInfo.schoolName }}成绩分析报告</div>
+    <div class="report-body">
+      <h2 class="noun-title">相关名词解释</h2>
+      <div class="noun-list">
+        <div class="noun-item">
+          <div class="noun-label">起始计算分</div>
+          <div class="noun-content">
+            只计算总分在此分数及以上的试卷，其中平均分、标准差、差异系数、信度、难度系数均依靠有效样本分析计算，如无自定义系统默认满分100的，默认为40，满分150的默认为50，满分300的默认为160;
+          </div>
+        </div>
+        <div class="noun-item">
+          <div class="noun-label">有效样本</div>
+          <div class="noun-content">总分在起始计算分到满分的试卷；</div>
+        </div>
+        <div class="noun-item">
+          <div class="noun-label">平均分</div>
+          <div class="noun-content">有效样本试卷的平均值；</div>
+        </div>
+        <div class="noun-item">
+          <div class="noun-label">标准差</div>
+          <div class="noun-content">有效样本试卷的标准差；</div>
+        </div>
+        <div class="noun-item">
+          <div class="noun-label">差昇系数</div>
+          <div class="noun-content">
+            一组数据的标准差与其均值的百分比，是测算数据离散程度的相对指标，是一种相对差异量数，离散系数大，代表其效据的离散程度大，其平均数的代表性就差，反之亦然；
+          </div>
+        </div>
+        <div class="noun-item">
+          <div class="noun-label">信度</div>
+          <div class="noun-content">
+            一致性、稳定性及可靠性，“信度值最好在0.8以上，0.7-0.8之间可以接受；分量表的信度系数最好在0.7以上，0.6-0.7还可以接受。低于0.6的试卷，若所涉学科知识或能力要索并不庞杂，则须检讨是否存在试题内容或能力要求过偏，超出本专业考生能力范国或存在不居于所在学科领域的试题内容或能力要求；
+          </div>
+        </div>
+        <div class="noun-item">
+          <div class="noun-label">难度系数</div>
+          <div class="noun-content">
+            为平均分与满分的比值，淮度值在0.5-0.6之间较为适宜，高于0.6则可能试卷试题总体上较易或评分过“松”，低于0.5则可能试卷试题总体上较难或评分过“紧”；
+          </div>
+        </div>
+        <div class="noun-item">
+          <div class="noun-label">区分度</div>
+          <div class="noun-content">
+            区分度是指一道题能多大程度上把不同水平的人区分开来，一个具有良好区分度的题目，在区分被测者时应当是有效的；对于区分度值在0.2以下，甚至为负数的试题，要重点检查过题、标准答案（评分标准）设计及评分标准实际掌握等是否存在谐误0.2-0.3尚可，0.3~0.4良好，0.4以上非常优秀。
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="report-pfoot"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ConverInfoType {
+  examName: string;
+  schoolName: string;
+  courseName: string;
+}
+
+const props = defineProps<{
+  coverInfo: ConverInfoType;
+}>();
+</script>

src/features/report/ReportDifficulty.vue

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

src/features/report/ReportDiscrimination.vue

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

src/features/report/ReportMain.vue

@@ -0,0 +1,44 @@
+<template>
+  <div :class="['report', { 'is-print': viewType === 'print' }]">
+    <ReportCover :coverInfo="courseInfo" />
+    <ReportCompare />
+    <ReportSummary />
+    <ReportScore />
+    <ReportScoreGroup />
+    <ReportQuestion />
+    <ReportDifficulty />
+    <ReportDiscrimination />
+    <ReportQuestionGroup
+      :questions="questions"
+      :startScore="courseInfo.startScore"
+      :totalScore="courseInfo.totalScore"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ReportCover from "./ReportCover.vue";
+import ReportCompare from "./ReportCompare.vue";
+import ReportSummary from "./ReportSummary.vue";
+import ReportScore from "./ReportScore.vue";
+import ReportScoreGroup from "./ReportScoreGroup.vue";
+import ReportQuestion from "./ReportQuestion.vue";
+import ReportQuestionGroup from "./ReportQuestionGroup.vue";
+import ReportDifficulty from "./ReportDifficulty.vue";
+import ReportDiscrimination from "./ReportDiscrimination.vue";
+import { SASQuestion } from "@/types";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+let viewType = route.params.viewType;
+
+let courseInfo = {
+  examName: "",
+  schoolName: "",
+  courseName: "",
+  startScore: 40,
+  totalScore: 150,
+};
+
+let questions: SASQuestion[] = $ref([]);
+</script>

src/features/report/ReportQuestion.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="report-page report-cover">
+    <div class="report-body">
+      <h2 class="report-body-title">五、试卷题目特征分析</h2>
+    </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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SASQuestion } from "@/types";
+
+let questions = $shallowRef<SASQuestion[]>([]);
+</script>

src/features/report/ReportQuestionGroup.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="report-page report-cover">
+    <div class="report-body">
+      <h2 class="report-body-title">九、试题难度分组分布</h2>
+    </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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SASQuestion } from "@/types";
+import { computed } from "vue";
+
+const props = defineProps<{
+  questions: SASQuestion[];
+  totalScore: number;
+  startScore: number;
+}>();
+let limitScoreIndex = computed(() => {
+  return Math.floor(props.startScore / scoreGap);
+});
+let scoreGap = $ref(10);
+</script>

src/features/report/ReportScore.vue

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

src/features/report/ReportScoreGroup.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="report-page report-cover">
+    <div class="report-body">
+      <h2 class="report-body-title">四、科目分数线分组的频率分布</h2>
+
+      <div class="report-part score-table">
+        <table class="table">
+          <tr>
+            <th>分数段</th>
+            <th>频数</th>
+            <th>频率(%)</th>
+            <th>累计频数</th>
+            <th>累计频率(%)</th>
+          </tr>
+          <tr v-for="item in scoreList" :key="item.scoreRange">
+            <td>{{ item.scoreRange }}</td>
+            <td>{{ item.frequency }}</td>
+            <td>{{ item.rate }}%</td>
+            <td>{{ item.accumulativeFrequency }}</td>
+            <td>{{ item.accumulativeRate }}%</td>
+          </tr>
+        </table>
+      </div>
+
+      <div class="report-part">
+        <h4 class="report-part-title">频率分布表</h4>
+        <!-- TODO: chart -->
+      </div>
+
+      <div class="report-part">
+        <p><span>说明：</span>{{ resultCont }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ScoreItemType {
+  scoreRange: string;
+  frequency: number;
+  rate: number;
+  accumulativeFrequency: number;
+  accumulativeRate: number;
+}
+
+let scoreList = $shallowRef<ScoreItemType[]>([]);
+
+let resultCont = $ref("");
+</script>

src/features/report/ReportSummary.vue

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

src/features/report/assets/report.css

@@ -0,0 +1,301 @@
+/* common */
+.table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+  text-align: left;
+}
+.table td,
+.table th {
+  padding: 8px 10px;
+  border: 1px solid #e1e5eb;
+}
+/* report */
+.report {
+  background-color: #f0f0f0;
+  color: #172c4d;
+  font-size: 15px;
+}
+.report-page {
+  width: 793px;
+  height: 1122px;
+  position: relative;
+  padding: 80px 27px 67px;
+  page-break-after: always;
+  background-color: #e1e9f5;
+  margin: 10px auto;
+
+  background-image: url(./bg-page.png);
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+}
+.report-page.is-print {
+  margin: 0 auto;
+}
+.report-body-head {
+  position: absolute;
+  left: 27px;
+  top: 27px;
+  right: 27px;
+  height: 27px;
+  z-index: 9;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.report-body-head > h2 {
+  font-size: 26px;
+  font-weight: bold;
+  line-height: 1;
+}
+.report-body-head > p {
+  font-size: 15px;
+  font-weight: 400;
+  color: #405980;
+  margin: 0;
+}
+
+.report-phead {
+  position: absolute;
+  top: 27px;
+  left: 53px;
+  right: 53px;
+  z-index: 9;
+
+  height: 16px;
+  font-size: 15px;
+  font-weight: 400;
+  color: #405980;
+  line-height: 1;
+}
+.report-phead::after {
+  content: "";
+  position: absolute;
+  top: 7px;
+  right: 0;
+  width: 93px;
+  height: 3px;
+  background-image: url(./bg-color.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.report-pfoot {
+  position: absolute;
+  bottom: 27px;
+  left: 53px;
+  right: 53px;
+  z-index: 9;
+
+  height: 13px;
+  font-size: 13px;
+  font-weight: 400;
+  color: #405980;
+  line-height: 1;
+}
+.report-pfoot::after {
+  content: "";
+  position: absolute;
+  top: 5px;
+  left: 0;
+  width: 93px;
+  height: 3px;
+  background-image: url(./bg-color.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.report-part {
+  padding: 27px;
+  border-radius: 5px;
+  background-color: #fff;
+  position: relative;
+}
+.report-part:not(:last-child) {
+  margin-bottom: 13px;
+}
+.report-part-title {
+  height: 20px;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+/* cover */
+.report-cover {
+  background-color: #fff;
+  background-image: url(./bg-cover.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+}
+.report-cover .cover-title {
+  position: absolute;
+  font-size: 59px;
+  font-weight: 600;
+  line-height: 83px;
+  top: 149px;
+  left: 107px;
+  color: #fff;
+}
+.report-cover .cover-info {
+  position: absolute;
+  left: 107px;
+  bottom: 107px;
+  font-weight: 400;
+  line-height: 23px;
+}
+.report-cover .cover-info p {
+  margin-top: 13px;
+}
+
+.report-intro,
+.report-noun {
+  background-color: #fff;
+  background-image: none;
+  padding: 83px 53px 93px;
+}
+
+.intro-title {
+  height: 27px;
+  font-size: 27px;
+  font-weight: bold;
+  line-height: 1;
+  margin-bottom: 27px;
+}
+
+.intro-title + p {
+  font-weight: 400;
+  line-height: 27px;
+  margin-bottom: 27px;
+}
+
+.intro-table th {
+  background-color: #0091ff;
+  color: #fff;
+}
+.intro-table td:first-child,
+.intro-table th:first-child {
+  text-align: center;
+}
+.intro-table td,
+.intro-table th {
+  line-height: 24px;
+}
+
+.noun-title {
+  height: 27px;
+  font-size: 27px;
+  font-weight: bold;
+  line-height: 1;
+  margin-bottom: 20px;
+}
+.noun-item {
+  padding: 20px 0;
+  border-bottom: 1px solid #e1e5eb;
+  min-height: 75px;
+}
+.noun-item .noun-label {
+  float: left;
+  width: 107px;
+  line-height: 32px;
+  height: 32px;
+  text-align: center;
+  color: #fff;
+  font-weight: bold;
+}
+.noun-item .noun-content {
+  margin-left: 131px;
+  font-weight: 400;
+  line-height: 27px;
+}
+
+.noun-item:nth-of-type(1) .noun-label {
+  background-color: #6236ff;
+}
+.noun-item:nth-of-type(2) .noun-label {
+  background-color: #0091ff;
+}
+.noun-item:nth-of-type(3) .noun-label {
+  background-color: #32c5ff;
+}
+.noun-item:nth-of-type(4) .noun-label {
+  background-color: #44d7b6;
+}
+.noun-item:nth-of-type(5) .noun-label {
+  background-color: #6dd400;
+}
+.noun-item:nth-of-type(6) .noun-label {
+  background-color: #f7b500;
+}
+.noun-item:nth-of-type(7) .noun-label {
+  background-color: #fa6400;
+}
+.noun-item:nth-of-type(8) .noun-label {
+  background-color: #e02020;
+}
+
+/* compare */
+.summary-tabs {
+  margin-bottom: 5px;
+}
+.summary-tabs-item {
+  display: inline-block;
+  vertical-align: top;
+
+  background: rgba(0, 145, 255, 0.2);
+  border-radius: 1px;
+  padding: 8px 12px;
+  line-height: 21px;
+  margin-right: 5px;
+}
+.summary-tabs-item:nth-of-type(2) {
+  background: rgba(68, 215, 182, 0.2);
+}
+.summary-table td,
+.summary-table th {
+  text-align: center;
+  border-color: rgba(0, 0, 0, 0.1);
+}
+.summary-table th {
+  background-color: #0091ff;
+  color: #fff;
+  font-size: 15px;
+  padding: 5px 2px;
+  line-height: 18px;
+}
+.summary-table td {
+  font-size: 15px;
+  padding: 10px;
+  line-height: 20px;
+}
+.summary-table tr:nth-of-type(2) {
+  background: rgba(0, 145, 255, 0.2);
+}
+.summary-table tr:nth-of-type(3) {
+  background: rgba(68, 215, 182, 0.2);
+}
+.compare-count {
+  height: 255px;
+}
+.compare-rate {
+  height: 345px;
+}
+.result-part {
+  min-height: 86px;
+  padding-left: 72px;
+}
+.result-part::before {
+  content: "";
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  top: 50%;
+  margin-top: -16px;
+  left: 27px;
+  z-index: 9;
+
+  background-image: url(./bg-start.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}

src/main.ts

@@ -9,6 +9,7 @@ if (!validUA) {
 import "ant-design-vue/es/message/style/css.js";
 
 import "./styles/global.css";
+import "./features/report/assets/report.css";
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "@/router";

src/router/index.ts

@@ -24,6 +24,8 @@ import PaperAnalysis from "@/features/paperAnalysis/PaperAnalysis.vue";
 import AllAnalysis2 from "@/features/allAnalysis/AllAnalysis2.vue";
 import ProjectCompareManagement from "@/features/projectCompareManagement/ProjectCompareManagement.vue";
 import ProjectCompareDetail2 from "@/features/projectCompareDetail/ProjectCompareDetail2.vue";
+// report
+import ReportMain from '@/features/report/ReportMain.vue';
 
 const routes = [
   { path: "/", redirect: "/login" },
@@ -104,6 +106,10 @@ const routes = [
     ],
     component: Layout,
   },
+  {
+    path:'/report/:viewType',
+    component:ReportMain
+  },
   {
     path: "/:pathMatch(.*)*",
     name: "NotFound",