tianze-pro/web/src/main/resources/templates/jlw/teacher/statisticalReport.html

<!--#layout("/common/layout.html",{"jsBase":"/js/jlw/teacher/"}){ -->
<script type="text/javascript" src="${ctxPath}/plugins/echarts.min_4.8.0.js?v=${jsVer}"></script>
<!--统计报表页面-->
<style>
    .layui-laypage .layui-laypage-curr .layui-laypage-em,button{
        background-color: #73a2f8 !important;
    }
    /* 分页确定按钮*/
    .layui-laypage-btn{
        color: white!important;
    }
    .xxmc{
        white-space: nowrap;text-overflow:ellipsis;line-height: 37px;font-size: 16px;padding-left: 10px;width: auto;min-width: 200px;max-width: 300px;overflow: hidden;height: 37px;
    }
</style>
<div class="layui-inline" style="margin-bottom:10px;padding-right: 110px;"><h2>总人数统计：</h2></div>
<div class="layui-inline">
    <form id="searchForm" class="layui-form" style="background-color: #fdfdfd;padding: 10px 0;margin-bottom: 15px;">
        <!--#if(isSignRole.get()!''!= 2){ -->
        <div class="layui-inline">
            <label class="layui-form-label">所属院校</label>
            <div class="layui-input-inline">
                <layui:simpleDictSelect style='layui-input-inline'
                                        type="universities_colleges.universities_colleges_name.universities_colleges_status=1"
                                        id="universitiesCollegesId" name="universitiesCollegesId"
                                        layFilter="select_universitiesColleges"/>
            </div>
        </div>
        <!--#} -->
        <div class="layui-inline">
            <label class="layui-form-label">登录时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test5" name="timeZones"
                       placeholder="请输入登录时间">
            </div>
        </div>
</form>
</div>

<div class="layui-btn-group" style="margin-bottom:16px;margin-left: 20px;">
    <layui:accessButton function="teacher.query" id="searchFormSearch" action="search"><i
            class="layui-icon">&#xe615;</i>搜索
    </layui:accessButton>
    <layui:accessButton function="teacher.add" action="export"><span  class="iconfont">&#xe8c7;</span>导出</layui:accessButton>
</div>

<table id="teacherTable" lay-filter="teacherTable"></table>
<div class="layui-row" style="margin-bottom:10px;padding-top: 60px;"><h2>在线人数变化折线图：</h2></div>

<!-- 为 ECharts 准备一个定义了宽高的 DOM，必须定义宽高才可以显示 -->
<div style="width: 100%;height: 300px" id="monitor"></div>
<!--#} -->
<script>
    layui.use([ 'form', 'laydate', 'table' ], function(){
        var form = layui.form;
        var laydate = layui.laydate;
        var table = layui.table;
        var teacherTable = null;

        laydate.render({
            elem: '#test5'
            , type: 'date'
            , range: '~'
            , value: [Common.getNowDate(-365 / 2) +' ~ '+Common.getNowDate(1)]
            , trigger: 'click'
        });
        teacherTable = table.render({
            elem : '#teacherTable',
            height : Lib.getTableHeight(),
            cellMinWidth: 100,
            even:true,
            // skin:'nob',
            method : 'get',
            size:"lg",
            url : Common.ctxPath + '/jlw/student/studentLogAnalysisList.json' // 数据接口
            ,where:getParam()
            //, where: {'loginStartTime': getDate(), 'loginEndTime': Common.getNowDate()}
            ,page : Lib.tablePage // 开启分页
            ,limit : 10,
            cols : [ [ // 表头
                {
                    field : 'time', title : '日期',align: "center"
                },
                {
                    field: 'universitiesCollegesName', title: '登录院校', align: "center",
                    hide: "${isSignRole.get()!''}" != 2 ? false : true
                },
                {
                    field: 'universitiesCollegesProvince', title: '所属省份', align: "center",
                    hide: "${isSignRole.get()!''}" != 2 ? false : true,
                },
                {
                    field : 'loginCount', title : '登录人数',align: "center"
                },
                {
                    field : 'onLineCount', title : '实时在线人数',align: "center"
                }
            ]]
        });

        toolbar = {
            add : function() { // 获取选中数据
                var url = "/jlw/teacher/add.do";
                Common.openDlg(url,"教师管理/添加教师");
            },
            refresh: function () {//刷新
                searchForm.reset();
                Lib.doSearchForm($("#searchForm"), teacherTable, 1);
            },
            search:function () {
                //Lib.doSearchForm($("#searchForm"), teacherTable, 1);
                teacherTable.reload({
                    where: getParam(),
                    page: {
                        curr: 1
                    }
                });
                count();
            },import:function (){
                var url = "/jlw/teacher/importPage.do";
                Common.openDlg(url,"");
            },export: function () {//导出 /jlw/student/studentLogListExport.json
                layer.confirm('是否确定导出统计报表吗？', function (index) {
                    $.downFile(Common.ctxPath + "/jlw/student/studentLogAnalysisListExport.json");
                    layer.close(index);
                });
            }
        };
        $('.ext-toolbar').on('click', function() {
            var type = $(this).data('type');
            toolbar[type] ? toolbar[type].call(this) : '';
        });

        count();
        function count() {
            var onLineCountData = [];//在线人数Data
            var timeData = [];//日期Date
            var url = '/jlw/student/studentLogAnalysisList.json';
            var param = getParam();
            param.page = 1;
            param.limit = 1000;
            var ret = Common.getAjax(url, param);
            var data = ret.data;
            if (ret.code == 0) {
                data.forEach(function(v, k) {
                    onLineCountData.push(v.onLineCount);
                    timeData.push(v.time)
                });
                var chartDom = document.getElementById('monitor');
                var myChart= echarts.init(chartDom);

                var option = {
                    title: {
                        left: 'center',
                        text: '在线人数'
                    },
                    xAxis: {
                        type: 'category',
                        data: timeData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: onLineCountData,
                            type: 'line'
                        }
                    ]
                };
                option && myChart.setOption(option);
            }
        }
    });

    function getParam(checkStatus) {
        var codePlural = "";
        var param = {};
        if (!$.isEmpty(checkStatus)) {
            codePlural = Common.concatBatchId(checkStatus.data, "code");
        }
        if ($.isEmpty(codePlural)) {
            param = $("#searchForm").serializeJson();
            param.loginStartTime = param.timeZones.split(' ~ ')[0];
            param.loginEndTime = param.timeZones.split(' ~ ')[1];
            delete param.timeZones;
        } else {
            param.codePlural = codePlural;
        }
        return param;
    }
</script>