| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322 |
- <%@ 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>
|
