clq1010
/
UU_CallCenter


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
							<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="totalcallreport.aspx.cs"
    Inherits="HySoft.BaseCallCenter.Web.reportmanage.totalcallreport" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>总呼叫量统计</title>
    <link href="../scripts/ui/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="../scripts/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="../scripts/ui/json2.js" type="text/javascript"></script>
    <script src="../scripts/ui/js/core/base.js" type="text/javascript"></script>
    <script src="../scripts/ui/js/ligerui.min.js" type="text/javascript"></script>
    <script src="../scripts/CustomersData.js" type="text/javascript"></script>
    <link href="../scripts/ui/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
    <link href="../images/style.css" rel="stylesheet" type="text/css" />
    <script src="../../scripts/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <script src="../ThirdParty/js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../ThirdParty/js/highcharts.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            var colors = Highcharts.getOptions().colors,
        categories = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        name = '时间月/日',
            data =<%=GetHighCharts(txtStataicalYear.Text.Trim()) %>;
            function setChart(name, categories, data, color) {
                chart.xAxis[0].setCategories(categories, false);
                chart.series[0].remove(false);
                chart.addSeries({
                    name: name,
                    data: data,
                    color: color || 'white'
                }, false);
                chart.redraw();
            }

            var chart = $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: '总呼叫量统计'
                },
                subtitle: {
                    text: '服务热线'
                },
                xAxis: {
                    categories: categories
                },
                yAxis: {
                    title: {
                        text: '呼叫数量(通)'
                    }
                },
                plotOptions: {
                    column: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function() {
                                    var drilldown = this.drilldown;
                                    if (drilldown) { // drill down
                                        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                    } else { // restore
                                        setChart(name, categories, data);
                                    }
                                }
                            }
                        },
                        dataLabels: {
                            enabled: true,
                            color: colors[0],
                            style: {
                                fontWeight: 'bold'
                            },
                            formatter: function() {
                                return this.y ;
                            }
                        }
                    }
                },
                tooltip: {
                    formatter: function() {
                        var point = this.point,s = '';
                        if (point.drilldown) {
                            s =this.x  +"总共有"+ this.y + '通电话<br/>'
                            s += '点击查看 ' + point.category + '具体通话日期';
                        } else {
                            s =this.x + "总共有"+this.y + '通电话<br/>'
                            s += '点击返回';
                        }
                        return s;
                    }
                },
                series: [{
                    name: name,
                    data: data,
                    color: 'white'
}],
                    exporting: {
                        enabled: false
                    }
                })
//    .highcharts(); // return chart
            });		
            		
           function tabs(tabId) {
               for (var i = 0; i <= 1; i++) {
                   if (tabId == i) {
                       document.getElementById("tabli" + i).className = "selected";
                       document.getElementById("tab_" + i).style.display = "block";
                   }
                   else {
                       document.getElementById("tabli" + i).className = "";
                       document.getElementById("tab_" + i).style.display = "none";
                   }
               }
           }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="tools_box">
        <div class="tools_bar">
            <div class="search_box">
                年份：<asp:TextBox ID="txtStataicalYear" runat="server" CssClass="txtInput" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy年'})"></asp:TextBox>&nbsp;&nbsp;
           <%--     <input id="btnSearch" type="button" value="搜 索" class="btnSearch" runat="server" />--%>
             <asp:Button ID="btnSearch" runat="server" Text="搜 索" CssClass="btnSearch"  />
                &nbsp;&nbsp;
            </div>
        </div>
    </div>
    <ul class="tab_nav">
        <li id="tabli0" class="selected"><a onclick="tabs(0);" href="javascript:;">表格</a></li>
        <li id="tabli1"><a onclick="tabs(1);" href="javascript:;">图形</a></li>
    </ul>
    <div id="divfromlist">
        <div id="tab_0" style="display: block; width: 100%">
            <%=CreateTableTitleAndHead("总呼叫量统计", txtStataicalYear.Text.Trim(),"月份", "日期", "总数")%>
        </div>
        <div id="tab_1" style="display: none; width: 100%">
            <div id="container">
            </div>
        </div>
    </div>
    </form>
</body>
</html>