<%@ 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 lang="en">
  <head>
    
    <title>全网智能监控分析平台</title>
    
	<script type="text/javascript"
	src="${ctx}/static/js/modernizr.custom.js"></script>
  
   
   <script type="text/javascript" src="${ctx}/static/js/d3.v3.min.js"></script>
   <script type="text/javascript" src="${ctx}/static/js/d3.tip.js"></script>
   <script type="text/javascript" src="${ctx}/static/js/pzxBox.js"></script> 
   <script type="text/javascript" src="${ctx}/static/js/pzxAttriDetailBoxplot.js"></script>
<style type="text/css">

div.tooltip1 {
    padding-right: 5px;
	padding-left: 5px;
	z-index: 1000;
	min-height: 1em;
	background-color: #a1d8f7;
	padding-bottom: 5px;
	font: 14px 'Microsoft YaHei', Arial, 宋体, Tahoma, Sans-Serif;
	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;
                }
 #tiplayer { 
	 padding-right: 5px;
	padding-left: 5px;
	z-index: 1000;
	min-height: 1em;
	background-color: #a1d8f7;
	padding-bottom: 5px;
	font: 14px 'Microsoft YaHei', Arial, 宋体, Tahoma, Sans-Serif;
	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;
} 

#show_06 a.large {
	width: 1px;
	height: 1px;
	border: 0px;
	display: block;
	left: -1px;
	top: -1px;
	position: absolute;
}
.bgbg2{background:#fff; text-align:center;padding-left:5px;}	
</style>
  </head>
  
  <body>
    <div id="sticky-wrap"></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 id="main-container main-tab-container">
		<div id="content" class="container">
			<div class="tab-bar-bt">
				<ul class="nav nav-tabs">
					<li ><a id="a_home" href="${ctx}/AnalysisSupport/PzxAnalysis?CurTabId=home#">总领</a> </li>
					<li><a id="a_profile" href="${ctx}/AnalysisSupport/PzxNumCount">数量统计</a> </li> 
					<li ><a id="a_profole1" href="${ctx}/AnalysisSupport/PzxAnalysisLifeCycle">生命周期统计</a> </li> 
					<li ><a id="a_profile2" href="${ctx}/AnalysisSupport/PzxAttribute">属性统计</a> </li>
					<li ><a id="a_profile3" href="${ctx}/AnalysisSupport/PzxDetail" >明细分析</a> </li>
					<li class="active"><a id="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="home">
						<div class="row me-row">

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

								<div class="slideMenu" id="cbp-spmenu-s2" style="">
									<div class="form">
									    <tags:PZX_Detail_Period/>
									    <tags:Public_ProvinceTag />
<!-- 								    <tags:PzxAttriButeTag />     -->	
									    <tags:PzxAttriButeValueTag />
									    <tags:PZX_ChangeState />        <!-- 变更状态 -->
									    <tags:PZX_Ifkey />
									    <tags:PZX_CycleTag />
									    <tags:PZX_Multiple_Province />
<!--  										<button id="submit2" class="btn btn-primary" >提交0</button>   -->
										<button id="submit" class="btn btn-primary" >提交</button>
										<button type="button" class="btn btn-warning" onclick="reset()">重置</button>
									</div>
								</div>

								<div class="main col-xs-12">
									<div id="mainm" class="mainm"></div>

									<div class="content clearfix">
										<div class="block clearfix">
											<button id="showLeftPush"
												class="menu-trigger btn btn-default"  onclick="toggleMenu('slidePushMenus')">
												<span class="glyphicon glyphicon-list"></span>
											</button>
											<div class="slide-menu-tags">
												
										
												<span id="PeriodTag" class="label label-info" data-placement="bottom">最近一年</span> 
												<span id="ClassTag" class="label label-info" data-placement="bottom" >系统硬件</span>
												<span id="TypeTag" class="label label-info" data-placement="bottom">小型机</span>
												<span id="AttributeTag" class="label label-info" data-placement="bottom">厂商</span>
												<span id="ProvinceTag" class="label label-info" data-placement="bottom">全国</span>
												<span id="AttributeValueTag" class="label label-info" data-placement="bottom"></span>
												<span id="IfKeyTag" class="label label-info" data-placement="bottom">是否关键(全部)</span>
												<span id="CycleTag" class="label label-info" data-placement="bottom">时间间隔(月)</span>
												<span id="MultipleProTag" class="label label-info" data-placement="bottom">单图</span>
												<span id="blank" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
												
											</div>
											<div class="bt-list-import">
												<a href="#" id="upload" class=""> <span
													class="glyphicon glyphicon-import"></span> <span
													class="glyphicon-class">导出报表</span> </a>
											</div>
										</div>

										<div class="row" id="row">
											<div class="col-xs-12">
											  <div class="panel panel-default" >
												<div class="panel-heading">配置属性明细分析
												    <div id="time_div" class="btn-group btn-group-cog"style=""></div>
												</div>
												<div class="panel-body">
												     
												       <div id="boxplot1" ></div>
												       
												  <input type="hidden" id="pzxAttriDetailJsonId" value='${PzxAttriDetailJson}'> 
											    
											     </div>
											   </div>                   
											
											</div>
										</div>
									</div>
								</div>
								<!-- /scroller-inner -->
							</div>
						</div>
					</div>
				  <canvas id="canvas"></canvas>
	               <form id="export" action="#" method="post">
	               <input type="hidden" id="pngsrc0" name="pngsrc0" value="">
	               <input type="hidden" id="pngsrc1" name="pngsrc1" value="">
	               <input type="hidden" id="pngsrc2" name="pngsrc2" value="">
	               <input type="hidden" id="pngsrc3" name="pngsrc3" value="">
	               <input type="hidden" id="pngsrc4" name="pngsrc4" value="">
	               <input type="hidden" id="pngsrc5" name="pngsrc5" value="">
	               <input type="hidden" id="pngsrc6" name="pngsrc6" value="">
	               <input type="hidden" id="pngsrc7" name="pngsrc7" value="">
	               <input type="hidden" id="pngsrc8" name="pngsrc8" value="">
	               <input type="hidden" id="pngsrc9" name="pngsrc9" value="">
	               <input type="hidden" id="pngsrc10" name="pngsr10c" value="">
	               <input type="hidden" id="pngsrc11" name="pngsrc11" value="">
	               <input type="hidden" id="pngsrc12" name="pngsrc12" value="">
	               <input type="hidden" id="pngsrc13" name="pngsrc13" value="">
	               <input type="hidden" id="pngsrc14" name="pngsrc14" value="">
	               <input type="hidden" id="pngsrc15" name="pngsrc15" value="">
	               <input type="hidden" id="pngsrc16" name="pngsrc16" value="">
	               <input type="hidden" id="pngsrc17" name="pngsrc17" value="">
	               <input type="hidden" id="pngsrc18" name="pngsrc18" value="">
	               <input type="hidden" id="pngsrc19" name="pngsrc19" value="">
	               <input type="hidden" id="pngsrc20" name="pngsrc20" value="">
	               <input type="hidden" id="pngsrc21" name="pngsrc21" value="">
	               <input type="hidden" id="pngsrc22" name="pngsrc22" value="">
	               <input type="hidden" id="pngsrc23" name="pngsrc23" value="">
	               <input type="hidden" id="pngsrc24" name="pngsrc24" value="">
	               <input type="hidden" id="pngsrc25" name="pngsrc25" value="">
	               <input type="hidden" id="pngsrc26" name="pngsrc26" value="">
	               <input type="hidden" id="pngsrc27" name="pngsrc27" value="">
	               <input type="hidden" id="pngsrc28" name="pngsrc28" value="">
	               <input type="hidden" id="pngsrc29" name="pngsrc29" value="">
	               <input type="hidden" id="pngsrc30" name="pngsrc30" value="">
	               </form>
			   </div>
			</div>
		</div>
	</div>
<script type="text/javascript" src="${ctx}/static/js/canvg.js"></script>
<script type="text/javascript">
var index=0;
$(function(){
	
	       initDateStats();
	       var period=0;
	       var provinceName="全国";
	       var provinceId=0;
	       var pzxclass="系统硬件";
	       var pzxtype="小型机";
	       var pzxattriName="厂商";
	       var pzxattriId=0;
	       var changeId=0;
           var attributevalue="";
           var ifkey="";
	       var jsonData=document.getElementById("pzxAttriDetailJsonId").value;
         
	       svgVirBarChart(jsonData,period,provinceName,provinceId,pzxclass,pzxtype,pzxattriName,pzxattriId,changeId,attributevalue,ifkey,1);
	       $("canvas").hide();
	   
	});
	
	
	$("#submit").click(function(){
	          if((((new Date(getPeriodStats()[1].replace(/-/g,"\/"))) - (new Date(getPeriodStats()[0].replace(/-/g,"\/"))))/1000/60/60/24)>60&&getCycle()==3){
	              $.alert("时间范围选择太长,只能查询两个月以内数据,请重新选择");
	          }else if(getProvinceCheckedValues().length==0){
	              $.alert("省份为空,请重新选择!");
	           }else if(getAttriValueCheckedValues().length==0){
	             $.alert("配置项属性值为空,请重新选择!");
	           }else{ 
               //时间筛选项
               $('#PeriodTag').text("时间范围").attr('data-original-title',getStatsPeriodStr()).tooltip();
               //省份标签
			   $('#ProvinceTag').text("省份").append($("<span class='badge'></span>").text(getProvinceCheckedValues().length)).attr('data-original-title',getProvinceCheckedTitles()).tooltip();			
			   //配置项类别
			   $('#ClassTag').text(getClassSelectedName());
	           $('#TypeTag').text(getTypeSelectedName());
	           
	             var getattributename="";
	             var checkattri=document.getElementsByName("pzxAttribute2");
                     for(var i=0;i<checkattri.length;i++){
                      if(checkattri[i].checked){
                         getattributename=checkattri[i].title;
                      }
                     }
                  var getattributeid="";
	              var checkattri=document.getElementsByName("pzxAttribute2");
                     for(var i=0;i<checkattri.length;i++){
                      if(checkattri[i].checked){
                         getattributeid=checkattri[i].value;
                      }
                     }  
               //  alert(getattributeid);   
	           //配置项属性
	           $('#AttributeTag').text(getattributename);
	           //配置项属性值标签
			   $('#AttributeValueTag').text("属性值").append($("<span class='badge'></span>").text(getAttriValueCheckedValues().length)).attr('data-original-title',getAttriValueCheckedValuesStringTitles()).tooltip();			
			   $('#IfKeyTag').text("是否关键").attr('data-original-title',getIfKeyTitle()).tooltip();
               $('#CycleTag').text("时间间隔").attr('data-original-title',getCycleTitle()).tooltip(); 
               $('#MultipleProTag').text(getMultipleTitle());
//	    alert(getAttriValueArrayCheckedValuesString());
	     $("#boxplot1").empty();
	     index=1;
	      toggleMenu('slidePushMenus');
	    
	       var len=getProvinceCheckedValues().length;
          if(len==32){
                 len=31;
            }
            var period=getStatsPeriodStr();
            var pzxclass=getClassSelectedName();
            var pzxtype=getTypeSelectedName();
            var changeId=getPzxChangeState();
            var CycleTag=getCycle();
       if(getMultiplePro()=="0"){
          var provinceName="";
          var pzxattriName="";
          var checkattri=document.getElementsByName("pzxAttribute2");
          for(var t=0;t<checkattri.length;t++){
             if(checkattri[t].checked){
                  pzxattriName=checkattri[t].title;
               }
          }
          var provinceId=getProvinceCheckedValuesString();
 
	      var data=1; 
		  svgVirBarChart(data,period,provinceName,provinceId,pzxclass,pzxtype,pzxattriName,getattributeid,changeId,getAttriValueArrayCheckedValuesString(),getIfkey().replace(/\'/g,""),CycleTag);  
       
       }else{
             if(len<32&&len>0){  
             for(var i=0;i<getProvinceCheckedValues().length;i++){
             
                if(getProvinceCheckedValues()[i]>0){
                
 //                   for (var j=0;j<getAttriValueCheckedValues().length;j++){
                          
                          var provinceName=getProvinceCheckedValuesTitle()[i];
                          var pzxattriName="";
                          
                           var checkattri=document.getElementsByName("pzxAttribute2");
                                  for(var t=0;t<checkattri.length;t++){
                                   if(checkattri[t].checked){
                                     pzxattriName=checkattri[t].title;
                                    }
                                   }
                          var provinceId=getProvinceCheckedValues()[i];
//                         var attributevalue=getAttriValueCheckedValues()[j];
 
		                  var data=1; 
		                  svgVirBarChart(data,period,provinceName,provinceId,pzxclass,pzxtype,pzxattriName,getattributeid,changeId,getAttriValueArrayCheckedValuesString(),getIfkey().replace(/\'/g,""),CycleTag);   
//                         alert(i+","+j+","+provinceId+","+attributevalue);
                          
                         
//                      }
                }
              } 
               $("canvas").hide();
           }else if(len==0){
               
               $.alert("省份不能为空,请重新选择!");
           }else if(len*getAttriValueCheckedValues().length==0){
              $.alert("属性值不能为空,请重新选择!");
           }
           else{
               
               $.alert("所选的组合超过了31个,请重新选择!");
           }
          }     
	    }
	});

function reset() {
		initDateStats();
		ProvinceReset();
		resetAttributevalue();
		$('#changeState')[0].selectedIndex = 0;
		$('#ifKey')[0].selectedIndex = 0;
		$('#cycle')[0].selectedIndex = 0;
		$('#multiplepro')[0].selectedIndex = 0;
	}	
$("#upload").click(function(){
       if(index==0||getProvinceCheckedValues().length<10||getMultiplePro()=="0"){
       
         console.log($("#boxplot1").html());
          var svgsrcs=$("#boxplot1").html();
          
          //alert(svgsrcs.split("</svg>").length);
          var srcArr=new Array();
          srcArr=svgsrcs.split("</svg>");
          //alert("转换前:"+srcArr[0]+"</svg>");
          for(var i=0;i<srcArr.length-1;i++){
             
             canvg('canvas',srcArr[i]+"</svg>");
			 var img = document.getElementById("canvas").toDataURL("image/png");
             $("#pngsrc"+i).val(img);
             console.log(srcArr[i]+"</svg>");
          }
          //alert("转换后:"+$("#pngsrc0").val());
          var piclen=srcArr.length-1;
          
        $.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}/AnalysisSupport/PzxAttributeDetail/"+$('input[name="expradio"]:checked').val()+"?piclen="+piclen);
		                   //$.alert($('input[name="expradio"]:checked').val()+"导出还未完成,谢谢测试");
		                   listForm.submit();
		                   listForm.attr("action","#");
			        }  
	        	},{
			        value: "取消",
			        callback: function () {}  
				}], 
			lock: false
		});      
      }else{
         $.alert("报表导出超过10个,请重新选择!");
      }	 
      	 
	 });
	
</script>		
  </body>
</html>