aqm
/
Customer-Service


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
							<!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">
    <link href="__JS__/layui/css/myLayui.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">

    </div>

    <div class="row">
        <div style="display: flex; justify-content: end;">
        <!--搜索框开始-->
            <form id='commentForm' role="form" method="post" class="form-inline pull-right" style="margin-right: 30px;">
                <div class="content clearfix m-b">
                    <div class="form-group">
                        <label>时间区间：</label>
                        <div class="layui-input-inline">
                            <input style="width: 180px;height: 30px;" type="text" class="layui-input" name="daterang" id="daterang" value={$defaultTime} placeholder="时间段"
                                   readonly="">
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-sm" type="button" id="search">搜索
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div>
            <div class="col-sm-2">
                <div class="ibox float-e-margins">
                    <div class="ibox-title" style="display: flex; justify-content: center;">
                        <!--<span class="label label-primary pull-right">今天</span>-->
                        <h3>总会话量</h3>
                    </div>
                    <div class="ibox-content" style="text-align: center">
                        <h1 class="no-margins"><span>{$allChat}</span></h1>
                        <small></small>
                    </div>
                    <div class="ibox-content" style="font-size: 12px; padding: 5px 20px 5px; height: 45px; line-height: 3;">
                        <div style="justify-content: center; display: flex">
                            <div style="text-align: right;">转接量</div>
                            <div style="margin-left: 20px; text-align: right;">{$transfer}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox float-e-margins">
                    <div class="ibox-title" style="display: flex; justify-content: center;">
                        <!--<span class="label label-primary pull-right">今天</span>-->
                        <h3>总消息量</h3>
                    </div>
                    <div class="ibox-content" style="text-align: center">
                        <h1 class="no-margins"><span>{$allService}</span></h1>
                        <small></small>
                    </div>
                    <div class="ibox-content" style="font-size: 12px; padding: 5px 20px 5px; height: 45px; line-height: 3;">
                        <div style="justify-content: center; display: flex">
                            <div style="text-align: right;">答问比</div>
                            <div style="margin-left: 20px; text-align: right;">{$reply}%</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox float-e-margins">
                    <div class="ibox-title" style="display: flex; justify-content: center;">
                        <!--<span class="label label-primary pull-right">今天</span>-->
                        <h3>排队量</h3>
                    </div>
                    <div class="ibox-content" style="text-align: center">
                        <h1 class="no-margins"><span>{$allQueue}</span></h1>
                        <small></small>
                    </div>
                    <div class="ibox-content" style="font-size: 12px; padding: 5px 20px 5px; height: 45px; line-height: 3;">
                        <div style="justify-content: center; display: flex">
                            <div style="text-align: right;">平均排队时长</div>
                            <div style="margin-left: 20px; text-align: right;">{$waitTime}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox float-e-margins">
                    <div class="ibox-title" style="display: flex; justify-content: center;">
                        <!--<span class="label label-primary pull-right">今天</span>-->
                        <h3>平均会话时长</h3>
                    </div>
                    <div class="ibox-content" style="text-align: center">
                        <h1 class="no-margins"><span>{$serviceTime}</span><span style="font-size: 14px; margin-left: 10px">秒</span></h1>
                        <small></small>
                    </div>
                    <div class="ibox-content" style="font-size: 12px; padding: 5px 20px 5px; height: 45px; line-height: 3;">
                        <div style="justify-content: center; display: flex">
                            <div style="text-align: right;">平均响应时长</div>
                            <div style="margin-left: 20px; text-align: right;">{$cpdTime}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox float-e-margins">
                    <div class="ibox-title" style="display: flex; justify-content: center;">
                        <!--<span class="label label-primary pull-right">今天</span>-->
                        <h3>相对满意度</h3>
                    </div>
                    <div class="ibox-content" style="text-align: center">
                        <h1 class="no-margins"><span>{$evaluateGood}<span style="font-size: 14px; margin-left: 10px">%</span></span></h1>
                        <small></small>
                    </div>
                    <div class="ibox-content" style="font-size: 12px; padding: 5px 20px 5px; height: 45px; line-height: 3;">
                        <div style="justify-content: center; display: flex">
                            <div style="text-align: right;">参评率</div>
                            <div style="margin-left: 20px; text-align: right;">{$evaluateGet}%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>会话总览</h5>
                </div>
                <div class="ibox-content">
                    <!--搜索框开始-->
                    <!--<form id='commentForm' role="form" method="post" class="form-inline pull-right">
                        <div class="content clearfix m-b">
                            <div class="form-group">
                                <label>时间区间：</label>
                                <div class="layui-input-inline">
                                    <input style="width: 180px;" type="text" class="layui-input" name="daterang" id="daterang" value={$defaultTime} placeholder="时间段"
                                           readonly="">
                                </div>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary" type="button" style="margin-top:5px" id="search"><strong>搜 索</strong>
                                </button>
                            </div>
                        </div>
                    </form>-->
                    <div style="height: 350px" id="bar">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="wrapper wrapper-content">
    <div class="row">

    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div style="display: flex;">
                    <div style="width: 50%;">
                        <div class="ibox-title">
                            <h5>满意度</h5>
                        </div>
                        <div class="ibox-content" style="height: 350px" id="pie_evaluate">

                        </div>
                    </div>
                    <div style="width: 50%; border-left: 1px solid #e7eaec;">
                        <div class="ibox-title">
                            <h5>访问来源</h5>
                        </div>
                        <div id="system_data" style="text-align: center; width: 100%; font-size: 16px; background: #fff; height: 350px;">
                            <div class="ibox-content" style="height: 350px" id="pie_system">

                            </div>
                        </div>
                    </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="__JS__/layui/layui.all.js"></script>
<script type="text/javascript">
    var xData = {$xData};
    var chatData = {$chatData};
    var serviceData = {$serviceData};
    var queueData = {$queueData};
    var evaluate = {$evaluate};
    var systemCount = {$systemCount}.length  ? {$systemCount} : '';
    var xWidth = (168/xData.length);
    // 基于准备好的dom，初始化echarts实例
    var myChart_bar = echarts.init(document.getElementById('bar'));
    var pie_evaluate = echarts.init(document.getElementById('pie_evaluate'));
    var pie_system = echarts.init(document.getElementById('pie_system'));

    // 指定图表的配置项和数据
    var option_bar = {
        color: ['#1da1f2', '#fa7070', '#fcbb07', '#90dd75', '#8fa6ec', '#157efb'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            itemWidth: 20, //图例的宽度
            itemHeight: 8, //图例的高度
            itemGap: 40,
            left: '55',
            top: 'top',
            icon: 'rect',
            //selectedMode: false, //取消图例上的点击事件
            data: ['会话量', '消息量','排队量'],
        },
        grid: {
            left: '30',
            right: '30',
            bottom: '20',
            containLabel: true
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
        },
        calculable: true,
        xAxis: [{
            splitLine: {
                show: false
            }, //去除网格线
            splitArea: {
                show: false
            }, //保留网格区域
            axisLine: {
                show: true,
                lineStyle: { //轴上的线样式
                    color: '#979797',
                    width: 0.6, //这里是为了突出显示加上的
                },
            },
            axisTick: {
                show: false
            },
            axisLabel: { //轴上的数据样式
                color: '#393C40',
            },
            data: xData,
        }],
        yAxis: [{
            // type: 'value',
            splitLine: {
                show: false
            }, //去除网格线
            splitArea: {
                show: false
            }, //保留网格区域
            axisLine: {
                show: true,
                lineStyle: { //轴上的线样式
                    color: '#979797',
                    width: 0.6, //这里是为了突出显示加上的
                },
            },
            axisTick: {
                show: false
            },
            axisLabel: { //轴上的数据样式
                color: '#393C40',
            }
        }],
        series: [
            {
                name: '会话量',
                type: 'bar',
                barWidth: xWidth,// 柱形的宽度
                barGap: 0,
                data: serviceData
            },
            {
                name: '消息量',
                type: 'bar',
                barWidth: xWidth,// 柱形的宽度
                barGap: 0,
                data: chatData
            },
            {
                name: '排队量',
                type: 'bar',
                barWidth: xWidth,// 柱形的宽度
                barGap: 0,
                data: queueData
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart_bar.setOption(option_bar);

    // 指定图表的配置项和数据
    var option_PE = {
        backgroundColor: '#fff',

        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 500,
            max: 600,
            inRange: {
                //colorLightness: [0, 1]
            }
        },
        series: [{
            name: '满意度',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
            data: [
                {
                    value: evaluate['evaluateGood'],
                    name: '满意'
                }, {
                    value: evaluate['evaluateSecondary'],
                    name: '一般'
                }, {
                    value: evaluate['evaluateBad'],
                    name: '不满意'
                }, {
                    value: evaluate['evaluateNo'],
                    name: '未评价'
                }
            ].sort(function(a, b) {
                return a.value - b.value
            }),
            roseType: 'radius',

            label: {
                normal: {
                    formatter: ['{c|{c}次}', '{b|{b}}'].join('\n'),
                    rich: {
                        c: {
                            color: 'rgb(241,246,104)',
                            fontSize: 20,
                            fontWeight:'bold',
                            lineHeight: 5
                        },
                        b: {
                            color: 'rgb(98,137,169)',
                            fontSize: 15,
                            height: 40
                        },
                    },
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgb(98,137,169)',
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20,

                }
            },
            itemStyle: {
                normal: {
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 50,
                }
            }
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    pie_evaluate.setOption(option_PE);
    if (systemCount) {
        var option_PS = {
            backgroundColor: '#fff',

            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 500,
                max: 600,
                inRange: {
                    //colorLightness: [0, 1]
                }
            },
            series: [{
                name: '满意度',
                type: 'pie',
                radius: '50%',
                center: ['50%', '50%'],
                color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
                data: systemCount.sort(function(a, b) {
                    return a.value - b.value
                }),
                roseType: 'radius',

                label: {
                    normal: {
                        formatter: ['{c|{c}次}', '{b|{b}}'].join('\n'),
                        rich: {
                            c: {
                                color: 'rgb(241,246,104)',
                                fontSize: 20,
                                fontWeight:'bold',
                                lineHeight: 5
                            },
                            b: {
                                color: 'rgb(98,137,169)',
                                fontSize: 15,
                                height: 40
                            },
                        },
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgb(98,137,169)',
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20,

                    }
                },
                itemStyle: {
                    normal: {
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 50,
                    }
                }
            }]
        };
        pie_system.setOption(option_PS);
    } else {
        let pie_system_html = "<div style='line-height: 20; border-top: 1px solid #e7eaec;'>暂无数据</div>";
        $("#system_data").html(pie_system_html);
    }

    function search() {
        let daterang = $("#daterang").val();
        let data = daterang.split(",");
        let start = data[0];
        let end = data[1];
        window.location.href = '/admin/report/index?start='+start+'&end='+end;
    }
    $(document).ready(function () {

        //当点击查询按钮的时候执行
        $("#search").bind("click", search);
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#daterang'
            , range: ','
        });
    });
</script>
</body>
</html>