违纪分析，优秀试卷分析

css/section_3.css

@@ -3,7 +3,7 @@
   padding: 3mm;
   background-color: #fff;
 }
-.section_3 .echarts_result_content span {
+.section_3 .echarts_result_content .dot {
   display: inline-block;
   margin-right: 2mm;
   width: 2mm;

css/section_4.css

@@ -3,7 +3,7 @@
   padding: 3mm;
   background-color: #fff;
 }
-.section_4 .echarts_result_content span {
+.section_4 .echarts_result_content .dot {
   display: inline-block;
   margin-right: 2mm;
   width: 2mm;

js/index.js

@@ -1,10 +1,10 @@
 $(function () {
   function loadSectionHtml(sectionsData) {
     var loadHtmlArr = [
-      "cover",
-      "preface",
-      "section_1",
-      "section_2",
+      // "cover",
+      // "preface",
+      // "section_1",
+      // "section_2",
       "section_3",
       "section_4",
     ];

js/section_3.js

@@ -1,17 +1,5 @@
 $(function () {
-  function initSubjectBadEcharts() {
-    var xAxis_data = [
-      "语文",
-      "数学",
-      "英语",
-      "物理",
-      "地理",
-      "化学",
-      "道德与法治",
-      "历史",
-      "生物"
-    ];
-    var series_data = [12, 20, 15, 8, 7, 11, 13, 15, 8];
+  function initSubjectBadEcharts(xAxis_data, series_data) {
     var option = {
       animation: false,
       title: {
@@ -110,7 +98,80 @@ $(function () {
     myEcharts.setOption(option);
   }
   var parameter = $(".section_3_html_root").data("page-params");
-  console.log("section_3:parameter", JSON.parse(parameter));
-
-  initSubjectBadEcharts();
+  parameter = JSON.parse(parameter);
+  var subjectid_subjectname = {};
+  var subjectid_num = {};
+  var classes = [];
+  parameter = $.map(parameter, function(paraItem) {
+    paraItem.subjectjson = paraItem.subjectjson ? JSON.parse(paraItem.subjectjson) : [];
+    var subjects = {};
+    var class_num = 0;
+    $.each(paraItem.subjectjson, function(index, subjectItem) {
+      subjectid_subjectname[subjectItem.subjectid] = subjectItem.subjectname;
+      if (subjectid_num[subjectItem.subjectid]) {
+        subjectid_num[subjectItem.subjectid] += subjectItem.num;
+      } else {
+        subjectid_num[subjectItem.subjectid] = subjectItem.num;
+      }
+      subjects[subjectItem.subjectid] = {
+        num: subjectItem.num,
+        nrate: subjectItem.nrate,
+      };
+      class_num += subjectItem.num;
+    });
+    classes.push({
+      classid: paraItem.classid,
+      classname: paraItem.classname,
+      class_num: class_num,
+      subjects: subjects
+    });
+    return paraItem;
+  });
+  var xAxis_data = [];
+  var series_data = [];
+  var maxSubjectInfo = {
+    num: 0,
+    subjectname: ""
+  };
+  var badTableHeadTr1Html = '<th rowspan="2">班级</th>';
+  var badTableHeadTr2Html = '';
+  for (var subjectid in subjectid_subjectname) {
+    xAxis_data.push(subjectid_subjectname[subjectid]);
+    series_data.push(subjectid_num[subjectid]);
+    if(maxSubjectInfo.num < subjectid_num[subjectid]) {
+      maxSubjectInfo = {
+        num: subjectid_num[subjectid],
+        subjectname: subjectid_subjectname[subjectid]
+      };
+    }
+    // class="w29mm"
+    badTableHeadTr1Html += '<th colspan="2">' + subjectid_subjectname[subjectid] + '</th>';
+    badTableHeadTr2Html += '<th>人数</th><th>比例</th>';
+  }
+  $(".section_3 .subjectBadMaxNum").text(maxSubjectInfo.subjectname);
+  initSubjectBadEcharts(xAxis_data, series_data);
+  var maxClassInfo = {
+    num: 0,
+    classname: ""
+  };
+  var badTableTbodyHtml = "";
+  for (var i = 0; i < classes.length; i++) {
+    var classItem = classes[i];
+    var trHtml = '<td><div class="my_cell">' + classItem.classname + '</div></td>'
+    if (maxClassInfo.num < classItem.class_num) {
+      maxClassInfo = {
+        num: classItem.class_num,
+        classname: classItem.classname
+      };
+    }
+    for (var subjectid in subjectid_subjectname) {
+      series_data.push(subjectid_num[subjectid]);
+      trHtml += '<td><div class="my_cell">' + (classItem.subjects[subjectid].num || 0) + '</div></td><td><div class="my_cell">' + (classItem.subjects[subjectid].nrate || 0) + '%</div></td>'
+    }
+    badTableTbodyHtml += '<tr>' + trHtml + '</tr>';
+  }
+  $(".section_3 .classBadMaxNum").text(maxClassInfo.classname);
+  $(".section_3 .badTableHeadTr1").html(badTableHeadTr1Html);
+  $(".section_3 .badTableHeadTr2").html(badTableHeadTr2Html);
+  $(".section_3 .badTableTbody").html(badTableTbodyHtml);
 });

js/section_4.js

@@ -1,17 +1,5 @@
 $(function () {
-  function initSubjectGoodEcharts() {
-    var xAxis_data = [
-      "语文",
-      "数学",
-      "英语",
-      "物理",
-      "地理",
-      "化学",
-      "道德与法治",
-      "历史",
-      "生物"
-    ];
-    var series_data = [12, 20, 15, 8, 7, 11, 13, 15, 8];
+  function initSubjectGoodEcharts(xAxis_data, series_data) {
     var option = {
       animation: false,
       title: {
@@ -29,7 +17,7 @@ $(function () {
         itemWidth: $.UnitUtil.mm2px(2),
         itemHeight: $.UnitUtil.mm2px(2),
         top: "bottom",
-        data: ["违纪人数"],
+        data: ["优秀人数"],
       },
       grid: {
         top: $.UnitUtil.mm2px(10),
@@ -85,7 +73,7 @@ $(function () {
       ],
       series: [
         {
-          name: "违纪人数",
+          name: "优秀人数",
           type: "bar",
           barWidth: $.UnitUtil.mm2px(5),
           // 柱状图最小高度
@@ -110,7 +98,80 @@ $(function () {
     myEcharts.setOption(option);
   }
   var parameter = $(".section_4_html_root").data("page-params");
-  console.log("section_4:parameter", JSON.parse(parameter));
-
-  initSubjectGoodEcharts();
+  parameter = JSON.parse(parameter);
+  var subjectid_subjectname = {};
+  var subjectid_num = {};
+  var classes = [];
+  parameter = $.map(parameter, function(paraItem) {
+    paraItem.subjectjson = paraItem.subjectjson ? JSON.parse(paraItem.subjectjson) : [];
+    var subjects = {};
+    var class_num = 0;
+    $.each(paraItem.subjectjson, function(index, subjectItem) {
+      subjectid_subjectname[subjectItem.subjectid] = subjectItem.subjectname;
+      if (subjectid_num[subjectItem.subjectid]) {
+        subjectid_num[subjectItem.subjectid] += subjectItem.num;
+      } else {
+        subjectid_num[subjectItem.subjectid] = subjectItem.num;
+      }
+      subjects[subjectItem.subjectid] = {
+        num: subjectItem.num,
+        nrate: subjectItem.nrate,
+      };
+      class_num += subjectItem.num;
+    });
+    classes.push({
+      classid: paraItem.classid,
+      classname: paraItem.classname,
+      class_num: class_num,
+      subjects: subjects
+    });
+    return paraItem;
+  });
+  var xAxis_data = [];
+  var series_data = [];
+  var maxSubjectInfo = {
+    num: 0,
+    subjectname: ""
+  };
+  var goodTableHeadTr1Html = '<th rowspan="2">班级</th>';
+  var goodTableHeadTr2Html = '';
+  for (var subjectid in subjectid_subjectname) {
+    xAxis_data.push(subjectid_subjectname[subjectid]);
+    series_data.push(subjectid_num[subjectid]);
+    if(maxSubjectInfo.num < subjectid_num[subjectid]) {
+      maxSubjectInfo = {
+        num: subjectid_num[subjectid],
+        subjectname: subjectid_subjectname[subjectid]
+      };
+    }
+    // class="w29mm"
+    goodTableHeadTr1Html += '<th colspan="2">' + subjectid_subjectname[subjectid] + '</th>';
+    goodTableHeadTr2Html += '<th>人数</th><th>比例</th>';
+  }
+  $(".section_4 .subjectGoodMaxNum").text(maxSubjectInfo.subjectname);
+  initSubjectGoodEcharts(xAxis_data, series_data);
+  var maxClassInfo = {
+    num: 0,
+    classname: ""
+  };
+  var goodTableTbodyHtml = "";
+  for (var i = 0; i < classes.length; i++) {
+    var classItem = classes[i];
+    var trHtml = '<td><div class="my_cell">' + classItem.classname + '</div></td>'
+    if (maxClassInfo.num < classItem.class_num) {
+      maxClassInfo = {
+        num: classItem.class_num,
+        classname: classItem.classname
+      };
+    }
+    for (var subjectid in subjectid_subjectname) {
+      series_data.push(subjectid_num[subjectid]);
+      trHtml += '<td><div class="my_cell">' + (classItem.subjects[subjectid].num || 0) + '</div></td><td><div class="my_cell">' + (classItem.subjects[subjectid].nrate || 0) + '%</div></td>'
+    }
+    goodTableTbodyHtml += '<tr>' + trHtml + '</tr>';
+  }
+  $(".section_4 .classGoodMaxNum").text(maxClassInfo.classname);
+  $(".section_4 .goodTableHeadTr1").html(goodTableHeadTr1Html);
+  $(".section_4 .goodTableHeadTr2").html(goodTableHeadTr2Html);
+  $(".section_4 .goodTableTbody").html(goodTableTbodyHtml);
 });

sections/section_3.html

@@ -22,90 +22,19 @@
     <div id="subjectBadEcharts" style="margin: 0 4mm 4mm;height: 71mm;"></div>
     <div class="echarts_result">
       <div>上图统计结果表示：</div>
-      <div class="echarts_result_content"><span class="bg_5699FF"></span>违纪行为最多的科目：英语</div>
+      <div class="echarts_result_content"><span class="dot bg_5699FF"></span>违纪行为最多的科目：<span class="subjectBadMaxNum"></span></div>
     </div>
     <h2 class="section_title_2">2. 班级违纪行为统计</h2>
     <table border="1" class="my_table">
       <thead>
-        <tr>
-          <th rowspan="2">班级</th>
-          <th colspan="2" class="w29mm">语文</th>
-          <th colspan="2" class="w29mm">数学</th>
-          <th colspan="2" class="w29mm">英语</th>
-          <th colspan="2" class="w29mm">物理</th>
-          <th colspan="2" class="w29mm">地理</th>
-        </tr>
-        <tr>
-          <th>人数</th>
-          <th>比例</th>
-          <th>人数</th>
-          <th>比例</th>
-          <th>人数</th>
-          <th>比例</th>
-          <th>人数</th>
-          <th>比例</th>
-          <th>人数</th>
-          <th>比例</th>
-        </tr>
+        <tr class="badTableHeadTr1"></tr>
+        <tr class="badTableHeadTr2"></tr>
       </thead>
-      <tbody>
-        <tr>
-          <td><div class="my_cell">全部班级</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-        </tr>
-        <tr>
-          <td><div class="my_cell">八年级一班</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-        </tr>
-        <tr>
-          <td><div class="my_cell">八年级二班</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-        </tr>
-        <tr>
-          <td><div class="my_cell">八年级三班</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-        </tr>
-      </tbody>
+      <tbody class="badTableTbody"></tbody>
     </table>
     <div class="echarts_result">
       <div>上图统计结果表示：</div>
-      <div class="echarts_result_content"><span class="bg_5699FF"></span>违纪行为最多的班级：八年级三班</div>
+      <div class="echarts_result_content"><span class="dot bg_5699FF"></span>违纪行为最多的班级：<span class="classBadMaxNum"></span></div>
     </div>
   </div>
   <script src="../js/section_3.js"></script>

sections/section_4.html

@@ -22,90 +22,19 @@
     <div id="subjectGoodEcharts" style="margin: 0 4mm 4mm;height: 71mm;"></div>
     <div class="echarts_result">
       <div>上图统计结果表示：</div>
-      <div class="echarts_result_content"><span class="bg_5699FF"></span>优秀试卷最多的科目：英语</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>
-          <th rowspan="2">班级</th>
-          <th colspan="2" class="w29mm">语文</th>
-          <th colspan="2" class="w29mm">数学</th>
-          <th colspan="2" class="w29mm">英语</th>
-          <th colspan="2" class="w29mm">物理</th>
-          <th colspan="2" class="w29mm">地理</th>
-        </tr>
-        <tr>
-          <th>人数</th>
-          <th>比例</th>
-          <th>人数</th>
-          <th>比例</th>
-          <th>人数</th>
-          <th>比例</th>
-          <th>人数</th>
-          <th>比例</th>
-          <th>人数</th>
-          <th>比例</th>
-        </tr>
+        <tr class="goodTableHeadTr1"></tr>
+        <tr class="goodTableHeadTr2"></tr>
       </thead>
-      <tbody>
-        <tr>
-          <td><div class="my_cell">全部班级</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-        </tr>
-        <tr>
-          <td><div class="my_cell">八年级一班</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-        </tr>
-        <tr>
-          <td><div class="my_cell">八年级二班</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-        </tr>
-        <tr>
-          <td><div class="my_cell">八年级三班</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-          <td><div class="my_cell">5</div></td>
-          <td><div class="my_cell">4%</div></td>
-        </tr>
-      </tbody>
+      <tbody class="goodTableTbody"></tbody>
     </table>
     <div class="echarts_result">
       <div>上图统计结果表示：</div>
-      <div class="echarts_result_content"><span class="bg_5699FF"></span>优秀试卷最多的班级：八年级三班</div>
+      <div class="echarts_result_content"><span class="dot bg_5699FF"></span>优秀试卷最多的班级：<span class="classGoodMaxNum"></span></div>
     </div>
   </div>
   <script src="../js/section_4.js"></script>