<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>业务特征分析</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- nvd3画图 -->
<link href="${ctx}/static/nvd3/nv.d3.css" rel="stylesheet" type="text/css" />
<script src="${ctx}/static/nvd3/lib/d3.v3.js"></script>
<script src="${ctx}/static/nvd3/nv.d3.test.js"></script>
<!-- 所有js导出所需 -->
<script type="text/javascript" src="${ctx}/static/js/canvg.js"></script>

<style type="text/css">
.div-inline {
	display: inline-block;
	margin-right: 10px;
	padding-left: 0px;
	margin-bottom: 0;
	font-weight: normal;
	vertical-align: middle;
	cursor: pointer;
}

.div-inline+.div-inline {
	margin-top: 0;
	margin-left: -13px;
}
</style>
</head>
<body>
	<div id="sticky-wrap">
		<div class="dataexplorer dataexplorer_floating"></div>
		<div>
			<div class="container">
				<ol class="breadcrumb">
					<li><a href="${ctx}/index">首页</a></li>
					<li>运营支撑</li>
					<li class="active">业务特征分析</li>
				</ol>
			</div>
		</div>
	</div>

	<div id="main-container">
		<div id="content" class="container">
			<div class="tab-bar-bt">
				<ul class="nav nav-tabs">
					<li><a href="${ctx}/AnalysisSupport/ServiceFeature">地市热点分析</a>
					</li>
					<li class="active"><a id="a_profile" href="#profile" data-toggle="tab">渠道热点分析</a>
					</li>
				
				</ul>
			</div>
			<div class="section">
				<div class="tab-content">
					<!-- ------------------------------------------------ 渠道热点       ------------------------------------------------ -->

					<div class="tab-pane fade in active" id="profile">
						<div class="row me-row">
							<div id="slidePushMenus2" class="cbp-spmenu-push">
								<div class="slideMenu" id="cbp-spmenu-s2" style="">
									<div class="form">
										<tags:YWTZ_City_PeriodTag />
										<br>
										<tags:Public_ProvinceTag />
										<br>
										<tags:YWTZ_Channel_Bus_KpiTag />
										<br>
										<button type="button" class="btn btn-primary"
											onclick="newdiv()">提交</button>
										<button type="button" type="reset" class="btn btn-warning"
											onclick="reset2()">重置</button>
									</div>
								</div>

								<div class="main col-xs-12">
									<div id="mainm2" class="mainm"></div>
									<div class="content clearfix">
										<div class="block clearfix">
											<button id="showLeftPush2"
												class="menu-trigger btn btn-default" onclick="toggleMenu('slidePushMenus2')">
												<span class="glyphicon glyphicon-list"></span>
											</button>
										<div class="tab-content">
										<div class="tab-pane fade in active" id="tab1">
											<div class="slide-menu-tags">
												<span id="bqds1" class="label label-info" data-placement="bottom">关键指标直采</span>
												<span id="bqtime1" class="label label-info" data-placement="bottom">最近一个月</span>
												<span id="bqprovince1" class="label label-info" data-placement="bottom" >全国</span> 
												<span id="bqchannel1" class="label label-info" data-placement="bottom"></span>
												<span id="bqbusiness1" class="label label-info" data-placement="bottom"></span>
												<span id="bqkpi1" class="label label-info" data-placement="bottom"></span>
										   </div>
										   <div class="bt-list-import">
												<a href="#" id="exportData1" class="exportData">
												     <span class="glyphicon glyphicon-import"></span>
												      <span	class="glyphicon-class">导出报表</span> 
												</a>
											</div>
									
										<div class="row">
											<div class="col-xs-12">
												<div class="panel panel-default">
													<div class="panel-heading">
														<span>全国各渠道业务办理量统计</span>				
													</div>
													<div class="panel-body">
														<div id="qg" class="col-xs-12">
														<div name="loading" class="loading"><img src="${ctx}/static/images/loading.gif"/></div>
															<iframe id="channel_qg"  name="channel_qg" class='channelqg' style="height:700px;" scrolling="no" frameborder="0" ></iframe>
														</div>
														
													</div>
												</div>
											</div>
										</div>
										<form id="export" action="#" method="post"></form>
										</div>

                                      </div>
									</div>

								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
	</div>

<script type="text/javascript" src="${ctx}/static/js/publicLog.js"></script>
<script type="text/jscript">
function newdiv(){   
	if(getProvinceCheckedValues().length*getChannelCheckedValues().length*getBusinessCheckedValuesId().length*getKpiCheckedValuesId().length==0){	
		$.alert('选择不能为空!');
	}else{
		if(getPeriodStr()==""){
			$.alert('时间不能为空!');
		}else{
			$("#channel_qg").attr("src", document.getElementById("channel_qg").value+"&ProvinceTag="+getProvinceCheckedValuesString()+"&ChannelTag="+getChannelCheckedValuesString()+"&PeriodTag=" + getPeriodString()+"&BusinessTag="+getBusinessCheckedValuesId()+"&KpiTag="+getKpiCheckedValuesId());
			$('#bqprovince1').text("省份").attr('data-original-title',getProvinceCheckedTitles()).append($("<span class='badge'></span>").text(getProvinceCheckedValues().length)).tooltip();	
			$('#bqchannel1').text("渠道").attr('data-original-title',getChannelCheckedTitles()).append($("<span class='badge'></span>").text(getChannelCheckedValues().length)).tooltip();	
			$('#bqbusiness1').text("业务").attr('data-original-title',getBusinessCheckedValuesTitle()).append($("<span class='badge'></span>").text(getBusinessCheckedValuesId().length)).tooltip();	
			$('#bqkpi1').text("指标").attr('data-original-title',getKpiCheckedValuesTitle()).append($("<span class='badge'></span>").text(getKpiCheckedValuesId().length)).tooltip();	
	        $('#bqtime1').text("时间范围").attr('data-original-title',getPeriodStr()).tooltip();	
			publicLog("ChannelrdAnalysis");	
  			toggleMenu('slidePushMenus2');
		}
	}
}

function reset2() {
   	initDate();
   	ProvinceReset();
	channelReset();
}
 
</script>

<script type="text/jscript"> 
//added by guo xuan
 function checkBusinessAndKpi(){
	 	if(getBusinessCheckedValuesIdString() == "" || getBusinessCheckedValuesIdString() == null){}else{
		 	businessAllId = getBusinessCheckedValuesIdString();
		 }
		 if(getKpiCheckedValuesIdString() == "" || getKpiCheckedValuesIdString() == null){
		 }else{
		 	kpiAllId = getKpiCheckedValuesIdString();
		 }
    } 
    
$(document).ready(function() {
	checkBusinessAndKpi();
    initDate();
    $('#bqchannel1').text("渠道").tooltip({title:getChannelCheckedTitles()});
    $('#bqbusiness1').text("业务").tooltip({title:getBusinessCheckedValuesTitle()});
    $('#bqkpi1').text("指标").tooltip({title:getKpiCheckedTitlesString()}); 
    document.getElementById("channel_qg").value = "${biserver_config}&path=analysissupport&action=YWTZ_channel.xaction&wrapper=false&driLink=toDrill&driEnable=true&width="+iframeWidth*0.99+"&height=480"
    $("#channel_qg").attr("src", document.getElementById("channel_qg").value+"&ChannelTag="+getChannelCheckedValuesString()+"&BusinessTag="+businessAllId+"&KpiTag="+kpiAllId+"&PeriodTag="+getPeriodString());
 }); 
	     
 var iframeWidth=790,
     iframeHeight=0;//iframe高度
 var businessAllId = "0"; 
 var kpiAllId = "0";      
 //窗口自适应函数 
$(/*window.onresize = */function(){
 //  iframeWidth=(document.body.clientWidth>1024)?(document.body.clientWidth-60)*0.72:660;
 //   iframeHeight=(document.body.clientHeight>700)?document.body.clientHeight*0.17:115;

    //channel_qg刷新
    for(var i=0;i<$('.channelqg').length;i++){
	    	if($('.channelqg').eq(i).parent().find('.loading').length>0){
		    	$('.channelqg').eq(i).parent().find('.loading').fadeIn("fast");	 //显现loading图片
				$('.channelqg').eq(i).load( function(){ 
					$(this).parent().find('.loading').fadeOut("fast"); });//隐藏loading图片
		}	 
      }
      
}); 

function toDrill(category,param){
	 dialog_artDialog("全国各渠道业务办理量统计钻取","<div id='par' style='fon-size:24px;text-align:center;'>"+param+"</div><div id='dropDown'><svg style='height:540px;width:1200px'></svg></div>","1300px","600px");
	 var test = getPeriodString()+"&"+ category +"&"+param;
	 console.log(test);
	 $.ajax({
		type : 'GET',
		contentType : 'application/json',
		url: encodeURI(encodeURI("${ctx}/AnalysisSupport/ChannelAnalysis/dropDetial/"+test+"/"+Date.parse(new Date()))),
		dataType : 'text',
		beforeSend: function(data) {},
		success: function(data) {
		for ( var i = 0; i < data.length; i++) {
							if (data == '\"') {
								data = data.replace("\"", "\'");
							}
						}
						data = eval("(" + data + ")");
			if(data == "" || data == null){
			    $("#dropDown").html("暂无数据");
			}else{
			var min = 0; 
			var tickMarks = [];var a1 = [],j=0, mi=[];
					var List=data[1];
				$("#dropDown svg").empty();
			    if("Y" == data[0]){
			    min = List[0];max = List[0],id=List.length/3;
			    for(var i = 0 ;i<List.length;i=i+3){
			         if(i != 0){
			           if(List[i] == List[i-3]){
			             id--;
			           }
			         }
			         a1[j] = [];
                     a1[j][0] = List[i]; 
                     a1[j][1] = List[i+1];
                     a1[j][2] = List[i+2];
                     j++;
				}
				
				/* a1.forEach(function(d,i) {
                     d.key = d[0];
                     d.x = d[1];
                     d.y = d[2];
                }); */
          
				 //散点图
		   var margin = {top: 30, right: 50, bottom: 70, left: 50};
           var  width =1200 - margin.left - margin.right;
           var height = 480 - margin.top - margin.bottom;
           var padding = 20;
          
	      var svg = d3.select("#dropDown svg")
	            .attr("width", width + margin.left + margin.right+100)
	            .attr("height", height + margin.top + margin.bottom+60)
	           /*  .attr("class", "box")   */  
	            .append("g")
	            .attr("transform", "translate(" + (margin.left+70) + "," + margin.top + ")");
	        
	      var x = d3.scale.ordinal()       
	           .domain( a1.map(function(d) { return d[0]; }) )     
	           .rangeRoundBands([0 ,width-padding]);        
	
	      var xAxis = d3.svg.axis()
	            .scale(x).orient("bottom").tickFormat(function(d) {return d3.time.format('%X')(new Date(d))
	                           }).tickSize(-height, 0, 0);
	      
        // the y-axis
      var y = d3.scale.linear()
            .domain([d3.min(a1,function (d){return parseFloat(d[2]);})-100, d3.max(a1,function (d){return parseFloat(d[2]);})+100])
            .range([height , 0]);

      var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left").tickSize(-width, 0, 0);

         // draw y axis
      svg.append("g")
         .attr("class", "y axis").attr({"stroke": "lightgrey","opacity": "0.7"})
         .call(yAxis)
         .selectAll("text").attr({"stroke": "black","stroke-width":"0.5"}) ;      

        // draw x axis  
      svg.append("g")
         .attr("class", "x axis").attr({"stroke": "lightgrey","opacity": "0.7"})
         .attr("transform", "translate(0," + (height) + ")")
         .call(xAxis)
         .selectAll("text").attr({"stroke": "black","stroke-width":"0.5"})  
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", ".15em")
          .attr("transform", function(d) {
               return "translate(-5,0)rotate(-90)" ;});
       if(a1 == "" || a1 == null){
          svg .append("text")             // text label for the x axis
           .attr("x", (width/2)  )
           .attr("y",  (height/2) )
           .attr("dy", ".71em")
           .style("text-anchor", "end")
           .style("font-size", "16px") 
           .text("暂无数据"); 
      }else{
      
       var color = d3.scale.category20();
       
          svg.selectAll("circle")
          .data(a1)
          .enter()
          .append("circle")
          .attr("cx", function (d,i) { return x(d[0]); } )
          .attr("cy", function(d,i) {
               return y(d[2]);
            })
          .attr("r", 4).attr("fill",function(d,i){return color(d[1]);})
          .attr("transform", "translate("+(width-padding)/(id*2)+",0)")
          .on("mouseover", function(d) {
            d3.select(this).attr("r", 6);
             d3.select(this).append("svg:title")
          .text(function(d) { return  d3.time.format("%Y-%m-%d")(new Date(d[1]))+"  "+d3.time.format('%X')(new Date(d[0])) +":"+d[2]; });
          }).on("mouseout",function() {
            d3.select(this).attr("r", 4);
          });
        
         /*  svg.selectAll("circle").data(a1).append("svg:title")
          .text(function(d) { return d3.time.format('%X')(new Date(d[0]))+":"+d[2]; }); */ 
          }
				//结束
			   /* 	nv.addGraph(function() {
						  var chart = nv.models.scatterChart()
						                .color(d3.scale.category10().range())
						                .size(1).sizeRange([50,50])
						                 .forceX(min,max);
						                 
						  chart.xAxis.tickValues(tickMarks).rotateLabels(-90).axisLabelDistance(4)  
						  .showMaxMin(false).tickFormat(function(d) {
	     						 return d3.time.format('%X')(new Date(d))
	   				       }).tickPadding(0);
	   				      
						  chart.yAxis.showMaxMin(false);
						    
						  chart.tooltipContent(function(key, x, y) {
	     					 return '<p>' + key + '</p>'  +
	               			'<p>' +  x + ' : ' + y + '</p>';
	  					});
						
						  d3.select("#dropDown svg")
						      .datum(Data(List))
						      .call(chart);
						
						  nv.utils.windowResize(chart.update);
						
						  return chart;
					});  */
					
			    }else{
						nv.addGraph(function() {
						    var chart = nv.models.lineChart()
						    			.showLegend(false)
						    			.useInteractiveGuideline(true);
					
						    chart.xAxis
						    	.tickFormat(function(d) { 
						    		return d3.time.format('%x')(new Date(d))
						    });
					
						    chart.yAxis;
						    d3.select("#dropDown svg")
						        .datum(Data1(List))
						        .call(chart)
						        ;
					
						    nv.utils.windowResize(chart.update);
					
						    return chart;
						});
										
			    }
			}
			$('#dropDown').parent().find('.loading').fadeOut("fast");
			 console.log(new Date());
		}
	});
}
//nvd3画图

function Data1(List) {
  var data = [];
  for (var i = 0; i < List.length; i++) {
    data.push({x: List[i][0],
    	 	y: List[i][1]});
  }

  return [
    {
      values: data,
      key: '日期类'
    }
  ];
}
function Data(List) { //# groups,# points per group
  var data = [],
      shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
      random = d3.random.normal();
  var t = 0;
  for (i = 0; i < List.length/3; i++) {
  var tt = List[i*3+1];
  if(i==0){
  		 data.push({
      		key: List[i*3+1],
      		values: []
   		 });
   	  for (j = 0; j < List.length; j=j+3) {
		if(List[j+1] == List[i*3+1]){
		 data[t].values.push({
	        x: List[j], 
	        y: List[j+2], 
	        size: 10, 
	        shape: shapes[j % 6]
	      });
		}
    }
    t++;	
  }else{
  	if(List[i*3-2] != tt){
  		data.push({
      		key: List[i*3+1],
      		values: []
   		 });
   		for (j = 0; j < List.length; j=j+3) {
			if(List[j+1] == List[i*3+1]){
			 data[t].values.push({
		        x: List[j], 
		        y: List[j+2], 
		        size: 10, 
		        shape: shapes[j % 6]
		      });
			}
    	}
    	t++;
  	} 
  }
  }
  return data;
}

//导出报表
    $(".exportData").click(function(){
          //var temi = $(this).attr("id").charAt($(this).attr("id").length-1);
         // alert($("#tab"+temi).find("img").length);
          var picArr = new Array();
          $("#tab1").find("iframe").each(function(){
             // alert($(this).attr("id"));
             var tmpArr = new Array();
              var tmpStr = $(window.frames[$(this).attr("id")].document).find("img").attr("src");
              tmpArr = tmpStr.split("?image=");
              picArr.push(tmpArr[1]);
              
          });
          var picStr = picArr.join(",");
          console.log(picStr);
        $.dialog({
			id: "export",
			title: "请选择导出文件类型",
			content: "<div style='position:relative;height:40px;margin:0 0 0 11px;'><div class='form-horizontal'>"
	        +"<div class='form-group'><div class='col-sm-4'><label class='radio-inline'><input type='radio' name='expradio' class='expradio' value='word' checked/>Word</label></div>"
	        +"<div class='col-sm-4'><label class='radio-inline'><input type='radio' name='expradio' class='expradio' value='excel'/>Excel</label></div>"
	        +"<div class='col-sm-4'><label class='radio-inline'><input type='radio' name='expradio' class='expradio' value='pdf'/>Pdf</label></div></div>"
	        +"</div></div>",
			width: 276,
			height: 140,
			initialize: function () {
			      $(".d-buttons input:first").css({
			              "color": "#ffffff",
                          "background": "#428bca",
                          "border-color": "#357ebd"
			      });
			},
	        button: [{
			        value: "确定",
			        callback: function () {
			        
			       //     alert($('input[name="expradio"]:checked').val());
			               var listForm=$("#export");
		                   listForm.attr("action","${ctx}/AnalysisSupport/ChannelAnalysis/"+$('input[name="expradio"]:checked').val()+"?picStr="+picStr);
		                   listForm.submit();
		                   listForm.attr("action","#");
			        }  
	        	},{
			        value: "取消",
			        callback: function () {}  
				}], 
			lock: false
		});    
    });  	

</script>
</body>
</html>