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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <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() {
            
            total();
            talk();
            switched();

            if (!!(window.attachEvent && !window.opera))
            { document.execCommand("stop"); }
            else
            { window.stop(); }

            setTimeout("window.location.reload();", 5000 )
            
        });

        var totalchart;
        function setTotalChart(name, categories, data, color) {
            totalchart.xAxis[0].setCategories(categories, false);
            totalchart.series[0].remove(false);
            totalchart.addSeries({
                name: name,
                data: data,
                color: color || 'white'
            }, false);
            totalchart.redraw();
        }
        function total() {
            var colors = Highcharts.getOptions().colors,
        categories = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        name = '时间月/日',
            data =<%=totalcallreport %>;

        totalchart = $('#totalcallreport').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
            }
        });
    }

    function talk(){
        $('#talktimereport').highcharts({
            chart: {
            },
            title: {
                text: '服务热线坐席通话时长统计'
            },
            xAxis: {
                categories: <%=Agents %>
                    },
                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: <%=CallRecordOut %>, //[3, 2, 1, 3, 4]
                    color:Highcharts.getOptions().colors[6]
                },
                 {
                     type: 'column',
                     name: '呼出次数',
                     yAxis: 1,
                     tooltip: {
                         valueSuffix: '通'
                     },
                     data: <%=CallRecordIn %>,//[2, 3, 5, 7, 6]
                     color:Highcharts.getOptions().colors[7]
                 },
                  {
                      type: 'spline',
                      name: '通话总时长',
                      data: <%=CallRecordTotalTime %>,//[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:<%=CallAverageTime %> ,//[21.9, 0, 0, 0, 0]
                      marker: {
                          lineWidth: 2,
                          lineColor: Highcharts.getOptions().colors[5],
                          fillColor: 'white'
                      }
                  }]
            });
    }
        function switched(){
            $('#switchedlosscallreport').highcharts({
                 chart: {
                     type: 'column',
                     zoomType: 'x'
                 },
                 title: {
                     text: '服务热线-接通率和呼损率统计'
                 },
                 xAxis: {
                     categories: <%=StatisticalTime%>,
                     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: <%=StatisticalCallConnectData %>,
                     color:Highcharts.getOptions().colors[6]
                 },
                  {
                      name: '呼损次数',
                      tooltip: {
                          valueSuffix: '通'
                      },
                      data: <%=StatisticalCallLossData %>,
                      color:Highcharts.getOptions().colors[7]
                  },
                 {
                     type: 'spline',
                     name: '呼损率',
                     yAxis: 1,
                     tooltip: {
                         valueSuffix: '%'
                     },
                     data: <%=StatisticalCallLossDataRate%>,
                     marker: {
                         lineWidth: 2,
                         lineColor: Highcharts.getOptions().colors[5],
                         fillColor: 'white'
                     }
                 }, 
                 {
                     type: 'spline',
                     name: '接通率',
                     yAxis: 1,
                     tooltip: {
                         valueSuffix: '%'
                     },
                     data: <%=StatisticalCallConnectDataRate %>,
                     marker: {
                         lineWidth: 2,
                         lineColor: Highcharts.getOptions().colors[5],
                         fillColor: 'white'
                     }
                 }]
             });
        }
	
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="totalcallreport" style="float:left;width:50%;">
        </div>
        <div id="talktimereport" style="float:right;width:50%;">
        </div>
        <div style="clear:both;"></div>
        <div id="switchedlosscallreport">
        </div>
    </form>
</body>
</html>
