zhoufan
/
County12345_Web


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
							<!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 href="../css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">

    <link href="../css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <link href="../css/animate.min.css" rel="stylesheet">

    <link href="../css/style.min862f.css?v=4.1.0" rel="stylesheet">

    <link rel="stylesheet" href="../css/init.css" />

    <style type="text/css">

        .hujiao {

            font-size: 12px;

        }


        .shuju-top {

            background: #f3f3f4;

            height: 60px;

            padding: 10px 20px;

        }


            .shuju-top .topCon select {

                padding: 2px;

                height: 28px;

                border: 1px solid #ebebeb;

                color: #1ab394;

                outline: none;

                vertical-align: middle;

                margin-right: 10px;

            }


        .topCon {

            float: right;

            margin-right: 20px;

        }


        .shuju-con {

            width: 90%;

            margin: 20px auto;

            overflow-x: auto;

        }


            .shuju-con table thead tr td {

                background: #00a1cb;

                color: #fff;

            }


        #thead thead th {

            background: #00a0cd;

            color: #fff;

        }


        table thead, tbody tr {

            display: table;

            width: 100%;

            table-layout: fixed;

        }


        .table {

            margin-bottom: 0;

        }

    </style>

</head>

<body class="gray-bg">

    <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="" class="nowPosition">年呼叫数据对比</a></sapn>

        </div>

        <div class="dhRight"><a href="" title="刷新"><i class="fa fa-refresh"></i></a></div>

    </div>


    <div class="hujiao wrapper wrapper-content">


        <!--<div class="toolBar clearfix">

           <div class="toolRight">

               选择年份：<select name="" id="first" class="select_">

                   <option value="0">请选择</option>

                   <option value="2009">2009</option>

                   <option value="2010">2010</option>

                   <option value="2011">2011</option>

                   <option value="2012">2012</option>

                   <option value="2013">2013</option>

                   <option value="2014">2014</option>

                   <option value="2015">2015</option>

                   <option value="2016" selected="selected">2016</option>

                   <option value="2017">2017</option>

                   <option value="2018">2018</option>

                   <option value="2019">2019</option>

                   <option value="2020">2020</option>

                   <option value="2021">2021</option>

                   <option value="2022">2022</option>

                   <option value="2023">2023</option>

                   <option value="2024">2024</option>

                   <option value="2025">2025</option>

                   <option value="2026">2026</option>

                   <option value="2027">2027</option>

                   <option value="2028">2028</option>

                   <option value="2029">2029</option>

                   <option value="2030">2030</option>

               </select>

               对比：

               <select name="" id="last" class="select_">

                   <option value="0">请选择</option>

                   <option value="2009">2009</option>

                   <option value="2010">2010</option>

                   <option value="2011">2011</option>

                   <option value="2012">2012</option>

                   <option value="2013">2013</option>

                   <option value="2014">2014</option>

                   <option value="2015">2015</option>

                   <option value="2016">2016</option>

                   <option value="2017" selected="selected">2017</option>

                   <option value="2018">2018</option>

                   <option value="2019">2019</option>

                   <option value="2020">2020</option>

                   <option value="2021">2021</option>

                   <option value="2022">2022</option>

                   <option value="2023">2023</option>

                   <option value="2024">2024</option>

                   <option value="2025">2025</option>

                   <option value="2026">2026</option>

                   <option value="2027">2027</option>

                   <option value="2028">2028</option>

                   <option value="2029">2029</option>

                   <option value="2030">2030</option>

               </select>

               <button class="btns sear">搜索</button>

               <a class="btns export">导出</a>

           </div>

        </div>-->

        <div class="th-top clearfix">

            <div class="form-inline th-bar clearfix">


                <div class="time-box form-group">

                    <i class="tub fa fa-calendar"></i>

                    <input class="form-control" type="text" id="chooseTime" placeholder="选择时间">

                </div>

                <div class="form-group tool_bars pull-right">

                    <button class="btns sear">搜索</button>

                    <a class="btns export">导出</a>

                </div>

            </div>

        </div>


        <div class="shuju-con">

            <div style="width: 100%;padding: 10px;">

                <div class="table-head">

                    <table id="thead" class="table table-hover table-striped table-bordered table-condensed">

                        <colgroup>

                            <col style="width: 80px;" />

                            <col />

                        </colgroup>

                        <thead>

                            <tr></tr>

                        </thead>

                    </table>

                </div>

                <div class="table-body">

                    <table class="thTable table table-hover table-striped table-bordered table-condensed">

                        <colgroup>

                            <col style="width: 80px;" />

                            <col />

                        </colgroup>

                        <tbody></tbody>

                    </table>

                </div>


            </div>

        </div>

    </div>

    <script src="../js/jquery.min.js?v=2.1.4"></script>

    <script src="../js/bootstrap.min.js?v=3.3.6"></script>

    <script src="../js/jquery.cookie.js"></script>

    <script src="../js/laydate/laydate.js"></script>

    <script>

        $(function () {

            var token = $.cookie("token"),

                theadCon,//表头数据

                tbodyCon;//表内数据

            //Ajax();

            laydate.render({

                elem: '#chooseTime'

                , format: 'yyyy',

                range: "~",

                type: 'year',

                theme: '#00a1cb',

            });

            //搜索事件

            $(".sear").click(function () {

                if (!$('#chooseTime').val()) {

                    layer.confirm('请选择时间！', {

                        btn: ['确定']

                    });

                    return;

                }

                Ajax();

            });


            //表格数据

            function Ajax(beginyear, endyear) {

                $('#thead thead tr').html('');

                $('.thTable tbody').html('');

                var arr = [];

                var allData = [];

                $.ajax({

                    type: 'get',

                    url: huayi.config.callcenter_url + 'YearContrast/GetDataList',

                    dataType: 'json',

                    data: {

                        token: token,

                        beginyear: $('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[0],

                        endyear: $('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[1]

                    },

                    async: false,

                    success: function (res) {

                        var content = res.data;

                        $.each(content, function (index, ele) {

                            arr.push(content[index].key)

                            allData.push(content[index].value)

                        });

                    }

                });

                theadCon = arr;

                tbodyCon = allData;

                $('<td>月份</td>').appendTo('#thead thead tr');

                for (var i = 0; i < theadCon.length; i++) {

                    $('<td>' + theadCon[i] + '</td>').appendTo('#thead thead tr');

                };

                $('<tr><td>1月份</td><td>' + tbodyCon[0][0] + '</td><td>' + tbodyCon[1][0] + '</td><td>' + tbodyCon[2][0] + '</td><td>' + tbodyCon[3][0] + '</td><td>' + tbodyCon[4][0] + '</td><td>' + tbodyCon[5][0] + '</td></tr>' +

                    '<tr><td>2月份</td><td>' + tbodyCon[0][1] + '</td><td>' + tbodyCon[1][1] + '</td><td>' + tbodyCon[2][1] + '</td><td>' + tbodyCon[3][1] + '</td><td>' + tbodyCon[4][1] + '</td><td>' + tbodyCon[5][1] + '</td></tr>' +

                    '<tr><td>3月份</td><td>' + tbodyCon[0][2] + '</td><td>' + tbodyCon[1][2] + '</td><td>' + tbodyCon[2][2] + '</td><td>' + tbodyCon[3][2] + '</td><td>' + tbodyCon[4][2] + '</td><td>' + tbodyCon[5][2] + '</td></tr>' +

                    '<tr><td>4月份</td><td>' + tbodyCon[0][3] + '</td><td>' + tbodyCon[1][3] + '</td><td>' + tbodyCon[2][3] + '</td><td>' + tbodyCon[3][3] + '</td><td>' + tbodyCon[4][3] + '</td><td>' + tbodyCon[5][3] + '</td></tr>' +

                    '<tr><td>5月份</td><td>' + tbodyCon[0][4] + '</td><td>' + tbodyCon[1][4] + '</td><td>' + tbodyCon[2][4] + '</td><td>' + tbodyCon[3][4] + '</td><td>' + tbodyCon[4][4] + '</td><td>' + tbodyCon[5][4] + '</td><tr/>' +

                    '<tr><td>6月份</td><td>' + tbodyCon[0][5] + '</td><td>' + tbodyCon[1][5] + '</td><td>' + tbodyCon[2][5] + '</td><td>' + tbodyCon[3][5] + '</td><td>' + tbodyCon[4][5] + '</td><td>' + tbodyCon[5][5] + '</td><tr/>' +

                    '<tr><td>7月份</td><td>' + tbodyCon[0][6] + '</td><td>' + tbodyCon[1][6] + '</td><td>' + tbodyCon[2][6] + '</td><td>' + tbodyCon[3][6] + '</td><td>' + tbodyCon[4][6] + '</td><td>' + tbodyCon[5][6] + '</td><tr/>' +

                    '<tr><td>8月份</td><td>' + tbodyCon[0][7] + '</td><td>' + tbodyCon[1][7] + '</td><td>' + tbodyCon[2][7] + '</td><td>' + tbodyCon[3][7] + '</td><td>' + tbodyCon[4][7] + '</td><td>' + tbodyCon[5][7] + '</td><tr/>' +

                    '<tr><td>9月份</td><td>' + tbodyCon[0][8] + '</td><td>' + tbodyCon[1][8] + '</td><td>' + tbodyCon[2][8] + '</td><td>' + tbodyCon[3][8] + '</td><td>' + tbodyCon[4][8] + '</td><td>' + tbodyCon[5][8] + '</td><tr/>' +

                    '<tr><td>10月份</td><td>' + tbodyCon[0][9] + '</td><td>' + tbodyCon[1][9] + '</td><td>' + tbodyCon[2][9] + '</td><td>' + tbodyCon[3][9] + '</td><td>' + tbodyCon[4][9] + '</td><td>' + tbodyCon[5][9] + '</td><tr/>' +

                    '<tr><td>11月份</td><td>' + tbodyCon[0][10] + '</td><td>' + tbodyCon[1][10] + '</td><td>' + tbodyCon[2][10] + '</td><td>' + tbodyCon[3][10] + '</td><td>' + tbodyCon[4][10] + '</td><td>' + tbodyCon[5][10] + '</td><tr/>' +

                    '<tr><td>12月份</td><td>' + tbodyCon[0][11] + '</td><td>' + tbodyCon[1][11] + '</td><td>' + tbodyCon[2][11] + '</td><td>' + tbodyCon[3][11] + '</td><td>' + tbodyCon[4][11] + '</td><td>' + tbodyCon[5][11] + '</td><tr/>').appendTo('.thTable tbody');

            }


            //导出功能

            $('.export').click(function () {

                dcexcel(this);

            })

            function dcexcel(obj) {

                var url = huayi.config.callcenter_url + "YearContrast/ExptList?token=" + $.cookie("token");

                url += "&beginyear=" + $('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[0] + "&endyear=" + $('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[1];

                obj.href = url;

            }


        });

    </script>

</body>


</html>