md

src/assets/styles/report.css

@@ -207,30 +207,30 @@ img {
   line-height: 39px;
 }
 
-/* table */
-.table {
+/* report-table */
+.report-table {
   width: 100%;
   border-spacing: 0;
   border-collapse: collapse;
   text-align: center;
 }
 
-.table th {
+.report-table th {
   padding: 10px;
   background-color: #3da0ff;
   color: #fff;
 }
 
-.table td {
+.report-table td {
   padding: 10px;
   color: #555;
 }
 
-.table-border th {
+.report-table-border th {
   border: 1px solid #3589d8;
 }
 
-.table-border td {
+.report-table-border td {
   border: 1px solid #e9e9e9;
 }
 

src/assets/styles/report.scss

@@ -210,7 +210,7 @@ img {
 }
 
 /* table */
-.table {
+.report-table {
   width: 100%;
   border-spacing: 0;
   border-collapse: collapse;

src/modules/mark/components/ScoreReportPreview.vue

@@ -43,7 +43,7 @@ export default {
   },
   data() {
     return {
-      modalIsShow: false,
+      modalIsShow: true,
       downloading: false,
     };
   },

src/modules/mark/components/report/Report.vue

@@ -48,7 +48,7 @@ export default {
     };
   },
   mounted() {
-    this.initData();
+    this.initData1();
   },
   methods: {
     ...mapMutations("report", ["setData", "resetData"]),

src/modules/mark/components/report/ReportClass.vue

@@ -1,24 +1,18 @@
 <template>
   <div class="report-class">
     <report-box
-      v-for="(classPage, cindex) in classCharts"
-      :key="`chart-${cindex}`"
+      v-for="(page, pindex) in pages"
+      :key="pindex"
       title="班级成绩分析"
     >
       <div
-        v-for="(chart, index) in classPage"
-        :key="index"
+        v-for="(chart, index) in page.charts"
+        :key="`chart-${index}`"
         class="college-chart"
       >
         <v-chart :option="chart" :init-options="initOption"></v-chart>
       </div>
-    </report-box>
-    <report-box
-      v-for="(tgroup, tindex) in classTables"
-      :key="`table-${tindex}`"
-      title="班级成绩分析"
-    >
-      <table class="table table-border">
+      <table v-if="page.tables.length" class="report-table report-table-border">
         <tr>
           <th>班级</th>
           <th>平均分</th>
@@ -29,7 +23,7 @@
           <th>优秀数</th>
           <th>优秀率(%)</th>
         </tr>
-        <tr v-for="(item, ind) in tgroup" :key="ind">
+        <tr v-for="(item, ind) in page.tables" :key="ind">
           <td>{{ item.name }}</td>
           <td>{{ item.avgScore }}</td>
           <td>{{ item.maxScore }}</td>
@@ -47,7 +41,7 @@
 <script>
 import { mapState } from "vuex";
 import ReportBox from "./ReportBox.vue";
-import { sectionArr } from "./utils";
+import { sectionArr, getGroupNum, sectionArrFirstPage } from "./utils";
 import { getBarsOptions, initOption } from "./chart";
 
 export default {
@@ -55,8 +49,7 @@ export default {
   components: { ReportBox },
   data() {
     return {
-      classCharts: [],
-      classTables: [],
+      pages: [],
       initOption,
     };
   },
@@ -74,11 +67,36 @@ export default {
           name: item.className,
         };
       });
-      this.classCharts = sectionArr(
-        sectionArr(classes, 6).map((data) => getBarsOptions(data)),
-        4
+      const maxChartCountPerPage = 4;
+      const maxTableCountPerPage = 30;
+      const groupNum = getGroupNum(classes.length, 6);
+      const groupCharts = sectionArr(classes, groupNum).map((data) =>
+        getBarsOptions(data)
       );
-      this.classTables = sectionArr(classes, 30);
+      let pages = [];
+      let curPage = { charts: [], tables: [] };
+      groupCharts.forEach((item) => {
+        curPage.charts.push(item);
+        if (curPage.charts.length === maxChartCountPerPage) {
+          pages.push(curPage);
+          curPage = { charts: [], tables: [] };
+        }
+      });
+      const firstPageTableCount = Math.floor(
+        (maxChartCountPerPage - curPage.charts.length) *
+          (maxTableCountPerPage / maxChartCountPerPage)
+      );
+      const groupTables = sectionArrFirstPage(
+        classes,
+        maxTableCountPerPage,
+        firstPageTableCount
+      );
+      groupTables.forEach((item) => {
+        curPage.tables = item;
+        pages.push(curPage);
+        curPage = { charts: [], tables: [] };
+      });
+      this.pages = pages;
     },
   },
 };

src/modules/mark/components/report/ReportCollege.vue

@@ -12,7 +12,7 @@
       >
         <v-chart :option="chart" :init-options="initOption"></v-chart>
       </div>
-      <table class="table table-border">
+      <table v-if="page.tables.length" class="report-table report-table-border">
         <tr>
           <th>学院</th>
           <th>平均分</th>
@@ -70,12 +70,12 @@ export default {
       const maxChartCountPerPage = 4;
       const maxTableCountPerPage = 30;
       const groupNum = getGroupNum(college.length, 6);
-      const collegeCharts = sectionArr(college, groupNum).map((data) =>
+      const groupCharts = sectionArr(college, groupNum).map((data) =>
         getBarsOptions(data)
       );
       let pages = [];
       let curPage = { charts: [], tables: [] };
-      collegeCharts.forEach((item) => {
+      groupCharts.forEach((item) => {
         curPage.charts.push(item);
         if (curPage.charts.length === maxChartCountPerPage) {
           pages.push(curPage);
@@ -86,19 +86,17 @@ export default {
         (maxChartCountPerPage - curPage.charts.length) *
           (maxTableCountPerPage / maxChartCountPerPage)
       );
-      console.log(firstPageTableCount);
-      const collegeTables = sectionArrFirstPage(
+      const groupTables = sectionArrFirstPage(
         college,
         maxTableCountPerPage,
         firstPageTableCount
       );
-      collegeTables.forEach((item) => {
+      groupTables.forEach((item) => {
         curPage.tables = item;
         pages.push(curPage);
         curPage = { charts: [], tables: [] };
       });
       this.pages = pages;
-      console.log(pages);
     },
   },
 };

src/modules/mark/components/report/ReportQuestion.vue

@@ -14,7 +14,7 @@
       :key="`table-${tindex}`"
       :title="title"
     >
-      <table class="table table-border">
+      <table class="report-table report-table-border">
         <tr>
           <th>题目名称</th>
           <th>大题号</th>
@@ -54,7 +54,7 @@ export default {
     return {
       questionCharts: [],
       questionTables: [],
-      chartSplitRange: 26,
+      chartSplitRange: 32,
       initOption,
     };
   },
@@ -83,13 +83,12 @@ export default {
           };
         }
       );
-      this.questionTables = sectionArr(question, 30);
+      this.questionTables = sectionArr(question, this.chartSplitRange);
     },
     getChartStyle(count) {
-      const labelHeight = Math.round(1170 / this.chartSplitRange);
-
+      const labelHeight = 42;
       return {
-        height: `${200 + count * labelHeight}px`,
+        height: `${130 + count * labelHeight}px`,
       };
     },
   },

src/modules/mark/components/report/ReportSummary.vue

@@ -6,7 +6,7 @@
       </h1>
       <h1 class="report-sub-title">{{ baseinfo.courseName }} | 成绩报告</h1>
       <h2 class="page-title-2 mb-20">考试概况</h2>
-      <table class="table table-border mb-20">
+      <table class="report-table report-table-border mb-20">
         <tr>
           <th>总考生数</th>
           <th>实考</th>
@@ -43,7 +43,7 @@
         ></v-chart>
       </div>
       <p>说明：10-分数段表示10-20分，包含10分，不包含20分</p>
-      <table class="table table-border">
+      <table class="report-table report-table-border">
         <tr>
           <th>分数段</th>
           <th>分数段人数</th>

src/modules/mark/components/report/ReportTeacher.vue

@@ -1,24 +1,21 @@
 <template>
   <div class="report-teacher">
     <report-box
-      v-for="(tpage, cindex) in teacherCharts"
-      :key="`chart-${cindex}`"
+      v-for="(page, pindex) in pages"
+      :key="pindex"
       title="任课老师分析"
     >
-      <div v-for="(chart, index) in tpage" :key="index" class="college-chart">
+      <div
+        v-for="(chart, index) in page.charts"
+        :key="`chart-${index}`"
+        class="college-chart"
+      >
         <v-chart :option="chart" :init-options="initOption"></v-chart>
       </div>
-    </report-box>
-    <report-box
-      v-for="(tgroup, cindex) in teacherTables"
-      :key="`table-${cindex}`"
-      title="任课老师分析"
-    >
-      <table class="table table-border">
+      <table v-if="page.tables.length" class="report-table report-table-border">
         <tr>
           <th>任课老师</th>
           <th>班级</th>
-          <!-- <th>有效人数</th> -->
           <th>最高分</th>
           <th>最低分</th>
           <th>及格数</th>
@@ -26,12 +23,10 @@
           <th>优秀数</th>
           <th>优秀率(%)</th>
           <th>平均分</th>
-          <!-- <th>相对平均分</th> -->
         </tr>
-        <tr v-for="(item, ind) in tgroup" :key="ind">
+        <tr v-for="(item, ind) in page.tables" :key="ind">
           <td>{{ item.teacher }}</td>
           <td>{{ item.className }}</td>
-          <!-- <td>{{ item.totalCount }}</td> -->
           <td>{{ item.maxScore }}</td>
           <td>{{ item.minScore }}</td>
           <td>{{ item.passCount }}</td>
@@ -39,7 +34,6 @@
           <td>{{ item.excellentCount }}</td>
           <td>{{ item.excellentRate }}</td>
           <td>{{ item.avgScore }}</td>
-          <!-- <td>{{ item.relativeAvgScore }}</td> -->
         </tr>
       </table>
     </report-box>
@@ -49,16 +43,15 @@
 <script>
 import { mapState } from "vuex";
 import ReportBox from "./ReportBox.vue";
-import { sectionArr } from "./utils";
-import { getBarsOptions, initOption } from "./chart";
+import { sectionArr, sectionArrFirstPage } from "./utils";
+import { getBarTeachersOptions, initOption } from "./chart";
 
 export default {
   name: "report-teacher",
   components: { ReportBox },
   data() {
     return {
-      teacherCharts: [],
-      teacherTables: [],
+      pages: [],
       initOption,
     };
   },
@@ -76,11 +69,35 @@ export default {
           name: item.teacher,
         };
       });
-      this.teacherCharts = sectionArr(
-        sectionArr(teacher, 6).map((data) => getBarsOptions(data)),
-        4
+      const maxChartCountPerPage = 4;
+      const maxTableCountPerPage = 30;
+      const groupCharts = sectionArr(teacher, 4).map((data) =>
+        getBarTeachersOptions(data)
       );
-      this.teacherTables = sectionArr(this.teacherClass, 30);
+      let pages = [];
+      let curPage = { charts: [], tables: [] };
+      groupCharts.forEach((item) => {
+        curPage.charts.push(item);
+        if (curPage.charts.length === maxChartCountPerPage) {
+          pages.push(curPage);
+          curPage = { charts: [], tables: [] };
+        }
+      });
+      const firstPageTableCount = Math.floor(
+        (maxChartCountPerPage - curPage.charts.length) *
+          (maxTableCountPerPage / maxChartCountPerPage)
+      );
+      const groupTables = sectionArrFirstPage(
+        this.teacherClass,
+        maxTableCountPerPage,
+        firstPageTableCount
+      );
+      groupTables.forEach((item) => {
+        curPage.tables = item;
+        pages.push(curPage);
+        curPage = { charts: [], tables: [] };
+      });
+      this.pages = pages;
     },
   },
 };

src/modules/mark/components/report/chart.js

@@ -34,6 +34,7 @@ export function getScoreBarOptions(dataObj) {
   return {
     animation: animationIsOpen,
     textStyle: textStyle,
+    color: colors,
     grid: {
       left: 50,
       top: 40,
@@ -109,14 +110,7 @@ export function getBarsOptions(dataObj) {
   return {
     animation: animationIsOpen,
     textStyle: textStyle,
-    color: [
-      "rgba(61, 160, 255, 0.8)",
-      "#4bcb74",
-      "rgba(151, 94, 229, 0.8)",
-      "#999999",
-      "rgba(67, 80, 136, 0.8)",
-      "rgba(250, 212, 68, 0.8)",
-    ],
+    color: colors,
     legend: {
       itemGap: 30,
       itemWidth: 14,
@@ -380,6 +374,113 @@ export function getBarPointTopicOptions(dataObj) {
     series: series,
   };
 }
+export function getBarTeachersOptions(datas) {
+  let xAxisData = [
+    // "实考人数",
+    "最高分",
+    "最低分",
+    "及格人数",
+    "及格率",
+    "优秀人数",
+    "优秀率",
+    "平均分",
+    // "相对平均分",
+  ];
+
+  let legendData = datas.map(function (item) {
+    return item.name;
+  });
+  let barWidth = 22 - datas.length * 2;
+  let series = datas.map(function (item) {
+    return {
+      type: "bar",
+      data: [
+        // item.totalCount,
+        item.maxScore,
+        item.minScore,
+        item.passCount,
+        item.passRate,
+        item.excellentCount,
+        item.excellentRate,
+        item.avgScore,
+        // item.relativeAvgScore,
+      ],
+      barWidth: barWidth,
+      name: item.name,
+    };
+  });
+
+  return {
+    animation: animationIsOpen,
+    textStyle: textStyle,
+    color: colors,
+    legend: {
+      data: legendData,
+      left: "center",
+      bottom: 10,
+      itemGap: 20,
+      itemWidth: 14,
+      textStyle: {
+        fontSize: 19,
+      },
+    },
+    grid: {
+      show: true,
+      top: 30,
+      bottom: 90,
+      left: 50,
+      right: 50,
+      borderColor: "rgba(230,230,230,1)",
+    },
+    xAxis: {
+      type: "category",
+      data: xAxisData,
+      axisTick: {
+        show: false,
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: ["rgba(255,255,255,1)", "rgba(250,250,250,1)"],
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(233,233,233,1)",
+        },
+      },
+      axisLabel: {
+        fontSize: 18,
+        margin: 12,
+        interval: 0,
+      },
+    },
+    yAxis: {
+      type: "value",
+      z: 1,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        lineStyle: {
+          color: "rgba(233,233,233,1)",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(233,233,233,1)",
+        },
+      },
+      axisLabel: {
+        fontSize: 16,
+        color: "#555",
+      },
+    },
+    series: series,
+  };
+}
 
 // other
 export function getBarPointGradeOptions(dataObj) {
@@ -580,114 +681,6 @@ export function getBarPointGradeOptions(dataObj) {
   };
 }
 
-export function getBarTeachersOptions(datas) {
-  let xAxisData = [
-    "实考人数",
-    "最高分",
-    "最低分",
-    "及格人数",
-    "及格率",
-    "优秀人数",
-    "优秀率",
-    "平均分",
-    "相对平均分",
-  ];
-
-  let legendData = datas.map(function (item) {
-    return item.name;
-  });
-  let barWidth = 22 - datas.length * 2;
-  let series = datas.map(function (item, index) {
-    return {
-      type: "bar",
-      data: [
-        item.totalCount,
-        item.maxScore,
-        item.minScore,
-        item.passCount,
-        item.passRate100,
-        item.excellentCount,
-        item.excellentRate100,
-        item.avgScore,
-        item.relativeAvgScore,
-      ],
-      barWidth: barWidth,
-      name: item.name,
-    };
-  });
-
-  return {
-    animation: animationIsOpen,
-    textStyle: textStyle,
-    color: colors,
-    legend: {
-      data: legendData,
-      left: "center",
-      bottom: 10,
-      itemGap: 20,
-      itemWidth: 14,
-      textStyle: {
-        fontSize: 19,
-      },
-    },
-    grid: {
-      show: true,
-      left: 80,
-      right: 50,
-      top: 100,
-      bottom: 100,
-      borderColor: "rgba(230,230,230,1)",
-    },
-    xAxis: {
-      type: "category",
-      data: xAxisData,
-      axisTick: {
-        show: false,
-      },
-      splitArea: {
-        show: true,
-        areaStyle: {
-          color: ["rgba(255,255,255,1)", "rgba(250,250,250,1)"],
-        },
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "rgba(233,233,233,1)",
-        },
-      },
-      axisLabel: {
-        fontSize: 18,
-        margin: 12,
-        interval: 0,
-      },
-    },
-    yAxis: {
-      type: "value",
-      z: 1,
-      axisTick: {
-        show: false,
-      },
-      axisLine: {
-        lineStyle: {
-          color: "rgba(233,233,233,1)",
-        },
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "rgba(233,233,233,1)",
-        },
-      },
-      axisLabel: {
-        fontSize: 16,
-        color: "#555",
-      },
-    },
-    series: series,
-  };
-}
-
 export function getBarTeacherGradeOptions(datas) {
   let title = datas.name + "_任课班级成绩分析";
   let symbolCircle =

src/store.js

@@ -12,7 +12,7 @@ import { card, free } from "./modules/card/store";
 import exam from "./modules/exam/store";
 import baseConfigs from "./modules/analysis/components/baseConfig/baseConfigsStore";
 import markParam from "./modules/mark/components/markParam/store";
-import report from "./modules/mark/components/report/reportStore";
+import report from "./modules/mark/components/report/store";
 
 export default new Vuex.Store({
   state: {