index.vue
4.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<template>
<div class="app-container">
<div class="filter-container">
<el-select v-model="gameGateId" placeholder="游戏名称">
<el-option v-for="(item,index) in gameOptions" :key="index" :value="item.gameId" :label="item.gameName"></el-option>
</el-select>
<el-select v-model="gameChannelId" placeholder="渠道名称">
<el-option v-for="(item,index) in gameChannelOptions" :key="index" :value="item.channelId" :label="item.channelName"></el-option>
</el-select>
<el-date-picker v-model="rangeTime" type="datetimerange" align="right" :unlink-panels="true"
start-placeholder="开始时间" end-placeholder="结束时间" :editable="false" :picker-options="timeOption"
:default-time="['00:00:00','23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
<el-button type="primary" @click="clickBaseQuery">查询</el-button>
</div>
<el-table
v-loading="listLoading"
:data="list"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column label="时间" min-width="80px" align="center">
<template slot-scope="{row}">
<span">{{ row.timestamp | paserTime('{y}-{m}-{d}') }}</span">
</template>
</el-table-column>
<el-table-column label="游戏名称" min-width="150px">
<template slot-scope="{row}">
<span>{{ row.gameName }}</span>
</template>
</el-table-column>
<el-table-column label="渠道ID" min-width="150px">
<template slot-scope="{row}">
<span">{{ row.gameId }}</span">
</template>
</el-table-column>
<el-table-column label="新增用户" min-width="150px">
<template slot-scope="{row}">
<span">{{ row.gameId }}</span">
</template>
</el-table-column>
<el-table-column label="活跃用户" min-width="150px">
<template slot-scope="{row}">
<span">{{ row.gameId }}</span">
</template>
</el-table-column>
<el-table-column label="付费用户" min-width="150px">
<template slot-scope="{row}">
<span">{{ row.gameId }}</span">
</template>
</el-table-column>
<el-table-column label="付费金额" min-width="150px">
<template slot-scope="{row}">
<span">{{ row.gameId }}</span">
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
name:'gameDatas',
components: { Pagination },
data() {
return {
gameGateId:'',
gameOptions:[{gameId:'1',gameName:'柯南'},
{gameId:'2',gameName:'火影'},
{gameId:'3',gameName:'红警'}],
gameChannelId:'',
gameChannelOptions:[{channelId:'001', channelName:'推广员1'},
{channelId:'002', channelName:'推广员2'},
{channelId:'003', channelName:'推广员3'}],
rangeTime:[],
timeOption: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
let end = new Date();
let start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近一月',
onClick(picker) {
let end = new Date();
let start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}
]
},
list:null,
total:0,
listLoading: false,
}
},
created(){
this.getGameNewUserIncreate();
},
methods: {
clickBaseQuery(){
},
getGameNewUserIncreate(){
},
},
components: {
}
}
</script>
<style lang="scss" scoped>
.filter-container {
padding-bottom: 10px;
.filter-item {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
}
}
</style>