fastadmin添加自定义页面，实现7天，1月，1年，以及指定时间查询显示表格

一、怎么创建自定义界面，前面的文章有说，这里省略

二、在后台（智慧食堂）中实现

1、在controll中重写index方法

 /**
     * 查看
     */
    public function index()
    {
        $startTime = $this->request->param('startTime');
        $endTime = $this->request->param('endTime');


        $userList = ZhstUserModel::select();
        $resultList = [];
        $index = $this->request->param('index');
        $now = time();
        $format='Y-m-d';
        $dateEnd = date($format ,strtotime(+1 .' days', $now));

        if($index==4){
            $this->assign('statusName','时间段查询');
            $this->assign('startTime',$startTime);
            $this->assign('endTime',$endTime);
            $endTime = $endTime .'23:59:59';
            foreach ($userList as $k => $vo) {
                $count = ZhstEvaModel::where('userId',$vo['id'])->where('createtime', 'between time', [$startTime,$endTime])->count();
                if($count>0){
                    $temp['userId'] = $vo['id'];
                    $temp['userName'] = $vo['userName'];
                    $temp['unit'] = $vo['unit'];
                    $temp['count'] = $count;
                    array_push($resultList,$temp);
                }
            }
        }else{
            $this->assign('startTime','');
            $this->assign('endTime','');
            if($index==3) {//近一年
                $this->assign('statusName', '近一年');
                $dateStart = date($format, strtotime(-365 . ' days', $now));
            }else if($index=='' || $index==1){
                    $this->assign('statusName','近七天');
                    $dateStart = date($format ,strtotime(-7 .' days', $now));

                }else if($index==2){
                    $this->assign('statusName','近一月');
                    $dateStart = date($format ,strtotime(-30 .' days', $now));
            }
            foreach ($userList as $k => $vo) {
                $count = ZhstEvaModel::where('userId',$vo['id'])->where('createtime', 'between time', [$dateStart,$dateEnd])->count();
                if($count>0){
                    $temp['userId'] = $vo['id'];
                    $temp['userName'] = $vo['userName'];
                    $temp['unit'] = $vo['unit'];
                    $temp['count'] = $count;
                    array_push($resultList,$temp);
                }
            }
         }


        //按距离重新排序，从近到远
        $temp = array();
        foreach ($resultList as $vo) {
            $temp[] = $vo['count'];
        }
        array_multisort($temp,SORT_DESC,$resultList);

        $this->assign('userList',$resultList);

        return $this->view->fetch();
    }

2、在js文件的index中，引入bootstrap-datetimepicker

index: function () {
            require(['bootstrap-datetimepicker'], function () {
                var options = {
                    format: 'Y-M-D',
                    icons: {
                        time: 'fa fa-clock-o',
                        date: 'fa fa-calendar',
                        up: 'fa fa-chevron-up',
                        down: 'fa fa-chevron-down',
                        previous: 'fa fa-chevron-left',
                        next: 'fa fa-chevron-right',
                        today: 'fa fa-history',
                        clear: 'fa fa-trash',
                        close: 'fa fa-remove'
                    },
                    showTodayButton: true,
                    showClose: true
                };
                $('.datetimepickerY').parent().css('position', 'relative');
                $('.datetimepickerY').datetimepicker(options);
                $('.datetimepickerY1').parent().css('position', 'relative');
                $('.datetimepickerY1').datetimepicker(options);
            });
            $("#startDate").on("dp.update", function(){
                var that = this;
                $("select[name='quarter']").val('');
                $("select[name='month']").val('');
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                options.queryParams = function (params) {
                    params.year = $(that).val(); // 值
                    console.log(params);
                    return params;
                };
                table.bootstrapTable('refresh', {});
                return false;
            });
            $("#endDate").on("dp.update", function(){
                var that = this;
                $("select[name='quarter']").val('');
                $("select[name='month']").val('');
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                options.queryParams = function (params) {
                    params.year = $(that).val(); // 值
                    console.log(params);
                    return params;
                };
                table.bootstrapTable('refresh', {});
                return false;
            });
        },

3、在view中编写index.xml

<style>


    .searchTime{
        width: 130px;
        height: 36px;
        margin-left: 10px;
        margin-right: 10px;
        border:1px solid;
        padding-left: 10px;
    }
    .top{
        width: 100%;
        height:80px;
        display: flex;
        align-items: center;
        margin-left: 40px;
    }
    .statusName{
        margin-left: 100px;
        font-size: 20px;
        color: deepskyblue;
    }
    table.gridtable {
        font-family: verdana,arial,sans-serif;
        /*font-size:12px;*/
        color:#333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
        margin-left: 40px;
        margin-top: 40px;
    }
    table.gridtable th {
        border-width: 1px;
        padding: 18px;
        border-style: solid;
        border-color: #666666;
        background-color: #dedede;
        width: 200px;
        text-align: center;
    }
    table.gridtable td {
        border-width: 1px;
        padding: 18px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
        width: 200px;
        text-align: center;
    }
    .panel{
        width: 100%;
        height: 100%;
        background: #FFFFFF;
        padding-bottom: 40px;
    }
    .searchTime{
        width: 130px;
        height: 36px;
        margin-left: 10px;
        margin-right: 10px;
        border:1px solid;
        padding-left: 10px;
    }
</style>
<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="top">
        <button class="btn btn-success" style="margin-right: 10px"  onclick="searResult2Time(1)">近七天</button>
        <button class="btn btn-success" style="margin-right: 10px" onclick="searResult2Time(2)">近一月</button>
        <button class="btn btn-success" style="margin-right: 10px" onclick="searResult2Time(3)">近一年</button>
        <span class="statusName">{$statusName}统计数据</span>

        <input type="text" class="searchTime datetimepicker datetimepickerY" placeholder="开始日" name="start" id="startDate" value="{$startTime}">
        <input type="text" class="searchTime datetimepicker datetimepickerY1" placeholder="截止日" name="endDate" id="endDate" value="{$endTime}">
        <button class="btn-success"  onclick="searResult2Time(4)">查询</button>

    </div>
    <table class="gridtable">
        <thead>
        <tr>
            <th>排名</th>
            <th>用户ID</th>
            <th>姓名</th>
            <th>单位</th>
            <th>评价次数</th>
        </thead>
        <tbody>

        {volist name="userList" id="vo" key='k'}
        <tr>
            <td>{$k}</td>
            <td >{$vo.userId}</td>
            <td >{$vo.userName}</td>
            <td >{$vo.unit}</td>
            <td >{$vo.count}</td>
        </tr>
        {/volist}
        </tbody>
    </table>


    <script>

        //指定时间段查询记录(近三天，上月、本月、近一年)
        function searResult2Time(index){
            var startTime = $("#startDate").val();
            var endTime = $("#endDate").val();
            var timeStart = Date.parse(startTime);
            var timeEnd = Date.parse(endTime);
            if(index==4){
                if(startTime=='' || endTime==''){
                    alert('请选择正确的查询时间')
                }else if(timeStart>timeEnd){
                    alert('开始时间不能大于结束时间')
                }
            }
            window.location.href='{:url("index")}?index='+ index+ '&startTime=' + startTime + '&endTime='+endTime;

        }
    </script>
</div>

最后，date的input框，有时要点击一下旁边去除焦点，再点击input才弹出日期选择控件，具体是什么原因，暂未知