index.html 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <title>实验中学成绩整理</title>
  4. <script type="text/javascript" src="/js/jquery.min.js"></script>
  5. <link rel="stylesheet" href="/css/bootstrap.min.css">
  6. <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  7. <script async src="/js/echarts-5.4.1.min.js"></script>
  8. <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  9. &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  10. <link rel="stylesheet" href="/css/style.css">
  11. <script>
  12. var e
  13. fetch('/js/e.json', {
  14. method: 'GET',
  15. headers: {
  16. 'Content-type': 'application/json',
  17. }
  18. }).then(res => res.json()).then(f => {
  19. e = f;
  20. });
  21. var wid = 0, skip = 0, only = 0, mul = 0
  22. var col = {
  23. '向量': '#337ab7',
  24. '隐': '#b5b5b5'
  25. }
  26. function getCol(str, pam) {
  27. str = str.split(' ')[0]
  28. return col[str] ? col[str] : (pam ? '#6f9f3f' : '#3f3f3f')
  29. }
  30. function is11(str) {
  31. if (str[str.length - 1] == ' ') str = str.split(' ')[0]
  32. if (str == '向量') return true
  33. var queryData = e.data.filter(function (e) {
  34. return e.name == str
  35. });
  36. if (!queryData[0]) return false
  37. var o = queryData[0].o
  38. return o.slice(o.length - 3) == '11班'
  39. }
  40. function unique(arr) {
  41. let hash = [];
  42. for (let i = 0; i < arr.length; i++) {
  43. if (hash.indexOf(arr[i]) === -1) {
  44. hash.push(arr[i]);
  45. }
  46. }
  47. return hash;
  48. }
  49. function myUnique(arr) {
  50. let res = [];
  51. for (let i = 0; i < arr.length; i++) {
  52. if (!arr[i]) continue;
  53. if (only && (!is11(arr[i].source) || !is11(arr[i].target))) continue;
  54. var yee = {
  55. source: arr[i].source, target: arr[i].target,
  56. value: arr.filter(function (e) {
  57. return e.source == arr[i].source && e.target == arr[i].target
  58. }).length
  59. }
  60. if (!mul || yee.value > mul) {
  61. if (wid) yee.value = 1
  62. res.push(yee)
  63. }
  64. for (let j = i + 1; j < arr.length; j++) {
  65. if (!arr[j]) continue;
  66. if (arr[j].source == arr[i].source && arr[j].target == arr[i].target) delete arr[j]
  67. }
  68. }
  69. return res;
  70. }
  71. var cc;
  72. function resizeChart() {
  73. cc.resize()
  74. }
  75. function get() {
  76. if ($('#filter').val()) o = 800
  77. else o = 3000
  78. if (wid) o /= 1.75
  79. if (only) o /= 1.75
  80. if (mul) o /= mul * 0.5 + 1.75
  81. $("#sanky").css('height', o + 'px')
  82. if (!cc) cc = echarts.init($("#sanky")[0]);
  83. fetch('/score.log', {
  84. method: 'GET',
  85. }).then(res => {
  86. return res.text()
  87. }).then(e => {
  88. var f = '[' + e.replace(/\d+\.\d+\.\d+\.\d+, /g,'')
  89. .replace(/^((?!fetched).)*$\n/gm, '')
  90. .replace(/^.*(: \d).*$\n/gm, '')
  91. .replace(/^.*(: :).*$\n/gm, '')
  92. .replace(/undefined/g, '隐')
  93. .replace(/^.*GMT: ([^\w ,]+)[0-9, a-z\(]+([^\w)]+).*/gm, '{"source": "$1","target": "$2 ", "value": 1},')
  94. f = JSON.parse(f.slice(0, f.length - 2) + ']')
  95. console.log(f)
  96. f = myUnique(f)
  97. var p = [], data = []
  98. for (var i = 0; i < f.length; i++) {
  99. if (skip && f[i].source == f[i].target.split(' ')[0]) continue;
  100. if ($('#filter').val() && f[i].source != $('#filter').val()) continue;
  101. if (!only || is11(f[i].source)) p.push(f[i].source)
  102. if (!only || is11(f[i].target)) p.push(f[i].target)
  103. }
  104. p = unique(p)
  105. var ppp = [];
  106. for (let i = 0; i < p.length; i++) {
  107. ppp.push({
  108. name: p[i],
  109. itemStyle: { color: getCol(p[i]) }
  110. })
  111. }
  112. for (var i = 0; i < f.length; i++) {
  113. if (skip && f[i].source == f[i].target.split(' ')[0]) continue;
  114. if ($('#filter').val() && f[i].source != $('#filter').val()) continue;
  115. var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
  116. offset: 0.5,
  117. color: getCol(f[i].source, f[i].source == f[i].target.split(' ')[0])
  118. }, {
  119. offset: 1,
  120. color: getCol(f[i].target, f[i].source == f[i].target.split(' ')[0])
  121. }]
  122. )
  123. data.push(
  124. {
  125. source: f[i].source,
  126. target: f[i].target,
  127. value: f[i].value,
  128. lineStyle: {
  129. color: color
  130. }
  131. }
  132. )
  133. }
  134. var op = {
  135. textStyle: {
  136. fontFamily: 'Noto Serif SC'
  137. },
  138. title: {
  139. text: '人物关系图',
  140. textStyle: {
  141. fontSize: 14,
  142. fontStyle: 'normal',
  143. fontWeight: 'bold',
  144. },
  145. },
  146. tooltip: {
  147. trigger: 'axis'
  148. },
  149. toolbox: {
  150. show: true,
  151. feature: {
  152. saveAsImage: {
  153. show: true
  154. },
  155. },
  156. padding: 25,
  157. orient: 'vertical'
  158. },
  159. series: [
  160. {
  161. type: 'sankey',
  162. data: ppp,
  163. links: data,
  164. focusNodeAdjacency: 'allEdges',
  165. itemStyle: {
  166. borderWidth: 1,
  167. color: '#1b6199',
  168. borderColor: '#fff'
  169. },
  170. lineStyle: {
  171. curveness: 0.5,
  172. opacity: 0.4
  173. }
  174. }
  175. ],
  176. }
  177. cc.setOption(op);
  178. cc.resize();
  179. window.onresize = resizeChart
  180. })
  181. }
  182. </script>
  183. </head>
  184. <body>
  185. <div class="input-group">
  186. <div class="input-group-btn">
  187. <button class="btn btn-success" onclick="get()">get</button>
  188. </div>
  189. <input class="form-control" id="filter" placeholder="筛选">
  190. <span class="input-group-addon">
  191. 提示:保持鼠标不动,可以随意滑动滚轮而不改变焦点
  192. </span>
  193. </div>
  194. <div class="input-group">
  195. <div class="input-group-btn">
  196. <button data-toggle="button" class="btn btn-default" onclick="skip=!skip;get()">忽略自环</button>
  197. <button class="btn btn-default" data-toggle="button" onclick="wid=!wid;get()">固定宽度</button>
  198. </div>
  199. <input class="form-control" oninput="mul=(this.value)?this.value-1:0;get();" placeholder="最少次数">
  200. <div class="input-group-btn">
  201. <button class="btn btn-default" data-toggle="button" onclick="only=!only;get()">只看11班</button>
  202. </div>
  203. </div>
  204. <div id="sanky" class="chart" style="height:3000px"></div>
  205. </body>