peko-admin-web/src/views/luckybag/LuckyBagStatsView.vue

<template>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <div id="toolbar">

                    <form id="searchForm" action="/admin/luckyBagRecord/statsExport" method="get" target="_blank">
                        <div class="col-sm-10">
                            福袋：
                            <select name="luckyBagId" id="qLuckyBagId" class="form-control">
                            </select>
                            地区：
                            <select name="partitionId" id="partitionId" class="form-control">
                            </select> 
                            平台号：
                            <input type="text" name="erbanNo" id="qErbanNo" class="input-sm form-control" placeholder="" />
                            日期：
                            <input type="text" name="startDate" id="qStartDate" class="input-sm datetime form-control" placeholder="">
                            - 
                            <input type="text" name="endDate" id="qEndDate" class="input-sm datetime form-control" placeholder="">
                        </div>
                    </form>
                    <div class="col-sm-2">
                        <button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
                        <button id="btnExport" class="btn btn-sm btn-primary">导出</button>
                    </div>
                    <div class="summary col-sm-12">
                        <div class="col-sm-6">
                            <span>抽奖记录总数：</span>
                            <span class="num"></span>
                        </div>
                        <div class="col-sm-6">
                            <span>用户投入钻石总数：</span>
                            <span class="inputValue"></span>
                        </div>
                    </div>
                    <div class="summary col-sm-12">
                        <div class="col-sm-6">
                            <span>平台支出钻石总数：</span>
                            <span class="outputValue"></span>
                        </div>
                        <div class="col-sm-6">
                            <span>偏差比率：</span>
                            <span class="ratio"></span>
                        </div>
                    </div>

                </div>
            </div>

            <!-- .content -->
            <div id="table"></div>

        </div>
    </section>
</template>

<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { getPartitionInfoList } from '@/api/partition/partitionInfo';
import { buildSelectOption } from '@/utils/system-helper';

export default {
    name: "LuckyBagStatsView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initPartition();
            this.initData();
        });
    },
    methods: {
        initData() {
            $(function () {

                getLuckyBagGift();

                $('.datetime').datetimepicker({
                    format: 'yyyy-mm-dd hh:ii:00',
                    autoclose: true
                });
                $('#table').bootstrapTable('destroy');
                $('#table').bootstrapTable({
                    columns: [
                        { field: 'erbanNo', title: '平台号', align: 'center', width: '5%' },
                        { field: 'nick', title: '昵称', align: 'center', width: '5%' },
                        { field: 'partitionDesc', title: '地区', align: 'center', valign: 'middle' },
                        { field: 'num', title: '福袋购买数量', align: 'center', width: '5%' },
                        { field: 'inputValue', title: '用户投入钻石数', align: 'center', width: '5%' },
                        { field: 'outputValue', title: '平台支出钻石数', align: 'center', width: '5%' },
                        {
                            field: 'ratio', title: '偏差比率', align: 'center', width: '5%',
                            formatter: function (val, row, index) {
                                return (val * 100).toFixed(2) + '%'
                            }
                        },

                    ],
                    undefinedText: "0",
                    cache: false,
                    striped: true,
                    showRefresh: false,
                    pageSize: 20,
                    pagination: true,
                    pageList: [20, 50, 100, 200, 300, 500],
                    search: false,
                    sidePagination: "server", //表示服务端请求
                    queryParamsType: "undefined",
                    queryParams: function queryParams(params) {   //设置查询参数
                        var param = {
                            page: params.pageNumber,
                            pageSize: params.pageSize,
                            luckyBagId: $('#qLuckyBagId').val(),
                            erbanNo: $('#qErbanNo').val(),
                            startDate: $('#qStartDate').val(),
                            endDate: $('#qEndDate').val(),
                            partitionId: $('#partitionId').val(),

                        };
                        return param;
                    },
                    ajax: function (request) {                    //使用ajax请求
                        $.ajax({
                            type: "GET",
                            url: '/admin/luckyBagRecord/stats.action',
                            contentType: 'application/json;charset=utf-8',
                            dataType: 'json',
                            data: request.data,
                            success: function (res) {
                                apiResult(res);
                                $('.num').html(res.data.stats.num)
                                $('.inputValue').html(res.data.stats.inputValue)
                                $('.outputValue').html(res.data.stats.outputValue)
                                $('.ratio').html((res.data.stats.ratio * 100).toFixed(2) + '%')
                                request.success({
                                    rows: res.data.rows,
                                    total: res.data.total
                                });
                            },
                            error: function (req) {
                                serverError(req);
                            }
                        })
                    },
                    toolbar: '#toolbar',
                    onLoadSuccess: function () {  //加载成功时执行
                        console.log("load success");
                    },
                    onLoadError: function () {  //加载失败时执行
                        console.log("load fail");
                    }
                });

                // 查询刷新
                $('#btnSearch').on('click', function () {
                    TableHelper.doRefresh('#table');
                });

                // 导出EXCEL
                $('#btnExport').on('click', function () {
                    $("#searchForm").submit();
                });

            });
        },
        initPartition() {
            getPartitionInfoList().then(res => {
                let data = res.data;
                buildSelectOption(
                    "#partitionId",
                    null,
                    data.map((v) => {
                    return {
                        value: v.id,
                        text: v.desc,
                    };
                    })
                );
            });
        },
    },
    
};

function formatTime(val) {
    if (val) {
        var date = new Date(val);
        return date.format('yyyy-MM-dd hh:mm:ss');
    } else {
        return '';
    }
}

function serverError(req) {
    $("#tipMsg").text(req.responseJSON.message);
    $("#tipModal").modal('show');
}

function apiResult(json) {
    if (json.code == 200 && json.message == 'success') {
        return true;
    }
    $("#tipMsg").text("请求失败，错误信息：" + json.message);
    $("#tipModal").modal('show');
    return false;
}

// 获取所有福袋礼物
function getLuckyBagGift() {
    $.ajax({
        type: "get",
        url: "/admin/gift/listLuckyBagGift.action",
        dataType: "json",
        async: false,
        success: function (res) {
            console.log(res);
            if (res) {
                var data = res.data;
                var options = [];
                for (var i = 0, len = data.length; i < len; i++) {
                    var item = data[i];
                    //拼接成多个<option><option/>
                    options.push('<option value="' + item.giftId + '">' + item.giftName + '</option>')
                }
                $("#qLuckyBagId").html(options.join(' '));    //填充到select标签中
            }
        },
        error: function () {
            alert('查询福袋出错');
        }
    });
}
</script>

<style scoped>
.summary {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
}

.summary div {
    margin-right: 20px;
    display: flex;
    justify-content: flex-between;
    align-items: center;
    height: 100%;
}
</style>