<%@ 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>
<%--<li><a href="${ctx}/MonitorOperation/FlowMonitor">实体厅流量监测分析</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>