<%@ 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" > </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>