You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.8 KiB
HTML
79 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
|
|
<title>Statistics</title>
|
|
<link href="//cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container" id="app">
|
|
<span>数据采集时间：{{new Date(result.version).toString()}}</span>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th @click="sortBy('uid')">ID</th>
|
|
<th @click="sortBy('name')">姓名</th>
|
|
<th @click="sortBy('total')">总计</th>
|
|
<th @click="sortBy(oj)" v-for="oj in ojs">{{oj}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="user in result.users">
|
|
<td>{{user.uid}}</td>
|
|
<td>{{user.name}}</td>
|
|
<td>{{user.total}}</td>
|
|
<td v-for="oj in ojs">{{getLength(user.result[oj])}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<script src="//cdn.jsdelivr.net/npm/vue"></script>
|
|
<!--suppress ES6ModulesDependencies, JSUnusedGlobalSymbols -->
|
|
<script>
|
|
const getLength = arr => arr ? arr.length : 0;
|
|
let app = null;
|
|
fetch("result.json").then(res => res.json()).then(data => {
|
|
let ojList = ["poj", 'hdu', 'codeforces'];
|
|
data['users'].forEach(user => {
|
|
user['total'] = ojList.map(oj => getLength(user['result'][oj])).reduce((x, y) => x + y, 0)
|
|
});
|
|
app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
result: data,
|
|
ojs: ojList,
|
|
sortOrders: {}
|
|
},
|
|
methods: {
|
|
cmp: (x, y) => {
|
|
if (x < y) return -1;
|
|
if (x > y) return 1;
|
|
return 0;
|
|
},
|
|
sortBy: function (key) {
|
|
let order = -(this.sortOrders[key] || 1);
|
|
this.sortOrders[key] = order;
|
|
switch (key) {
|
|
case 'uid':
|
|
case 'name':
|
|
case 'total':
|
|
this.result['users'].sort((x, y) => order * this.cmp(x[key], y[key]));
|
|
break;
|
|
default:
|
|
this.result['users'].sort((x, y) => order * this.cmp(getLength(x['result'][key]), getLength(y['result'][key])));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
app.sortBy("total");
|
|
});
|
|
</script>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |