第五、六章

css/section_6.css

+.section_6 .echarts_result_content {
+  margin-top: 3mm;
+  padding: 3mm;
+  background-color: #fff;
+}
+.section_6 .echarts_result_content .dot {
+  display: inline-block;
+  margin-right: 2mm;
+  width: 2mm;
+  height: 2mm;
+  border-radius: 50%;
+}

js/index.js

       // "section_1",
       // "section_2",
       // "section_3",
-      "section_4",
+      // "section_4",
       // "section_5",
+      "section_6"
     ];
     $(".pdf_root").html(loadHtmlArr.map(function (htmlName) {
       return "<div class='" + htmlName + "_html_root'></div>";
       } else if (htmlName === "section_4") {
         $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData));
       } else if (htmlName === "section_5") {
-        $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData.yxsj));
+        $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData));
+      }else if (htmlName === "section_6") {
+        $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData));
       }
       $("." + htmlName + "_html_root").load("../sections/" + htmlName + ".html");
     });

js/section_5.js

 $(function () {
+  function initgoodexamEcharts(list) {
+    var itemStyle = {
+      normal: {
+        label: {
+          show: true, //开启显示数值
+          position: "top" //数值在上方显示
+        }
+      }
+    };
+    var num = [],
+      xAxis_data = [];
+    var curlegend = ["优秀人数"];
+    var curclass = {
+      num: 0,
+      classname: ""
+    };
+    $.each(list.yxsjkm, function (idx, item) {
+      if (item.num > curclass.num) {
+        curclass = {
+          num: item.num,
+          classname: item.subjectname
+        };
+      }
+      num.push(item.num);
+      xAxis_data.push(item.subjectname);
+    });
+    $(".section_5 .subjectgoodexamMaxNum").text(curclass.classname);
+    var curseries = [
+      {
+        name: "优秀人数",
+        type: "bar",
+        barWidth: $.UnitUtil.mm2px(5),
+        // 柱状图最小高度
+        barMinHeight: $.UnitUtil.mm2px(2),
+        barGap: 0,
+        data: num,
+        itemStyle: itemStyle
+      }
+    ];
+    var option = {
+      animation: false,
+      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
+      title: {
+        text: "人",
+        x: "left",
+        y: "top",
+        textStyle: {
+          color: "#5F6E82",
+          fontSize: $.UnitUtil.mm2px(3),
+          fontWeight: 500
+        }
+      },
+      legend: {
+        itemWidth: $.UnitUtil.mm2px(2),
+        itemHeight: $.UnitUtil.mm2px(2),
+        top: "bottom",
+        data: curlegend
+      },
+      grid: {
+        top: $.UnitUtil.mm2px(10),
+        left: 0,
+        right: 0,
+        bottom: $.UnitUtil.mm2px(8),
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: xAxis_data,
+          axisLabel: {
+            color: "#5F6E82" //更改坐标轴文字颜色
+          },
+          axisTick: {
+            alignWithLabel: true
+          },
+          boundaryGap: true,
+          triggerEvent: true,
+          axisLine: {
+            show: true, //是否显示轴线
+            lineStyle: {
+              color: "#DADADA" //刻度线的颜色
+            }
+          }
+        }
+      ],
+      yAxis: [
+        {
+          type: "value",
+          axisTick: {
+            show: false //刻度
+          },
+          axisLine: {
+            show: false, //是否显示轴线
+            lineStyle: {
+              color: "#DADADA" //刻度线的颜色
+            }
+          },
+          splitLine: {
+            //网格线
+            lineStyle: {
+              type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
+            },
+            show: true //隐藏或显示
+          },
+          axisLabel: {
+            color: "#5F6E82" //更改坐标轴文字颜色
+          }
+        }
+      ],
+      series: curseries
+    };
+    var myEcharts = echarts.init(
+      document.querySelector(".section_5  #goodexamEcharts")
+    );
+    myEcharts.clear();
+    myEcharts.setOption(option);
+    showgoodexamable(list);
+  }
+
+  function showgoodexamable(list) {
+    var table = {},
+      goodTableHeadTr1Html =
+        '<th colspan="2">考试信息</th><th colspan="' +
+        list.yxsjkm.length +
+        '">科目信息</th>',
+      goodTableHeadTr2Html = "<th>姓名</th><th>账号</th>",
+      trHtml = "";
+    var surplusheight = pageheight - $(".section_5 .violationheight").height(); //本页剩余高度
+    var henght = 62.46,
+      row = 27.42; //表头62.46 一行高27.42
+    var pagedaba = {
+        0: ""
+      },
+      page = 0;
+    var maxstu = {
+      num: 0,
+      username: ""
+    };
+    var pagesheight = {
+      0: 0
+    };
+    $.each(list.yxsjkm, function (idx, item) {
+      goodTableHeadTr2Html += "<th>" + item.subjectname + "</th>";
+    });
+    $.each(list.yxsj, function (idx, item) {
+      if (
+        page == 0 &&
+        (henght >= surplusheight || surplusheight - henght <= row)
+      ) {
+        // 加第一页
+        page++;
+        henght = 62.46;
+        pagedaba[page] = "";
+      }
+      if (page != 0 && (henght >= pageheight || pageheight - henght <= row)) {
+        page++;
+        henght = 62.46;
+        pagedaba[page] = "";
+      }
+      henght += row;
+      pagesheight[page] = henght;
+      item.subjectjson = item.subjectjson ? JSON.parse(item.subjectjson) : [];
+      var subject_num = {};
+      pagedaba[page] +=
+        "<tr><td>" + item.username + "</td><td>" + item.loginname + "</td>";
+      var num = 0;
+      $.each(item.subjectjson, function (idx, item) {
+        num += item.num;
+        subject_num[item.subjectid] = item.num || 0;
+      });
+      if (num > maxstu.num) {
+        maxstu = {
+          num: num,
+          username: item.username
+        };
+      } else if (num == maxstu.num) {
+        maxstu.username += "、" + item.username;
+      }
+      $.each(list.wjkm, function (idx, item) {
+        pagedaba[page] += "<td>" + (subject_num[item.subjectid] || 0) + "</td>";
+      });
+    });
+    //高度 89
+    var isadd = true;
+    var maxstuhtml =
+      '<div class="echarts_result"><div>上图统计结果表示：</div><div class="echarts_result_content"><span class="dot bg_5699FF"></span>优秀试卷最多的学生:' +
+      maxstu.username +
+      "</div></div>";
+    for (var i = 0; i <= page; i++) {
+      table[i] =
+        '<table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
+        goodTableHeadTr1Html +
+        '</tr><tr class="goodTableHeadTr2">' +
+        goodTableHeadTr2Html +
+        '</tr></thead><tbody class="goodTableTbody">' +
+        pagedaba[i] +
+        "</tbody></table>";
+      if (i != 0) {
+        //添加分页
+        $(".page_" + (i - 1) + ".section_5").after(
+          '<div class="page_root section_5' + " page_" + i + '"></div>'
+        );
+        $(".page_root.section_5" + ".page_" + i).html(table[i]);
+      }
+      //添加表格结果数据
+      if (i == 0 && surplusheight - pagesheight[i] >= 89) {
+        isadd = false;
+        $(".section_5 .stugoodexamtable").after(
+          '<div class="echarts_result resultdata"></div>'
+        );
+        $(".echarts_result.resultdata").html(maxstuhtml);
+      } else if (i != 0 && pageheight - pagesheight[i] >= 89) {
+        isadd = false;
+        $(".page_" + i + ".section_5 .my_table").after(
+          '<div class="page_' + (i + 1) + ' my_result"></div>'
+        );
+        $(".page_" + (i + 1) + ".my_result").html(maxstuhtml);
+      }
+    }
+    $(".section_5 .stugoodexamtable").html(table[0]);
+    //添加至新页
+    if (isadd) {
+      $(".page_" + page).after(
+        '<div class="page_root section_5 page_' + (page + 1) + '"></div>'
+      );
+      $(".page_" + (page + 1) + "").html(maxstuhtml);
+    }
+  }
+
   var parameter = $(".section_5_html_root").data("page-params");
   parameter = JSON.parse(parameter);
-  
-});
+  initgoodexamEcharts(parameter);
+});

js/section_6.js

+$(function () {
+  function initbadexamEcharts (list) {
+    var itemStyle = {
+      normal: {
+        label: {
+          show: true, //开启显示数值
+          position: "top" //数值在上方显示
+        }
+      }
+    };
+    var num = [],
+      xAxis_data = [];
+    var curlegend = ["违纪人数"];
+    var curclass = {
+      num: 0,
+      classname: ""
+    };
+    $.each(list.wjsjkm, function (idx, item) {
+      if (item.num > curclass.num) {
+        curclass = {
+          num: item.num,
+          classname: item.subjectname
+        };
+      }
+      num.push(item.num);
+      xAxis_data.push(item.subjectname);
+    });
+    $(".section_6 .subjectbadexamMaxNum").text(curclass.classname);
+    var curseries = [
+      {
+        name: "违纪人数",
+        type: "bar",
+        barWidth: $.UnitUtil.mm2px(5),
+        // 柱状图最小高度
+        barMinHeight: $.UnitUtil.mm2px(2),
+        barGap: 0,
+        data: num,
+        itemStyle: itemStyle
+      }
+    ];
+    var option = {
+      animation: false,
+      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
+      title: {
+        text: "人",
+        x: "left",
+        y: "top",
+        textStyle: {
+          color: "#5F6E82",
+          fontSize: $.UnitUtil.mm2px(3),
+          fontWeight: 500
+        }
+      },
+      legend: {
+        itemWidth: $.UnitUtil.mm2px(2),
+        itemHeight: $.UnitUtil.mm2px(2),
+        top: "bottom",
+        data: curlegend
+      },
+      grid: {
+        top: $.UnitUtil.mm2px(10),
+        left: 0,
+        right: 0,
+        bottom: $.UnitUtil.mm2px(8),
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: xAxis_data,
+          axisLabel: {
+            color: "#5F6E82" //更改坐标轴文字颜色
+          },
+          axisTick: {
+            alignWithLabel: true
+          },
+          boundaryGap: true,
+          triggerEvent: true,
+          axisLine: {
+            show: true, //是否显示轴线
+            lineStyle: {
+              color: "#DADADA" //刻度线的颜色
+            }
+          }
+        }
+      ],
+      yAxis: [
+        {
+          type: "value",
+          axisTick: {
+            show: false //刻度
+          },
+          axisLine: {
+            show: false, //是否显示轴线
+            lineStyle: {
+              color: "#DADADA" //刻度线的颜色
+            }
+          },
+          splitLine: {
+            //网格线
+            lineStyle: {
+              type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
+            },
+            show: true //隐藏或显示
+          },
+          axisLabel: {
+            color: "#5F6E82" //更改坐标轴文字颜色
+          }
+        }
+      ],
+      series: curseries
+    };
+    var myEcharts = echarts.init(
+      document.querySelector(".section_6  #badexamEcharts")
+    );
+    myEcharts.clear();
+    myEcharts.setOption(option);
+    showbadexamable(list);
+  }
+
+  function showbadexamable(list) {
+    var table = {},
+      goodTableHeadTr1Html =
+        '<th colspan="2">考试信息</th><th colspan="' +
+        list.wjsjkm.length +
+        '">科目信息</th>',
+      goodTableHeadTr2Html = "<th>姓名</th><th>账号</th>",
+      trHtml = "";
+    var surplusheight = pageheight - $(".section_6 .violationheight").height(); //本页剩余高度
+    var henght = 62.46,
+      row = 27.42; //表头62.46 一行高27.42
+    var pagedaba = {
+        0: ""
+      },
+      page = 0;
+    var maxstu = {
+      num: 0,
+      username: ""
+    };
+    var pagesheight = {
+      0: 0
+    };
+    $.each(list.wjsjkm, function (idx, item) {
+      goodTableHeadTr2Html += "<th>" + item.subjectname + "</th>";
+    });
+      $.each(list.wjsj, function (idx, item) {
+      if (
+        page == 0 &&
+        (henght >= surplusheight || surplusheight - henght <= row)
+      ) {
+        // 加第一页
+        page++;
+        henght = 62.46;
+        pagedaba[page] = "";
+      }
+      if (page != 0 && (henght >= pageheight || pageheight - henght <= row)) {
+        page++;
+        henght = 62.46;
+        pagedaba[page] = "";
+      }
+      henght += row;
+      pagesheight[page] = henght;
+      item.subjectjson = item.subjectjson ? JSON.parse(item.subjectjson) : [];
+      var subject_num = {};
+      pagedaba[page] +=
+        "<tr><td>" + item.username + "</td><td>" + item.loginname + "</td>";
+      var num = 0;
+      $.each(item.subjectjson, function (idx, item) {
+        num += item.num;
+        subject_num[item.subjectid] = item.num || 0;
+      });
+      if (num > maxstu.num) {
+        maxstu = {
+          num: num,
+          username: item.username
+        };
+      } else if (num == maxstu.num) {
+        maxstu.username += "、" + item.username;
+      }
+      $.each(list.wjkm, function (idx, item) {
+        pagedaba[page] += "<td>" + (subject_num[item.subjectid] || 0) + "</td>";
+      });
+    });
+    //高度 89
+    var isadd = true;
+    var maxstuhtml =
+      '<div class="echarts_result"><div>上图统计结果表示：</div><div class="echarts_result_content"><span class="dot bg_5699FF"></span>违纪试卷最多的学生:' +
+      maxstu.username +
+      "</div></div>";
+    for (var i = 0; i <= page; i++) {
+      table[i] =
+        '<table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
+        goodTableHeadTr1Html +
+        '</tr><tr class="goodTableHeadTr2">' +
+        goodTableHeadTr2Html +
+        '</tr></thead><tbody class="goodTableTbody">' +
+        pagedaba[i] +
+        "</tbody></table>";
+      if (i != 0) {
+        //添加分页
+        $(".page_" + (i - 1) + ".section_6").after(
+          '<div class="page_root section_6' + " page_" + i + '"></div>'
+        );
+        $(".page_root.section_6" + ".page_" + i).html(table[i]);
+      }
+      //添加表格结果数据
+      if (i == 0 && surplusheight - pagesheight[i] >= 89) {
+        isadd = false;
+        $(".section_6 .stubadexamtable").after(
+          '<div class="echarts_result resultdata"></div>'
+        );
+        $(".echarts_result.resultdata").html(maxstuhtml);
+      } else if (i != 0 && pageheight - pagesheight[i] >= 89) {
+        isadd = false;
+        $(".page_" + i + ".section_6 .my_table").after(
+          '<div class="page_' + (i + 1) + ' my_result"></div>'
+        );
+        $(".page_" + (i + 1) + ".my_result").html(maxstuhtml);
+      }
+    }
+    $(".section_6 .stubadexamtable").html(table[0]);
+    //添加至新页
+    if (isadd) {
+      $(".page_" + page).after(
+        '<div class="page_root section_6 page_' + (page + 1) + '"></div>'
+      );
+      $(".page_" + (page + 1) + "").html(maxstuhtml);
+    }
+  }
+
+  var parameter = $(".section_6_html_root").data("page-params");
+  parameter = JSON.parse(parameter);
+  initbadexamEcharts(parameter);
+});

sections/section_5.html

 <!DOCTYPE html>
 <html lang="zh-cn">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>校本PDF报告-第五章 违纪试卷分析</title>
-  <link rel="stylesheet" href="../css/section_5.css">
-</head>
-<body>
-  <div class="page_root section_5">
-    <h1 class="section_title_1">第五章 违纪试卷分析</h1>
-    <div class="abstract_box">
-      <div class="abstract_left">
-        <img src="/img/img4.png" />
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>班级PDF报告-第五章 优秀试卷分析</title>
+    <link rel="stylesheet" href="../css/section_5.css" />
+  </head>
+  <body>
+    <div class="page_root section_5 page_0">
+      <div class="violationheight">
+        <h1 class="section_title_1">第五章 优秀试卷分析</h1>
+        <div class="abstract_box">
+          <div class="abstract_left">
+            <img src="/img/img4.png" />
+          </div>
+          <div class="abstract_right">
+            <div class="abstract_content">
+              从学校和数据的角度分析整体科目、整体班级及各科各班之间的优秀试卷情况，系统按照科目和班级进行分析统计，包括<strong
+                >人数、比例。</strong
+              >
+            </div>
+          </div>
+        </div>
+        <h2 class="section_title_2">1. 科目优秀试卷统计</h2>
+        <div id="goodexamEcharts" style="margin: 0 4mm 4mm; height: 71mm"></div>
+        <div class="echarts_result">
+          <div>上图统计结果表示：</div>
+          <div class="echarts_result_content">
+            <span class="dot bg_5699FF"></span>优秀试卷最多的科目：<span
+              class="subjectgoodexamMaxNum"
+            ></span>
+          </div>
+        </div>
+        <h2 class="section_title_2">2. 学生优秀试卷统计</h2>
       </div>
-      <div class="abstract_right">
-        <div class="abstract_content">从学校和数据的角度分析整体科目、整体班级及各科各班之间的违纪试卷情况，系统按照科目和班级进行分析统计，包括<strong>人数、比例。</strong></div>
-      </div>
-    </div>
-    <h2 class="section_title_2">1. 科目违纪试卷统计</h2>
-    <div id="subjectGoodEcharts" style="margin: 0 4mm 4mm;height: 71mm;"></div>
-    <div class="echarts_result">
-      <div>上图统计结果表示：</div>
-      <div class="echarts_result_content"><span class="dot bg_5699FF"></span>违纪试卷最多的科目：<span class="subjectGoodMaxNum"></span></div>
-    </div>
-    <h2 class="section_title_2">2. 班级违纪试卷统计</h2>
-    <table border="1" class="my_table">
-      <thead>
-        <tr class="goodTableHeadTr1"></tr>
-        <tr class="goodTableHeadTr2"></tr>
-      </thead>
-      <tbody class="goodTableTbody"></tbody>
-    </table>
-    <div class="echarts_result">
-      <div>上图统计结果表示：</div>
-      <div class="echarts_result_content"><span class="dot bg_5699FF"></span>违纪试卷最多的班级：<span class="classGoodMaxNum"></span></div>
+      <div class="stugoodexamtable"></div>
     </div>
-  </div>
-  <script src="../js/section_5.js"></script>
-</body>
-</html>
+    <script src="../js/section_5.js"></script>
+  </body>
+</html>

sections/section_6.html

+<!DOCTYPE html>
+<html lang="zh-cn">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>班级PDF报告-第六章 违纪试卷分析</title>
+    <link rel="stylesheet" href="../css/section_6.css" />
+  </head>
+  <body>
+    <div class="page_root section_6 page_0">
+      <div class="violationheight">
+        <h1 class="section_title_1">第六章 违纪试卷分析</h1>
+        <div class="abstract_box">
+          <div class="abstract_left">
+            <img src="/img/img4.png" />
+          </div>
+          <div class="abstract_right">
+            <div class="abstract_content">
+              从学校和数据的角度分析整体科目、整体班级及各科各班之间的违纪试卷情况，系统按照科目和班级进行分析统计，包括<strong
+                >人数、比例。</strong
+              >
+            </div>
+          </div>
+        </div>
+        <h2 class="section_title_2">1. 科目违纪试卷统计</h2>
+        <div id="badexamEcharts" style="margin: 0 4mm 4mm; height: 71mm"></div>
+        <div class="echarts_result">
+          <div>上图统计结果表示：</div>
+          <div class="echarts_result_content">
+            <span class="dot bg_5699FF"></span>违纪试卷最多的科目：<span
+              class="subjectbadexamMaxNum"
+            ></span>
+          </div>
+        </div>
+        <h2 class="section_title_2">2. 学生违纪试卷统计</h2>
+      </div>
+      <div class="stubadexamtable"></div>
+    </div>
+    <script src="../js/section_6.js"></script>
+  </body>
+</html>