117 lines
3.4 KiB
HTML
117 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<!-- import CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<el-row v-loading="loading"
|
|
element-loading-text="拼命加载中"
|
|
element-loading-spinner="el-icon-loading"
|
|
>
|
|
|
|
<el-select v-model="game" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
<el-time-picker
|
|
is-range
|
|
v-model="date"
|
|
range-separator="至"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"
|
|
placeholder="选择时间范围">
|
|
</el-time-picker>
|
|
<el-button icon="el-icon-search" circle @click="seach()"></el-button>
|
|
</el-row>
|
|
<el-row>
|
|
<h1>user</h1>
|
|
<el-row v-html="userTable">
|
|
|
|
</el-row>
|
|
</el-row>
|
|
<el-row>
|
|
<h1>paylist</h1>
|
|
<el-row v-html="paylistTable">
|
|
|
|
</el-row>
|
|
</el-row>
|
|
<el-row>
|
|
<h1>event</h1>
|
|
<el-row v-html="eventTable">
|
|
|
|
</el-row>
|
|
</el-row>
|
|
</div>
|
|
</body>
|
|
<!-- import Vue before Element -->
|
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|
<!-- import JavaScript -->
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<script>
|
|
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
|
|
|
|
data: function () {
|
|
return {
|
|
options: [{
|
|
value: 'fengbaoqibing',
|
|
label: '风暴奇兵'
|
|
}, {
|
|
value: 'geshouccs',
|
|
label: '歌手ccs'
|
|
}, {
|
|
value: 'shenghuajiyuan',
|
|
label: '生化纪元'
|
|
}, {
|
|
value: 'xinyaoling',
|
|
label: '新妖灵'
|
|
}, {
|
|
value: 'zgzhanchui',
|
|
label: '中古战锤'
|
|
}],
|
|
loading: false,
|
|
game: '',
|
|
date: [new Date(), new Date()],
|
|
userTable: '',
|
|
paylistTable: '',
|
|
eventTable: '',
|
|
}
|
|
},
|
|
methods: {
|
|
seach: function () {
|
|
this.loading = true;
|
|
var game = this.game;
|
|
var st = Date.parse(this.date[0]) / 1000;
|
|
var et = Date.parse(this.date[1]) / 1000;
|
|
axios.get('http://10.0.0.107:5000/' + game, {params: {'st': st, 'et': et}})
|
|
.then(response => {
|
|
this.userTable = response.data['user'];
|
|
this.paylistTable = response.data['paylist'];
|
|
this.eventTable = response.data['event'];
|
|
this.loading = false;
|
|
})
|
|
.catch(error => {
|
|
alert('查询异常');
|
|
this.loading = false;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
)
|
|
|
|
</script>
|
|
</html>
|
|
|
|
|