ejs + ajax



<% include header.ejs %>
<div class="container">
    <div id = 'father' style="width: 800px;height:600px;text-align: center">
    </div>
</div>

<script type="text/javascript">
    function getData() {
        $("#father").html('');
        var divId = 'div' + Math.floor(Math.random()*3000);
        $("#father").prepend("<div id='"+divId+"' style='width: 800px;height:600px;text-align: center'></div>");
        $.ajax({
            url : '/online1',
            type : 'post',
            data : {
                name : $('.name').val(),
                password : $('.psw').val()
            },
            success : function (result) {
                // 基于准备好的dom,初始化echarts实例
                var myChart = echarts.init(document.getElementById(divId));
                // 指定图表的配置项和数据
                var title = [];
                for(var i in result.success){
                    title.push(result.success[i].name);
                }
                option = {
                    title : {
                        text: '在线人数统计',
                        subtext: '60/s',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:title
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:result.success,
                            itemStyle: {
                                normal:{
                                    label:{
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine :{show:true}
                                },
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }
        });
    }
    window.onload = getData;
    setInterval("getData()",60*1000);
</script>
<% include footer.ejs %>


var utils = require('../models/utils');
//在index.js中调用这个函数,把这里定义的处理逻辑设置到router里
exports.setRouter = function(router) {
    router.get('/online', function (req, res) { utils.checkPermission(req, res, "menu_online", utils.PERMISSION_TYPE.Readonly, GetOnlineStatus);});
    router.post('/online1', function (req, res) { utils.checkPermission(req, res, "menu_online", utils.PERMISSION_TYPE.Readonly, GetOnlineStatusBy7);});

}

function GetOnlineStatus(req, res, menuKey, localData) {
        res.render('online');
}

function GetOnlineStatusBy7(req, res, menuKey, localData) {
    var regDatas = [];
    utils.query('SELECT * FROM data_onlinecnt order by `timekey` desc limit 2;', function (error, regData) {
        if (error) {
            utils.logError('select data_account list failed', error);
            return ;
        }
        if(regData.length >= 2){
            for(var i in regData){
                if(regData[i].gameappid === 'wx60c5e1f255cb23a0'){
                    regDatas.push({value:regData[i].onlinecntios,name:'WX_IOS'});
                    regDatas.push({value:regData[i].onlinecntandroid,name:'WX_Android'});
                }
                if(regData[i].gameappid === '1105197308'){
                    regDatas.push({value:regData[i].onlinecntios,name:'QQ_IOS'});
                    regDatas.push({value:regData[i].onlinecntandroid,name:'QQ_Android'});
                }
            }
        }
        res.json({
            success : regDatas
        });
    });
}





最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容