<%@ 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">
<!-- js文件的顺序不能放错,不然会找不到函数 -->
<script type="text/javascript" src="${ctx}/static/js/d3.v3.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/box1.js"></script>  <!-- 箱体图所需 -->
<script type="text/javascript" src="${ctx}/static/js/d3.tip.js"></script>   <!-- 箱体图悬浮框所需 -->
<script type="text/javascript" src="${ctx}/static/js/boxplot.js"></script>  <!-- 多环节箱体图 -->
<script type="text/javascript" src="${ctx}/static/js/boxplotDetail.js"></script> <!-- 多时段箱体图 -->
<script type="text/javascript" src="${ctx}/static/js/circleDetailTable.js"></script> <!-- 多环节散点明细 -->
<script type="text/javascript" src="${ctx}/static/js/locationProblem.js"></script>  <!-- 双Y轴图形 -->
<script type="text/javascript" src="${ctx}/static/js/underscore.js"></script>   <!-- 加趋势线的散点图所需 -->
<script type="text/javascript" src="${ctx}/static/js/RelationProblem.js"></script>   <!-- 加趋势线的散点图 -->
<script type="text/javascript" src="${ctx}/static/js/netElementOrProvinceBoxplot.js"></script> <!-- 网元或省份箱体图 -->
<script type="text/javascript" src="${ctx}/static/js/canvg.js"></script>  <!-- js导出所需 -->
<style type="text/css">
.slide-menu-select{
padding-top: 3px;
padding-bottom: 3px;
}
 div.tooltip1,               
 #tiplayer { 
	 padding-right: 5px;
	padding-left: 5px;
	z-index: 1000;
	min-height: 1em;
	background-color: #a1d8f7;
	padding-bottom: 5px;
	font: 14px 'Microsoft YaHei';
	border-style:solid;border-width:1px; border-color:#a1d8f7;
	color: #000;
	padding-top: 5px;
	position: absolute;
	text-align: center;
	word-wrap: break-word;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

/*  text {
font: 12px sans-serif;
}  */ 
/* 针对所有图形 */
/* #relational line,
#LocationProblem line,
.y2.axis path,
.y.axis path,
 .x.axis path {
	fill: none;
	stroke: black;
	stroke-width: 1;
	shape-rendering: crispEdges;
	opacity:0.6;
} */
/* 箱体图以及相关散点图 */
/*  .box line,
 .box rect {
  stroke: #000;
  stroke-width: 1.5px;
}
 .box .center {
  stroke-dasharray: 3,3;
}
 .box .outlier {    //异常值 
  fill: none;
  stroke: none;
}
 circle {
  fill: green;
  stroke: none;
  stroke-width: 1.5px;
} */
/* 定位问题分析 */
/* #LocationProblem .y2.axis line,
#LocationProblem .y.axis line,
#LocationProblem .x.axis line{
	fill: none;
	stroke: grey;
	stroke-width: 1;
	shape-rendering: crispEdges;
	
} 
#LocationProblem .hover-line { 
  stroke: #ccc;  
  stroke-width: 2px;
  opacity:0.2;
}*/
</style>


<script type="text/jscript">
function submit3(){
   if(getPeriodString() == "" || getPeriodString() == null){
    	$.alert("时间范围不能为空");
   }else if(getKeyBusinessCheckedTitlesString() == "" || getKeyBusinessCheckedTitlesString()== null){
    	$.alert("关键业务不能为空");
   }else if(getProvinceCheckedValuesTitleString() == "" || getProvinceCheckedValuesTitleString() == null){
   		$.alert("省份不能为空");
   }else if(getKeyLinkCheckedValuesIdString() == "" || getKeyLinkCheckedValuesIdString() == null){
	   			$.alert("关键环节不能为空");
   }else{
    	var start = new Date(getPeriodString().split(",")[0]);
    	var end =  new Date(getPeriodString().split(",")[1]);
    	var granularityDays = getGranularityToDays();
    	if((end -start)>(granularityDays-1)*24*3600*1000){
    		$.alert("选择时间范围过长");
    	}else{
    	 	granularityValue = getGranularityValue();
    	 	$('#analysisTypeLabel').text("分析类别").attr('data-original-title',getAnalysisTypeText()).tooltip();  
  			$('#timeLabel').text("时间段").attr('data-original-title',getTimeText()).tooltip();
  			$('#granularityLabel').text("聚合粒度").attr('data-original-title',getGranularityText()).tooltip();
			$('#periodLabel').text("时间范围").attr('data-original-title',getPeriodString().split(",")[0]+"~~"+getPeriodString().split(",")[1]).tooltip();
			$('#provinceLabel').text("省份").attr('data-original-title',getProvinceCheckedValuesTitleString()).append($("<span class='badge'></span>").text(getProvinceCheckedValuesTitle().length)).tooltip();
			$('#keyBusinessLabel').text("关键业务").attr('data-original-title',getKeyBusinessCheckedTitlesString()).append($("<span class='badge'></span>").text(getKeyBusinessCheckedValuesTitle().length)).tooltip();
			$('#keyLinkLabel').text("关键环节").attr('data-original-title',getKeyLinkCheckedTitlesString()).append($("<span class='badge'></span>").text(getKeyLinkCheckedValuesTitle().length)).tooltip();
			toggleMenu('slidePushMenus3');//隐藏筛选项
			LocationAllData = null;  //清空数据
			RelationAllData = null;
			NetElementOrProvAllData = null;
			check();
	        $('#granularityLabel1').text(granularityValue);
	        $('#analysisTypeLabel1').text(getAnalysisTypeValue());  
	        $('#timeLabel1').text(getTimeValue());
	        $('#provinceLabel1').text(provinceList);
	        $('#keyBusinessLabel1').text(businessList);
	        $('#keyLinkLabel1').text(keyLinkList);
	        $('#periodLabel1').text(getPeriodString());
	        $('#minValueLabel1').text(minValue);
	   		if(getAnalysisTypeValue() == "10"){
		   			$($('#dropdown1 li').get(0)).show();  //显示隐藏的li
					keyLink1();
					$('#li2').html("业务多环节双Y轴相关性");
					$('#li3').html("业务与性能相关性");
					$('#li4').html("所有环节网元箱体图");
			}else{
			 $($('#dropdown1 li').get(0)).hide(); 
			 businessTwo();
			 $('#li2').html("多省双Y轴相关性图");
			 $('#li3').html("多省业务量和性能相关性图");
			 $('#li4').html("某环节多省对比箱体图");
			}
		
    	}
   }
}

function reset3(){
initDate();
AnalysisTypeReset();
}
</script>
<!-- 添加结束 -->
</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}/MonitorOperation/RegularityAnalysis">数据特征探查</a></li>
					<li class="active"><a id="a_keyLink1" href="#keyLink1" >业务环节分析</a></li>
				</ul>
			</div>
			<div class="section">
				<div class="tab-content">
						<!--  ----------------------------------    关键环节分析     -------------------------------------------------- -->
					<div class="tab-pane fade in active" id="keyLink1">
						<div class="row me-row">

							<div id="slidePushMenus3" class="cbp-spmenu-push">

								<div class="slideMenu" id="cbp-spmenu-s3" style="">
									<div class="form">
										<tags:YWGL_KeyLink_PeriodTag />
									    <tags:YWGL_keyLink_AnalysisTypeTag />
										<br>
										<button type="button" class="btn btn-primary" onclick="submit3()">确定</button>
										<button type="reset" class="btn btn-warning" onclick="reset3()">重置</button>
									</div>
								</div>

								<div class="main col-xs-12">
									<div id="mainm3" class="mainm"></div>
									<div class="content clearfix">
										<div class="block clearfix">
											<button id="showLeftPush3"
												class="menu-trigger btn btn-default" onclick="toggleMenu('slidePushMenus3')">
												<span class="glyphicon glyphicon-list"></span>
											</button>
											<div class="slide-menu-tags">
											    <span id="periodLabel" class="label label-info" data-placement="bottom"></span>
											     <span id="periodLabel1" style="display:none"></span>
												<span id="timeLabel" class="label label-info" data-placement="bottom"></span>
												 <span id="timeLabel1" style="display:none"></span>
												<span id="analysisTypeLabel" class="label label-info" data-placement="bottom"></span>
												 <span id="analysisTypeLabel1" style="display:none"></span>
												<span id="provinceLabel" class="label label-info" data-placement="bottom"></span>
												 <span id="provinceLabel1" style="display:none"></span>
												<span id="keyBusinessLabel" class="label label-info" data-placement="bottom"></span>
												 <span id="keyBusinessLabel1" style="display:none"></span>
												<span id="keyLinkLabel" class="label label-info" data-placement="bottom"></span>
												 <span id="keyLinkLabel1" style="display:none"></span>
												<span id="granularityLabel" class="label label-info" data-placement="bottom"></span>
											    <span id="granularityLabel1" style="display:none"></span>
											    <span id="minValueLabel1" style="display:none"></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>
										 <div class="row">
                                               <div class="col-xs-12" >
                                                 <div class="panel panel-default">
													<div class="panel-heading">
													<span>关键环节</span>
													<div id="keyLinkProcessDiv" class="btn-group btn-group-cog">
														<button type='button' class='btn btn-default dropdown-toggle btn-control-cog' data-toggle='dropdown'>
														<span id='busSpan'></span><span class='glyphicon glyphicon-chevron-down'></span></button>
														<ul class='dropdown-menu dropdown-menu-right' id='dropdown1' role='menu'>
														<li><a id='li1' href='#' onclick="javascript:keyLink1()">单省单业务多环节相关图</a></li>
														<li><a id='li2' href='#' onclick="javascript:businessTwo()"></a></li>
														<li><a id='li3' href='#' onclick="javascript:Relation()"></a></li>
														<li><a id='li4' href='#' onclick="javascript:NetOrProvinceBox()"></a></li>
														</ul>
														</div>
														<div style="display:none;">
								                          <a id="a_tab1" href="#tab1" data-toggle="tab"></a>
								                          <a id="a_tab2" href="#tab2" data-toggle="tab"></a>
								                          <a id="a_tab3" href="#tab3" data-toggle="tab"></a>
								                          <a id="a_tab4" href="#tab4" data-toggle="tab"></a>
						                                </div>
													</div>
													
													<div class="tab-content">
												        <div class="tab-pane fade in active" id="tab1">
												           <div class="panel-body" style="text-align:center;min-height:470px">
												               <div class="col-xs-12">
												                <div name="loading" class="loading"><img src="${ctx}/static/images/loading.gif"/></div> 
                                                                <div class="col-xs-6" style="text-align:center;">
                                                                      <span style="font-size:16px;">端到端处理时长分布的占比统计</span>   
                                                                      <iframe id="iframe1" name="iframe1" scrolling="no" style="height:350px"></iframe>
                                                                </div>
                                                                <div class="col-xs-6" style="text-align:center;">
                                                                    <span style="font-size:16px;width:10%">业务各环节时长</span>
                                                                    <iframe id="iframe2" name="iframe2" scrolling="no" style="height:350px"></iframe>
                                                                </div>
												               </div>
												               <div class="col-xs-12" style="padding-right: 0px;padding-left: 0px;">
												               <div name="loading" name="loading" class="loading"><img src="${ctx}/static/images/loading.gif"/></div>
												                    <div class="col-xs-6" style="min-height:300px;padding-right: 0px;padding-left: 0px;">
                                                                     <div style="text-align:center;font-size:16px">业务环节处理时长箱体图</div>
                                                                     <br>
                                                                     <div id="boxplot"></div>
                                                                </div>
                                                                <div class="col-xs-6" style="min-height:300px;padding-right: 0px;padding-left: 0px;">
                                                                    <div style="text-align:center;font-size:16px">业务环节处理时长异常点</div>
                                                                    <tags:YWGL_keyLink_WOExceptionTimeFrameUpperAndLowerTag /><button type="button" class="btn btn-primary" onclick="circleSubmit()">筛选</button>
                                                                     <div id="circleDiv"></div>
                                                                </div>
												               </div>
												           	    
																
													        </div>		
												        </div>
												        <div class="tab-pane fade in active" id="tab2">
												          <div class="panel-body" style="text-align:center;min-height:470px">
												         <div name="loading" class="loading" ><img src="${ctx}/static/images/loading.gif"/></div> 
												          	<div id="LocationProblem"></div>
													      </div>		
												        </div>
												        <div class="tab-pane fade" id="tab3">
												           <div class="panel-body" style="text-align:center;min-height:470px">
												            <div name="loading" class="loading"><img src="${ctx}/static/images/loading.gif"/></div> 
													         <div id="relational"></div>
													       </div>		
												        </div>
												        <div class="tab-pane fade" id="tab4">
												        	<div class="panel-body" style="text-align:center;min-height:470px">
												        		 <div name="loading" class="loading"><img src="${ctx}/static/images/loading.gif"/></div> 
																<div id="NetElementOrProvinceBoxplot"></div>
																 <div style="text-align:center;">
																  	<tags:YWGL_keyLink_WOExceptionTimeFrameUpperAndLowerTag2 /><button type="button" class="btn btn-primary" onclick="circleSubmit1()">筛选</button>
																 </div>
																 <div id="NetElementOrProvincecircleDiv"></div>
															</div>		
												        </div>
												     </div>
													</div>
												</div>
										       </div>
										       <div style="display:none"><canvas id="canvas"></canvas></div>
                                                <form id="export" action="#" method="post">
                                                </form>
										       </div>
										   </div>
										
									</div>
								</div>
							</div>
						</div>
					</div>
		
				</div>
			</div>


<script type="text/jscript">
//多时段箱体散点筛选
function getTimeUpperValue3(){
var upValue = $("#up3").attr("value"); 
var t = document.getElementById('TimeUpper3').options[document.getElementById('TimeUpper3').selectedIndex].value;
if(t == "m"){
   upValue = upValue * 60; 
}
return upValue;}

function getTimeLowerValue3(){ 
var downValue = $("#down3").attr("value"); 
var t = document.getElementById('TimeLower3').options[document.getElementById('TimeLower3').selectedIndex].value;
if(t == "m"){
   downValue = downValue * 60; 
}
return downValue;}

 //双Y轴明细
function LocationProblemDetailUp() {  //上一页
	//var t1 = new Date(getPeriodString().split(",")[0].toString());
	//var t2 = new Date(getPeriodString().split(",")[1].toString());
	
	var t2 = new Date(lMaxDate);
	var t1 = new Date(lMinDate);
	var startPeriod1 = $('#dayLabel').html();
	var firstPeriod = new Date(startPeriod1.split("~~")[0]);
	var secondPeriod = new Date(startPeriod1.split("~~")[1]);
	if(firstPeriod <= t1){
		$.alert("已经是第一天了");
	}else if((firstPeriod -t1) == 1*24*3600*1000){
	 firstDate = new Date(firstPeriod.getTime() - 1*24*3600*1000);
	 var NowDate = firstDate.getFullYear() + "-";
		if(firstDate.getMonth() < 9) NowDate += "0";
		NowDate += (firstDate.getMonth()+1) + "-";
		if(firstDate.getDate() < 9) NowDate += "0";
		NowDate += firstDate.getDate();
		$('#dayLabel').text(NowDate);
		keyLinkDetail($('#name').html());
	}else{
		firstDate = new Date(firstPeriod.getTime() - 2*24*3600*1000);
		secondDate = new Date(secondPeriod.getTime() - 2*24*3600*1000);
		var NowDate = firstDate.getFullYear() + "-";
		if(firstDate.getMonth() < 9) NowDate += "0";
		NowDate += (firstDate.getMonth()+1) + "-";
		if(firstDate.getDate() < 9) NowDate += "0";
		NowDate += firstDate.getDate() +"~~"+secondDate.getFullYear() + "-";
		if(secondDate.getMonth() < 9) NowDate += "0";
		NowDate += (secondDate.getMonth()+1) + "-";
		if(secondDate.getDate() < 9) NowDate += "0";
		NowDate += secondDate.getDate();
		$('#dayLabel').text(NowDate);
		keyLinkDetail($('#name').html());
	}
}

function LocationProblemDetailDown() {   //下一页
	/* var t1 = new Date(getPeriodString().split(",")[0].toString());
	var t2 = new Date(getPeriodString().split(",")[1].toString()); */
	var t2 = new Date(lMaxDate);
    var t1 = new Date(lMinDate);
	var startPeriod1 = $('#dayLabel').html();
	if(startPeriod1.split("~~").length  == 1){
		var firstPeriod = new Date(startPeriod1.split("~~")[0]);
		if(firstPeriod >= t2){
			$.alert("已经是最后一天了");
		}else{
			firstDate = new Date(firstPeriod.getTime() + 1*24*3600*1000);
			secondDate = new Date(firstPeriod.getTime() + 2*24*3600*1000);
			var NowDate = firstDate.getFullYear() + "-";
			if(firstDate.getMonth() < 9) NowDate += "0";
			NowDate += (firstDate.getMonth()+1) + "-";
			if(firstDate.getDate() < 9) NowDate += "0";
			NowDate += firstDate.getDate() +"~~"+secondDate.getFullYear() + "-";
			if(secondDate.getMonth() < 9) NowDate += "0";
			NowDate += (secondDate.getMonth()+1) + "-";
			if(secondDate.getDate() < 9) NowDate += "0";
			NowDate += secondDate.getDate();
			$('#dayLabel').text(NowDate);
			keyLinkDetail($('#name').html());
		}
	}else{
		var firstPeriod = new Date(startPeriod1.split("~~")[0]);
		var secondPeriod = new Date(startPeriod1.split("~~")[1]);
		if(secondPeriod >= t2){
			$.alert("已经是最后一天了");
		}else{
			firstDate = new Date(firstPeriod.getTime() + 2*24*3600*1000);
			secondDate = new Date(secondPeriod.getTime() + 2*24*3600*1000);
			var NowDate = firstDate.getFullYear() + "-";
			if(firstDate.getMonth() < 9) NowDate += "0";
			NowDate += (firstDate.getMonth()+1) + "-";
			if(firstDate.getDate() < 9) NowDate += "0";
			NowDate += firstDate.getDate() +"~~"+secondDate.getFullYear() + "-";
			if(secondDate.getMonth() < 9) NowDate += "0";
			NowDate += (secondDate.getMonth()+1) + "-";
			if(secondDate.getDate() < 9) NowDate += "0";
			NowDate += secondDate.getDate();
			$('#dayLabel').text(NowDate);
			keyLinkDetail($('#name').html());
		}
	}
} 
//网元明细
function netElementDetailUp() {  //上一页
	/* var t1 = new Date(getPeriodString().split(",")[0].toString());
	var t2 = new Date(getPeriodString().split(",")[1].toString()); */
	var t2 = new Date(netMaxDate);
    var t1 = new Date(netMinDate);
	var startPeriod1 = $('#dayLabel1').html();
	var firstPeriod = new Date(startPeriod1.split("~~")[0]);
	var secondPeriod = new Date(startPeriod1.split("~~")[1]);
	if(firstPeriod <= t1){
		$.alert("已经是第一天了");
	}else if((firstPeriod -t1) == 1*24*3600*1000){
		 firstDate = new Date(firstPeriod.getTime() - 1*24*3600*1000);
	 	var NowDate = firstDate.getFullYear() + "-";
		if(firstDate.getMonth() < 9) NowDate += "0";
		NowDate += (firstDate.getMonth()+1) + "-";
		if(firstDate.getDate() < 9) NowDate += "0";
		NowDate += firstDate.getDate();
		$('#dayLabel1').text(NowDate);
		netElementDetail($('#d').html());
	}else{
		firstDate = new Date(firstPeriod.getTime() - 2*24*3600*1000);
		secondDate = new Date(secondPeriod.getTime() - 2*24*3600*1000);
		var NowDate = firstDate.getFullYear() + "-";
		if(firstDate.getMonth() < 9) NowDate += "0";
		NowDate += (firstDate.getMonth()+1) + "-";
		if(firstDate.getDate() < 9) NowDate += "0";
		NowDate += firstDate.getDate() +"~~"+secondDate.getFullYear() + "-";
		if(secondDate.getMonth() < 9) NowDate += "0";
		NowDate += (secondDate.getMonth()+1) + "-";
		if(secondDate.getDate() < 9) NowDate += "0";
		NowDate += secondDate.getDate();
		$('#dayLabel1').text(NowDate);
		netElementDetail($('#d').html());
	}
}

function netElementDetailDown() {   //下一页
	///var t2 = new Date(getPeriodString().split(",")[1].toString());
	var t2 = new Date(netMaxDate);
    var t1 = new Date(netMinDate);
	var startPeriod1 = $('#dayLabel1').html();
	if(startPeriod1.split("~~").length  == 1){
	   var firstPeriod = new Date(startPeriod1.split("~~")[0]);
		if(firstPeriod >= t2){
				$.alert("已经是最后一天了");
			}else{
				var firstPeriod = new Date(startPeriod1.split("~~")[0]);
				firstDate = new Date(firstPeriod.getTime() + 1*24*3600*1000);
				secondDate = new Date(firstPeriod.getTime() + 2*24*3600*1000);
				var NowDate = firstDate.getFullYear() + "-";
				if(firstDate.getMonth() < 9) NowDate += "0";
				NowDate += (firstDate.getMonth()+1) + "-";
				if(firstDate.getDate() < 9) NowDate += "0";
				NowDate += firstDate.getDate() +"~~"+secondDate.getFullYear() + "-";
				if(secondDate.getMonth() < 9) NowDate += "0";
				NowDate += (secondDate.getMonth()+1) + "-";
				if(secondDate.getDate() < 9) NowDate += "0";
				NowDate += secondDate.getDate();
				$('#dayLabel1').text(NowDate);
				netElementDetail($('#d').html());
			}
	}else{
		var firstPeriod = new Date(startPeriod1.split("~~")[0]);
		var secondPeriod = new Date(startPeriod1.split("~~")[1]);
		if(secondPeriod >= t2){
			$.alert("已经是最后一天了");
		}else{
			firstDate = new Date(firstPeriod.getTime() + 2*24*3600*1000);
			secondDate = new Date(secondPeriod.getTime() + 2*24*3600*1000);
			var NowDate = firstDate.getFullYear() + "-";
			if(firstDate.getMonth() < 9) NowDate += "0";
			NowDate += (firstDate.getMonth()+1) + "-";
			if(firstDate.getDate() < 9) NowDate += "0";
			NowDate += firstDate.getDate() +"~~"+secondDate.getFullYear() + "-";
			if(secondDate.getMonth() < 9) NowDate += "0";
			NowDate += (secondDate.getMonth()+1) + "-";
			if(secondDate.getDate() < 9) NowDate += "0";
			NowDate += secondDate.getDate();
			$('#dayLabel1').text(NowDate);
			netElementDetail($('#d').html());
		}
	}
}  

function circleSubmit() {
	//circleTest(outlierData);
	boxplotCircleTest(outlierData);
}
function circleSubmit1() {
	netElementOrProvinceCircleTest(netElementOrProvinceOutlierData);
}

function boxDetailCircleSubmit() {
boxplotDetailcircleTest(boxplotDetailData);
}

//双Y轴钻取明细
function keyLinkDetail(name){
//添加loading图片
$("#rPictureKeyLink").attr("src","../static/images/loading.gif");
//当双Y轴显示的是多省单业务的时候,省份应该是多省
var valStr = "";
if(getAnalysisTypeValue() == "10"){
	if($('#dayLabel').html().split("~~").length == 1){
	     valStr = "?analysisType="+getAnalysisTypeValue()  //分析类别
		             +"&provinces="+provinceList   //省份id(分析类别是9,11的时是多省,为10的时候是单省)
		             +"&businesses="+businessList  //业务id
		             +"&links="+name  // 环节ID(分析类别是9,11的时是单环节,为10的时候是多环节)
		             +"&netelement="+"-1"  //网元
		             +"&startDate="+$('#dayLabel').html()  //开始日期
		             +"&endDate="+$('#dayLabel').html()  //结束日期
		             +"&timePerId="+getTimeValue();     //时间段Id
	}else{
	    valStr = "?analysisType="+getAnalysisTypeValue()  //分析类别
		             +"&provinces="+provinceList   //省份id(分析类别是9,11的时是多省,为10的时候是单省)
		             +"&businesses="+businessList  //业务id
		             +"&links="+name  // 环节ID(分析类别是9,11的时是单环节,为10的时候是多环节)
		             +"&netelement="+"-1"  //网元
		             +"&startDate="+$('#dayLabel').html().split("~~")[0]  //开始日期
		             +"&endDate="+$('#dayLabel').html().split("~~")[1]  //结束日期
		             +"&timePerId="+getTimeValue();     //时间段Id
	}
}else{
	if($('#dayLabel').html().split("~~").length == 1){
	     valStr = "?analysisType="+getAnalysisTypeValue()  //分析类别
		             +"&provinces="+name   //省份id(分析类别是9,11的时是多省,为10的时候是单省)
		             +"&businesses="+businessList  //业务id
		             +"&links="+keyLinkList  // 环节ID(分析类别是9,11的时是单环节,为10的时候是多环节)
		             +"&netelement="+"-1"  //网元
		             +"&startDate="+$('#dayLabel').html()  //开始日期
		             +"&endDate="+$('#dayLabel').html()  //结束日期
		             +"&timePerId="+getTimeValue();     //时间段Id
	}else{
	    valStr = "?analysisType="+getAnalysisTypeValue()  //分析类别
		             +"&provinces="+name   //省份id(分析类别是9,11的时是多省,为10的时候是单省)
		             +"&businesses="+businessList  //业务id
		             +"&links="+keyLinkList  // 环节ID(分析类别是9,11的时是单环节,为10的时候是多环节)
		             +"&netelement="+"-1"  //网元
		             +"&startDate="+$('#dayLabel').html().split("~~")[0]  //开始日期
		             +"&endDate="+$('#dayLabel').html().split("~~")[1]  //结束日期
		             +"&timePerId="+getTimeValue();     //时间段Id
	}
}
	   console.log("keyLinkDetail:"+valStr);   
	 setTimeout(function(){
	 	$.ajax({
            type : 'GET',
            contentType : 'application/json',
            url: encodeURI(encodeURI('${ctx}/MonitorOperation/KeyLinkProcessAnalysis/getRpicture'+valStr)),
            dataType : 'text',
            async: false ,
            beforeSend: function(data) {},
            success: function(data) {
                var obj = JSON.parse(data);  //由JSON字符串转换为JSON对象
                if(obj[0] == "nodatamessage.png"){
                   console.log("11111");
                       $("#rPictureKeyLink").attr("src","../static/images/"+obj[0]);
                 }else{
                  console.log("2222");
                       $("#rPictureKeyLink").attr("src","../tmp/"+obj[0]);
                 } 
            }
          });     
	 },300);       
} 

$(document).ready(function() {
		initDate();
		$('#granularityLabel').text("聚合粒度").attr('data-original-title',getGranularityText()).tooltip();
		$('#analysisTypeLabel').text("分析类别").attr('data-original-title',getAnalysisTypeText()).tooltip();  
		$('#timeLabel').text("时间段").attr('data-original-title',getTimeText()).tooltip();
		$('#provinceLabel').text("默认省份").attr('data-original-title',getProvinceCheckedValuesTitleString()).tooltip();
		$('#keyBusinessLabel').text("默认业务").attr('data-original-title',getKeyBusinessCheckedTitlesString()).tooltip();
		$('#keyLinkLabel').text("默认环节").attr('data-original-title',getKeyLinkCheckedTitlesString()).tooltip();
		$('#periodLabel').text("时间范围").attr('data-original-title',getPeriodString().split(",")[0]+"~~"+getPeriodString().split(",")[1]).tooltip();
		
		if(getAnalysisTypeValue() == "10"){
			$('#li2').html("业务所有环节双Y轴相关性");
			$('#li3').html("业务与性能相关性");
			$('#li4').html("所有环节网元箱体图");
		}else{
		    $('#li2').html("多省双Y轴相关性图");
		    $('#li3').html("多省业务量和性能相关性图");
		    $('#li4').html("某环节多省对比箱体图");
		}
		LocationAllData = null;
		RelationAllData = null;
		NetElementOrProvAllData = null;
		//赋值
        check();
        $('#granularityLabel1').text(granularityValue);
        $('#analysisTypeLabel1').text(getAnalysisTypeValue());  
        $('#timeLabel1').text(getTimeValue());
        $('#provinceLabel1').text(provinceList);
        $('#keyBusinessLabel1').text(businessList);
        $('#keyLinkLabel1').text(keyLinkList);
        $('#periodLabel1').text(getPeriodString());
        $('#minValueLabel1').text(minValue);
		businessTwo();
		$($('#dropdown1 li').get(0)).hide();    //让ul里面的第一个li隐藏
		
		
}); 

var iframeWidth=760;
var keyLink11 = "${biserver_config}&path=MonitorOperation/BusinessRegularity/KeyLinkProcessAnalysis&action=YWGL_Key1.xaction&wrapper=false&width="+iframeWidth*0.5+"&height=210";	
var keyLink12 = "${biserver_config}&path=MonitorOperation/BusinessRegularity/KeyLinkProcessAnalysis&action=YWGL_Key2.xaction&wrapper=false&width="+iframeWidth*0.5+"&height=220";     
var LocationAllData = null; //用于缓存数据
var RelationAllData = null; //用于缓存数据
var NetElementOrProvAllData = null; //用于缓存数据
var dataAll = [];
var outlierData = [];
var netElementOrProvinceOutlierData = [];
var boxplotDetailData = [];
var provinceList = "0";
var businessList = "0";
var keyLinkList = "0";
var keyLinkOneId = "0";
var minValue = 0.01;
var granularityValue = 60;
var lMaxDate = null;
var lMinDate = null;
var netMaxDate = null;
var netMinDate = null;
function check() {
	  if(getProvinceCheckedValuesIdString() == "" || getProvinceCheckedValuesIdString() == null){
	  }else{
	  		 provinceList = getProvinceCheckedValuesIdString();
	  }
	  if(getKeyBusinessCheckedValuesIdString() == "" || getKeyBusinessCheckedValuesIdString() == null){
	  }else{
	  		 businessList = getKeyBusinessCheckedValuesIdString();
	  }
	  if(getKeyLinkCheckedValuesIdString() == "" || getKeyLinkCheckedValuesIdString() == null){
	  }else{
	  		 keyLinkList = getKeyLinkCheckedValuesIdString();
	  }
	  if(getMinValue() == "" || getMinValue() == null){}else{
	  	minValue = getMinValue();
	  }
}

function keyLink1() {
	TimeFrameTagReset();
	$('#busSpan').html($('#li1').html());
	$('#a_tab1').click();
	outlierData = [];
	$("#boxplot").html("");
	 $("#circleDiv").html("");
	 $('#iframe1').parent().parent().find('.loading').fadeIn("fast"); //出现loading图片
	$("#iframe1").attr("src", keyLink11+"&ProvinceTag="+$('#provinceLabel1').text()+"&startPeriodTag="+$('#periodLabel1').text().split(",")[0]+"&endPeriodTag="+$('#periodLabel1').text().split(",")[1]+"&TimeTag="+$('#timeLabel1').text()+"&KeyBusinessTag="+$('#keyBusinessLabel1').text());
	$("#iframe2").attr("src", keyLink12+"&ProvinceTag="+$('#provinceLabel1').text()+"&startPeriodTag="+$('#periodLabel1').text().split(",")[0]+"&endPeriodTag="+$('#periodLabel1').text().split(",")[1]+"&TimeTag="+$('#timeLabel1').text()+"&KeyBusinessTag="+$('#keyBusinessLabel1').text()+"&KeyLinkTag="+$('#keyLinkLabel1').text());
	 $("#circleDiv").parent().parent().find('.loading').fadeIn("fast"); //出现loading图片
	//svgVirBarChart(getPeriodString(),getTimeValue(),provinceList,businessList,keyLinkList,minValue);
	svgVirBarChart($('#periodLabel1').text(),$('#timeLabel1').text(),$('#provinceLabel1').text(),$('#keyBusinessLabel1').text(),$('#keyLinkLabel1').text(),$('#minValueLabel1').text());
	setTimeout(function (){
       $('#iframe1').load( function(){ 
          $('#iframe1').parent().parent().find('.loading').fadeOut("fast"); //隐藏loading图片
        });
    },300);
}

function businessTwo() {
	$('#busSpan').html($('#li2').html());
	$('#a_tab2').click();
	dataAll = [];
	$("#LocationProblem").html("");
	$('#LocationProblem').parent().find('.loading').fadeIn("fast"); //出现loading图片
	if(LocationAllData == null){
		locationProblem(getAnalysisTypeValue(),getPeriodString(),getTimeValue(),provinceList,businessList,keyLinkList,granularityValue,minValue);
	   // locationProblem($('#analysisTypeLabel1').text(),$('#periodLabel1').text(),$('#timeLabel1').text(),$('#provinceLabel1').text(),$('#keyBusinessLabel1').text(),$('#keyLinkLabel1').text(),$('#granularityLabel1').text(),$('#minValueLabel1').text());
	}else{
		dropPIC(LocationAllData);
	}
}

function Relation() {
	$('#busSpan').html($('#li3').html());
	$('#a_tab3').click();
	dataAll = [];
	$("#relational").html("");
	$('#relational').parent().find('.loading').fadeIn("fast"); //出现loading图片
	if(RelationAllData == null){
		Relational(getAnalysisTypeValue(),getPeriodString(),getTimeValue(),provinceList,businessList,keyLinkList,granularityValue,minValue);
	    //Relational($('#analysisTypeLabel1').text(),$('#periodLabel1').text(),$('#timeLabel1').text(),$('#provinceLabel1').text(),$('#keyBusinessLabel1').text(),$('#keyLinkLabel1').text(),$('#granularityLabel1').text(),$('#minValueLabel1').text());
	}else{
		relationDrowPic(RelationAllData);
	}
}

function NetOrProvinceBox() {
	TimeFrameTagReset2();
	$('#busSpan').html($('#li4').html());
	$('#a_tab4').click();
	netElementOrProvinceOutlierData = [];
	$("#NetElementOrProvinceBoxplot").html("");
	$("#NetElementOrProvincecircleDiv").html("");
	$('#NetElementOrProvinceBoxplot').parent().find('.loading').fadeIn("fast"); //出现loading图片
	if(NetElementOrProvAllData == null){
	  NetElementOrProvinceBoxplotChart(getAnalysisTypeValue(),getPeriodString(),getTimeValue(),provinceList,businessList,keyLinkList,minValue);
	  //NetElementOrProvinceBoxplotChart($('#analysisTypeLabel1').text(),$('#periodLabel1').text(),$('#timeLabel1').text(),$('#provinceLabel1').text(),$('#keyBusinessLabel1').text(),$('#keyLinkLabel1').text(),$('#minValueLabel1').text());
	}else{
		netOrProvDrowPic(NetElementOrProvAllData);
	}

}


//导出报表
   $(".exportData").click(function(){
    if($('#busSpan').html() == $('#li1').html()){
            var srcArr=new Array();
            canvg('canvas',$("#boxplot").html());
            var img = document.getElementById("canvas").toDataURL("image/png");
            $("#export").append('<input type="hidden" id="pngsrc0" name="pngsrc0" value="">');
             $("#pngsrc0").val(img);
             canvg('canvas',$("#circleDiv").html());
             var img = document.getElementById("canvas").toDataURL("image/png");
            $("#export").append('<input type="hidden" id="pngsrc1" name="pngsrc1" value="">');
             $("#pngsrc1").val(img);
              var piclen=2;
             var picArr = new Array();
          $("#keyLink1").find("iframe").each(function(){
            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:"+picStr); 
      }else if($('#busSpan').html() == $('#li2').html()){
		         var svgsrcs=$("#LocationProblem").html();
		         var srcArr=new Array();
		         srcArr=svgsrcs.split("</svg>");
		         $("#export").append("");
		         for(var i=0;i<srcArr.length-1;i++){
		             canvg('canvas',srcArr[i]+"</svg>");
		             var img = document.getElementById("canvas").toDataURL("image/png");
		             console.log("i:"+i);
		             $("#export").append('<input type="hidden" id="pngsrc'+i+'" name="pngsrc'+i+'" value="">');
		             $("#pngsrc"+i).val(img);
		          }
		          var piclen=srcArr.length-1;
		          var picStr = 0;
		   }else if($('#busSpan').html() == $('#li3').html()){
		          var svgsrcs=$("#relational").html();
		         var srcArr=new Array();
		          srcArr=svgsrcs.split("</svg>");
		          $("#export").append("");
		          for(var i=0;i<srcArr.length-1;i++){
		             canvg('canvas',srcArr[i]+"</svg>");
		             var img = document.getElementById("canvas").toDataURL("image/png");
		            $("#export").append('<input type="hidden" id="pngsrc'+i+'" name="pngsrc'+i+'" value="">');
		             $("#pngsrc"+i).val(img);
		          }
		          var piclen=srcArr.length-1;
		           var picStr = 0;
		   } else if($('#busSpan').html() == $('#li4').html()){
		          var srcArr=new Array();
		          canvg('canvas',$("#NetElementOrProvinceBoxplot").html());
		          var img = document.getElementById("canvas").toDataURL("image/png");
		          $("#export").append('<input type="hidden" id="pngsrc0" name="pngsrc0" value="">');
		          $("#pngsrc0").val(img);
		          canvg('canvas',$("#NetElementOrProvincecircleDiv").html());
		          var img = document.getElementById("canvas").toDataURL("image/png");
		          $("#export").append('<input type="hidden" id="pngsrc1" name="pngsrc1" value="">');
		          $("#pngsrc1").val(img);
		          var piclen=2;
		          var picStr = 0;
		      }
		      
		         $.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 () {
		                    
		                           var listForm=$("#export");
		                           listForm.attr("action","${ctx}/MonitorOperation/KeyLinkProcessAnalysis/"+$('input[name="expradio"]:checked').val()+"?piclen="+piclen+"&picStr="+picStr+"&title="+$('#busSpan').html());
		                           //$.alert($('input[name="expradio"]:checked').val()+"导出还未完成,谢谢测试");
		                           listForm.submit();
		                           listForm.attr("action","#");
		                    }  
		                },{
		                    value: "取消",
		                    callback: function () {}  
		                }], 
		            lock: false
		        });      
    
          //导出svg矢量图    start
        /*    canvg('canvas', $("#LocationProblem").html());
           console.log("111111111");
           var img1 = canvas.toDataURL("image/png");
            console.log("222222");
           console.log(img1);
           $("#pngsrc").val(img1); //转化成的图片存入pngsrc中
           console.log("TEST");
           //导出svg矢量图   end    
           
          //alert($("#tab"+temi).find("img").length);
          var picArr = new Array();
          $("#keyLink1").find("iframe").each(function(){
            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(",");
        $.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/ServiceFeature/"+$('input[name="expradio"]:checked').val()+"?picStr="+picStr);
                           listForm.submit();
                           listForm.attr("action","#");
                    }  
                },{
                    value: "取消",
                    callback: function () {}  
                }], 
            lock: false
        });     */
    });      
    

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