400 lines
14 KiB
Vue
400 lines
14 KiB
Vue
<template>
|
||
<section class="content">
|
||
<div class="box box-primary">
|
||
<section class="content-header">
|
||
<h1 id="itemTitle"></h1>
|
||
</section>
|
||
|
||
<section class="content">
|
||
|
||
<div id="toolbar">
|
||
<form action=""
|
||
id="searchForm"
|
||
method="POST">
|
||
<div class="col-sm-12">
|
||
<label for="partitionId"
|
||
class="qry_col control-label">分区：</label>
|
||
<div class="col-sm-2">
|
||
<select id="partitionId"
|
||
class="input-sm"></select>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<label for="timeBegin"
|
||
class="qry_col control-label">日期：</label>
|
||
<input type="text"
|
||
name="timeBegin"
|
||
id="timeBegin"
|
||
class="input-sm"
|
||
placeholder="起始时间">
|
||
- <input type="text"
|
||
name="timeEnd"
|
||
id="timeEnd"
|
||
class="input-sm"
|
||
placeholder="结束时间">
|
||
</div>
|
||
<label for="erbanNo"
|
||
class="qry_col control-label">平台号：</label>
|
||
<div class="col-sm-2">
|
||
<input type="text"
|
||
name="erbanNo"
|
||
id="erbanNo"
|
||
class="input-sm"
|
||
placeholder="">
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12">
|
||
<label for="boxType"
|
||
class="qry_col control-label">许愿池类型:</label>
|
||
<div class="col-sm-2">
|
||
<select name="boxType"
|
||
id="boxType"
|
||
class="col-sm-2 form-control"
|
||
data-btn-class="btn-warning">
|
||
<option value=""
|
||
selected="selected">全部</option>
|
||
<option value="1">幸运许愿池</option>
|
||
<option value="2">梦幻许愿池</option>
|
||
</select>
|
||
</div>
|
||
<label for="poolType"
|
||
class="qry_col control-label">奖池类型:</label>
|
||
<div class="col-sm-2">
|
||
<select name="poolType"
|
||
id="poolType"
|
||
class="col-sm-2 form-control"
|
||
data-btn-class="btn-warning">
|
||
<option value=""
|
||
selected="selected">全部</option>
|
||
<option value="1">幸运新人奖池</option>
|
||
<option value="2">幸运普通奖池</option>
|
||
<option value="3">幸运白名单奖池</option>
|
||
<option value="4">幸运偏差奖池</option>
|
||
<option value="12">幸运次数奖池</option>
|
||
<option value="7">梦幻普通奖池</option>
|
||
<option value="9">梦幻偏差奖池</option>
|
||
<option value="10">梦幻新人奖池</option>
|
||
<option value="11">梦幻白名单奖池</option>
|
||
</select>
|
||
</div>
|
||
<label for="dataType"
|
||
class="qry_col control-label">数据类型:</label>
|
||
<div class="col-sm-2">
|
||
<select name="dataType"
|
||
id="dataType"
|
||
class="col-sm-2 form-control"
|
||
data-btn-class="btn-warning">
|
||
<option value="1"
|
||
selected="selected">普通用户数据</option>
|
||
<option value="2">被排除用户的数据</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<button class="btn btn-primary"
|
||
id="searchBtn">筛选</button>
|
||
<div class="tips">因数据量庞大，默认不会显示每天的结果，默认只展示平台总收益情况，请先选择时间范围再搜索</div>
|
||
<div class="dataCount">
|
||
<p>
|
||
<span>抽奖记录总数：</span>
|
||
<span id="countNum"></span>
|
||
</p>
|
||
<p>
|
||
<span>用户投入钻石总数：</span>
|
||
<span id="userPay"></span>
|
||
</p>
|
||
<p>
|
||
<span>总平台总价值：</span>
|
||
<span id="platformNum"></span>
|
||
</p>
|
||
<p>
|
||
<span>总实际总价值：</span>
|
||
<span id="actualNum"></span>
|
||
</p>
|
||
<p>
|
||
<span>用户获得礼物中钻石数：</span>
|
||
<span id="giftNum"></span>
|
||
</p>
|
||
<p>
|
||
<span>用户获得非礼物总钻石数：</span>
|
||
<span id="notGiftNum"></span>
|
||
</p>
|
||
<p>
|
||
<span>用户获得实物总数：</span>
|
||
<span id="realGiftNum"></span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="table"></div>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||
|
||
export default {
|
||
name: "PrizeDataAdminNewView",
|
||
setup () {
|
||
return {};
|
||
},
|
||
created () {
|
||
this.$nextTick(function () {
|
||
this.initData();
|
||
});
|
||
},
|
||
methods: {
|
||
initData () {
|
||
$(function () {
|
||
$.ajax({
|
||
type: 'get',
|
||
url: '/partition/listPartitionInfo',
|
||
dataType: 'json',
|
||
success: function (json) {
|
||
if (json.code == 200) {
|
||
//var deviatePartitionId = $("#deviatePartitionId");
|
||
//deviatePartitionId.empty();
|
||
|
||
var partitionId = $("#partitionId");
|
||
partitionId.empty();
|
||
|
||
var defaultOption = $('<option></option>').attr('value', '').text("全部");
|
||
partitionId.append(defaultOption);
|
||
|
||
// 遍历数据并添加 option
|
||
$.each(json.data, function (index, item) {
|
||
// 创建新的 option 元素
|
||
var option = $('<option></option>')
|
||
.attr('value', item.id) // 设置 value 属性
|
||
.text(item.desc); // 设置文本内容
|
||
|
||
// 追加到 select 元素
|
||
partitionId.append(option.clone());
|
||
|
||
//deviatePartitionId.append(option.clone());
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
var picker1 = $('#timeBegin').datetimepicker({
|
||
format: 'yyyy-mm-dd',
|
||
todayBtn: true,
|
||
autoclose: true,
|
||
minView: 'month',
|
||
endDate: new Date()
|
||
});
|
||
|
||
var picker2 = $('#timeEnd').datetimepicker({
|
||
format: 'yyyy-mm-dd',
|
||
todayBtn: true,
|
||
autoclose: true,
|
||
minView: 'month',
|
||
endDate: new Date()
|
||
});
|
||
|
||
var $timeBegin = '', $timeEnd = '';
|
||
var main = {
|
||
init: function () {
|
||
this.eventRegister();
|
||
this.valueChange();
|
||
},
|
||
|
||
eventRegister: function () {
|
||
picker1.on('changeDate', function () {
|
||
var date = $('#timeBegin').datetimepicker('getDate');
|
||
picker2.datetimepicker('setStartDate', date);
|
||
});
|
||
picker2.on('changeDate', function () {
|
||
var date = $('#timeEnd').datetimepicker('getDate');
|
||
picker1.datetimepicker('setEndDate', date);
|
||
});
|
||
|
||
$('#searchBtn').on('click', function () {
|
||
var $dataCount = $('.dataCount');
|
||
// var $startDate = $('#timeBegin').val().replace(/\//g,'-');
|
||
var $startDate;
|
||
if ($('#timeBegin').val() == "" || $('#timeBegin').val() == 'undefined') {
|
||
$startDate = '';
|
||
} else {
|
||
/*var arr = $('#timeBegin').val().split('/');
|
||
var length = arr.length;
|
||
var $startDate = arr[length-1] +'-' + arr[0] + '-' + arr[length - 2];*/
|
||
$startDate = $('#timeBegin').val();
|
||
}
|
||
var $endDate;
|
||
if ($('#timeEnd').val() == '' || $('#timeEnd').val() == 'undefined') {
|
||
$endDate = $startDate;
|
||
} else {
|
||
/*var arr2 = $('#timeEnd').val().split('/');
|
||
var length2 = arr2.length;
|
||
var $endDate = arr2[length2-1] + '-' + arr2[0] + '-' + arr2[length2-2];*/
|
||
$endDate = $('#timeEnd').val();
|
||
}
|
||
|
||
if ($startDate == '') {
|
||
$timeBegin = '';
|
||
$timeEnd = '';
|
||
} else {
|
||
$timeBegin = $startDate + ' 00:00:00';
|
||
$timeEnd = $endDate + ' 23:59:59';
|
||
}
|
||
|
||
$.post('/admin/drawlottery/record/totalNew', {
|
||
erbanNo: $('#erbanNo').val(),
|
||
startDate: $timeBegin,
|
||
endDate: $timeEnd,
|
||
boxType: $('#boxType').val(),
|
||
poolType: $('#poolType').val(),
|
||
dataType: $('#dataType').val(),
|
||
partitionId: $("#partitionId").val(),
|
||
}, function (res) {
|
||
console.log(res);
|
||
|
||
if (res.code == 200) {
|
||
var data = res.data;
|
||
$dataCount.find('#countNum').html(data.countNum);
|
||
$dataCount.find('#userPay').html(data.userTotalPay);
|
||
$dataCount.find('#platformNum').html(data.totalPlatformValue);
|
||
$dataCount.find('#actualNum').html(data.totalActualValue);
|
||
$dataCount.find('#giftNum').html(data.totalGiftActualValue);
|
||
$dataCount.find('#notGiftNum').html(data.totalNotGiftActualValue);
|
||
$dataCount.find('#realGiftNum').html(data.totalRealGiftActualValue);
|
||
// TableHelper.doRefresh('#table');
|
||
tableRefresh();
|
||
} else {
|
||
console.log('数据错误,导致加载失败,' + res.code);
|
||
}
|
||
})
|
||
});
|
||
|
||
$('#table').on('click', '#details', function () {
|
||
console.log($(this).data('id'));
|
||
});
|
||
|
||
|
||
},
|
||
|
||
valueChange: function () {
|
||
var $dataCount = $('.dataCount');
|
||
$.post('/admin/drawlottery/record/totalNew', {
|
||
erbanNo: $('#erbanNo').val(),
|
||
startDate: $timeBegin,
|
||
endDate: $timeEnd,
|
||
boxType: $('#boxType').val(),
|
||
poolType: $('#poolType').val(),
|
||
dataType: $('#dataType').val()
|
||
}, function (res) {
|
||
console.log(res);
|
||
|
||
if (res.code == 200) {
|
||
var data = res.data;
|
||
$dataCount.find('#countNum').html(data.countNum);
|
||
$dataCount.find('#userPay').html(data.userTotalPay);
|
||
$dataCount.find('#platformNum').html(data.totalPlatformValue);
|
||
$dataCount.find('#actualNum').html(data.totalActualValue);
|
||
$dataCount.find('#giftNum').html(data.totalGiftActualValue);
|
||
$dataCount.find('#notGiftNum').html(data.totalNotGiftActualValue);
|
||
$dataCount.find('#realGiftNum').html(data.totalRealGiftActualValue);
|
||
TableHelper.doRefresh('#table');
|
||
} else {
|
||
console.log('数据错误,导致加载失败,' + res.code);
|
||
}
|
||
})
|
||
}
|
||
};
|
||
main.init();
|
||
|
||
function tableRefresh () {
|
||
$('#table').bootstrapTable('destroy');
|
||
$('#table').bootstrapTable({
|
||
columns: [
|
||
{
|
||
field: 'createTime', title: '日期', align: 'center', valign: 'middle', width: '20%', formatter: function (val, rows, index) {
|
||
if (val) {
|
||
var date = new Date(val);
|
||
return date.format('yyyy-MM-dd')
|
||
} else {
|
||
return '-';
|
||
}
|
||
}
|
||
},
|
||
{ field: 'countNum', title: '抽奖记录数', align: 'center', valign: 'middle', width: '10%' },
|
||
{ field: 'userTotalPay', title: '用户投入钻石数', align: 'center', valign: 'middle', width: '10%' },
|
||
{ field: 'totalPlatformValue', title: '总平台价值', align: 'center', valign: 'middle', width: '10%' },
|
||
{ field: 'totalActualValue', title: '总实际价值', align: 'center', valign: 'middle', width: '10%' },
|
||
{ field: 'totalGiftActualValue', title: '用户获得礼物钻石数', align: 'center', valign: 'middle', width: '10%' },
|
||
{ field: 'totalNotGiftActualValue', title: '用户获得非礼物钻石数', align: 'center', valign: 'middle', width: '10%' },
|
||
{ field: 'totalRealGiftActualValue', title: '用户获得实物', align: 'center', valign: 'middle', width: '10%' },
|
||
// {field: '', title: '操作', align: 'center', valign: 'middle', width: '10%',formatter: function(val,row,index) {
|
||
// var key = row.createTime;
|
||
// return '<button class="btn btn-primary btn-sm" id="details" data-id="' + key + '">查看详情</button>';
|
||
// }}
|
||
],
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
pageSize: 10,
|
||
pagination: true,
|
||
pageList: [10, 20, 30, 50],
|
||
sidePagination: 'server',
|
||
queryParamsType: 'undefined',
|
||
queryParams: function queryParams (params) {
|
||
var param = {
|
||
pageSize: params.pageSize,
|
||
pageNumber: params.pageNumber,
|
||
startDate: $timeBegin,
|
||
endDate: $timeEnd,
|
||
boxType: $('#boxType').val(),
|
||
poolType: $('#poolType').val(),
|
||
erbanNo: $('#erbanNo').val(),
|
||
dataType: $('#dataType').val(),
|
||
partitionId: $('#partitionId').val(),
|
||
};
|
||
return param;
|
||
},
|
||
uniqueId: 'id',
|
||
toolbar: '#toolbar',
|
||
url: '/admin/drawlottery/record/listNew',
|
||
onLoadSuccess: function () {
|
||
console.log('load success');
|
||
},
|
||
onLOadError: function () {
|
||
console.log('load fail');
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
})
|
||
}
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dataCount {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.dataCount > p {
|
||
padding: 5px;
|
||
border-radius: 5px;
|
||
background: #ccc;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.tips {
|
||
color: red;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.qry_col {
|
||
float: left;
|
||
}
|
||
</style> |