<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<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">
<style>h3{font-size: 15px;}</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 class="active"><a id="a_statistics" href="#analysis" data-toggle="tab">故障统计</a></li>
<li><a id="a_detail" href="${ctx}/MonitorOperation/FailureAnalysisDetail">故障明细</a></li>
<li><a id="a_refer" href="${ctx}/MonitorOperation/FailureAnalysisXcd" >故障维护</a></li>
</ul>
</div>
<div class="section">
<div class="tab-content">
<!-- ---------------------------------------------------------------------- 故障统计 -------------- ------------------------------------------------ -->
<div class="tab-pane fade in active" id="analysis">
<div class="row me-row">
<div style="display:none;"><!-- 隐藏Tab|二级Tab跳转 -->
<a id="a_tab1" href="#tab1"data-toggle="tab"></a>
<!-- <a id="a_tab2" href="#tab2" data-toggle="tab"></a> -->
</div>
<!-- slide Push Menus -->
<div id="slidePushMenus" class="cbp-spmenu-push">
<!-- 筛选项内容 -->
<div class="slideMenu" id="cbp-spmenu-s1" style="min-height:540px;" data-placement='right' ><!-- data-title="温馨提示" data-trigger='hover' onclick="Note(Check())" -->
<div class="form">
<tags:GZFX_StatTag/>
<tags:GZFX_Period_stats/>
<tags:GZFX_stats_datasource_channle_business/>
<tags:GZFX_Provider_Province_stats/>
<tags:GZFX_WarningSource_stats/>
<button type="button" class="btn btn-primary" onclick="statsSubmit()">提交</button>
<button class="btn btn-warning" onclick="statsReset()">重置</button>
</div>
</div>
<!-- /筛选项内容 -->
<div class="main col-xs-12"><!-- this is for emulating position fixed of the nav -->
<div id="mainm" class="mainm"></div>
<!-- Top Navigation -->
<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 id="defaultTag" class="slide-menu-tags">
<span id="statsStatDimTag" class="label label-info" data-placement="bottom"></span>
<span id="statsChartTypeTag" class="label label-info" data-placement="bottom"></span>
<span id="statsPeriodTag" class="label label-info" data-placement="bottom">最近一个月</span>
<span id="statsProvinceTag" class="label label-info" data-placement="bottom">全国</span>
<span id="statsDataSourceTag" class="label label-info" data-placement="bottom"></span>
<span id="statsChannelTag" class="label label-info" data-placement="bottom"></span>
<span id="statsBusinessTag" class="label label-info" data-placement="bottom"></span>
<span id="statsWarningSourceTag" class="label label-info" data-placement="bottom"></span>
<span id="statsProviderTag" class="label label-info" data-placement="bottom">所有集成商</span>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div class="row">
<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="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
故障统计分析
</div>
<div class="panel-body">
<div name="loading" class="loading"><img src="${ctx}/static/images/loading.gif"/></div>
<iframe id="gzIframe" name="gzIframe" style="height:250px;" scrolling="no" src="${biserver_config}&path=MonitorOperation/FailureAnalysis/&action=gzfx_enter.xaction&height=165&width=790&driEnable=true&driLink=entryToDetail"></iframe>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">集成商故障占比分析</div>
<div class="panel-body">
<div name="loading" class="loading"><img src="${ctx}/static/images/loading.gif"/></div>
<iframe id="gzIframe1" name="gzIframe1" style="height:250px;" scrolling="no" src="${biserver_config}&path=MonitorOperation/FailureAnalysis&action=gzfx_enter.xaction&source=ProviderCount&height=165&width=375&driEnable=true&driLink=providerToDetail"></iframe>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
故障变化趋势
<!-- <div class="btn-group btn-group-cog" style="">
<button type="button" id="largeRep" class="btn btn-default dropdown-toggle btn-control-cog">
<span class="glyphicon glyphicon-zoom-in"></span>
</button>
</div> -->
</div>
<div class="panel-body" >
<div id="lineChartDiv" style="height:250px;width:495px;"></div>
<image id="imgExport2" style="height:240px; width:500px;display:none;" />
</div>
</div>
<canvas id="canvas" ></canvas>
</div>
</div>
<form id='pnForm' action='${ctx}/MonitorOperation/FailureAnalysisDetail' method='get' target='_blank'><input type='hidden' name="provinceId"/></form>
<form id='pdForm' action='${ctx}/MonitorOperation/FailureAnalysisDetail' method='get' target='_blank'><input type='hidden' name="providerId"/></form>
<form id='tForm' action='${ctx}/MonitorOperation/FailureAnalysisDetail' method='get' target='_blank'><input type='hidden' name="dateVal"/></form>
<form id="mulForm" action="${ctx}/MonitorOperation/FailureAnalysisDetail" method="post" target="_blank">
<input type="hidden" id="mulPeriodTag" name="timeTag" />
<input type="hidden" id="mulWarningSourceTag" name="warningSourceTag" />
<input type="hidden" id="mulDataSourceTag" name="dataSourceTag"/>
<input type="hidden" id="mulChannelTag" name="channelTag" />
<input type="hidden" id="mulBusinessTag" name="businessTag" />
<input type="hidden" id="mulProvinceTag" name="provinceTag" />
<input type="hidden" id="mulProviderTag" name="providerTag" />
</form>
</div>
</div>
</div><!-- /scroller -->
</div><!-- /slide Push Menus -->
</div>
</div>
</div>
</div>
<form id="export" action="#" method="post">
<input type="hidden" id="imagesrc" name="imagesrc" value="">
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="${ctx}/static/js/dygraph-combined2.js"></script>
<script type="text/javascript" src="${ctx}/static/js/dygraph-extra.js"></script>
<script type="text/javascript" src="${ctx}/static/js/canvg.js"></script>
<script type="text/javascript">
var clickxdata;
var lineChartSrc;
var isIndex = true;
$.ajax({
type : "GET",
dataType: "text",
url: "${ctx}/MonitorOperation/FailureAnalysis/lineChartChange",
async: false,
beforeSend: function(){},
success: function(data){
var csvdata="日期:,故障数";
for(var i=0;i<data.length;i++){
if(data[i]=='\"'){
data=data.replace('\"','\'');
}
}
data=eval("("+data+")");//获取从后台返回的数据,通常是Json格式
for(var j=0;j<data.length;j++){
if(j%2==0){
csvdata+="\n"+data[j];
}else{
csvdata+=","+data[j];
}
}
g = new Dygraph(document.getElementById("lineChartDiv"),
csvdata,
{
legend: 'always',
labelsDivStyles: {
}
}
);
Dygraph.Export.asPNG(g, imgExport2);
$('#imgExport2').hide();
// $('#imgExport2').show();
lineChartSrc=$("#imgExport2").attr("src");
$("#imagesrc").val(lineChartSrc);
isIndex = true;
}
});
</script>
<script type="text/javascript">
//窗口自适应
$(function(){
/*for(var i=0; i<document.getElementsByTagName('iframe').length;i++){
if(document.getElementsByTagName('iframe')[i].parentNode.getElementsByTagName('div').length>0){
document.getElementsByTagName('iframe')[i].parentNode.getElementsByTagName('div')[0].style.display="inherit";
document.getElementsByTagName('iframe')[i].onload = function(){this.parentNode.getElementsByTagName('div')[0].style.display="none";};
}
} */
//tab1部分刷新
for(var i=0;i<$('#tab1 iframe').length;i++){
if($('#tab1 iframe').eq(i).parent().find('.loading').length>0){
$('#tab1 iframe').eq(i).parent().find('.loading').fadeIn("fast"); //显现loading图片
$('#tab1 iframe').eq(i).load( function(){
$(this).parent().find('.loading').fadeOut("fast"); //隐藏loading图片
});
}
}
$("#businessSelectAreaStats").hide();
initDateStats();
});
</script>
<script type="text/javascript">
//回到默认页面
function backToTabOne(){
$("#a_tab1").click();
$("#defaultTag").show();
}
</script>
<!-- 提交stats中的筛选项 -->
<script type="text/javascript">
//筛选项提交
function statsSubmit(){
var datasourceSum = getStatsDataSourceCheckedValues().length;
var channelSum = getStatsChannelCheckedValues().length;
var businessSum = getStatsBusinessCheckedValues().length;
var provinceSum = getStatsProvinceCheckedValues().length;
var providerSum = getStatsProviderCheckedValues().length;
var warningSourceSum = getStatsWarningSourceCheckedValues().length;
if(datasourceSum==0){ $.alert('数据来源选择不能为空！');}
else if(channelSum==0){ $.alert('渠道选择不能为空！'); }
else if(businessSum==0){ $.alert('业务选择不能为空！'); }
else if(provinceSum==0){ $.alert('省份选择不能为空！'); }
else if(providerSum==0){ $.alert('集成商选择不能为空！'); }
else if(warningSourceSum==0){ $.alert('故障来源选择不能为空！'); }
else {
$("#mulPeriodTag").attr("value",getStatsPeriodStr());
$("#mulWarningSourceTag").attr("value",getStatsWarningSourceValue());
$("#mulDataSourceTag").attr("value",getStatsDataSourceCheckedValuesString());
$("#mulChannelTag").attr("value",getStatsChannelCheckedValuesString());
$("#mulBusinessTag").attr("value",getStatsBusinessCheckedValuesString());
$("#mulProvinceTag").attr("value",getStatsProvinceCheckedValuesString());
$("#mulProviderTag").attr("value",getStatsProviderCheckedValuesString());
$("#gzIframe").empty();
$("#gzIframe1").empty();
gzfx_bar = "${biserver_config}&path=MonitorOperation/FailureAnalysis&action=gzfx_stats_criteria.xaction&height=165&width=790&ChartTypeTag=BarChart&driEnable=true&driLink=barDrill¶m='stat'&StatDimTag="+ getStatDimCheckedValue()
+"&WarningSourceTag="+getStatsWarningSourceValue()
+"&PeriodTag="+getStatsPeriodStr()
+"&DataSourceTag="+getStatsDataSourceCheckedValuesString()
+"&ChannelTag="+getStatsChannelCheckedValuesString()
+"&BusinessTag="+getStatsBusinessCheckedValues()
+"&ProvinceTag="+getStatsProvinceCheckedValuesString()
+"&ProviderTag="+getStatsProviderCheckedValuesString();
gzfx_pie = "${biserver_config}&path=MonitorOperation/FailureAnalysis&action=gzfx_stats_criteria.xaction&height=165&width=375&ChartTypeTag=PieChart&driEnable=true&driLink=barDrill¶m='pie'&StatDimTag=dim_provider_info_t"
+"&WarningSourceTag="+getStatsWarningSourceValue()
+"&PeriodTag="+getStatsPeriodStr()
+"&DataSourceTag="+getStatsDataSourceCheckedValuesString()
+"&ChannelTag="+getStatsChannelCheckedValuesString()
+"&BusinessTag="+getStatsBusinessCheckedValues()
+"&ProvinceTag="+getStatsProvinceCheckedValuesString()
+"&ProviderTag="+getStatsProviderCheckedValuesString();
console.log("gzfx_bar="+gzfx_bar);
console.log("getStatsWarningSourceValue()="+getStatsWarningSourceValue());
console.log("getStatsWarningSourceValue.length="+getStatsWarningSourceValue().length);
console.log("failure exist="+getStatsWarningSourceValue().indexOf("extendFailure"));
console.log("xcd exist="+getStatsWarningSourceValue().indexOf("extendXcd"));
$('#chart').parent().find('.loading').fadeIn("fast");
$.ajax({
type : "GET",
dataType: "text",
url: "${ctx}/MonitorOperation/FailureAnalysis/lineChartChange?WarningSourceTag="+getStatsWarningSourceValue()
+"&PeriodTag="+getStatsPeriodStr()
+"&DataSourceTag="+getStatsDataSourceCheckedValuesString()
+"&ChannelTag="+getStatsChannelCheckedValuesString()
+"&BusinessTag="+getStatsBusinessCheckedValues()
+"&ProvinceTag="+getStatsProvinceCheckedValuesString()
+"&ProviderTag="+getStatsProviderCheckedValuesString(),
async: false,
beforeSend: function(){},
success: function(data){
isIndex = false;
var csvdata="日期:,故障数";
for(var i=0;i<data.length;i++){
if(data[i]=='\"'){
data=data.replace('\"','\'');
}
}
data=eval("("+data+")");//获取从后台返回的数据,通常是Json格式
// isDetail = false;
for(var j=0;j<data.length;j++){
if(j%2==0){
csvdata+="\n"+data[j];
}else{
csvdata+=","+data[j];
}
}
g = new Dygraph(document.getElementById("lineChartDiv"),
csvdata,
{
legend: 'always',
labelsDivStyles: {
}
}
);
Dygraph.Export.asPNG(g, imgExport2);
$('#imgExport2').hide();
// $('#imgExport2').show();
lineChartSrc=$("#imgExport2").attr("src");
$("#imagesrc").val(lineChartSrc);
}
});
$('#gzIframe').parent().find('.loading').fadeIn("fast"); //显现loading图片
$('#gzIframe').load( function(){
$('#gzIframe').parent().find('.loading').fadeOut("fast"); //隐藏loading图片
});
$("#gzIframe").attr("src",gzfx_bar);
$('#gzIframe1').parent().find('.loading').fadeIn("fast"); //显现loading图片
$('#gzIframe1').load( function(){
$('#gzIframe1').parent().find('.loading').fadeOut("fast"); //隐藏loading图片
});
$("#gzIframe1").attr("src",gzfx_pie);
//筛选项标签
$("#statsWarningSourceTag").text('故障来源').append($("<span class='badge'></span>").text(getStatsWarningSourceCheckedValues().length)).attr('data-original-title',getStatsWaringSourceCheckedTitles()).tooltip();
$("#statsPeriodTag").text((getStatsPeriodStr()=="")?"最近一个月":"时间范围").attr('data-original-title',getStatsPeriodStr()).tooltip();
//数据来源刷选项
$('#statsDataSourceTag').text('数据来源').append($("<span class='badge'></span>").text(getStatsDataSourceCheckedTexts().length)).attr('data-original-title',getStatsDataSourceCheckedTitles()).tooltip();
//渠道刷选项
$('#statsChannelTag').text('渠道').append($("<span class='badge'></span>").text(getStatsChannelCheckedValues().length)).attr('data-original-title',getStatsChannelCheckedTitles()).tooltip();
//业务刷选项
$('#statsBusinessTag').text('业务').append($("<span class='badge'></span>").text(getStatsBusinessCheckedValues().length)).attr('data-original-title',getStatsBusinessCheckedTitlesString()).tooltip();
//省份筛选项
$('#statsProvinceTag').text('省份').append($("<span class='badge'></span>").text(getStatsProvinceCheckedValues().length)).attr('data-original-title',getStatsProvinceCheckedTitles()).tooltip();
//集成商筛选项
$('#statsProviderTag').text('集成商').append($("<span class='badge'></span>").text(getStatsProviderCheckedValues().length)).attr('data-original-title',getStatsProviderCheckedTitles()).tooltip();
//隐藏筛选项
toggleMenu('slidePushMenus');
}
}
//定义折线图的钻取时间
$("#lineChartDiv").mousedown(function(){
if(isIndex){
timeToDetail(clickxdata);
}else{
barDrill(clickxdata,"time");
}
});
//重置stats中的筛选项
function statsReset(){
$("#gzfx_statdim option[value='']").attr("selected","selected");
initDateStats();
statsDataSourceReset();
//statsProvinceReset();
statsProviderReset();
statsWarningSourceReset();
//$("#Statswarningsources option[value='']").attr("selected","selected");
}
//首页柱状图的钻取
function entryToDetail(provinceName){
var provinceId = $(".provinceStats[title='"+provinceName+"']").val();
$('#pnForm input').val(provinceId);
$('#pnForm').submit();
}
//首页饼图的钻取
function providerToDetail(providerName){
var providerId = $(".providerStats[title='"+providerName+"']").val();
$('#pdForm input').val(providerId);
$('#pdForm').submit();
}
//时间的钻取 首页
function timeToDetail(eletTime){
$('#tForm input').val(eletTime);
$('#tForm').submit();
}
//多图报表的钻取
//柱状图的钻取
function barDrill(clickTag,paramVal){
statDim = getStatDimCheckedValue();
if(paramVal=="pie"){
statDim = "dim_provider_info_t";
}else if(paramVal=="time"){
statDim = "time";
}
if(statDim==''||statDim=="dim_province_info_t"){
var temp = $("#mulProvinceTag").val();
var provinceId = $(".provinceStats[title='"+clickTag+"']").val();
$("#mulProvinceTag").attr("value",provinceId);
$("#mulForm").submit();
$("#mulProvinceTag").attr("value",temp);
}else if(statDim=="dim_data_source_info_t"){
var temp = $("#mulDataSourceTag").val();
var dataSourceId = $(".datasourceStats[title='"+clickTag+"']").val();
$("#mulDataSourceTag").attr("value",dataSourceId);
$("#mulForm").submit();
$("#mulDataSourceTag").attr("value",temp);
}else if(statDim=="dim_channel_info_t"){
var temp = $("#mulChannelTag").val();
var channelId = $(".channelStats[title='"+clickTag+"']").val();
$("#mulChannelTag").attr("value",channelId);
$("#mulForm").submit();
$("#mulChannelTag").attr("value",temp);
}else if(statDim=="dim_provider_info_t"){
var temp = $("#mulProviderTag").val();
var providerId = $(".providerStats[title='"+clickTag+"']").val();
$("#mulProviderTag").attr("value",providerId);
$("#mulForm").submit();
$("#mulProviderTag").attr("value",temp);
}else if(statDim=="dim_warning_source_info_t"){
var temp = $("#mulWarningSourceTag").val();
var warningSourceId = $(".warningsourceStats[title='"+clickTag+"']").val();
$("#mulWarningSourceTag").attr("value",warningSourceId);
$("#mulForm").submit();
$("#mulWarningSourceTag").attr("value",temp);
}else if(statDim=="time"){
var temp = $("#mulPeriodTag").val();
$("#mulPeriodTag").attr("value",clickTag);
$("#mulForm").submit();
$("#mulPeriodTag").attr("value",temp);
}
};
/* //导出报表
$("#exportData").click(function(){
$.dialog({
title: "报表导出",
content: "确定要导出报表？",
button: [{
value: "确定",
callback: function () {
// alert($('input[name="expradio"]:checked').val());
var listForm=$("#export");
listForm.attr("action","${ctx}/MonitorOperation/FailureAnalysis/exportWord");
listForm.submit();
listForm.attr("action","#");
}
},{
value: "取消",
callback: function () {}
}],
lock: false
});
}); */
//导出报表
$(".exportData").click(function(){
var picArr = new Array();
$("#tab1").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 () {
var listForm=$("#export");
listForm.attr("action","${ctx}/MonitorOperation/FailureAnalysis/"+$('input[name="expradio"]:checked').val()+"?picStr="+picStr);
listForm.submit();
listForm.attr("action","#");
}
},{
value: "取消",
callback: function () {}
}],
lock: false
});
});
</script>
</body>
</html>