index.html 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825
  1. <head>
  2. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  3. integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  4. <script src="https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js"></script>
  5. <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  6. <link rel="preconnect" href="https://fonts.gstatic.com">
  7. <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  8. &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  9. <link rel="stylesheet" href="../css/style.css">
  10. <!-- <link rel="stylesheet" href="/css/style.css"> -->
  11. <script type="text/javascript">
  12. function decimal(x, n) {
  13. x = Math.round(x * 10 ** n) / 10 ** n;
  14. return x.toFixed(n);
  15. }
  16. var fileCount = 0, cur = 0, files = {};
  17. function nextFile() {
  18. cur = (cur - 1 + fileCount) % fileCount;
  19. processFiles();
  20. }
  21. function prevFile() {
  22. cur = (cur + 1) % fileCount;
  23. processFiles();
  24. }
  25. function clearScreen() {
  26. var charts = document.getElementsByClassName("chart");
  27. for (i = 0; i < charts.length; i++)charts[i].style.display = 'none';
  28. var message = document.getElementById("message");
  29. var output = document.getElementById("fileOutput");
  30. var info = document.getElementById("fileInfo");
  31. message.innerHTML = "";
  32. info.innerHTML = "";
  33. output.innerHTML = "";
  34. }
  35. function reset() {
  36. cur = 0;
  37. fileCount = 0;
  38. files = {};
  39. clearScreen();
  40. document.getElementById("lbtn").classList.add("disabled");
  41. document.getElementById("rbtn").classList.add("disabled");
  42. document.getElementById("resetbtn").classList.add("disabled");
  43. }
  44. document.onkeydown = function (event) {
  45. var e = event || window.event || arguments.callee.caller.arguments[0];
  46. if (e) {
  47. if (e.keyCode == 37) {
  48. nextFile();
  49. }
  50. else if (e.keyCode == 39) {
  51. prevFile();
  52. } else if (49 <= e.keyCode && e.keyCode <= 57) {
  53. if (e.keyCode - 48 <= fileCount) {
  54. cur = e.keyCode - 49;
  55. processFiles();
  56. }
  57. }
  58. }
  59. };
  60. function getFiles(event) {
  61. files[fileCount] = event.target.files[0];
  62. cur = fileCount;
  63. fileCount++;
  64. document.getElementById("lbtn").classList.remove("disabled");
  65. document.getElementById("rbtn").classList.remove("disabled");
  66. document.getElementById("resetbtn").classList.remove("disabled");
  67. processFiles();
  68. }
  69. function processFiles() {
  70. var file = files[cur];
  71. var message = document.getElementById("message");
  72. var upBtn = document.getElementById('upbtn');
  73. var upIcon = document.getElementById('upicon');
  74. message.innerHTML = (cur + 1) + "/" + (fileCount) + " - " + file.name + " - " + file.size + " 字节 - " + file.type + " - 正在读取...<br>>";
  75. upBtn.classList.remove('btn-danger');
  76. upBtn.classList.remove('btn-info');
  77. upBtn.classList.add('btn-info');
  78. upIcon.classList.remove('glyphicon-exclamation-sign');
  79. upIcon.classList.remove('glyphicon-open');
  80. upIcon.classList.add('glyphicon-open');
  81. var reader = new FileReader();
  82. var content = "";
  83. reader.onload = function (event) {
  84. try {
  85. var output = document.getElementById("fileOutput");
  86. var info = document.getElementById("fileInfo");
  87. var object = eval("(" + event.target.result + ")");
  88. var classText = "", gradingText = "";
  89. var seIds = [], seNames = [];
  90. seIds = object.data.seIds;
  91. for (var i = 0; i < seIds.length; i++) {
  92. for (var j = 0; j < seIds.length; j++) {
  93. if (object.data.multiExam.singleExams[i].seId == seIds[j]) {
  94. seNames[j] = object.data.multiExam.singleExams[i].seCourseName;
  95. }
  96. }
  97. }
  98. var seNameDic = {};
  99. for (var i = 0; i < seIds.length; i++) {
  100. seNameDic[seIds[i]] = seNames[i];
  101. }
  102. seNameDic["0"] = "总分";
  103. for (var i = 0; i < object.data.singleExamClassYsScores.length; i++) {
  104. seNameDic[object.data.singleExamClassYsScores[i].seId + "Ys"] = seNameDic[object.data.singleExamClassYsScores[i].seId] + " " + object.data.singleExamClassYsScores[i].ysClassId;
  105. }
  106. var seIdDic = {};
  107. for (var i = 0; i < seIds.length; i++) {
  108. for (var j = 0; j < seIds.length; j++) {
  109. if (object.data.multiExamStudentScore.singleExamStudentScores[j].seId == seIds[i]) {
  110. seIdDic[j] = i;
  111. }
  112. }
  113. }
  114. var scoreP = {}, avgP = {}, rate0 = {}, rate25 = {}, rate50 = {}, rate75 = {}, rate100 = {}, rateFull = {};//表1用
  115. for (var i = 0; i < seIds.length; i++) {
  116. scoreP[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = object.data.multiExamStudentScore.singleExamStudentScores[i].essScore;
  117. avgP[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = object.data.singleExamClassScores[i].secsAvgScore;
  118. rate0[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = object.data.singleExamClassScores[i].secsMinScore;
  119. rate25[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = object.data.singleExamClassScores[i].secsQuarterScore;
  120. rate50[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = object.data.singleExamClassScores[i].secsHalfScore;
  121. rate75[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = object.data.singleExamClassScores[i].secs3quatrerScore;
  122. rate100[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = object.data.singleExamClassScores[i].secsMaxScore;
  123. rateFull[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = object.data.multiExam.singleExams[seIdDic[i]].seFullScore;
  124. }
  125. var scoreRate = {};
  126. for (var i = 0; i < seIds.length; i++) {
  127. scoreRate[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = decimal(object.data.multiExamStudentScore.singleExamStudentScores[i].essScore / object.data.multiExam.singleExams[seIdDic[i]].seFullScore, 3);
  128. }
  129. scoreRate["0"] = decimal(object.data.multiExamStudentScore.messScore / object.data.multiExam.meFullScore, 3);
  130. var classOrderP = {}, gradeOrderP = {};
  131. for (var i = 0; i < seIds.length; i++) {
  132. classOrderP[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = object.data.multiExamStudentScore.singleExamStudentScores[i].essClassOrder;
  133. }
  134. for (var i = 0; i < seIds.length; i++) {
  135. gradeOrderP[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = object.data.multiExamStudentScore.singleExamStudentScores[i].essGradeOrder;
  136. }
  137. classOrderP["0"] = object.data.multiExamStudentScore.messClassOrder;
  138. gradeOrderP["0"] = object.data.multiExamStudentScore.messGradeOrder
  139. var ysClassOrderP = {};
  140. for (var i = 0; i < object.data.singleExamClassYsScores.length; i++) {
  141. for (var j = 0; j < seIds.length; j++) {
  142. if (object.data.singleExamClassYsScores[i].seId == object.data.multiExamStudentScore.singleExamStudentScores[j].seId) {
  143. ysClassOrderP[object.data.singleExamClassYsScores[i].seId + "Ys"] = object.data.multiExamStudentScore.singleExamStudentScores[j].essYsClassOrder;
  144. }
  145. }
  146. }
  147. var classOrder = {}, ysClassOrder = {};
  148. for (var i = 0; i < seIds.length; i++) {
  149. classOrder[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = decimal(1 - object.data.multiExamStudentScore.singleExamStudentScores[i].essClassOrder / object.data.singleExamClassScores[i].secsStudentCount, 3);
  150. }
  151. for (var i = 0; i < object.data.singleExamClassYsScores.length; i++) {
  152. for (var j = 0; j < seIds.length; j++) {
  153. if (object.data.singleExamClassYsScores[i].seId == object.data.multiExamStudentScore.singleExamStudentScores[j].seId) {
  154. ysClassOrder[object.data.singleExamClassYsScores[i].seId + "Ys"] = decimal(1 - object.data.multiExamStudentScore.singleExamStudentScores[j].essYsClassOrder / object.data.singleExamClassYsScores[i].secsStudentCount, 3);
  155. }
  156. }
  157. }
  158. classOrder["0"] = decimal(1 - object.data.multiExamStudentScore.messClassOrder / object.data.multiExamClassScores[0].mecsStudentCount, 3); + "<br>"
  159. var gradeOrder = {};
  160. for (var i = 0; i < seIds.length; i++) {
  161. gradeOrder[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] = decimal(1 - object.data.multiExamStudentScore.singleExamStudentScores[i].essGradeOrder / object.data.multiExam.singleExams[seIdDic[i]].seStudentCount, 3);
  162. }
  163. gradeOrder["0"] = decimal(1 - object.data.multiExamStudentScore.messGradeOrder / object.data.multiExamSchoolScore.mecsStudentCount, 3); + "<br>"
  164. for (var i = 0; i < seIds.length; i++) {
  165. // object.data.multiExamStudentScore.singleExamStudentScores[i].seId
  166. // object.data.singleExamClassScores[i].seId
  167. // object.data.multiExam.singleExams[i].seId
  168. // seIds[i]
  169. // 前两个和后两个数据应该是能分别对上号的(1-2 3-4),用 seIdDic 连接
  170. // seIdDic {key(1-2): value(3-4),..}
  171. classText += "<h4>"
  172. + seNameDic[object.data.multiExamStudentScore.singleExamStudentScores[i].seId] + "</h4>"
  173. + "单科分数:" + object.data.multiExamStudentScore.singleExamStudentScores[i].essScore + "<br><br>"
  174. + "单科分数班级排名:" + object.data.multiExamStudentScore.singleExamStudentScores[i].essClassOrder + "<br>"
  175. + "单科班级参考人数:" + object.data.singleExamClassScores[i].secsStudentCount + "<br>"
  176. + "单科班级年级排名:" + object.data.singleExamClassScores[i].secsClassOrder + "<br>"
  177. + "单科班级:"
  178. + '<table class="table table-responsive" style="table-layout: fixed;"><tr><td>平均分</td><td>最高分</td><td>四分位数(75%)</td><td>中位数</td><td>四分位数(25%)</td><td>最低分</td></tr>'
  179. + "<tr><td>" + object.data.singleExamClassScores[i].secsAvgScore + "</td><td>" + object.data.singleExamClassScores[i].secsMaxScore + "</td><td>" + object.data.singleExamClassScores[i].secs3quatrerScore + "</td><td>" + object.data.singleExamClassScores[i].secsHalfScore + "</td><td>" + object.data.singleExamClassScores[i].secsQuarterScore + "</td><td>" + object.data.singleExamClassScores[i].secsMinScore + "</td></tr></table>"
  180. ;
  181. for (var j = 0; j < object.data.singleExamClassYsScores.length; j++) {
  182. if (object.data.singleExamClassYsScores[j].seId == object.data.multiExamStudentScore.singleExamStudentScores[i].seId) {
  183. classText += "<br><br>"
  184. + "单科分层班级名称:" + object.data.singleExamClassYsScores[j].ysClassId + "<br>"
  185. + "单科分数分层班级排名:" + object.data.multiExamStudentScore.singleExamStudentScores[i].essYsClassOrder + "<br>"
  186. + "单科分层班级参考人数:" + object.data.singleExamClassYsScores[j].secsStudentCount + "<br>"
  187. + "单科分层班级年级排名:" + object.data.singleExamClassYsScores[j].secsClassOrder + "<br>"
  188. + "单科分层班级:"
  189. + '<table class="table table-responsive" style="table-layout: fixed;"><tr><td>平均分</td><td>最高分</td><td>四分位数(75%)</td><td>中位数</td><td>四分位数(25%)</td><td>最低分</td></tr>'
  190. + "<tr><td>" + object.data.singleExamClassYsScores[j].secsAvgScore + "</td><td>" + object.data.singleExamClassYsScores[j].secsMaxScore + "</td><td>" + object.data.singleExamClassYsScores[j].secs3quatrerScore + "</td><td>" + object.data.singleExamClassYsScores[j].secsHalfScore + "</td><td>" + object.data.singleExamClassYsScores[j].secsQuarterScore + "</td><td>" + object.data.singleExamClassYsScores[j].secsMinScore + "</td></tr></table>"
  191. ;
  192. }
  193. }
  194. classText += "<br><br>"
  195. + "单科分数年级排名:" + object.data.multiExamStudentScore.singleExamStudentScores[i].essGradeOrder + "<br>"
  196. + "单科年级参考人数:" + object.data.multiExam.singleExams[seIdDic[i]].seStudentCount + "<br>"
  197. + "单科年级:"
  198. + '<table class="table table-responsive" style="table-layout: fixed;"><tr><td>平均分</td><td>最高分</td><td>四分位数(75%)</td><td>中位数</td><td>四分位数(25%)</td><td>最低分</td></tr>'
  199. + "<tr><td>" + object.data.multiExam.singleExams[seIdDic[i]].seAvgScore + "</td><td>" + object.data.multiExam.singleExams[seIdDic[i]].seMaxScore + "</td><td>" + object.data.multiExam.singleExams[seIdDic[i]].se3QuarterScore + "</td><td>" + object.data.multiExam.singleExams[seIdDic[i]].seHalfScore + "</td><td>" + object.data.multiExam.singleExams[seIdDic[i]].seQuarterScore + "</td><td>" + object.data.multiExam.singleExams[seIdDic[i]].seMinScore + "</td></tr></table><br><br>"
  200. ;
  201. }
  202. function sheetOutput(title, dict) {
  203. gradingText += "<h4>" + title + "</h4>"
  204. gradingText += '<table class="table table-responsive" style="table-layout: fixed;"><tr>';
  205. if (dict != ysClassOrder) {
  206. for (var i in dict) {
  207. gradingText += "<td>" + seNameDic[i].substr(0, 2) + "</td>";
  208. }
  209. }
  210. else {
  211. for (var i in dict) {
  212. gradingText += "<td>" + seNameDic[i] + "</td>";
  213. }
  214. }
  215. gradingText += "</tr><tr>"
  216. for (var i in dict) {
  217. gradingText += "<td>" + dict[i] + "</td>";
  218. }
  219. gradingText += "</tr></table><br><br>";
  220. }
  221. } catch (e) {
  222. console.log(e);
  223. message.innerHTML += "读取失败!";
  224. output.innerHTML = "";
  225. var charts = document.getElementsByClassName("chart");
  226. for (i = 0; i < charts.length; i++)charts[i].style.display = 'none';
  227. upBtn.classList.remove('btn-danger');
  228. upBtn.classList.add('btn-danger');
  229. upBtn.classList.remove('btn-info');
  230. upIcon.classList.remove('glyphicon-open');
  231. upIcon.classList.remove('glyphicon-exclamation-sign');
  232. upIcon.classList.add('glyphicon-exclamation-sign');
  233. return;
  234. }
  235. // sheetOutput("各科得分比例一览表", scoreRate);
  236. // sheetOutput("各科班级排名一览表", classOrder);
  237. // sheetOutput("各科分层班级排名一览表", ysClassOrder);
  238. // sheetOutput("各科年级排名一览表", gradeOrder);
  239. message.innerHTML += "读取成功!"
  240. info.innerHTML = "<br>注:实验中学 74 桌出品,因 2025 届高一开始大量使用,为防止原作者被追责,我便搬运下来略作修改并加上了图表功能。<br><br>"
  241. + "行政班级:" + object.data.examStudents[0].classId + "<br>"
  242. + "姓名:" + object.data.multiExamStudentScore.studentName + "<br>"
  243. + "<br><h4>班内一览表</h4>"
  244. + "点击图例可隐藏部分内容;<br>图中\"x%\"代表排名比例为x%同学的成绩。<br><br>";
  245. output.innerHTML = "<br><h4>总分</h4>"
  246. + "全科分数:" + object.data.multiExamStudentScore.messScore + "<br><br>"
  247. + "全科分数班级排名:" + object.data.multiExamStudentScore.messClassOrder + "<br>"
  248. + "全科班级参考人数:" + object.data.multiExamClassScores[0].mecsStudentCount + "<br>"
  249. + "全科班级年级排名:" + object.data.multiExamClassScores[0].mecsClassOrder + "<br>"
  250. + "全科班级:"
  251. + '<table class="table table-responsive" style="table-layout: fixed;"><tr><td>平均分</td><td>最高分</td><td>四分位数(75%)</td><td>中位数</td><td>四分位数(25%)</td><td>最低分</td></tr>'
  252. + "<tr><td>" + object.data.multiExamClassScores[0].mecsAvgScore + "</td><td>" + object.data.multiExamClassScores[0].mecsMaxScore + "</td><td>" + object.data.multiExamClassScores[0].mecs3quatrerScore + "</td><td>" + object.data.multiExamClassScores[0].mecsHalfScore + "</td><td>" + object.data.multiExamClassScores[0].mecsQuarterScore + "</td><td>" + object.data.multiExamClassScores[0].mecsMinScore + "</td></tr></table>"
  253. + "<br><br>全科分数年级排名:" + object.data.multiExamStudentScore.messGradeOrder + "<br>"
  254. + "全科年级参考人数:" + object.data.multiExamSchoolScore.mecsStudentCount + "<br>"
  255. + "全科年级:"
  256. + '<table class="table table-responsive" style="table-layout: fixed;"><tr><td>平均分</td><td>最高分</td><td>四分位数(75%)</td><td>中位数</td><td>四分位数(25%)</td><td>最低分</td></tr>'
  257. + "<tr><td>" + object.data.multiExam.meAvgScore + "</td><td>" + object.data.multiExam.meMaxScore + "</td><td>" + object.data.multiExam.me3QuatrerScore + "</td><td>" + object.data.multiExam.meHalfScore + "</td><td>" + object.data.multiExam.meQuarterScore + "</td><td>" + object.data.multiExam.meMinScore + "</td></tr></table><br><br>"
  258. + classText
  259. + gradingText
  260. + "<h4>排名汇总</h4>";
  261. $("#fileOutput table").css("display", "inline-table");
  262. $("#fileOutput table").css("margin-bottom", "0px");
  263. // 路径配置
  264. var charts = document.getElementsByClassName("chart");
  265. for (i = 0; i < charts.length; i++)charts[i].style.display = '';
  266. sChart1 = echarts.init(document.getElementById("score1"));
  267. sChart2 = echarts.init(document.getElementById("score2"));
  268. oChart1 = echarts.init(document.getElementById("order1"));
  269. oChart2 = echarts.init(document.getElementById("order2"));
  270. oChart3 = echarts.init(document.getElementById("order3"));
  271. oChart4 = echarts.init(document.getElementById("order4"));
  272. seNameDicP = []; scorePP = []; avgPP = []; rate0P = []; rate25P = []; rate50P = []; rate75P = []; rate100P = []; rateFullP = [];
  273. scoreQ = []; avgQ = []; rate0Q = []; rate25Q = []; rate50Q = []; rate75Q = []; rate100Q = [];
  274. seNameDicP2 = []; classOrderPP = []; gradeOrderPP = []; classOrderQ = []; gradeOrderQ = [];
  275. seNameDicP3 = []; ysClassOrderPP = []; ysClassOrderQ = [];
  276. for (var i in scoreP) {
  277. if (seNameDic[i].substr(0, 2) == '总分') continue;
  278. seNameDicP.push(seNameDic[i].substr(0, 2));
  279. scorePP.push(scoreP[i]);
  280. avgPP.push(avgP[i]);
  281. rate0P.push(rate0[i]);
  282. rate25P.push(rate25[i]);
  283. rate50P.push(rate50[i]);
  284. rate75P.push(rate75[i]);
  285. rate100P.push(rate100[i]);
  286. rateFullP.push(rateFull[i]);
  287. scoreQ.push(decimal(scoreP[i] / rateFull[i] * 100, 1));
  288. avgQ.push(decimal(avgP[i] / rateFull[i] * 100, 1));
  289. rate0Q.push(decimal(rate0[i] / rateFull[i] * 100, 1));
  290. rate25Q.push(decimal(rate25[i] / rateFull[i] * 100, 1));
  291. rate50Q.push(decimal(rate50[i] / rateFull[i] * 100, 1));
  292. rate75Q.push(decimal(rate75[i] / rateFull[i] * 100, 1));
  293. rate100Q.push(decimal(rate100[i] / rateFull[i] * 100, 1));
  294. }
  295. for (var i in classOrderP) {
  296. seNameDicP2.push(seNameDic[i].substr(0, 2));
  297. classOrderPP.push(classOrderP[i]);
  298. gradeOrderPP.push(gradeOrderP[i]);
  299. classOrderQ.push(decimal(classOrder[i] * 100, 1));
  300. gradeOrderQ.push(decimal(gradeOrder[i] * 100, 1));
  301. }
  302. for (var i in ysClassOrderP) {
  303. seNameDicP3.push(seNameDic[i]);
  304. ysClassOrderPP.push(ysClassOrderP[i]);
  305. ysClassOrderQ.push(decimal(ysClassOrder[i] * 100, 1));
  306. }
  307. var sOp1 = { //具体细节的描述
  308. textStyle: {
  309. fontFamily: 'Noto Serif SC'
  310. },
  311. title: {
  312. text: '分数',
  313. textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
  314. fontSize: 14,
  315. fontStyle: 'normal',
  316. fontWeight: 'bold',
  317. },
  318. },
  319. tooltip: {
  320. trigger: 'axis'
  321. },
  322. legend: {
  323. data: ['0%', '25%', '50%', '75%', '100%', '满分', '平均分', '我的分数']
  324. },
  325. toolbox: { //可以选择具体数据,柱状图,折线图,还原,保存图片的的切换选择
  326. show: true,
  327. feature: {
  328. dataView: {
  329. show: true,
  330. readOnly: false
  331. },
  332. magicType: {
  333. show: true,
  334. type: ['line', 'bar'] //可选折线图和柱状图
  335. },
  336. restore: {
  337. show: true //恢复默认
  338. },
  339. saveAsImage: {
  340. show: true // 存储为图片的功能
  341. }
  342. }
  343. },
  344. calculable: true,
  345. xAxis: [{
  346. type: 'category',
  347. //name: 'min_sup(%)'
  348. data: seNameDicP,
  349. name: '科目',
  350. position: 'left'
  351. }],
  352. yAxis: [{
  353. type: 'value',
  354. name: '分数',
  355. position: 'left'
  356. }],
  357. series: [{
  358. name: '0%',
  359. type: 'line',
  360. data: rate0P,
  361. color: '#99ab4e'
  362. }, {
  363. name: '25%',
  364. type: 'line',
  365. data: rate25P,
  366. color: '#c7dc68'
  367. }, {
  368. name: '50%',
  369. type: 'line',
  370. data: rate50P,
  371. color: '#c7dc68'
  372. }, {
  373. name: '75%',
  374. type: 'line',
  375. data: rate75P,
  376. color: '#c7dc68'
  377. }, {
  378. name: '100%',
  379. type: 'line',
  380. data: rate100P,
  381. color: '#99ab4e'
  382. }, {
  383. name: '满分',
  384. type: 'line',
  385. data: rateFullP,
  386. color: '#783c1d'
  387. }, {
  388. name: '平均分',
  389. type: 'line',
  390. data: avgPP,
  391. color: '#2792c3'
  392. }, {
  393. name: '我的分数',
  394. type: 'line',
  395. data: scorePP,
  396. color: '#e2041b'
  397. }
  398. ]
  399. };
  400. var sOp2 = { //具体细节的描述
  401. textStyle: {
  402. fontFamily: 'Noto Serif SC'
  403. },
  404. title: {
  405. text: '得分率',
  406. textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
  407. fontSize: 14,
  408. fontStyle: 'normal',
  409. fontWeight: 'bold',
  410. },
  411. },
  412. tooltip: {
  413. trigger: 'axis'
  414. },
  415. legend: {
  416. data: ['0%', '25%', '50%', '75%', '100%', '平均得分率', '我的得分率']
  417. },
  418. toolbox: { //可以选择具体数据,柱状图,折线图,还原,保存图片的的切换选择
  419. show: true,
  420. feature: {
  421. dataView: {
  422. show: true,
  423. readOnly: false
  424. },
  425. magicType: {
  426. show: true,
  427. type: ['line', 'bar'] //可选折线图和柱状图
  428. },
  429. restore: {
  430. show: true //恢复默认
  431. },
  432. saveAsImage: {
  433. show: true // 存储为图片的功能
  434. }
  435. }
  436. },
  437. calculable: true,
  438. xAxis: [{
  439. type: 'category',
  440. //name: 'min_sup(%)'
  441. data: seNameDicP,
  442. name: '科目',
  443. position: 'left'
  444. }],
  445. yAxis: [{
  446. type: 'value',
  447. name: '得分率(%)',
  448. position: 'left'
  449. }],
  450. series: [{
  451. name: '0%',
  452. type: 'line',
  453. data: rate0Q,
  454. color: '#99ab4e'
  455. }, {
  456. name: '25%',
  457. type: 'line',
  458. data: rate25Q,
  459. color: '#c7dc68'
  460. }, {
  461. name: '50%',
  462. type: 'line',
  463. data: rate50Q,
  464. color: '#c7dc68'
  465. }, {
  466. name: '75%',
  467. type: 'line',
  468. data: rate75Q,
  469. color: '#c7dc68'
  470. }, {
  471. name: '100%',
  472. type: 'line',
  473. data: rate100Q,
  474. color: '#99ab4e'
  475. }, {
  476. name: '平均得分率',
  477. type: 'line',
  478. data: avgQ,
  479. color: '#2792c3'
  480. }, {
  481. name: '我的得分率',
  482. type: 'line',
  483. data: scoreQ,
  484. color: '#e2041b'
  485. }
  486. ]
  487. };
  488. var oOp1 = {
  489. textStyle: {
  490. fontFamily: 'Noto Serif SC'
  491. }, title: {
  492. text: '行政排名位次',
  493. textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
  494. fontSize: 14,
  495. fontStyle: 'normal',
  496. fontWeight: 'bold'
  497. },
  498. },
  499. tooltip: {
  500. trigger: 'axis'
  501. },
  502. legend: {
  503. data: ['班级排名', '年级排名']
  504. },
  505. toolbox: {
  506. show: true,
  507. feature: {
  508. dataView: {
  509. show: true,
  510. readOnly: false
  511. },
  512. magicType: {
  513. show: true,
  514. type: ['line', 'bar']
  515. },
  516. restore: {
  517. show: true
  518. },
  519. saveAsImage: {
  520. show: true
  521. }
  522. }
  523. },
  524. calculable: true,
  525. xAxis: [{
  526. type: 'category',
  527. //name: 'min_sup(%)'
  528. data: seNameDicP2,
  529. name: '科目',
  530. position: 'left'
  531. }],
  532. yAxis: [{
  533. type: 'value',
  534. name: '排名',
  535. position: 'left'
  536. }],
  537. series: [{
  538. name: '班级排名',
  539. type: 'bar',
  540. data: classOrderPP,
  541. color: '#343090'
  542. }, {
  543. name: '年级排名',
  544. type: 'bar',
  545. data: gradeOrderPP,
  546. color: '#5f59f7'
  547. }
  548. ]
  549. };
  550. var oOp2 = {
  551. textStyle: {
  552. fontFamily: 'Noto Serif SC'
  553. }, title: {
  554. text: '行政排名比例',
  555. textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
  556. fontSize: 14,
  557. fontStyle: 'normal',
  558. fontWeight: 'bold'
  559. },
  560. },
  561. tooltip: {
  562. trigger: 'axis'
  563. },
  564. legend: {
  565. data: ['班级排名(%)', '年级排名(%)']
  566. },
  567. toolbox: {
  568. show: true,
  569. feature: {
  570. dataView: {
  571. show: true,
  572. readOnly: false
  573. },
  574. magicType: {
  575. show: true,
  576. type: ['line', 'bar']
  577. },
  578. restore: {
  579. show: true
  580. },
  581. saveAsImage: {
  582. show: true
  583. }
  584. }
  585. },
  586. calculable: true,
  587. xAxis: [{
  588. type: 'category',
  589. //name: 'min_sup(%)'
  590. data: seNameDicP2,
  591. name: '科目',
  592. position: 'left'
  593. }],
  594. yAxis: [{
  595. type: 'value',
  596. name: '排名(%)',
  597. position: 'left'
  598. }],
  599. series: [{
  600. name: '班级排名(%)',
  601. type: 'bar',
  602. data: classOrderQ,
  603. color: '#343090'
  604. }, {
  605. name: '年级排名(%)',
  606. type: 'bar',
  607. data: gradeOrderQ,
  608. color: '#5f59f7'
  609. }
  610. ]
  611. };
  612. var oOp3 = {
  613. textStyle: {
  614. fontFamily: 'Noto Serif SC'
  615. }, title: {
  616. text: '分班排名位次',
  617. textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
  618. fontSize: 14,
  619. fontStyle: 'normal',
  620. fontWeight: 'bold'
  621. },
  622. },
  623. tooltip: {
  624. trigger: 'axis'
  625. },
  626. legend: {
  627. data: ['分班排名']
  628. },
  629. toolbox: {
  630. show: true,
  631. feature: {
  632. dataView: {
  633. show: true,
  634. readOnly: false
  635. },
  636. magicType: {
  637. show: true,
  638. type: ['line', 'bar']
  639. },
  640. restore: {
  641. show: true
  642. },
  643. saveAsImage: {
  644. show: true
  645. }
  646. }
  647. },
  648. calculable: true,
  649. xAxis: [{
  650. type: 'category',
  651. //name: 'min_sup(%)'
  652. data: seNameDicP3,
  653. name: '科目',
  654. position: 'left'
  655. }],
  656. yAxis: [{
  657. type: 'value',
  658. name: '排名',
  659. position: 'left'
  660. }],
  661. series: [{
  662. name: '分班排名',
  663. type: 'bar',
  664. data: ysClassOrderPP,
  665. color: '#44c2fd'
  666. }
  667. ]
  668. };
  669. var oOp4 = {
  670. textStyle: {
  671. fontFamily: 'Noto Serif SC'
  672. }, title: {
  673. text: '分班排名比例',
  674. textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
  675. fontSize: 14,
  676. fontStyle: 'normal',
  677. fontWeight: 'bold'
  678. },
  679. },
  680. tooltip: {
  681. trigger: 'axis'
  682. },
  683. legend: {
  684. data: ['分班排名(%)']
  685. },
  686. toolbox: {
  687. show: true,
  688. feature: {
  689. dataView: {
  690. show: true,
  691. readOnly: false
  692. },
  693. magicType: {
  694. show: true,
  695. type: ['line', 'bar']
  696. },
  697. restore: {
  698. show: true
  699. },
  700. saveAsImage: {
  701. show: true
  702. }
  703. }
  704. },
  705. calculable: true,
  706. xAxis: [{
  707. type: 'category',
  708. //name: 'min_sup(%)'
  709. data: seNameDicP3,
  710. name: '科目',
  711. position: 'left'
  712. }],
  713. yAxis: [{
  714. type: 'value',
  715. name: '排名(%)',
  716. position: 'left'
  717. }],
  718. series: [{
  719. name: '分班排名(%)',
  720. type: 'bar',
  721. data: ysClassOrderQ,
  722. color: '#44c2fd'
  723. }
  724. ]
  725. };
  726. // 为echarts对象加载数据
  727. sChart1.setOption(sOp1);
  728. sChart2.setOption(sOp2);
  729. oChart1.setOption(oOp1);
  730. oChart2.setOption(oOp2);
  731. oChart3.setOption(oOp3);
  732. oChart4.setOption(oOp4);
  733. }
  734. reader.readAsText(file);
  735. }
  736. </script>
  737. <title>
  738. 实验中学成绩整理
  739. </title>
  740. </head>
  741. <body>
  742. <a class="btn btn-info" href="/" style="text-shadow: rgb(85, 85, 85) 3px 2px 4px;"><span
  743. class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;返回</a>
  744. <div>
  745. <h1>
  746. 实验中学成绩整理
  747. </h1>
  748. <p style="font-size:16px">基于心意答查分页面提供的数据整理汇总考试成绩</p>
  749. <h2>如何获取数据</h2>
  750. <p>尽量使用 Google Chrome 浏览器,不保证其他浏览器操作相同。</p>
  751. <p>1. 进入心意答查分页面;</p>
  752. <p>2. 按下 F12 打开控制台,若无反应,尝试 Fn+F12;</p>
  753. <p>3. 控制台顶栏分页中找到“<b>网络</b>”或“<b>Network</b>”(可能需要从下拉框里面找);</p>
  754. <p>4. 刷新页面(用 F5 刷新),此时应看到控制台中出现一批文件,点击其中的“<b>getStudentReportMEVO</b>”;</p>
  755. <p>5. 在新出现的小页面的顶栏分页中找到“<b>预览</b>”或“<b>Preview</b>”;</p>
  756. <p>6. 此时应看到“{data: {,...”等数据,一定在数据第一行右键(或在其最后一行下方空白处右键),随后“<b>复制物体</b>”或“<b>Copy Object</b>”;</p>
  757. <p>7. 新建文本文档(格式为 txt,不可用 Word 文档),将所复制的内容粘贴并保存,于下方按钮打开。</p>
  758. <p style="font-size: 12px;font-style: italic;">
  759. 注:图表整理均在本地进行,你的数据不会上传到网络。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你获取的数据在心意答上未经加密并可直接访问,本质上对学生都是公开的,但恶意使用这些数据造成的后果自负。
  760. </p>
  761. <h2>键盘操作指南</h2>
  762. <p>加载多个文件后,使用方向键或数字键可在文件间快速切换,方便比较。</p>
  763. <br>
  764. </div>
  765. <div style="text-align: center;">
  766. <a tabindex="0" class="btn btn-default" href="tutor/"
  767. style="text-shadow: rgb(185, 185, 185) 3px 2px 4px;display:inline-block;">
  768. <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>&nbsp;<b>查看示例截图</b>
  769. </a>
  770. <a id="upbtn" tabindex="0" class="btn btn-info" onclick="document.getElementById('fileInput').click();"
  771. style="text-shadow: rgb(85, 85, 85) 3px 2px 4px;display:inline-block;">
  772. <span id="upicon" class="glyphicon glyphicon-open" aria-hidden="true"></span> <b>打开文件</b><input
  773. style="display: none;" id="fileInput" type="file" onchange="getFiles(event)">
  774. </a>
  775. <a id="resetbtn" tabindex="0" class="btn btn-primary disabled" onclick="reset();"
  776. style="text-shadow: rgb(85, 85, 85) 3px 2px 4px;display:inline-block;">
  777. <span id="upicon" class="glyphicon glyphicon-refresh" aria-hidden="true"></span> <b>重置</b>
  778. </a>
  779. <a id="lbtn" tabindex="0" class="btn btn-default disabled" onclick="prevFile();">
  780. <span id="upicon" class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  781. </a>
  782. <a id="rbtn" tabindex="0" class="btn btn-default disabled" onclick="nextFile();">
  783. <span id="upicon" class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  784. </a>
  785. </div>
  786. <div id="message"></div>
  787. <div id="fileInfo"></div>
  788. <div id="score1" class="chart" style="display: none"></div>
  789. <div id="score2" class="chart" style="display: none"></div>
  790. <div id="fileOutput"></div>
  791. <div id="order1" class="chart" style="display: none"></div>
  792. <div id="order2" class="chart" style="display: none"></div>
  793. <div id="order3" class="chart" style="display: none"></div>
  794. <div id="order4" class="chart" style="display: none"></div>
  795. </body>