guozhongbo před 1 rokem
rodič
revize
4b5e38f045
8 změnil soubory, kde provedl 662 přidání a 96 odebrání
  1. 6
    4
      css/common.css
  2. 6
    4
      css/section_2.css
  3. 34
    3
      js/index.js
  4. 2
    5
      js/preface.js
  5. 53
    41
      js/section_2.js
  6. 505
    0
      js/section_3.js
  7. 3
    2
      sections/section_2.html
  8. 53
    37
      sections/section_3.html

+ 6
- 4
css/common.css Zobrazit soubor

@@ -65,7 +65,6 @@ h1,h2,h3,h4 {
65 65
   float: left;
66 66
   margin: 4mm 0;
67 67
   width: 60mm;
68
-  height: calc(100% - 8mm);
69 68
   text-align: center;
70 69
   border-right: 0.5mm dashed #f5f5f5;
71 70
   box-sizing: border-box;
@@ -78,9 +77,8 @@ h1,h2,h3,h4 {
78 77
 }
79 78
 .abstract_right {
80 79
   float: right;
81
-  margin: 4mm 10mm;
82
-  width: calc(100% - 80mm);
83
-  height: calc(100% - 8mm);
80
+  margin: 4mm 8mm;
81
+  width: 60%;
84 82
   box-sizing: border-box;
85 83
 }
86 84
 .abstract_content {
@@ -173,4 +171,8 @@ h1,h2,h3,h4 {
173 171
 }
174 172
 .w29mm {
175 173
   width: 29mm;
174
+}
175
+.subjectinfo {
176
+  font-weight: bold;
177
+  margin-bottom: 2mm;
176 178
 }

+ 6
- 4
css/section_2.css Zobrazit soubor

@@ -30,10 +30,7 @@
30 30
   font-size: 4mm;
31 31
   color: #333333;
32 32
 }
33
-.section2 .subjectinfo{
34
-  font-weight: bold;
35
-  margin-bottom: 2mm;
36
-}
33
+
37 34
 .section2 .jj{
38 35
   text-indent: 8mm;
39 36
   color: #999999;
@@ -85,3 +82,8 @@
85 82
 .section2 .red {
86 83
   color: red;
87 84
 }
85
+.word_wrap {
86
+  word-break: break-all;
87
+  word-wrap: break-word;
88
+  white-space: pre-wrap;
89
+}

+ 34
- 3
js/index.js Zobrazit soubor

@@ -1,13 +1,44 @@
1 1
 var pageheight = 1047; // 单页高度
2
+var currentclass = null; // 当前班级
2 3
 $(function () {
4
+  function getGradeName(gradeid) {
5
+    var gradename = "";
6
+    if (gradeid == 1) {
7
+      gradename = "一年级";
8
+    } else if (gradeid == 2) {
9
+      gradename = "二年级";
10
+    } else if (gradeid == 3) {
11
+      gradename = "三年级";
12
+    } else if (gradeid == 4) {
13
+      gradename = "四年级";
14
+    } else if (gradeid == 5) {
15
+      gradename = "五年级";
16
+    } else if (gradeid == 6) {
17
+      gradename = "六年级";
18
+    } else if (gradeid == 7) {
19
+      gradename = "七年级";
20
+    } else if (gradeid == 8) {
21
+      gradename = "八年级";
22
+    } else if (gradeid == 9) {
23
+      gradename = "九年级";
24
+    } else if (gradeid == 10) {
25
+      gradename = "高一";
26
+    } else if (gradeid == 11) {
27
+      gradename = "高二";
28
+    } else if (gradeid == 12) {
29
+      gradename = "高三";
30
+    }
31
+    return gradename;
32
+  };
3 33
   function loadSectionHtml (sectionsData) {
4 34
     console.log(sectionsData);
35
+    currentclass = getGradeName(sectionsData.ksgk.gradeid) +sectionsData.xkcj[0].classname;
5 36
     var loadHtmlArr = [
6 37
       // "cover", //封面
7 38
       // "preface", //前言
8 39
       // "section_1",
9
-      "section_2",
10
-      // "section_3",
40
+      // "section_2",
41
+      "section_3",
11 42
       // "section_4",
12 43
       // "section_5",
13 44
     ];
@@ -25,7 +56,7 @@ $(function () {
25 56
       } else if (htmlName === "section_2") {
26 57
         $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData.subjects));
27 58
       } else if (htmlName === "section_3") {
28
-        $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData.wjfx));
59
+        $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData.subjects));
29 60
       } else if (htmlName === "section_4") {
30 61
         $("." + htmlName + "_html_root").data("page-params", JSON.stringify(sectionsData.yxsj));
31 62
       } else if (htmlName === "section_5") {

+ 2
- 5
js/preface.js Zobrazit soubor

@@ -56,14 +56,11 @@ $(function () {
56 56
   $(".preface .sjnum").text(parameter.ksgk.stunum);
57 57
   $(".preface .maxscore").text(parameter.ksgk.maxscore);
58 58
   $(".preface .avgscore").text(parameter.ksgk.avgscore);
59
-  var arr = $.grep(parameter.djfx, function (value) {
59
+  var arr = $.grep(parameter.fsdjtj, function (value) {
60 60
     return value.ranktype == 1 && value.subjectid == "zf";
61
-  })[0].ranks;
62
-  var arrdj = $.grep(arr, function (value) {
63
-    return value.classid == 0;
64 61
   });
65 62
   var html = "";
66
-  $.each(arrdj, function (idx, item) {
63
+  $.each(arr, function (idx, item) {
67 64
     html += '<div class="preface_content_line">本次考试' +
68 65
       item.rankname +
69 66
       '类上线分值' +

+ 53
- 41
js/section_2.js Zobrazit soubor

@@ -1,5 +1,5 @@
1 1
 $(function () {
2
-  function initaveragescoreEcharts (list) {
2
+  function initaveragescoreEcharts (list,s_index) {
3 3
        var itemStyle = {
4 4
       normal: {
5 5
         label: {
@@ -123,12 +123,12 @@ $(function () {
123 123
       series: curseries
124 124
     };
125 125
     var myEcharts = echarts.init(
126
-      document.querySelector(".section2 #averagescoreEcharts")
126
+      document.querySelector(".section2.sectiontwo_"+s_index+"  #averagescoreEcharts")
127 127
     );
128 128
     myEcharts.clear();
129 129
     myEcharts.setOption(option);
130 130
   }
131
-  function achievementdistributiontable (list) {
131
+  function achievementdistributiontable (list,s_index) {
132 132
     var table = "", goodTableHeadTr1Html = '<th class="dj">等级</th><th class="pm">排名(年级/名)</th><th class="dj">人数</th><th class="comm">详情</th>',
133 133
        trHtml = "";
134 134
      $.each(list.djtj, function (idx, item) {
@@ -144,11 +144,11 @@ $(function () {
144 144
     table =  '<table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
145 145
         goodTableHeadTr1Html + '</tr></thead><tbody class="goodTableTbody">' +
146 146
       trHtml + '</tbody></table>'
147
-    $(".section2 .achievementdistribution").html(table)
147
+    $(".section2.sectiontwo_"+s_index+"  .achievementdistribution").html(table)
148 148
   }
149
-  function progresstable (list) {
149
+  function progresstable (list,s_index) {
150 150
     var table = "", trHtml={1:"",2:""};
151
-    var cjdjheight = $(".section2_1 .cjdjheight").height() - 454;
151
+    var cjdjheight = $(".section2_1.sectiontwo_"+s_index+"  .cjdjheight").height() - 454;
152 152
     var surplus = pageheight - cjdjheight; //本页剩余高度
153 153
     var height = 0,page = {1:"",2:""},ispage = false;
154 154
     $.each(list.dfjb, function (idx, item) {
@@ -179,17 +179,17 @@ $(function () {
179 179
       page[i]='<table border="1" class="my_table"><tbody class="goodTableTbody">' +
180 180
       trHtml[i] + '</tbody></table>'
181 181
     }
182
-    $(".section2_1 .progress").html(page[1])
182
+    $(".section2_1.sectiontwo_"+s_index+" .progress").html(page[1])
183 183
     if (ispage) {
184 184
       //添加第二页
185
-        $(".section2_1").after(
186
-        '<div class="page_root section2 section2_2"></div>'
185
+        $(".section2_1.sectiontwo_"+s_index).after(
186
+        '<div class="page_root section2 sectiontwo_'+s_index+' section2_2"></div>'
187 187
       );
188
-      $(".section2_2").html(page[2]); 
188
+      $(".section2_2.sectiontwo_"+s_index).html(page[2]); 
189 189
     }
190 190
   }
191 191
 
192
-  function retrogression (list) {
192
+  function retrogression (list,s_index) {
193 193
     var trHtml = "", table = "";
194 194
     $.each(list.dftb, function (idx, item) {
195 195
        item.classrankpre = Math.abs(item.classrankpre)
@@ -204,10 +204,10 @@ $(function () {
204 204
      })
205 205
     var table ='<table border="1" class="my_table"><tbody class="goodTableTbody">' +
206 206
       trHtml + '</tbody></table>'
207
-    $(".section2 .retrogression").html(table)
207
+    $(".section2.sectiontwo_"+s_index+" .retrogression").html(table)
208 208
   }
209 209
 
210
-  function critical (list) {
210
+  function critical (list,s_index) {
211 211
     var trHtml = "", table = "";
212 212
     $.each(list.ljs, function (idx, item) {
213 213
       if (idx % 2 == 0) {
@@ -221,10 +221,10 @@ $(function () {
221 221
      })
222 222
     var table ='<table border="1" class="my_table"><tbody class="goodTableTbody">' +
223 223
       trHtml + '</tbody></table>'
224
-    $(".section2 .critical").html(table)
224
+    $(".section2.sectiontwo_"+s_index+" .critical").html(table)
225 225
   }
226 226
 
227
-  function wave (list) {
227
+  function wave (list,s_index) {
228 228
     var trHtml = "", table = "";
229 229
     $.each(list.bds, function (idx, item) {
230 230
       var curdata = {
@@ -249,42 +249,54 @@ $(function () {
249 249
      })
250 250
     var table ='<table border="1" class="my_table"><tbody class="goodTableTbody">' +
251 251
       trHtml + '</tbody></table>'
252
-    $(".section2 .wave").html(table)
252
+    $(".section2.sectiontwo_"+s_index+" .wave").html(table)
253 253
   }
254 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>',
255
+  function errquestion (list,s_index) {
256
+    var table = "", goodTableHeadTr1Html = '<th>题号</th><th>题型</th><th>知识点</th><th>班级得分率</th><th>年级得分率</th><th>高频错误项</th>',
258 257
        trHtml = "";
259 258
      $.each(list.gpctList, function (idx, item) {
260 259
        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>";
260
+       var pointnames = item.pointnames[0] || "";
261
+       var erroroption = item.erroroption|| "--";
262
+       trHtml += '<tr><td class="word_wrap">第' + item.qn + "题</td><td>" + item.eptname + "</td><td>" +
263
+        pointnames+"</td><td>"+item.classsrate+'%</td><td>'+item.gradesrate+'%</td><td>'+erroroption+"</td></tr>";
263 264
      })
264
-    
265 265
     table =  '<table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
266 266
         goodTableHeadTr1Html + '</tr></thead><tbody class="goodTableTbody">' +
267 267
       trHtml + '</tbody></table>'
268
-   $(".section2 .errquestion").html(table)
268
+   $(".section2.sectiontwo_"+s_index+" .errquestion").html(table)
269 269
   }
270 270
   var parameter = $(".section_2_html_root").data("page-params");
271 271
   parameter = JSON.parse(parameter);
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;
272
+  var html = "";
273
+  $.each(parameter, function (s_index, item) {
274
+    html+=' <div class="page_root section2 sectiontwo_'+s_index+'">'+
275
+      (s_index === 0 ?'<h1 class="section_title_1">第二章 单科概况</h1><div class="abstract_box"><div class="abstract_left"><img src="/img/img2.png" /></div><div class="abstract_right"><div class="abstract_content">从学校和数据的角度分析整体科目、整体班级及各科各班之间的水平和差异情况,系统从多个维度的数据进行对比分析,包括<strong> 满分、最高分、平均分、最低分、四率、参考人数、标准差。</strong ></div ></div ></div >':"")+
276
+      '<h1 class="subjectinfo">'+item.subjectname+'概况</h1><div class="section_title_3 jj">本次报告是结合学生语文学科成绩,进行深层分析,很好地反映了全部学生阶段性的教学成果和存在的问题。学生整体表现大致如下:</div><h2 class="section_title_2">1.总览</h2><div class="section_list"><div class="section_item"><div class="item_num"><span class="classavgscore"></span>分</div><div class="item_title">平均分</div></div><div class="section_item"><div class="item_num"><span class="classavgscorerank"></span>名</div><div class="item_title">平均分排名</div></div><div class="section_item"><div class="item_num"><span class="yxrate"></span>%</div><div class="item_title">优秀率</div></div><div class="section_item"><div class="item_num"><span class="jgrate"></span>%</div><div class="item_title">及格率</div></div><div class="section_item" style="margin-right: 0"><div class="item_num"><span class="classmaxscore"></span>分</div><div class="item_title">最高分</div></div></div><div style="margin-bottom: 4mm; font-size: 4mm">全校平均分:<span class="schoolavgscore blue"></span>分<spanclass="line"></spanclass=>全校最高分:<span class="schoolmaxscore blue"></span>分</div><h2 class="section_title_2">2.学科平均分对比</h2><div id="averagescoreEcharts" style="margin: 0 4mm 4mm; height: 80mm"></div></div><div class="page_root section2 section2_1 sectiontwo_'+ 
277
+    s_index + '"><div class="cjdjheight"><h2 class="section_title_2">3.成绩等级分布</h2><div class="achievementdistribution"></div><h2 class="section_title_2">4.需关注学生</h2><h3 class="section_title_3">4.1 大幅进步分布</h3></div><div class="progress multicolumn"></div></div><div class="page_root section2 sectiontwo_'+
278
+    s_index + '"><h3 class="section_title_3">4.2 大幅退步分布</h3><div class="retrogression"></div></div><div class="page_root section2 sectiontwo_'+
279
+    s_index + '"><h3 class="section_title_3">4.3 临界生分布</h3><div class="critical"></div></div><div class="page_root section2 sectiontwo_'+
280
+    s_index + '"><h3 class="section_title_3">4.4 波动生分布</h3><div class="wave"></div></div><div class="page_root section2 sectiontwo_'+
281
+    s_index + '"><h2 class="section_title_2">5.高频错题分析</h2><div class="errquestion"></div></div>'
282
+    console.log(item);
283
+  })
284
+  $(".ChapterTwo").html(html)
285
+  $.each(parameter, function (s_index, item) {
286
+    $(".section2.sectiontwo_"+s_index+" .classavgscore").text(item.classavgscore);
287
+  $(".section2.sectiontwo_"+s_index+" .classavgscorerank").text(item.classavgscorerank);
288
+  $(".section2.sectiontwo_"+s_index+" .yxrate").text(item.yxrate);
289
+  $(".section2.sectiontwo_"+s_index+" .jgrate").text(item.jgrate);
290
+  $(".section2.sectiontwo_"+s_index+" .classmaxscore").text(item.classmaxscore);
291
+  $(".section2.sectiontwo_"+s_index+" .schoolavgscore").text(item.schoolavgscore);
292
+  $(".section2.sectiontwo_"+s_index+" .schoolmaxscore").text(item.schoolmaxscore);
293
+  initaveragescoreEcharts(item,s_index);
294
+  achievementdistributiontable(item,s_index);
295
+  progresstable(item,s_index);
296
+  retrogression(item,s_index);
297
+  critical(item,s_index);
298
+  wave(item,s_index);
299
+  errquestion(item,s_index)
300
+  })
301
+   document.documentElement.scrollTop = 13500;
290 302
 });

+ 505
- 0
js/section_3.js Zobrazit soubor

@@ -1,4 +1,509 @@
1 1
 $(function () {
2
+  function hexToRgba(hex, opacity) {
3
+    var rgbaColor = "";
4
+    var reg = /^#[\da-f]{6}$/i;
5
+    if (reg.test(hex)) {
6
+      rgbaColor = 'rgba(' + parseInt("0x" + hex.slice(1, 3)) + ',' + parseInt("0x" + hex.slice(3, 5))
7
+        + ',' + parseInt("0x" + hex.slice(5, 7)) + ',' + opacity + ')'
8
+      }
9
+    return rgbaColor;
10
+ }
11
+  function initlargeAnalysisEcharts(s_index,list) {
12
+     var schoolscore = [],
13
+      classscore = [],
14
+      legendlist = [currentclass, "全年级"];
15
+    $.each(list, function (idx, item) {
16
+      if (item.subjectname != "全科") {
17
+        classscore.push(item.classavgscore);
18
+        schoolscore.push(item.gradeavgscore);
19
+      }
20
+    });
21
+    // 求出数组最大值
22
+    let arr = [...schoolscore, ...classscore];
23
+    let arr1 = Math.max.apply(null, arr);
24
+    let maxnum = parseInt((arr1 + 10) / 10) * 10;
25
+    let arrList = [];
26
+    $.each(list, function (idx, item) {
27
+      if (item.subjectname != "全科") {
28
+        let j = {
29
+          name: item.qtypename,
30
+          max: maxnum
31
+        };
32
+        arrList.push(j);
33
+      }
34
+    });
35
+    var option = {
36
+      animation: false,
37
+      color: ["#5C99FF", "#5EC5C8"],
38
+      legend: {
39
+        icon: "rectRound",
40
+        itemWidth: $.UnitUtil.mm2px(2),
41
+        itemHeight: $.UnitUtil.mm2px(2),
42
+        data: legendlist,
43
+        x: "center",
44
+        y: "bottom"
45
+      },
46
+      grid: {
47
+        top: $.UnitUtil.mm2px(10),
48
+        left: 0,
49
+        right: 0,
50
+        bottom: $.UnitUtil.mm2px(8),
51
+        containLabel: true
52
+      },
53
+      radar: {
54
+        radius: "60%",
55
+        center: ["50%", "55%"],
56
+        indicator: arrList
57
+      },
58
+      series: {
59
+        type: "radar",
60
+        tooltip: {
61
+          trigger: "item"
62
+        },
63
+        // areaStyle: {},  //内部阴影
64
+        data: [
65
+         {
66
+            value: classscore,
67
+            label: {
68
+              show: true,
69
+              formatter: function (params) {
70
+                return params.value;
71
+              }
72
+            },
73
+            name: currentclass
74
+          },
75
+         {
76
+            value: schoolscore,
77
+            label: {
78
+              show: true,
79
+              formatter: function (params) {
80
+                return params.value;
81
+              }
82
+            },
83
+            name: "全年级"
84
+          }
85
+        ]
86
+      }
87
+    };
88
+    var myEcharts = echarts.init(
89
+      document.querySelector(".section_3_"+s_index +" #largeAnalysisEcharts")
90
+    );
91
+    myEcharts.clear();
92
+    myEcharts.setOption(option);
93
+    showlargeAnalysistable(list,legendlist,s_index);
94
+  }
95
+
96
+  function showlargeAnalysistable (list,legendlist,s_index) {
97
+    var table = "",goodTableHeadTr1Html = '<th rowspan="2">题型</th><th rowspan="2">对应题号</th><th rowspan="2">分值</th><th rowspan="2">占比</th><th colspan="2">年级</th><th colspan="2">'+currentclass+'</th>',
98
+      goodTableHeadTr2Html = "", trHtml = "";
99
+    $.each(list, function (idx, item) {
100
+      trHtml += "<tr>";
101
+      trHtml+= '<td><div class="my_cell">' +
102
+      item.qtypename +
103
+      '</div></td><td><div class="my_cell">' +
104
+      item.qns +
105
+      '</div></td><td><div class="my_cell">' +
106
+      item.score +
107
+      '</div></td><td><div class="my_cell">' +
108
+      item.srate +
109
+      '%</div></td><td><div class="my_cell">' +
110
+      item.gradeavgscore +
111
+      '</div></td><td><div class="my_cell">' +
112
+      item.gradesrate +
113
+      '%</div></td><td><div class="my_cell">' +
114
+      item.classavgscore +
115
+      '</div></td><td><div class="my_cell">' +
116
+      item.classsrate +
117
+      "%" +
118
+      '</div></td>';
119
+    })
120
+    $.each(legendlist, function (idx, item) {
121
+      goodTableHeadTr2Html+="<th>平均分</th><th>得分率</th>";
122
+    })
123
+      table ='  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
124
+        goodTableHeadTr1Html  +
125
+        '</tr><tr class="goodTableHeadTr2">' +
126
+        goodTableHeadTr2Html  +
127
+        '</tr></thead><tbody class="goodTableTbody">' +
128
+        trHtml  +
129
+      "</tbody></table>"
130
+    $(".section_3_"+s_index +" .largeAnalysistable").html(table)
131
+  }
132
+
133
+  function initSmallAnalysisEcharts (s_index,list) {
134
+     let legendlist = [currentclass, "全年级"],
135
+        xAxis_data = [],
136
+        schoolscore = [],
137
+        classscore = [],
138
+      curseries = [];
139
+    $.each(list, function (idx, item) {
140
+      xAxis_data.push("第" + item.qn + "题");
141
+        classscore.push(item.classavgscore);
142
+        schoolscore.push(item.gradeavgscore);
143
+    })
144
+      let color = ["#5699FF", "#5EC5C8"];
145
+      curseries = [
146
+        {
147
+          name: currentclass,
148
+          type: "line",
149
+          symbol: "circle", // 默认是空心圆(中间是白色的),改成实心圆
150
+          smooth: false, //折线是否弯曲
151
+          // symbol: "emptyCircle",
152
+          symbolSize: 6,
153
+          itemStyle: {
154
+            normal: {
155
+              color: "#4190FF" // 拐点外圈颜色
156
+            }
157
+          },
158
+          label: {
159
+            normal: {
160
+              show: true,
161
+              align: "center",
162
+              verticalAlign: "bottom",
163
+              position: "top",
164
+              distance: 0,
165
+              formatter: `{c}`
166
+            }
167
+          },
168
+          areaStyle: {
169
+            normal: {
170
+              color: new echarts.graphic.LinearGradient(
171
+                0,
172
+                0,
173
+                0,
174
+                1,
175
+                [
176
+                  {
177
+                    offset: 0,
178
+                    color: hexToRgba(color[0], 0.3)
179
+                  },
180
+                  {
181
+                    offset: 1,
182
+                    color: hexToRgba(color[0], 0)
183
+                  }
184
+                ],
185
+                false
186
+              ),
187
+              shadowColor: hexToRgba(color[0], 0),
188
+              shadowBlur: 10
189
+            }
190
+          },
191
+          data: classscore
192
+        },
193
+        {
194
+          name: "全年级",
195
+          type: "line",
196
+          // smooth: true, //是否平滑曲线显示
197
+          symbol: "circle", // 默认是空心圆(中间是白色的),改成实心圆
198
+          smooth: false, //折线是否弯曲
199
+          // symbol: "emptyCircle",
200
+          symbolSize: 6,
201
+          // zlevel: 3,
202
+          itemStyle: {
203
+            normal: {
204
+              color: "#5FCE9E" // 拐点外圈颜色
205
+            }
206
+          },
207
+          label: {
208
+            normal: {
209
+              show: true,
210
+              align: "center",
211
+              verticalAlign: "bottom",
212
+              position: "top",
213
+              distance: 0,
214
+              formatter: `{c}`
215
+            }
216
+          },
217
+          areaStyle: {
218
+            normal: {
219
+              color: new echarts.graphic.LinearGradient(
220
+                0,
221
+                0,
222
+                0,
223
+                1,
224
+                [
225
+                  {
226
+                    offset: 0,
227
+                    color: hexToRgba(color[1], 0.3)
228
+                  },
229
+                  {
230
+                    offset: 1,
231
+                    color: hexToRgba(color[1], 0)
232
+                  }
233
+                ],
234
+                false
235
+              ),
236
+              shadowColor: hexToRgba(color[1], 0),
237
+              shadowBlur: 10
238
+            }
239
+          },
240
+          data: schoolscore
241
+        }
242
+      ];
243
+    let option = {
244
+        animation: false,
245
+        color: ["#5699FF", "#5EC5C8"],
246
+        title: {
247
+          text: "分",
248
+          x: "left",
249
+          y: "top",
250
+          textStyle: {
251
+            color: "#5F6E82",
252
+            fontSize: 12,
253
+            fontWeight: 500
254
+          }
255
+        },
256
+        legend: {
257
+        icon: "rectRound",
258
+        itemWidth: $.UnitUtil.mm2px(2),
259
+        itemHeight: $.UnitUtil.mm2px(2),
260
+        data: legendlist,
261
+        x: "center",
262
+        y: "bottom"
263
+      },
264
+      grid: {
265
+        top: $.UnitUtil.mm2px(10),
266
+        left: 0,
267
+        right: 0,
268
+        bottom: $.UnitUtil.mm2px(8),
269
+        containLabel: true
270
+      },
271
+        xAxis: [
272
+          {
273
+            type: "category",
274
+            data: xAxis_data,
275
+            axisLabel: {
276
+              color: "#5F6E82" //更改坐标轴文字颜色
277
+            },
278
+            axisTick: {
279
+              alignWithLabel: true
280
+            },
281
+            boundaryGap: true,
282
+            triggerEvent: true,
283
+            axisLine: {
284
+              show: true, //是否显示轴线
285
+              lineStyle: {
286
+                color: "#DADADA" //刻度线的颜色
287
+              }
288
+            }
289
+          }
290
+        ],
291
+        yAxis: [
292
+          {
293
+            type: "value",
294
+            axisTick: {
295
+              show: false //刻度
296
+            },
297
+            axisLine: {
298
+              show: false, //是否显示轴线
299
+              lineStyle: {
300
+                color: "#DADADA" //刻度线的颜色
301
+              }
302
+            },
303
+            splitLine: {
304
+              //网格线
305
+              lineStyle: {
306
+                type: "dotted" //设置网格线类型 dotted:虚线   solid:实线
307
+              },
308
+              show: true //隐藏或显示
309
+            },
310
+            axisLabel: {
311
+              color: "#5F6E82" //更改坐标轴文字颜色
312
+            }
313
+          }
314
+        ],
315
+        series: curseries
316
+    };
317
+     var myEcharts = echarts.init(
318
+      document.querySelector(".section_3_"+s_index +" #SmallAnalysisEcharts")
319
+    );
320
+    myEcharts.clear();
321
+    myEcharts.setOption(option);
322
+    showSmallSmallAnalysistable(list,legendlist,s_index);
323
+  }
324
+
325
+  function showSmallSmallAnalysistable (list,legendlist,s_index) {
326
+    var table = "",goodTableHeadTr1Html = '<th rowspan="2">题号</th><th rowspan="2">题型</th><th rowspan="2">分值</th><th rowspan="2">难度</th><th colspan="2">年级</th><th colspan="2">'+currentclass+'</th>',
327
+      goodTableHeadTr2Html = "", trHtml = "";
328
+    var complexityarr = ["一", "二", "三", "四", "五"];
329
+    $.each(list, function (idx, item) {
330
+      var complexity = item.complexity ? complexityarr[item.complexity - 1] + "星" : " ";
331
+      trHtml += "<tr>";
332
+      trHtml+= '<td><div class="my_cell">' +
333
+      item.qn +
334
+      '</div></td><td><div class="my_cell">' +
335
+      item.qtypename +
336
+      '</div></td><td><div class="my_cell">' +
337
+      item.score +
338
+      '</div></td><td><div class="my_cell">' +
339
+      complexity +
340
+      '</div></td><td><div class="my_cell">' +
341
+      item.gradeavgscore +
342
+      '</div></td><td><div class="my_cell">' +
343
+      item.gradesrate +
344
+      '%</div></td><td><div class="my_cell">' +
345
+      item.classavgscore +
346
+      '</div></td><td><div class="my_cell">' +
347
+      item.classsrate +
348
+      "%" +
349
+      '</div></td>';
350
+    })
351
+    $.each(legendlist, function (idx, item) {
352
+      goodTableHeadTr2Html+="<th>平均分</th><th>得分率</th>";
353
+    })
354
+      table ='  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
355
+        goodTableHeadTr1Html  +
356
+        '</tr><tr class="goodTableHeadTr2">' +
357
+        goodTableHeadTr2Html  +
358
+        '</tr></thead><tbody class="goodTableTbody">' +
359
+        trHtml  +
360
+      "</tbody></table>"
361
+    $(".section_3_" + s_index + " .SmallAnalysistable").html(table);
362
+  }
363
+
364
+  function initpointsAnalysisEcharts (s_index, list) {
365
+    if (list.length == 0) return;
366
+    console.log(list);
367
+    var schoolscore = [],
368
+      classscore = [],
369
+      legendlist = [currentclass+"得分率", "年级得分率"];
370
+    $.each(list, function (idx, item) {
371
+      if (item.subjectname != "全科") {
372
+        classscore.push(item.classsrate);
373
+        schoolscore.push(item.gradesrate);
374
+      }
375
+    });
376
+    // 求出数组最大值
377
+    let arr = [...schoolscore, ...classscore];
378
+    let arr1 = Math.max.apply(null, arr);
379
+    let maxnum = parseInt((arr1 + 10) / 10) * 10;
380
+    let arrList = [];
381
+    $.each(list, function (idx, item) {
382
+      if (item.subjectname != "全科") {
383
+        let j = {
384
+          name: item.pointname,
385
+          max: maxnum
386
+        };
387
+        arrList.push(j);
388
+      }
389
+    });
390
+    var option = {
391
+      animation: false,
392
+      color: ["#5C99FF", "#FF5F56"],
393
+      legend: {
394
+        icon: "rectRound",
395
+        itemWidth: $.UnitUtil.mm2px(2),
396
+        itemHeight: $.UnitUtil.mm2px(2),
397
+        data: legendlist,
398
+        x: "center",
399
+        y: "bottom"
400
+      },
401
+      grid: {
402
+        top: $.UnitUtil.mm2px(10),
403
+        left: 0,
404
+        right: 0,
405
+        bottom: $.UnitUtil.mm2px(8),
406
+        containLabel: true
407
+      },
408
+      radar: {
409
+        radius: "60%",
410
+        center: ["50%", "55%"],
411
+        indicator: arrList
412
+      },
413
+      series: {
414
+        type: "radar",
415
+        tooltip: {
416
+          trigger: "item"
417
+        },
418
+        // areaStyle: {},  //内部阴影
419
+        data: [
420
+         {
421
+            value: classscore,
422
+            label: {
423
+              show: true,
424
+              formatter: function (params) {
425
+                return params.value;
426
+              }
427
+            },
428
+            name: currentclass+"得分率"
429
+          },
430
+         {
431
+            value: schoolscore,
432
+            label: {
433
+              show: true,
434
+              formatter: function (params) {
435
+                return params.value;
436
+              }
437
+            },
438
+            name: "年级得分率"
439
+          }
440
+        ]
441
+      }
442
+    };
443
+    var myEcharts = echarts.init(
444
+      document.querySelector(".section_3_"+s_index +" #pointsAnalysisEcharts")
445
+    );
446
+    myEcharts.clear();
447
+    myEcharts.setOption(option);
448
+    showpointsAnalysistable(list,legendlist,s_index);
449
+  }
450
+
451
+  function showpointsAnalysistable (list, legendlist, s_index) {
452
+     var table = "",goodTableHeadTr1Html = '<th rowspan="2">知识点</th><th rowspan="2">对应题号</th><th rowspan="2">分值</th><th rowspan="2">占比</th><th colspan="2">年级</th><th colspan="2">'+currentclass+'</th>',
453
+      goodTableHeadTr2Html = "", trHtml = "";
454
+    $.each(list, function (idx, item) {
455
+      trHtml += "<tr>";
456
+      trHtml+= '<td><div class="my_cell">' +
457
+      item.pointname +
458
+      '</div></td><td><div class="my_cell">' +
459
+      item.qns +
460
+      '</div></td><td><div class="my_cell">' +
461
+      item.score +
462
+      '</div></td><td><div class="my_cell">' +
463
+      item.srate +
464
+      '%</div></td><td><div class="my_cell">' +
465
+      item.gradeavgscore +
466
+      '</div></td><td><div class="my_cell">' +
467
+      item.gradesrate +
468
+      '%</div></td><td><div class="my_cell">' +
469
+      item.classavgscore +
470
+      '</div></td><td><div class="my_cell">' +
471
+      item.classsrate +
472
+      "%" +
473
+      '</div></td>';
474
+    })
475
+    $.each(legendlist, function (idx, item) {
476
+      goodTableHeadTr2Html+="<th>平均分</th><th>得分率</th>";
477
+    })
478
+      table ='  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
479
+        goodTableHeadTr1Html  +
480
+        '</tr><tr class="goodTableHeadTr2">' +
481
+        goodTableHeadTr2Html  +
482
+        '</tr></thead><tbody class="goodTableTbody">' +
483
+        trHtml  +
484
+      "</tbody></table>"
485
+    $(".section_3_" + s_index + " .pointsAnalysistable").html(table);
486
+    console.log($(".section_3_" + s_index + " .pointsAnalysistable").height());
487
+    var 
488
+  }
2 489
   var parameter = $(".section_3_html_root").data("page-params");
3 490
   parameter = JSON.parse(parameter);
491
+  var html = "";
492
+  $.each(parameter, function (s_index, item) {
493
+    html+='<div class="page_root section_3_'+s_index +'">'+
494
+     (s_index == 0?'<h1 class="section_title_1">第三章 试卷分析</h1><div class="abstract_box"><div class="abstract_left"><img src="/img/img2.png" /></div><div class="abstract_right"><div class="abstract_content">从学科试卷分析,帮我们从宏观的角度了解班级的水平和差异。系统从多个维度的数据进行学科对比分析,<strong>包括大题年级和班级的(平均分、得分率)、小题年级和班级的(平均分、得分率)。</strong></div></div></div>':"")+ 
495
+      '<h1 class="subjectinfo">'+item.subjectname+'试卷分析</h1><h2 class="section_title_2">1. 大题分析</h2><h3 class="section_title_3">1.1 大题分析</h3><div id="largeAnalysisEcharts" style="margin: 0 4mm 4mm; height: 71mm"></div><h2 class="section_title_3">1.2 大题整体分析</h2><div class="largeAnalysistable"></div></div><div class="page_root section_3_'+
496
+    s_index + '"><h2 class="section_title_2">2. 小题分析</h2><h3 class="section_title_3">2.1 小题分析</h3><div id="SmallAnalysisEcharts" style="margin: 0 4mm 4mm; height: 71mm"></div><h2 class="section_title_3_'+
497
+      s_index +'">2.2 小题整体分析</h2><div class="SmallAnalysistable"></div></div>'+(item.points.length>0?'<div class="page_root section_3_'+
498
+    s_index +'"><h2 class="section_title_2">3. 知识点掌握整体概况</h2><h3 class="section_title_3">3.1 知识点得分率分析</h3><div id="pointsAnalysisEcharts" style="margin: 0 4mm 4mm; height: 90mm"></div><h2 class="section_title_3">3.2 知识点整体分析</h2><div class="pointsAnalysistable"></div></div></div>':"")
499
+  })
500
+  $(".ChapterThree").html(html);
501
+  console.log(parameter);
502
+  $.each(parameter, function (s_index, item) { 
503
+    initlargeAnalysisEcharts(s_index, item.types);
504
+    initSmallAnalysisEcharts(s_index, item.questions);
505
+    initpointsAnalysisEcharts(s_index, item.points);
506
+  })
507
+  
508
+   document.documentElement.scrollTop = 4000;
4 509
 });

+ 3
- 2
sections/section_2.html Zobrazit soubor

@@ -8,7 +8,8 @@
8 8
     <title>校本PDF报告-第二章 成绩分析</title>
9 9
   </head>
10 10
   <body>
11
-    <div class="page_root section2">
11
+    <div class="ChapterTwo"></div>
12
+    <!-- <div class="page_root section2">
12 13
       <h1 class="section_title_1">第二章 单科概况</h1>
13 14
       <div class="abstract_box">
14 15
         <div class="abstract_left">
@@ -86,7 +87,7 @@
86 87
     <div class="page_root section2">
87 88
       <h2 class="section_title_2">5.高频错题分析</h2>
88 89
       <div class="errquestion"></div>
89
-    </div>
90
+    </div> -->
90 91
     <script src="../js/section_2.js"></script>
91 92
   </body>
92 93
 </html>

+ 53
- 37
sections/section_3.html Zobrazit soubor

@@ -1,42 +1,58 @@
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_3.css">
9
-</head>
10
-<body>
11
-  <div class="page_root section_3">
12
-    <h1 class="section_title_1">第三章 违纪行为分析</h1>
13
-    <div class="abstract_box">
14
-      <div class="abstract_left">
15
-        <img src="/img/img3.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_3.css" />
9
+  </head>
10
+  <body>
11
+    <div class="ChapterThree"></div>
12
+    <!-- <div class="page_root section_3">
13
+      <h1 class="section_title_1">第三章 试卷分析</h1>
14
+      <div class="abstract_box">
15
+        <div class="abstract_left">
16
+          <img src="/img/img2.png" />
17
+        </div>
18
+        <div class="abstract_right">
19
+          <div class="abstract_content">
20
+            从学科试卷分析,帮我们从宏观的角度了解班级的水平和差异。系统从多个维度的数据进行学科对比分析,<strong
21
+              >包括大题年级和班级的(平均分、得分率)、小题年级和班级的(平均分、得分率)。</strong
22
+            >
23
+          </div>
24
+        </div>
16 25
       </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="subjectBadEcharts" 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="subjectBadMaxNum"></span></div>
26
+      <h1 class="subjectinfo">试卷分析</h1>
27
+      <h2 class="section_title_2">1. 大题分析</h2>
28
+      <h3 class="section_title_3">1.1 大题分析</h3>
29
+      <div
30
+        id="largeAnalysisEcharts"
31
+        style="margin: 0 4mm 4mm; height: 71mm"
32
+      ></div>
33
+      <h2 class="section_title_3">1.2 大题整体分析</h2>
34
+      <div class="largeAnalysistable"></div>
26 35
     </div>
27
-    <h2 class="section_title_2">2. 班级违纪行为统计</h2>
28
-    <table border="1" class="my_table">
29
-      <thead>
30
-        <tr class="badTableHeadTr1"></tr>
31
-        <tr class="badTableHeadTr2"></tr>
32
-      </thead>
33
-      <tbody class="badTableTbody"></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="classBadMaxNum"></span></div>
36
+    <div class="page_root section_3">
37
+      <h2 class="section_title_2">2. 小题分析</h2>
38
+      <h3 class="section_title_3">2.1 小题分析</h3>
39
+      <div
40
+        id="SmallAnalysisEcharts"
41
+        style="margin: 0 4mm 4mm; height: 71mm"
42
+      ></div>
43
+      <h2 class="section_title_3">2.2 小题整体分析</h2>
44
+      <div class="SmallAnalysistable"></div>
38 45
     </div>
39
-  </div>
40
-  <script src="../js/section_3.js"></script>
41
-</body>
42
-</html>
46
+    <div class="page_root section_3">
47
+      <h2 class="section_title_2">3. 知识点掌握整体概况</h2>
48
+      <h3 class="section_title_3">3.1 知识点得分率分析</h3>
49
+      <div
50
+        id="pointsAnalysisEcharts"
51
+        style="margin: 0 4mm 4mm; height: 71mm"
52
+      ></div>
53
+      <h2 class="section_title_3">3.2 知识点整体分析</h2>
54
+      <div class="pointsAnalysistable"></div>
55
+    </div> -->
56
+    <script src="../js/section_3.js"></script>
57
+  </body>
58
+</html>

Načítá se…
Zrušit
Uložit