aqm
/
Customer-Service


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台首页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">今天</span>
                    <h5>正在咨询的人数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{$data['is_talking']}</h1>
                    <div class="stat-percent font-bold text-navy"></div>
                    <small></small>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">今天</span>
                    <h5>正在排队的用户</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{$data['in_queue']}</h1>
                    <div class="stat-percent font-bold text-danger"></div>
                    <small></small>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">今天</span>
                    <h5>当前在线客服数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{$data['online_kf']}</h1>
                    <div class="stat-percent font-bold text-danger"></div>
                    <small></small>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">今天</span>
                    <h5>接入会话量</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{$data['success_in']}</h1>
                    <div class="stat-percent font-bold text-danger"></div>
                    <small></small>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">今天</span>
                    <h5>总会话量</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{$data['total_in']}</h1>
                    <div class="stat-percent font-bold text-danger"></div>
                    <small></small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-8">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>今日数据分析</h5>
                </div>
                <div class="ibox-content no-padding">
                    <div class="ibox-content" style="height: 350px" id="main">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>系统说明</h5>
                </div>
                <div class="ibox-content">
                    <p>whisper客服系统：
                       为了让更多的站长拥有自己可以控制的客服系统而开发的。
                    </p>
                    <div class="alert alert-info">
                        您可以通过<a href="baiyf.com" target="_blank"> 这里 </a> 查看详细的文档，以及更新说明。
                    </div>
                    <p>
                        whisper采取一次授权终身免费升级的策略。
                    </p>
                    <div class="alert alert-info">
                        作者私人 QQ：876337011。 邮箱：  876337011@qq.com
                    </div>
                    <div class="alert alert-danger">
                        一切未授权就使用的用户，本人保留追究责任的权利！
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/static/admin/js/plugins/echarts/echarts.min.js"></script>
<script src="/static/customer/js/md5.js"></script>
<script type="text/javascript">
    var data = {$show_data};
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['正在咨询的会员','排队的会员','接入会话量','总会话量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00',
                '18:00','19:00','20:00','21:00','22:00']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'正在咨询的会员',
                type:'line',
                stack: '总量',
                data: data.is_talking
            },
            {
                name:'排队的会员',
                type:'line',
                stack: '总量',
                data: data.in_queue
            },
            {
                name:'接入会话量',
                type:'line',
                stack: '总量',
                data: data.success_in
            },
            {
                name:'总会话量',
                type:'line',
                stack: '总量',
                data: data.total_in
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<!--webSocket-->
<script>
    let config = {
        socket: '{$socket}',
        token: '{$token}',
    };
    let date = new Date(new Date().setHours(0, 0, 0, 0)) / 1000;
    let getLocation = window.location.href;
    let host = getLocation.split('/admin')[0];
    let apiToken = hex_md5('customer-service'+date+host);
    let socket = new WebSocket('ws://' + config.socket+'?apiToken=' + apiToken);
    socket.onopen = function(res) {
        console.log('握手成功');
        // 登录
        let login_data = JSON.stringify({
            type: 'adminInit',
            token:  config.token
        });
        socket.send(login_data);
    };
    socket.onmessage = function(res) {
        var data = eval("("+res.data+")");
        switch(data['message_type']){
            // 服务端ping客户端
            case 'helloMessage':
                console.log(data);
                break;
        }
    };
</script>
</body>
</html>