cxgj/modules/admin/views/bind-log/index.php

<?php
use app\models\Coach;
/**
 * @author Any
 * @description KISS
 * @date 2021年6月30日
 * @version 1.0.0
 *
 * _____LOG_____
 *
 */
$this->title = '数据中心';
$this->params['breadcrumbs'][] = $this->title;
$status = \Yii::$app->request->get('status');
?>
<style type="text/css">
    .layui-table-cell {
        height: auto;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <?= $this->title ?>
        </div>
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline layui-float-right layui-form">

                    <div class="layui-inline layui-form-item">
                        <div class="layui-input-inline"  style="width: 300px">
                            <input type="text" class="layui-input" id="test10" placeholder=" 选择日期 " readonly>
                        </div>
                    </div>

                    <?php if(!\Yii::$app->admin->identity->user->store):?>
                        <div class="layui-inline layui-form-item">
                            <div class="layui-input-inline">
                                <select id="store_id">
                                    <option value="0">全部门店</option>
                                    <?php foreach ($store as $index => $item):?>
                                        <option value="<?= $item['id'] ?>" <?= Yii::$app->request->get("store_id") == $item['id'] ? "selected" : "" ?> ><?= $item['name'] ?></option>
                                    <?php endforeach;?>
                                </select>
                            </div>
                        </div>
                    <?php endif;?>
                    <div class="layui-inline layui-form-item">
                        <div class="layui-input-inline">
                            <select class="layui-select" id="type">
                                <option value="1">按时展示</option>
                                <option value="2">按日展示</option>
                                <option value="3">按月展示</option>
                            </select>
                        </div>
                    </div>
                    <!--<div class="layui-inline layui-form-item">
                        <label class="layui-form-label">关键词</label>
                        <div class="layui-input-block">
                            <input type="text" name="keywords" placeholder="搜索标题" autocomplete="off" class="layui-input" value="<?/*=\Yii::$app->request->get("keywords")*/?>">
                        </div>
                    </div>-->
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-useradmin" id="btn_search" lay-filter="dtable-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card-body">

            <div class="layui-bg-gray" style="padding:10px;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">租赁次数<span id="zl_num_title">加载中...<span class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop' style='font-size: 20px'></span></span></div>
                            <div class="layui-card-body">
                                <div id="zl_num" style="width: 100%;height: 500px;text-align: center">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">场地扫码次数<span id="cd_qr_num_title">加载中...<span class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop' style='font-size: 20px'></span></span></div>
                            <div class="layui-card-body">
                                <div id="cd_qr_num" style="width: 100%;height: 500px;text-align: center">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">球车扫码次数<span id="qr_num_title">加载中...<span class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop' style='font-size: 20px'></span></span></div>
                            <div class="layui-card-body">
                                <div id="qr_num" style="width: 100%;height: 500px;text-align: center">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="/statics/js/echarts.min.js"></script>
<script src="/statics/js/echarts.min.walden.js"></script>
<script>
    <?php $this->beginBlock('js_script_wrap') ?>


    layui.config({
        base: '/statics/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'user', 'laydate','form'], function () {
        var $ = layui.$
            , form = layui.form
            , laydate = layui.laydate
            , admin = layui.admin;
        //日期时间范围
        laydate.render({
            elem: '#test10'
            ,type: 'datetime'
            ,range: true
        });
        form.render();
        //search
        form.on('submit(dtable-search)', function (obj) {
            var field = obj.field;
            getZlData();
            getQrData()
        })
    });
    var is_lock = true

    $('#btn_search').click(function(){
        if(is_lock){
            return layer.msg('点击过快')
        }
        is_lock = true
        $('#zl_num_title').html("加载中...<span class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop' style='font-size: 20px'></span>");
        $('#qr_num_title').html("加载中...<span class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop' style='font-size: 20px'></span>");
        $('#cd_qr_num_title').html("加载中...<span class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop' style='font-size: 20px'></span>");
        setTimeout(function(){
            getZlData();
        },1000)
        setTimeout(function(){
            getCdQrData();
        },2000)
        setTimeout(function(){
            getQrData();
            is_lock = false
        },3000)
    })
    setTimeout(function(){
        getZlData();
    },1000)
    setTimeout(function(){
        getCdQrData();
    },2000)
    setTimeout(function(){
        getQrData();
        is_lock = false
    },3000)
    // 租赁数据
    function getZlData(){
        $('#zl_num_title').html("加载中...<span class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop' style='font-size: 20px'></span>");
        $.ajax({
            url:"<?=\Yii::$app->urlManager->createUrl(['admin/bind-log/get-zl-data'])?>",
            type:'get',
            data:{
                date:$('#test10').val(),
                store_id:$('#store_id').val(),
                type:$('#type').val(),
            },
            success:function(res){
                if(res.code != 0){
                    $('#zl_num_title').html("<div class='layui-icon layui-icon-close' style='font-size: 20px'></div>"+res.msg);
                    return false
                }
                $('#zl_num_title').html('');
                var chartDom = document.getElementById('zl_num');
                var myChart = echarts.init(chartDom,'walden');
                var option;
                var xAxis = res.data.x;
                option = {
                    title: {
                        text: '',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['租赁次数','']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            // prettier-ignore
                            data: xAxis
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '租赁次数',
                            type: 'bar',
                            data: res.data.data,
                            markPoint: {
                                data: [
                                    { type: 'max', name: 'Max' },
                                    { type: 'min', name: 'Min' }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            }
                        },
                    ]
                };

                option && myChart.setOption(option);
            },error:function(a,b,c){
                $('#zl_num_title').html("<div class='layui-icon layui-icon-close' style='font-size: 20px'></div>数据访问错误");
            }
        })

    }

    // 租赁数据
    function getCdQrData(){
        $('#cd_qr_num_title').html("加载中...<span class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop' style='font-size: 20px'></span>");
        $.ajax({
            url:"<?=\Yii::$app->urlManager->createUrl(['admin/bind-log/get-cd-qr-data'])?>",
            type:'get',
            data:{
                date:$('#test10').val(),
                store_id:$('#store_id').val(),
                type:$('#type').val(),
            },
            success:function(res){
                if(res.code != 0){
                    $('#cd_qr_num_title').html("<div class='layui-icon layui-icon-close' style='font-size: 20px'></div>"+res.msg);
                    return false
                }
                $('#cd_qr_num_title').html('');
                var chartDom = document.getElementById('cd_qr_num');
                var myChart = echarts.init(chartDom,'walden');
                var option;
                var xAxis = res.data.x;
                var series_obj = []
                var legend = []
                $.each(res.data.data,function(key,val){
                    legend.push(val.name)
                    series_obj.push({
                        name: val.name,
                        type: 'bar',
                        data: val.data,
                    })
                })
                option = {
                    title: {
                        text: '',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: legend
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            // prettier-ignore
                            data: xAxis
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: series_obj
                };

                option && myChart.setOption(option);
            },error:function(a,b,c){
                $('#cd_qr_num_title').html("<div class='layui-icon layui-icon-close' style='font-size: 20px'></div>数据访问错误");
            }
        })

    }

    // 扫码
    function getQrData(){
        $('#qr_num_title').html("加载中...<span class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop' style='font-size: 20px'></span>");
        $.ajax({
            url:"<?=\Yii::$app->urlManager->createUrl(['admin/bind-log/get-qr-data'])?>",
            type:'get',
            data:{
                date:$('#test10').val(),
                store_id:$('#store_id').val(),
                type:$('#type').val(),
            },
            success:function(res){
                if(res.code != 0){
                    $('#qr_num_title').html("<div class='layui-icon layui-icon-close' style='font-size: 20px'></div>"+res.msg);
                    return false
                }
                $('#qr_num_title').html('');
                var chartDom = document.getElementById('qr_num');
                var myChart = echarts.init(chartDom,'walden');
                var option;
                var xAxis = res.data.x;
                var series_obj = []
                var legend = []
                $.each(res.data.data,function(key,val){
                    legend.push(val.name)
                    series_obj.push({
                        name: val.name,
                        type: 'bar',
                        data: val.data,
                    })
                })
                option = {
                    title: {
                        text: '',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: legend
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            // prettier-ignore
                            data: xAxis
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: series_obj
                };

                option && myChart.setOption(option);
            },error:function(a,b,c){
                $('#qr_num_title').html("<div class='layui-icon layui-icon-close' style='font-size: 20px'></div>数据访问错误");
            }
        })

    }




    <?php $this->endBlock(); ?>
</script>
<?php $this->registerJs($this->blocks['js_script_wrap'], \yii\web\View::POS_END); ?>