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

<!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 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";
                }
            }
        }


        $(function () {
            var beginTime = $("#txtBeginTime").val();
            var endTime = $("#txtEndTime").val();

            $('#container').highcharts({
                chart: {
                },
                title: {
                    text: '服务热线坐席通话时长统计'
                },
                xAxis: {
                    categories: <%=GetAgent() %>
                    },
                yAxis: [{
                    labels: {
                        format: '{value}s',
                        style: {
                            color: '#89A54E'
                        }
                    },
                    title: {
                        text: '通话时长(s)'
                    },
                    min: 0//纵轴的最小值  
                },
                {
                    labels: {
                        format: '{value}通',
                        style: {
                            color: '#89A54E'
                        }
                    },
                    title: {
                        text: '通话次数(通)',
                        style: {
                            color: '#4572A7'
                        }
                    },
                    opposite: true
                }
                ],
                tooltip: {
                    shared: true
                },
                exporting: {
                    enabled: false
                },
                series: [
                {
                    type: 'column',
                    name: '呼入次数',
                    yAxis: 1,
                    tooltip: {
                        valueSuffix: '通'
                    },
                    data: <%=GetCallRecordOut(txtBeginTime.Text.Trim(),txtEndTime.Text.Trim(),"0") %>, //[3, 2, 1, 3, 4]
                    color:Highcharts.getOptions().colors[6]
                },
                 {
                     type: 'column',
                     name: '呼出次数',
                     yAxis: 1,
                     tooltip: {
                         valueSuffix: '通'
                     },
                     data: <%=GetCallRecordIn(txtBeginTime.Text.Trim(),txtEndTime.Text.Trim(),"1") %>,//[2, 3, 5, 7, 6]
                     color:Highcharts.getOptions().colors[7]
                 },
                  {
                      type: 'spline',
                      name: '通话总时长',
                      data: <%=GetCallRecordTotalTime(txtBeginTime.Text.Trim(),txtEndTime.Text.Trim()) %>,//[5, 3, 2, 4, 2]
                      tooltip: {
                          valueSuffix: 's'
                      },
                      marker: {
                          lineWidth: 2,
                          lineColor: Highcharts.getOptions().colors[5],
                          fillColor: 'white'
                      }
                  }, 
                  {
                      type: 'spline',
                      name: '平均通话时长',
                      tooltip: {
                          valueSuffix: 's'
                      },
                      data:<%=GetCallAverageTime(txtBeginTime.Text.Trim(),txtEndTime.Text.Trim()) %> ,//[21.9, 0, 0, 0, 0]
                      marker: {
                          lineWidth: 2,
                          lineColor: Highcharts.getOptions().colors[5],
                          fillColor: 'white'
                      }
                  }]
            });
        });



         
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="tools_box">
        <div class="tools_bar">
            <div class="search_box">
                开始时间：<asp:TextBox ID="txtBeginTime" runat="server" CssClass="txtInput" onfocus="WdatePicker({skin:'whyGreen'})"></asp:TextBox>&nbsp;&nbsp;
                结束时间：<asp:TextBox ID="txtEndTime" runat="server" CssClass="txtInput" onfocus="WdatePicker({skin:'whyGreen'})"></asp:TextBox>&nbsp;&nbsp;
                 <asp:Button ID="btnSearch" runat="server" Text="搜 索" CssClass="btnSearch"  />&nbsp;&nbsp;
                <input id="btnSearchFanHui" type="button" value="返回导航" class="btnSearch" onclick="javascript:window.location.href='./default.aspx'" />
            </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("热线坐席通话时长统计", txtBeginTime.Text.Trim(), txtEndTime.Text.Trim(), "坐席名称", "呼入次数", "呼出次数", "通话总时长", "平均通话时长")%>
        </div>
        <div id="tab_1" style="display: none; width: 100%">
            <div id="container">
            </div>
        </div>
    </div>
    </form>
</body>
</html>
