<%@ 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>
<!-- js文件的顺序不能放错，不然会找不到函数 -->
<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/pzxDetailBoxplot.js"></script>
<script type="text/javascript" src="${ctx}/static/js/canvg.js"></script>
<script type="text/javascript"src="${ctx}/static/js/modernizr.custom.js"></script>
<style type="text/css">
/*test折线图样式控制 */
.dygraph-axis-label-x{
/* color:red; */
transform: rotate(-90deg);
height:50px;
}
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 class="active"><a id="profile" href="#profile" data-toggle="tab">明细分析</a> </li>
<li><a id="a_profile3" href="${ctx}/AnalysisSupport/PzxAttributeDetail">属性明细分析</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:PzxTypeRelationTag />
<tags:PZX_Ifkey />
<tags:PZX_CycleTag />
<tags:PZX_Multiple_Province />
<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="IfKeyTag" class="label label-info" data-placement="bottom">是否关键（全部）</span>
<span id="ProvinceTag" 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="RelationTag" 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>
</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">
<div class="col-xs-12">
<div class="panel panel-default" >
<div class="panel-heading">配置项明细分析
</div>
<div class="panel-body">
<div id="boxplot1"> </div>
</div>
</div>
<input type="hidden" id="pzxDetailJsonId" value='${PzxDetailJson}'>
</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">
//筛选项初始化 |Add by Eric
var index=0;
initDateStats();
$(function(){
var ifKey="'1'";
var relation="1,2";
var period=getStatsPeriodStr();
var provinces="1,";
for(var i=2;i<32;i++){
if(i==31){
provinces+=i;
}else{
provinces+=i+",";
}
}
var pzxType="1,";
for(var i=2;i<35;i++){
if(i==34){
pzxType+=i;
}else{
pzxType+=i+",";
}
}
var jsonData=document.getElementById("pzxDetailJsonId").value;
// for(var i=0;i<3;i++){
// alert(jsonData);
var pzxtitle="全国";
svgVirBarChart(jsonData,pzxtitle,period,ifKey,provinces,pzxType,relation,1);
/* console.log($("#boxplot1").html());
canvg('canvas',$("#boxplot1").html());
var img = canvas.toDataURL("image/png");
//alert(img);
console.log(img);
$("#pngsrc"+0).val(img);
//alert($("#pngsrc"+0).val()); */
$("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(getpzxClassCheckedValues().length==0){
$.alert("配置项类别为空，请重新选择！");
}
else if(getpzxTypeCheckedValues2().length==0){
$.alert("配置项类别子类为空，请重新选择！");
}else if(getpzxRelationCheckedValues2().length==0){
$.alert("配置关系为空，请重新选择！");
}else{
$("#boxplot1").empty();
index=1;
toggleMenu("slidePushMenus");
//时间筛选项
$('#PeriodTag').text("时间范围").tooltip({title:getStatsPeriodStr()});
//省份标签
$('#ProvinceTag').text("省份").append($("<span class='badge'></span>").text(getProvinceCheckedValues().length)).attr('data-original-title',getProvinceCheckedTitles()).tooltip();
//配置项类别
$('#ClassTag').text("配置类别").append($("<span class='badge'></span>").text(getpzxClassCheckedValues().length)).attr('data-original-title',getpzxClassCheckedTitles2()).tooltip();
$('#TypeTag').text("配置类别子类").append($("<span class='badge'></span>").text(getpzxTypeCheckedValues2().length)).attr('data-original-title',getpzxTypeCheckedTitles2()).tooltip();
//配置关系
$('#RelationTag').text("配置关系").append($("<span class='badge'></span>").text(getpzxRelationCheckedValues2().length)).attr('data-original-title',getpzxRelationCheckedTitles2()).tooltip();
$('#IfKeyTag').text("是否关键").attr('data-original-title',getIfKeyTitle()).tooltip();
$('#CycleTag').text("时间间隔").attr('data-original-title',getCycleTitle()).tooltip();
$('#MultipleProTag').text(getMultipleTitle());
var ifKey="'1'";
var len=getProvinceCheckedValues().length;
if(len==32){
len=31;
}
var CycleTag=getCycle();
if(getMultiplePro()=="0"){
var data=1;
var provincechecked="";
svgVirBarChart(data,provincechecked,getStatsPeriodStr(),getIfkey().replace(/\'/g,""),getProvinceCheckedValuesString(),getpzxTypeCheckedValuesString2(),getpzxRelationCheckedValuesString2(),CycleTag);
}else{
if(len<32){
for(var i=0;i<getProvinceCheckedValues().length;i++){
if(getProvinceCheckedValues()[i]>0){
var provincechecked=getProvinceCheckedValuesTitle()[i];
var data=1;
svgVirBarChart(data,provincechecked,getStatsPeriodStr(),getIfkey().replace(/\'/g,""),getProvinceCheckedValues()[i],getpzxTypeCheckedValuesString2(),getpzxRelationCheckedValuesString2(),CycleTag);
}
}
$("canvas").hide();
}else{
$.alert("所选的组合超过了31个，请重新选择!");
}
}
}
});
});
function reset() {
initDateStats();
ProvinceReset();
resetRelationType();
$('#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>");
//var allimg="";
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);
// allimg+=img;
console.log(srcArr[i]+"</svg>");
}
//alert(allimg.length);
//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 () {
//alert(picStr);
//alert($('input[name="expradio"]:checked').val());
var listForm=$("#export");
listForm.attr("action","${ctx}/AnalysisSupport/PzxDetail/"+$('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>