瀏覽代碼

第四章

gzb
guozhongbo 1 年之前
父節點
當前提交
ef50f66642
共有 3 個檔案被更改,包括 252 行新增44 行删除
  1. 4
    4
      js/index.js
  2. 201
    2
      js/section_4.js
  3. 47
    38
      sections/section_4.html

+ 4
- 4
js/index.js 查看文件

@@ -38,8 +38,8 @@ $(function () {
38 38
       // "preface", //前言
39 39
       // "section_1",
40 40
       // "section_2",
41
-      "section_3",
42
-      // "section_4",
41
+      // "section_3",
42
+      "section_4",
43 43
       // "section_5",
44 44
     ];
45 45
     $(".pdf_root").html(loadHtmlArr.map(function (htmlName) {
@@ -58,9 +58,9 @@ $(function () {
58 58
       } else if (htmlName === "section_3") {
59 59
         $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData.subjects));
60 60
       } else if (htmlName === "section_4") {
61
-        $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData.yxsj));
61
+        $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData));
62 62
       } else if (htmlName === "section_5") {
63
-        $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData.wjsj));
63
+        $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData.yxsj));
64 64
       }
65 65
       $("." + htmlName + "_html_root").load("../sections/" + htmlName + ".html");
66 66
     });

+ 201
- 2
js/section_4.js 查看文件

@@ -1,5 +1,204 @@
1 1
 $(function () {
2
+  function initviolationEcharts(list) {
3
+    var itemStyle = {
4
+      normal: {
5
+        label: {
6
+          show: true, //开启显示数值
7
+          position: "top" //数值在上方显示
8
+        }
9
+      }
10
+    };
11
+    var num = [],
12
+      xAxis_data = [];
13
+    var curlegend = ["违纪人数"];
14
+    var curclass = {
15
+      num: 0,
16
+      classname: ""
17
+    };
18
+    $.each(list.wjkm, function (idx, item) {
19
+      if (item.num > curclass.num) {
20
+        curclass = {
21
+          num: item.num,
22
+          classname: item.subjectname
23
+        };
24
+      }
25
+      num.push(item.num);
26
+      xAxis_data.push(item.subjectname);
27
+    });
28
+      $(".section_4 .subjectviolationMaxNum").text(curclass.classname);
29
+    var curseries = [
30
+      {
31
+        name: "违纪人数",
32
+        type: "bar",
33
+        barWidth: $.UnitUtil.mm2px(5),
34
+        // 柱状图最小高度
35
+        barMinHeight: $.UnitUtil.mm2px(2),
36
+        barGap: 0,
37
+        data: num,
38
+        itemStyle: itemStyle
39
+      }
40
+    ];
41
+    var option = {
42
+      animation: false,
43
+      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
44
+      title: {
45
+        text: "人",
46
+        x: "left",
47
+        y: "top",
48
+        textStyle: {
49
+          color: "#5F6E82",
50
+          fontSize: $.UnitUtil.mm2px(3),
51
+          fontWeight: 500
52
+        }
53
+      },
54
+      legend: {
55
+        itemWidth: $.UnitUtil.mm2px(2),
56
+        itemHeight: $.UnitUtil.mm2px(2),
57
+        top: "bottom",
58
+        data: curlegend
59
+      },
60
+      grid: {
61
+        top: $.UnitUtil.mm2px(10),
62
+        left: 0,
63
+        right: 0,
64
+        bottom: $.UnitUtil.mm2px(8),
65
+        containLabel: true
66
+      },
67
+      xAxis: [
68
+        {
69
+          type: "category",
70
+          data: xAxis_data,
71
+          axisLabel: {
72
+            color: "#5F6E82" //更改坐标轴文字颜色
73
+          },
74
+          axisTick: {
75
+            alignWithLabel: true
76
+          },
77
+          boundaryGap: true,
78
+          triggerEvent: true,
79
+          axisLine: {
80
+            show: true, //是否显示轴线
81
+            lineStyle: {
82
+              color: "#DADADA" //刻度线的颜色
83
+            }
84
+          }
85
+        }
86
+      ],
87
+      yAxis: [
88
+        {
89
+          type: "value",
90
+          axisTick: {
91
+            show: false //刻度
92
+          },
93
+          axisLine: {
94
+            show: false, //是否显示轴线
95
+            lineStyle: {
96
+              color: "#DADADA" //刻度线的颜色
97
+            }
98
+          },
99
+          splitLine: {
100
+            //网格线
101
+            lineStyle: {
102
+              type: "dotted" //设置网格线类型 dotted:虚线   solid:实线
103
+            },
104
+            show: true //隐藏或显示
105
+          },
106
+          axisLabel: {
107
+            color: "#5F6E82" //更改坐标轴文字颜色
108
+          }
109
+        }
110
+      ],
111
+      series: curseries
112
+    };
113
+    var myEcharts = echarts.init(
114
+      document.querySelector(".section_4  #violationEcharts")
115
+    );
116
+    myEcharts.clear();
117
+    myEcharts.setOption(option);
118
+    showviolationtable(list);
119
+  }
120
+
121
+  function showviolationtable(list) {
122
+    var table = {},
123
+      goodTableHeadTr1Html =
124
+        '<th colspan="2">考试信息</th><th colspan="' +
125
+        list.wjkm.length +
126
+        '">科目信息</th>',
127
+      goodTableHeadTr2Html = "<th>姓名</th><th>账号</th>",
128
+      trHtml = "";
129
+    var surplusheight = pageheight - ($(".section_4 .violationheight").height()); //本页剩余高度
130
+    var henght = 62.5; //表头62.5 一行高27.5
131
+    var pagedaba = {
132
+      0: ""
133
+    }, page = 0;
134
+    var maxstu = {
135
+      num: 0,
136
+      username:""
137
+    }
138
+    var pagesheight = {
139
+      0:0
140
+    }
141
+    $.each(list.wjkm, function (idx, item) {
142
+      goodTableHeadTr2Html += "<th>" + item.subjectname + "</th>";
143
+    });
144
+    $.each(list.wjfx, function (idx, item) {
145
+      henght += 27.5;
146
+      pagesheight[page] = 62.5+henght;
147
+      if (page == 0 && (henght > surplusheight || surplusheight - henght < 27.5)) {
148
+        // 加第一页
149
+        page++
150
+        henght = 0;
151
+        pagedaba[page] = "";
152
+      }
153
+      if (henght > pageheight && surplusheight - henght < 27.5) {
154
+        page++
155
+        henght = 0;
156
+        pagedaba[page] = "";
157
+        console.log(page);
158
+      }
159
+      item.subjectjson = item.subjectjson ? JSON.parse(item.subjectjson) : [];
160
+      var subject_num = {};
161
+      pagedaba[page] += "<tr><td>" + item.username + "</td><td>" + item.loginname + "</td>";
162
+      var num = 0;
163
+      $.each(item.subjectjson, function (idx, item) {
164
+        num += item.num;
165
+        subject_num[item.subjectid] = item.num || 0;
166
+      })
167
+      if (num > maxstu.num) {
168
+        maxstu = {
169
+          num: num,
170
+          username:item.username 
171
+        }
172
+      } else  if (num == maxstu.num){
173
+        maxstu.username+='、'+item.username 
174
+      }
175
+      $.each(list.wjkm,function (idx, item){
176
+        pagedaba[page] += "<td>" + (subject_num[item.subjectid]|| 0) + "</td>";
177
+      })
178
+    });
179
+    console.log(pagesheight);
180
+    console.log(maxstu);
181
+    var maxstuhtml = '<div class="echarts_result"><div>上图统计结果表示:</div><div class="echarts_result_content"><span class="dot bg_5699FF"></span>违纪行为最多的学生:'+maxstu.username +'</div></div>';
182
+    for (var i = 0; i <= page; i++){
183
+       table[i] = '<table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
184
+      goodTableHeadTr1Html +
185
+      '</tr><tr class="goodTableHeadTr2">' +
186
+      goodTableHeadTr2Html +
187
+      '</tr></thead><tbody class="goodTableTbody">' +
188
+      pagedaba[i] +
189
+        "</tbody></table>";
190
+      if (i != 0) {
191
+         //添加分页
192
+        $(".page_"+ (i-1)+".section_4").after(
193
+        '<div class="page_root section_4'+' page_'+i+'"></div>'
194
+        );
195
+      $(".page_root.section_4"+'.page_'+i).html(table[i]); 
196
+      }
197
+    }
198
+    $(".section_4 .stuViolationtable").html(table[0]);
199
+  }
2 200
   var parameter = $(".section_4_html_root").data("page-params");
3 201
   parameter = JSON.parse(parameter);
4
- 
5
-});
202
+  initviolationEcharts(parameter);
203
+  console.log(parameter);
204
+});

+ 47
- 38
sections/section_4.html 查看文件

@@ -1,42 +1,51 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="zh-cn">
3
-<head>
4
-  <meta charset="UTF-8">
5
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
-  <title>校本PDF报告-第四章 优秀试卷分析</title>
8
-  <link rel="stylesheet" href="../css/section_4.css">
9
-</head>
10
-<body>
11
-  <div class="page_root section_4">
12
-    <h1 class="section_title_1">第四章 优秀试卷分析</h1>
13
-    <div class="abstract_box">
14
-      <div class="abstract_left">
15
-        <img src="/img/img4.png" />
3
+  <head>
4
+    <meta charset="UTF-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+    <title>班级PDF报告-第四章 违纪行为分析</title>
8
+    <link rel="stylesheet" href="../css/section_4.css" />
9
+  </head>
10
+  <body>
11
+    <div class="page_root section_4 page_0">
12
+      <div class="violationheight">
13
+        <h1 class="section_title_1">第四章 违纪行为分析</h1>
14
+        <div class="abstract_box">
15
+          <div class="abstract_left">
16
+            <img src="/img/img3.png" />
17
+          </div>
18
+          <div class="abstract_right">
19
+            <div class="abstract_content">
20
+              从学校和数据的角度分析整体科目、整体班级及各科各班之间的违纪情况,系统按照科目和班级进行分析统计,包括<strong
21
+                >人数、比例。</strong
22
+              >
23
+            </div>
24
+          </div>
25
+        </div>
26
+        <h2 class="section_title_2">1. 科目违纪行为统计</h2>
27
+        <div
28
+          id="violationEcharts"
29
+          style="margin: 0 4mm 4mm; height: 71mm"
30
+        ></div>
31
+        <div class="echarts_result">
32
+          <div>上图统计结果表示:</div>
33
+          <div class="echarts_result_content">
34
+            <span class="dot bg_5699FF"></span>违纪行为最多的科目:<span
35
+              class="subjectviolationMaxNum"
36
+            ></span>
37
+          </div>
38
+        </div>
39
+        <h2 class="section_title_2">2. 学生违纪行为统计</h2>
16 40
       </div>
17
-      <div class="abstract_right">
18
-        <div class="abstract_content">从学校和数据的角度分析整体科目、整体班级及各科各班之间的优秀试卷情况,系统按照科目和班级进行分析统计,包括<strong>人数、比例。</strong></div>
19
-      </div>
20
-    </div>
21
-    <h2 class="section_title_2">1. 科目优秀试卷统计</h2>
22
-    <div id="subjectGoodEcharts" style="margin: 0 4mm 4mm;height: 71mm;"></div>
23
-    <div class="echarts_result">
24
-      <div>上图统计结果表示:</div>
25
-      <div class="echarts_result_content"><span class="dot bg_5699FF"></span>优秀试卷最多的科目:<span class="subjectGoodMaxNum"></span></div>
26
-    </div>
27
-    <h2 class="section_title_2">2. 班级优秀试卷统计</h2>
28
-    <table border="1" class="my_table">
29
-      <thead>
30
-        <tr class="goodTableHeadTr1"></tr>
31
-        <tr class="goodTableHeadTr2"></tr>
32
-      </thead>
33
-      <tbody class="goodTableTbody"></tbody>
34
-    </table>
35
-    <div class="echarts_result">
36
-      <div>上图统计结果表示:</div>
37
-      <div class="echarts_result_content"><span class="dot bg_5699FF"></span>优秀试卷最多的班级:<span class="classGoodMaxNum"></span></div>
41
+      <div class="stuViolationtable"></div>
42
+      <!-- <div class="echarts_result">
43
+        <div>上图统计结果表示:</div>
44
+        <div class="echarts_result_content">
45
+          <span class="dot bg_5699FF"></span>违纪行为最多的学生:
46
+        </div>
47
+      </div> -->
38 48
     </div>
39
-  </div>
40
-  <script src="../js/section_4.js"></script>
41
-</body>
42
-</html>
49
+    <script src="../js/section_4.js"></script>
50
+  </body>
51
+</html>

Loading…
取消
儲存