zhengbingbing
/
SYCW_UI


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>工单部门分布分析</title>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script src="../../Script/Common/huayi.load.js"></script>
    <script src="../../Script/Common/huayi.config.js"></script>
    <!--<link rel="stylesheet" href="../../css/huTotal.css" />-->
    <link rel="stylesheet" href="../../css/init.css" />
    <style>
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

        .kpi-top {
            background: #f3f3f4;
            height: 60px;
            padding: 10px 20px;
        }

        .topCon {
            float: right;
            margin-right: 45px;
        }

        .kpi-content h2 {
            font-size: 18px;
            margin-bottom: 20px;
        }

        .topCon input {
            width: 128px;
            padding: 2px 2PX 2PX 10PX;
            height: 28px;
            border: 1px solid #ebebeb;
            color: #1ab394;
            outline: none;
            vertical-align: middle;
        }


        .kpi-content {
            width: 90%;
            margin: 0 auto;
        }

        .kpi-table table {
            font-size: 12px;
        }

            .kpi-table table thead tr td {
                background: #1ab394;
                color: #fff;
                font-size: 14px;
            }
    </style>
</head>

<body class="gray-bg" style="background: #fefefe;">
    <div class="hwkpi">
    	<div class="daoHang clearfix">
					<div class="dhLeft">
					<sapn><i class="syIcon"></i>位置：<a id="ReIndex" href="javaScript:;">首页</a>&gt;<a href="javaScript:;">报表分析</a>&gt;<a href="javaScript:;">业务数据分析</a>&gt;<a href="" style="color: #000;">工单部门分布分析</a></sapn>
				</div>
			</div>
        <div class="kpi-top clearfix">
            <div class="topCon">
                开始时间：
                <input type="text" class="laydate-icon" id="startTime" />
                结束时间：
                <input type="text" class="laydate-icon" id="endTime" />
                <button class="btns sear">搜索</button>
                <!--<button class="btn daochu ">导出</button>-->
            </div>
        </div>
        <div class="kpi-content">
            <div class="kpi-table">
                <h2 style="text-align: center;">客服部工单分布</h2>
                <table class="table table-bordered text-center table-hover" style="width: 100%;">
                    <thead>
                        <tr>
                            <td>客服部名称</td>
                            <td>工单数量</td>
                            <td>总处理时间/小时</td>
                            <td>平均响应时间/小时</td>
                            <td>平均处理时间/小时</td>
                        </tr>
                    </thead>
                    <tbody class="tbody">
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>合计</td>
                            <td><span class="hj"></span></td>
                            <td><span class="hj"></span></td>
                            <td><span class="hj"></span></td>
                            <td><span class="hj"></span></td>
                        </tr>

                    </tfoot>
                </table>
                <div style="color: red;">
                    注：默认显示当月1号0：00：00至当日23：59：59的数据, 查询的工单是在当前时间段已经结单，并且是工程师处理之后结单的， 在工程师处理之前结单的不计算
                </div>
            </div>
        </div>
    </div>

    <script src="../../css/laydate/laydate.js"></script>
    <script src="../../js/echarts.common.min.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script>
        $(function () {
            laydate.skin('molv');
            laydate({
                elem: '#startTime',
                event: 'focus',
                format: 'YYYY-MM-DD'
            });
            laydate({
                elem: '#endTime',
                event: 'focus',
                format: 'YYYY-MM-DD'
            });
            bind();
            $(".sear").click(function () {
                bind();
            })
        })
        function bind() {
            var WorkCount = 0;
            var CLTotalTime = 0;
            var XYAvgTime = 0;
            var CLAvgTime = 0;

            $(".tbody").empty();
            $.getJSON(huayi.config.callcenter_url + 'Business/GetWorkDept', { starttime: $("#startTime").val(), endtime: $("#endTime").val(), "token": $.cookie("token") }, function (result) {
                if (result.state.toLowerCase() == "success") {
                    $(result.data).each(function (i,n) {
                        $(".tbody").append('<tr><td>' + n.DeptName + '</td><td>' + n.WorkCount + '</td><td>' + n.CLTotalTime + '</td><td>' + (n.XYAvgTime ? n.XYAvgTime : 0) + '</td><td>' + n.CLAvgTime + '</td></tr>');
                        
                        WorkCount = WorkCount + (n.WorkCount ? n.WorkCount * 1 : 0);
                        CLTotalTime = CLTotalTime + (n.CLTotalTime ? n.CLTotalTime * 1 : 0);
                        XYAvgTime = XYAvgTime + (n.XYAvgTime ? n.XYAvgTime * 1 : 0);
                        CLAvgTime = CLAvgTime + (n.CLAvgTime ? n.CLAvgTime * 1 : 0);
                    })
                    $(".hj").eq(0).text(WorkCount);
                    $(".hj").eq(1).text(CLTotalTime);
                    $(".hj").eq(2).text(XYAvgTime);
                    $(".hj").eq(3).text(CLAvgTime);
                }
            })
        }
    </script>
</body>

</html>