report print-page

src/assets/styles/common.scss

@@ -776,3 +776,7 @@
 .print-page {
   page-break-after: always;
 }
+
+.new-page {
+  page-break-before: always;
+}

src/views/elective/report/components/elective-ai-analysis.vue

@@ -2,7 +2,8 @@
   <div>
     <elective-ai-analysis-step v-for="step in hasAISteps" :key="step.key"
                                :simulate-active="step" :inherit-generation="generation"
-                               :inherit-optional-majors="optionalMajors"></elective-ai-analysis-step>
+                               :inherit-optional-majors="optionalMajors" class="print-page">
+    </elective-ai-analysis-step>
   </div>
 </template>
 

src/views/elective/report/components/elective-test-reports.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class="fx-column">
-    <index-card v-for="test in testResults" :key="test.key" :title="test.title" class="elective-report-card print-page">
-      <test-report :category="test.key" :source="test.result" readonly></test-report>
-    </index-card>
-    <index-card title="选科测评专业" class="mt20 print-page">
-      <test-result :all-test-results="testResults" :selected-majors="summary.selectedList" readonly></test-result>
-      <major-match-evaluation></major-match-evaluation>
-    </index-card>
+  <div>
+    <div v-for="test in testResults" :key="test.key" class="print-page elective-report-card">
+      <index-card :title="test.title">
+        <test-report :category="test.key" :source="test.result" readonly></test-report>
+      </index-card>
+    </div>
+    <div class="print-page elective-report-card">
+      <index-card title="选科测评专业">
+        <test-result :all-test-results="testResults" :selected-majors="summary.selectedList" readonly></test-result>
+        <major-match-evaluation></major-match-evaluation>
+      </index-card>
+    </div>
   </div>
 </template>
 

src/views/elective/report/components/major-introduce-batch.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="professDetail">
-    <index-card v-for="detail in details" :key="detail.code" :title="majors[detail.code]" class="index-card">
+    <index-card v-for="detail in details" :key="detail.code" :title="majors[detail.code]" class="index-card print-page">
       <el-divider content-position="left"><span class="f28">专业概况</span></el-divider>
-      <major-introduce-info :major-detail="detail.overview"></major-introduce-info>
+      <major-introduce-info :major-detail="detail.overview" class="print-page"></major-introduce-info>
       <el-divider content-position="left"><span class="f28">就业前景</span></el-divider>
       <major-introduce-job :prospects="detail.prospects"></major-introduce-job>
     </index-card>

src/views/elective/report/index.vue

@@ -1,25 +1,25 @@
 <template>
-  <div class="app-container fx-column fx-sta-cen">
+  <div class="app-container">
     <div class="elective-report-container">
-      <div class="width100 print-page">
+      <div class="width100">
         <el-image :src="require('@/assets/images/elective/elective_report_cover.png')"></el-image>
       </div>
-      <el-divider><h1>选科测评报告</h1></el-divider>
-      <elective-test-reports class="print-page"></elective-test-reports>
+      <el-divider class="new-page"><h1>选科测评报告</h1></el-divider>
+      <elective-test-reports></elective-test-reports>
       <el-divider><h1>选科大数据分析</h1></el-divider>
-      <group-subject-query></group-subject-query>
+      <group-subject-query class="print-page"></group-subject-query>
       <el-divider><h1>自选专业</h1></el-divider>
-      <major-match-optional></major-match-optional>
+      <major-match-optional class="print-page"></major-match-optional>
       <el-divider><h1>专业介绍</h1></el-divider>
       <major-introduce-batch></major-introduce-batch>
       <el-divider><h1>选科成绩表</h1></el-divider>
-      <group-score-table></group-score-table>
+      <group-score-table class="print-page"></group-score-table>
       <el-divider><h1>选科进程表</h1></el-divider>
-      <elective-flow-table></elective-flow-table>
-      <el-divider><h1>选科录取分析报告</h1></el-divider>
-      <elective-enroll-analysis></elective-enroll-analysis>
+      <elective-flow-table class="print-page"></elective-flow-table>
       <!-- AI分析可能有也可能没有，在elective-ai-analysis内部控制 -->
       <elective-ai-analysis></elective-ai-analysis>
+      <el-divider><h1>选科录取分析报告</h1></el-divider>
+      <elective-enroll-analysis class="print-page"></elective-enroll-analysis>
     </div>
   </div>
 </template>

src/views/elective/test/components/test-report-mixin.js

@@ -84,9 +84,9 @@ export default {
       } : this.mergedData[key])
       const rotateConfig = this.reportConfig.chartBarRotate ? {
         yAxis: { type: 'category', data: propNames },
-        xAxis: { type: 'value' }
+        xAxis: { type: 'value', axisLabel: { interval: 0 } }
       } : {
-        xAxis: { type: 'category', data: propNames },
+        xAxis: { type: 'category', data: propNames, axisLabel: { interval: 0 } },
         yAxis: { type: 'value' }
       }
       return {