ソースを参照

第二章

gzb
guozhongbo 1年前
コミット
77fdd2dc27
7個のファイルの変更462行の追加20行の削除
  1. 2
    2
      css/common.css
  2. 87
    0
      css/section_2.css
  3. 6
    8
      js/index.js
  4. 286
    1
      js/section_2.js
  5. 0
    7
      notes.txt
  6. 1
    1
      sections/section_1.html
  7. 80
    1
      sections/section_2.html

+ 2
- 2
css/common.css ファイルの表示

@@ -118,8 +118,8 @@ h1,h2,h3,h4 {
118 118
   padding: 0.5mm;
119 119
   line-height: 6mm;
120 120
   text-align: center;
121
-  vertical-align: middle;
122
-  white-space: nowrap;
121
+  /* vertical-align: middle;
122
+  white-space: nowrap; */
123 123
   border: 0.2mm solid #dcdee2;
124 124
 }
125 125
 .my_table .my_cell {

+ 87
- 0
css/section_2.css ファイルの表示

@@ -0,0 +1,87 @@
1
+.section_list{
2
+  height: 20mm;
3
+  margin-bottom: 5mm;
4
+}
5
+.section2 .section_item{
6
+  width: 36mm;
7
+  background-color: #f5f7f9;
8
+  border-radius: 3mm;
9
+  height: 20mm;
10
+  float: left;
11
+  margin-right: 3mm;
12
+  padding-top: 4mm;
13
+  box-sizing: border-box;
14
+}
15
+.section2 .item_num{
16
+  height: 5mm;
17
+  font-size: 3mm;
18
+  color: #999999;
19
+  text-align: center;
20
+  margin-bottom: 2mm;
21
+}
22
+.section2 .item_num>span{
23
+  font-size: 5mm;
24
+  color: #ff6b00;
25
+  margin-right: 1mm;
26
+}
27
+.section2 .item_title{
28
+  text-align: center;
29
+  height: 4mm;
30
+  font-size: 4mm;
31
+  color: #333333;
32
+}
33
+.section2 .subjectinfo{
34
+  font-weight: bold;
35
+  margin-bottom: 2mm;
36
+}
37
+.section2 .jj{
38
+  text-indent: 8mm;
39
+  color: #999999;
40
+  line-height: 6mm;
41
+}
42
+.section2 .blue {
43
+  color: #2D8CF0;
44
+}
45
+.section2 .dj{
46
+  width: 8%;
47
+}
48
+.section2 .pm {
49
+  width: 14%;
50
+}
51
+.section2 .comm {
52
+  width: 70%;
53
+}
54
+.section2 .line {
55
+  display: inline-block;
56
+  width: 8mm;
57
+}
58
+.echarts_result{
59
+  margin-bottom: 4mm;
60
+    padding: 3mm;
61
+    background-color: #F5F7F9;
62
+}
63
+.echarts_result_content .yj{
64
+    display: inline-block;
65
+    margin-right: 2mm;
66
+    width: 2mm;
67
+    height: 2mm;
68
+    border-radius: 50%;
69
+}
70
+.echarts_result_content {
71
+    margin-top: 3mm;
72
+    padding: 3mm;
73
+    background-color: #fff;
74
+}
75
+.curscorelevel{
76
+  background-color: rgba(245, 247, 249, 1);
77
+  padding: 3mm 0 3mm 2mm;
78
+}
79
+.section2 .multicolumn .tr{
80
+  background-color: #ebf5ff;
81
+}
82
+.section2 .green {
83
+ color: green;
84
+}
85
+.section2 .red {
86
+  color: red;
87
+}

+ 6
- 8
js/index.js ファイルの表示

@@ -1,11 +1,12 @@
1
+var pageheight = 1047; // 单页高度
1 2
 $(function () {
2
-  function loadSectionHtml(sectionsData) {
3
-
3
+  function loadSectionHtml (sectionsData) {
4
+    console.log(sectionsData);
4 5
     var loadHtmlArr = [
5 6
       // "cover", //封面
6 7
       // "preface", //前言
7
-      "section_1",
8
-      // "section_2",
8
+      // "section_1",
9
+      "section_2",
9 10
       // "section_3",
10 11
       // "section_4",
11 12
       // "section_5",
@@ -22,10 +23,7 @@ $(function () {
22 23
       } else if (htmlName === "section_1") {
23 24
         $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData));
24 25
       } else if (htmlName === "section_2") {
25
-        $("." + htmlName + "_html_root").data("page-params", JSON.stringify({
26
-          cjfx: sectionsData.cjfx,
27
-          djfx: sectionsData.djfx
28
-        }));
26
+        $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData.subjects));
29 27
       } else if (htmlName === "section_3") {
30 28
         $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData.wjfx));
31 29
       } else if (htmlName === "section_4") {

+ 286
- 1
js/section_2.js ファイルの表示

@@ -1,5 +1,290 @@
1 1
 $(function () {
2
+  function initaveragescoreEcharts (list) {
3
+       var itemStyle = {
4
+      normal: {
5
+        label: {
6
+          show: true, //开启显示数值
7
+          position: "top" //数值在上方显示
8
+        }
9
+      }
10
+    };
11
+    var avgscore = [],xAxis_data=[],totalScore = 0;
12
+    var curlegend = [ "平均分"];
13
+    $.each(list.pjf, function (idx, item) {
14
+      totalScore += item.classavgscore;
15
+      avgscore.push(item.classavgscore);
16
+      xAxis_data.push(item.classname)
17
+    })
18
+    var gradeAvgScore = Math.floor(totalScore / xAxis_data.length);
19
+    var curseries = [
20
+      {
21
+        name: "平均分",
22
+        type: "bar",
23
+        barWidth: $.UnitUtil.mm2px(5),
24
+        // 柱状图最小高度
25
+        barMinHeight: $.UnitUtil.mm2px(2),
26
+        barGap: 0,
27
+        data: avgscore,
28
+        itemStyle: itemStyle,
29
+        markLine: {
30
+              precision: 0,
31
+              data: [{ type: "average", name: "平均值" }],
32
+              itemStyle: {
33
+                normal: {
34
+                  lineStyle: {
35
+                    color: "#ff001e",
36
+                    type: "dotted"
37
+                  },
38
+                  label: {
39
+                    show: true,
40
+                    color: "#ff001e",
41
+                    position: "insideEndTop",
42
+                    formatter: function () {
43
+                      return "年级平均分:" + gradeAvgScore;
44
+                    }
45
+                  }
46
+                }
47
+              },
48
+              large: true
49
+            },
50
+            z: 10
51
+      }
52
+    ];
53
+    var option = {
54
+      animation: false,
55
+      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
56
+      title: {
57
+        text: "分",
58
+        x: "left",
59
+        y: "top",
60
+        textStyle: {
61
+          color: "#5F6E82",
62
+          fontSize: $.UnitUtil.mm2px(3),
63
+          fontWeight: 500
64
+        }
65
+      },
66
+      legend: {
67
+        itemWidth: $.UnitUtil.mm2px(2),
68
+        itemHeight: $.UnitUtil.mm2px(2),
69
+        top: "bottom",
70
+        data: curlegend
71
+      },
72
+      grid: {
73
+        top: $.UnitUtil.mm2px(10),
74
+        left: 0,
75
+        right: 0,
76
+        bottom: $.UnitUtil.mm2px(8),
77
+        containLabel: true
78
+      },
79
+      xAxis: [
80
+        {
81
+          type: "category",
82
+          data: xAxis_data,
83
+          axisLabel: {
84
+            color: "#5F6E82" //更改坐标轴文字颜色
85
+          },
86
+          axisTick: {
87
+            alignWithLabel: true
88
+          },
89
+          boundaryGap: true,
90
+          triggerEvent: true,
91
+          axisLine: {
92
+            show: true, //是否显示轴线
93
+            lineStyle: {
94
+              color: "#DADADA" //刻度线的颜色
95
+            }
96
+          }
97
+        }
98
+      ],
99
+      yAxis: [
100
+        {
101
+          type: "value",
102
+          axisTick: {
103
+            show: false //刻度
104
+          },
105
+          axisLine: {
106
+            show: false, //是否显示轴线
107
+            lineStyle: {
108
+              color: "#DADADA" //刻度线的颜色
109
+            }
110
+          },
111
+          splitLine: {
112
+            //网格线
113
+            lineStyle: {
114
+              type: "dotted" //设置网格线类型 dotted:虚线   solid:实线
115
+            },
116
+            show: true //隐藏或显示
117
+          },
118
+          axisLabel: {
119
+            color: "#5F6E82" //更改坐标轴文字颜色
120
+          }
121
+        }
122
+      ],
123
+      series: curseries
124
+    };
125
+    var myEcharts = echarts.init(
126
+      document.querySelector(".section2 #averagescoreEcharts")
127
+    );
128
+    myEcharts.clear();
129
+    myEcharts.setOption(option);
130
+  }
131
+  function achievementdistributiontable (list) {
132
+    var table = "", goodTableHeadTr1Html = '<th class="dj">等级</th><th class="pm">排名(年级/名)</th><th class="dj">人数</th><th class="comm">详情</th>',
133
+       trHtml = "";
134
+     $.each(list.djtj, function (idx, item) {
135
+       var stujson = JSON.parse(item.stujson),stuarr = "";
136
+       $.each(stujson, function (index, items) {
137
+         stuarr+=items.studentname+"("+items.schoolrank+"名)、"
138
+       })
139
+        stuarr = stuarr.substr(0, stuarr.length - 1);
140
+       trHtml += '<tr><td>' + item.rankname + "类</td><td>" + item.rankrange + "</td><td>" +
141
+        item.stunum+"</td><td>"+stuarr+"</td></tr>";
142
+     })
143
+    
144
+    table =  '<table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
145
+        goodTableHeadTr1Html + '</tr></thead><tbody class="goodTableTbody">' +
146
+      trHtml + '</tbody></table>'
147
+    $(".section2 .achievementdistribution").html(table)
148
+  }
149
+  function progresstable (list) {
150
+    var table = "", trHtml={1:"",2:""};
151
+    var cjdjheight = $(".section2_1 .cjdjheight").height() - 454;
152
+    var surplus = pageheight - cjdjheight; //本页剩余高度
153
+    var height = 0,page = {1:"",2:""},ispage = false;
154
+    $.each(list.dfjb, function (idx, item) {
155
+      if (idx % 2 == 0) {
156
+        height += 27.5;
157
+      if (height > surplus && surplus - height < 27.5) {
158
+        ispage = true;
159
+      }
160
+        if (ispage) {
161
+           trHtml[2] += '<tr><td>' + (idx+1) + '</td><td>' + item.username + '</td><td>' + item.score + '分</td><td>第' +
162
+        item.classrank + '名</td><td class="green">进步' + item.classrankpre + '名</td>';
163
+        } else {
164
+           trHtml[1] += '<tr><td>' + (idx+1) + '</td><td>' + item.username + '</td><td>' + item.score + '分</td><td>第' +
165
+        item.classrank + '名</td><td class="green">进步' + item.classrankpre + '名</td>';
166
+        }
167
+      } else {
168
+        if (ispage) {
169
+           trHtml[2]+= '<td>' + (idx+1) + '</td><td>' + item.username + '</td><td>' + item.score + '分</td><td>第' +
170
+        item.classrank + '名</td><td class="green">进步' + item.classrankpre + '名</td>';
171
+        } else {
172
+           trHtml[1] += '<td>' + (idx+1) + '</td><td>' + item.username + '</td><td>' + item.score + '分</td><td>第' +
173
+        item.classrank + '名</td><td class="green">进步' + item.classrankpre + '名</td>';
174
+        }
175
+       
176
+      } 
177
+    })
178
+    for (var i = 1; i < 3; i++){
179
+      page[i]='<table border="1" class="my_table"><tbody class="goodTableTbody">' +
180
+      trHtml[i] + '</tbody></table>'
181
+    }
182
+    $(".section2_1 .progress").html(page[1])
183
+    if (ispage) {
184
+      //添加第二页
185
+        $(".section2_1").after(
186
+        '<div class="page_root section2 section2_2"></div>'
187
+      );
188
+      $(".section2_2").html(page[2]); 
189
+    }
190
+  }
191
+
192
+  function retrogression (list) {
193
+    var trHtml = "", table = "";
194
+    $.each(list.dftb, function (idx, item) {
195
+       item.classrankpre = Math.abs(item.classrankpre)
196
+      if (idx % 2 == 0) {
197
+           trHtml += '<tr><td>' + (idx+1) + '</td><td>' + item.username + '</td><td>' + item.score + '分</td><td>第' +
198
+        item.classrank + '名</td><td class="red">退步' + item.classrankpre + '名</td>';
199
+        
200
+      } else {
201
+           trHtml += '<td>' + (idx+1) + '</td><td>' + item.username + '</td><td>' + item.score + '分</td><td>第' +
202
+        item.classrank + '名</td><td class="red">退步' + item.classrankpre + '名</td>';
203
+      } 
204
+     })
205
+    var table ='<table border="1" class="my_table"><tbody class="goodTableTbody">' +
206
+      trHtml + '</tbody></table>'
207
+    $(".section2 .retrogression").html(table)
208
+  }
209
+
210
+  function critical (list) {
211
+    var trHtml = "", table = "";
212
+    $.each(list.ljs, function (idx, item) {
213
+      if (idx % 2 == 0) {
214
+           trHtml += '<tr><td>' + (idx+1) + '</td><td>' + item.username + '</td><td>' + item.score + '分</td><td>第' +
215
+        item.classrank + '分</td><td class="red">' + item.classrankpre + '分</td>';
216
+        
217
+      } else {
218
+           trHtml += '<td>' + (idx+1) + '</td><td>' + item.username + '</td><td>' + item.score + '分</td><td>第' +
219
+        item.classrank + '分</td><td class="red">' + item.classrankpre + '分</td>';
220
+      } 
221
+     })
222
+    var table ='<table border="1" class="my_table"><tbody class="goodTableTbody">' +
223
+      trHtml + '</tbody></table>'
224
+    $(".section2 .critical").html(table)
225
+  }
226
+
227
+  function wave (list) {
228
+    var trHtml = "", table = "";
229
+    $.each(list.bds, function (idx, item) {
230
+      var curdata = {
231
+        class: "red",
232
+        name :"退步"
233
+      }
234
+      if (item.classrankpre > 0) {
235
+        curdata = {
236
+        class: "green",
237
+        name :"进步"
238
+      }
239
+      }
240
+      item.classrankpre = Math.abs(item.classrankpre)
241
+      if (idx % 2 == 0) {
242
+           trHtml += '<tr><td>' + (idx+1) + '</td><td>' + item.username + '</td><td>' + item.score + '分</td><td>' +
243
+        item.classrank + '分</td><td class="'+curdata.class+'">'+curdata.name + item.classrankpre + '名</td>';
244
+        
245
+      } else {
246
+           trHtml += '<td>' + (idx+1) + '</td><td>' + item.username + '</td><td>' + item.score + '分</td><td>' +
247
+        item.classrank + '分</td><td class="'+curdata.class+'">'+curdata.name + item.classrankpre + '名</td>';
248
+      } 
249
+     })
250
+    var table ='<table border="1" class="my_table"><tbody class="goodTableTbody">' +
251
+      trHtml + '</tbody></table>'
252
+    $(".section2 .wave").html(table)
253
+  }
254
+
255
+  function errquestion (list) {
256
+    console.log(list.gpctList);
257
+    var table = "", goodTableHeadTr1Html = '<th>题号</th><th>题型</th><th>知识点</th><th>班级得分率</th><th>与年级差值</th><th>高频错误项</th>',
258
+       trHtml = "";
259
+     $.each(list.gpctList, function (idx, item) {
260
+       item.answer = JSON.parse(item.answer);
261
+       trHtml += '<tr><td>第' + item.qn + "题</td><td>" + item.eptname + "</td><td>" +
262
+        item.pointnames+"</td><td>"+item.classsrate+'%</td><td>'+item.gradesrate+'%</td><td>'+item.answer[0]+"</td></tr>";
263
+     })
264
+    
265
+    table =  '<table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
266
+        goodTableHeadTr1Html + '</tr></thead><tbody class="goodTableTbody">' +
267
+      trHtml + '</tbody></table>'
268
+   $(".section2 .errquestion").html(table)
269
+  }
2 270
   var parameter = $(".section_2_html_root").data("page-params");
3 271
   parameter = JSON.parse(parameter);
4
-
272
+  console.log(parameter[0]);
273
+  var curdata = parameter[0];
274
+  $(".section2 .subjectinfo").text(curdata.subjectname + "概况");
275
+  $(".section2 .classavgscore").text(curdata.classavgscore);
276
+  $(".section2 .classavgscorerank").text(curdata.classavgscorerank);
277
+  $(".section2 .yxrate").text(curdata.yxrate);
278
+  $(".section2 .jgrate").text(curdata.jgrate);
279
+  $(".section2 .classmaxscore").text(curdata.classmaxscore);
280
+  $(".section2 .schoolavgscore").text(curdata.schoolavgscore);
281
+  $(".section2 .schoolmaxscore").text(curdata.schoolmaxscore);
282
+  initaveragescoreEcharts(curdata);
283
+  achievementdistributiontable(curdata);
284
+  progresstable(curdata);
285
+  retrogression(curdata);
286
+  critical(curdata);
287
+  wave(curdata);
288
+  errquestion(curdata)
289
+   document.documentElement.scrollTop = 6000;
5 290
 });

+ 0
- 7
notes.txt ファイルの表示

@@ -3,13 +3,6 @@ catalog.html 目录
3 3
 preface.html 前言
4 4
 section_1.html 第一部分
5 5
 section_2.html 第二部分
6
-    第二部分:
7
-        班级成绩对比-全科  section_2_class_all
8
-        班级成绩对比-单科 section_2_class_single
9
-        分数等级对比-全科(分数等级对比-单科)section_2_level
10
-        分数分段对比-全科(分数分段对比-单科)section_2_part
11
-        临界生对比-全科 (按名次)临界生对比-全科 (按分数)section_2_lin
12
-        优秀生、学困生对比-全科、单科 section_2_excellent
13 6
 section_3.html 第三部分
14 7
 section_4.html 第四部分
15 8
 

+ 1
- 1
sections/section_1.html ファイルの表示

@@ -172,7 +172,7 @@
172 172
           style="margin-top: 0; padding-top: 0"
173 173
         >
174 174
           <span class="yj" style="background-color: #ff5f56"></span
175
-          >劣势学科<span class="lssubject"></span>
175
+          >劣势学科<span class="lssubject"></span>
176 176
         </div>
177 177
       </div>
178 178
       <h3 class="section_title_3">5.2 各科优劣比例分布</h3>

+ 80
- 1
sections/section_2.html ファイルの表示

@@ -4,10 +4,89 @@
4 4
     <meta charset="UTF-8" />
5 5
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 6
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+    <link rel="stylesheet" href="./css/section_2.css" />
7 8
     <title>校本PDF报告-第二章 成绩分析</title>
8 9
   </head>
9 10
   <body>
10
-    <div class="section_2 score_analysis_root"></div>
11
+    <div class="page_root section2">
12
+      <h1 class="section_title_1">第二章 单科概况</h1>
13
+      <div class="abstract_box">
14
+        <div class="abstract_left">
15
+          <img src="/img/img2.png" />
16
+        </div>
17
+        <div class="abstract_right">
18
+          <div class="abstract_content">
19
+            从学校和数据的角度分析整体科目、整体班级及各科各班之间的水平和差异情况,系统从多个维度的数据进行对比分析,包括<strong
20
+              >满分、最高分、平均分、最低分、四率、参考人数、标准差。</strong
21
+            >
22
+          </div>
23
+        </div>
24
+      </div>
25
+      <h1 class="subjectinfo">概况</h1>
26
+      <div class="section_title_3 jj">
27
+        本次报告是结合学生语文学科成绩,进行深层分析,很好地反映了全部学生阶段性的教学成果和存在的问题。
28
+        学生整体表现大致如下:
29
+      </div>
30
+      <h2 class="section_title_2">1.总览</h2>
31
+      <div class="section_list">
32
+        <div class="section_item">
33
+          <div class="item_num"><span class="classavgscore"></span>分</div>
34
+          <div class="item_title">平均分</div>
35
+        </div>
36
+        <div class="section_item">
37
+          <div class="item_num"><span class="classavgscorerank"></span>名</div>
38
+          <div class="item_title">平均分排名</div>
39
+        </div>
40
+        <div class="section_item">
41
+          <div class="item_num"><span class="yxrate"></span>%</div>
42
+          <div class="item_title">优秀率</div>
43
+        </div>
44
+        <div class="section_item">
45
+          <div class="item_num"><span class="jgrate"></span>%</div>
46
+          <div class="item_title">及格率</div>
47
+        </div>
48
+        <div class="section_item" style="margin-right: 0">
49
+          <div class="item_num"><span class="classmaxscore"></span>分</div>
50
+          <div class="item_title">最高分</div>
51
+        </div>
52
+      </div>
53
+      <div style="margin-bottom: 4mm; font-size: 4mm">
54
+        全校平均分:<span class="schoolavgscore blue"></span>分<span
55
+          class="line"
56
+        ></span
57
+        >全校最高分:<span class="schoolmaxscore blue"></span>分
58
+      </div>
59
+      <h2 class="section_title_2">2.学科平均分对比</h2>
60
+      <div
61
+        id="averagescoreEcharts"
62
+        style="margin: 0 4mm 4mm; height: 80mm"
63
+      ></div>
64
+    </div>
65
+    <div class="page_root section2 section2_1">
66
+      <div class="cjdjheight">
67
+        <h2 class="section_title_2">3.成绩等级分布</h2>
68
+        <div class="achievementdistribution"></div>
69
+        <h2 class="section_title_2">4.需关注学生</h2>
70
+        <h3 class="section_title_3">4.1 大幅进步分布</h3>
71
+      </div>
72
+      <div class="progress multicolumn"></div>
73
+    </div>
74
+    <div class="page_root section2">
75
+      <h3 class="section_title_3">4.2 大幅退步分布</h3>
76
+      <div class="retrogression"></div>
77
+    </div>
78
+    <div class="page_root section2">
79
+      <h3 class="section_title_3">4.3 临界生分布</h3>
80
+      <div class="critical"></div>
81
+    </div>
82
+    <div class="page_root section2">
83
+      <h3 class="section_title_3">4.4 波动生分布</h3>
84
+      <div class="wave"></div>
85
+    </div>
86
+    <div class="page_root section2">
87
+      <h2 class="section_title_2">5.高频错题分析</h2>
88
+      <div class="errquestion"></div>
89
+    </div>
11 90
     <script src="../js/section_2.js"></script>
12 91
   </body>
13 92
 </html>

読み込み中…
キャンセル
保存