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

<!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() {
             $('#container').highcharts({
                 chart: {
                     type: 'column',
                     zoomType: 'x'
                 },
                 title: {
                     text: '服务热线-接通率和呼损率统计'
                 },
                 xAxis: {
                     categories: <%=GetStatisticalTime(txtBeginTime.Text.Trim(), txtEndTime.Text.Trim())%>,
                     labels: {
                         rotation: -45,
                         align: 'right',
                         style: {
                             fontSize: '13px',
                             fontFamily: 'Verdana, sans-serif'
                         }
                     }
                 },
                 yAxis: [{
                     title: {
                         text: '通话次数(通)',
                         style: {
                             color: '#4572A7'
                         }
                     },
                     labels: {
                         format: '{value}通',
                         style: {
                             color: '#89A54E'
                         }
                     },
                     opposite: true
                 },
                 {
                     min: 0,
                     title: {
                         text: '百分比(%)'
                     },
                     labels: {
                         format: '{value}%',
                         style: {
                             color: '#89A54E'
                         }
                     },
                     stackLabels: {
                         enabled: true,
                         style: {
                             fontWeight: 'bold',
                             color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                         }
                     }
                 }
                 ],
                 exporting: {
                     enabled: false
                 },
                 tooltip: {
                     shared: true
                 },
                 series: [{
                     name: '接通次数',
                     tooltip: {
                         valueSuffix: '通'
                     },
                     data: <%=GetStatisticalCallConnectData(txtBeginTime.Text.Trim(), txtEndTime.Text.Trim()) %>,
                     color:Highcharts.getOptions().colors[6]
                 },
                  {
                      name: '呼损次数',
                      tooltip: {
                          valueSuffix: '通'
                      },
                      data: <%=GetStatisticalCallLossData(txtBeginTime.Text.Trim(), txtEndTime.Text.Trim()) %>,
                      color:Highcharts.getOptions().colors[7]
                  },
                 {
                     type: 'spline',
                     name: '呼损率',
                     yAxis: 1,
                     tooltip: {
                         valueSuffix: '%'
                     },
                     data: <%=GetStatisticalCallLossDataRate(txtBeginTime.Text.Trim(), txtEndTime.Text.Trim()) %>,
                     marker: {
                         lineWidth: 2,
                         lineColor: Highcharts.getOptions().colors[5],
                         fillColor: 'white'
                     }
                 }, 
                 {
                     type: 'spline',
                     name: '接通率',
                     yAxis: 1,
                     tooltip: {
                         valueSuffix: '%'
                     },
                     data: <%=GetStatisticalCallConnectDataRate(txtBeginTime.Text.Trim(),txtEndTime.Text.Trim()) %>,
                     marker: {
                         lineWidth: 2,
                         lineColor: Highcharts.getOptions().colors[5],
                         fillColor: 'white'
                     }
                 }]
             });
         });

         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="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>
