<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="cui" tagdir="/WEB-INF/tags"%>
<%@ page import="java.lang.Integer"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%
 com.cesgroup.cesmonitor.service.LoginUser user=com.cesgroup.cesmonitor.common.Util.getLoginUser();
 Integer myUserId = null;
if(null!=user){
	myUserId = user.getUserid();
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大屏展示2</title>
<link href="screenStyles/screen.css" rel="stylesheet">
</head>
<body>
	<div class="monitor-screen-box">
		<div class="monitor-screen-bg">
			<img src="screen/screen_bg.jpg" width="100%" height="100%">
		</div>
		<div class="monitor-screen-article clearfix">

			<div class="monitor-screen-cell" id="indexcell-1">

				<div class="monitor-screen-cell-area clearfix" id="indexcell-head-1">
					<div class="monitor-screen-cell-mess clearfix">
						<div
							class="monitor-screen-cell-box monitor-message-cell warning-box">
							<span class="refresh iconfont icon-shuaxin"
								onclick="loadAlarmNum();"></span> <span
								class="iconfont icon-guzhangshengji"></span>
							<h2 id="alarmNum"></h2>
							<p>当前故障数量</p>
						</div>

						<div class="monitor-screen-cell-box monitor-message-cell lake-box">
							<span class="refresh iconfont icon-shuaxin"
								onclick="loadAlarmMechine()"></span> <span
								class="iconfont icon-taizhanguzhang"></span>
							<h2 id="alarmMechine"></h2>
							<p>故障状态主机数量</p>
						</div>
					</div>

					<div class="monitor-float" style="width: 61%; margin-bottom: 3%;">
						<div class="monitor-screen-cell-box">
							<div class="monitor-screen-cell-head">
								<h4>当前故障级别</h4>
								<span class="monitor-head-btns"> <span
									class="iconfont icon-shuaxin" onclick="loadPriorityCount()"></span>
								</span>
							</div>
							<div class="monitor-screen-cell-body">
								<div id="container-faultTrend" style="height: 250px"></div>
							</div>
						</div>
					</div>

				</div>


				<div class="monitor-screen-cell-box" id="indexcell-box-1">
					<div class="monitor-screen-cell-head" id="indexcell-box-head-1">
						<h4>故障数量趋势</h4>
						<span class="monitor-head-btns"> <span class="moreswith"
							id="selectCycle" title="选择周期" onClick="selectCycle(this,event);"><span
								id="cycle">一天内</span><label class="iconfont icon-arrow-down"></label></span>
							<span class="iconfont icon-shuaxin" id="refreshCycle"></span>
						</span>
					</div>
					<div class="monitor-screen-cell-body" id="indexcell-body-1">
						<div id="container-trafficAnalysis"></div>
					</div>
				</div>

			</div>
			<!-- 需要修改的刷新 -->
			<div class="monitor-screen-cell" id="indexcell-2">

				<div class="monitor-screen-cell-box" id="indexcell-box-2">
					<div class="monitor-screen-cell-head" id="indexcell-head-2">
						<h4>当前故障列表</h4>
						<span class="monitor-head-btns"> <span class="moreswith2"
							id="selectNumber" title="选择条数"
							onClick="selectNumber(this,event);"><span>20</span><label
								class=" iconfont icon-arrow-down"></label></span> <span
							class="monitorCls">最小严重级别:</span><span class="moreswith"
							id="filterData" title="筛选数据" onclick="filterData(this,event);"><span>灾难</span><label
								class=" iconfont icon-arrow-down"></label></span> <span
							class="iconfont icon-shuaxin" onclick="refreshPriorityDetail()"></span>
						</span>
					</div>
					<div class="monitor-screen-cell-body" id="indexcell-body-2">
						<div class="monitor-region txtScroll-top2">
							<div class="hd">
								<ul></ul>
								<span class="pageState"></span>
							</div>
							<a class="next iconfont icon-arrow-down"></a> <a
								class="prev iconfont icon-arrow"></a>
								<!--内容  -->
							<div class="bd">
								<ul clas="traffic-list-ul clearfix" id="monitorList"></ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="js/jquery.1.10.1.min.js"></script>
	<script src="js/highcharts.js"></script>
	<script src="js/jquery.SuperSlide.2.1.2.js"></script>
	<script>
var num,priority,xhr;
var interval = 24;
var totalValue = 0;
var monitorListWidth,monitorListRegion,visnumber;
var chartTotal = 0;
var userId = "<%= myUserId %>"
var refreshTime = getUserRefresh();
jQuery(document).ready(function(){
	loadPriorityDetailScreen();
	loadAlarmNum();
	loadAlarmMechine();
	loadPriorityCount();
    initHeight();
	drawAlarmPic(interval);
});

//高度自适应
function initHeight(){
	var indexcelloneheight = $('#indexcell-1').height() - $('#indexcell-head-1').outerHeight();
	var indexcellbodyoneheight = indexcelloneheight - $('#indexcell-box-head-1').outerHeight();
	var indexcellbodytwoheight = $('#indexcell-2').height() - $('#indexcell-head-2').outerHeight();
		monitorListWidth = $('#monitorList').height();
		monitorListRegion = indexcellbodytwoheight;
	$('#indexcell-box-1').height(indexcelloneheight);
 	$('#indexcell-body-1').height(indexcellbodyoneheight);
 	$('#indexcell-body-2').height(indexcellbodytwoheight);
}
$(window).resize(function(){
 	initHeight();
})

var time =  setInterval(function(){
	loadAlarmNum();
	loadAlarmMechine();
	var key = jQuery('#selectCycle_popup li .selected').attr('value');
	if(key == 'year') {
		interval = 12;
	} else if(key == 'month') {
		interval = 30;
	} else{
		interval = 24;
	}
	drawAlarmPic(interval);
	refreshPriorityDetail();
	loadPriorityCount();
},refreshTime);

//更多选择弹出框公共事件
function popup(obj,data){
	var id = jQuery(obj).attr('id');
	var htmlLi= '';
	var left = jQuery(obj).offset().left;
	var top = jQuery(obj).offset().top + 35;
	var html = '<ul class="action-menu action-menu-top" style="left:'+left+'px;top:'+top+'px;" id="'+id+'_popup">'
			+ '</ul>';
	jQuery('body').append(html);
	for (var k=0;k<data.length;k++){
		if(k==0){
			htmlLi += '<li><a class="action-menu-item selected" value="'+data[k].key+'">'+data[k].name+'</a></li>';
		}else{
			htmlLi += '<li><a class="action-menu-item" value="'+data[k].key+'">'+data[k].name+'</a></li>';
		}
		
	}
	jQuery('#' + id + '_popup').html(htmlLi);
}
//popup切换事件
function popupli(obj,event){
	event.stopPropagation();
	jQuery(obj).addClass('selected');
	jQuery(obj).parent().siblings().children('a').removeClass('selected');
	var id = jQuery(obj).parents('ul').attr('id');
	var newId = id.split("_");
	var parentId = newId[0];
	jQuery("#" + parentId + ' span').html(jQuery(obj).html());
	jQuery('.action-menu').hide();
}

jQuery('body').click(function(event){
	event.stopPropagation();
	jQuery('.action-menu').hide();
});

//当前故障列表 选择条数
function selectNumber(obj,event){
	event.stopPropagation();
	var id = jQuery(obj).attr('id');
	var data = [{
		'key':'20',
		'name':'20'
	},
	{
		'key':'50',
		'name':'50'
	}]
	var popObj = jQuery('#' + id + '_popup');
	jQuery('.action-menu').hide();
	if(popObj.length >= 1){
		popObj.show();
	}else{
		popup(obj,data);
	}
	
}

//当前故障列表 选择条数事件
 jQuery('body').on('click', '#selectNumber_popup li',function(event){
	var target = event.target;
	num=jQuery(target).attr('value');
	if(jQuery('#filterData_popup').length > 0){
		priority =jQuery('#filterData_popup .selected').attr('value');
	}else {
		priority=5;
	}
	popupli(target,event);
	//console.log(priority);
	loadPriorityDetailScreen(priority,num);
});

//当前故障列表 筛选数据
function filterData(obj,event){
	event.stopPropagation();
	var id = jQuery(obj).attr('id');
	var data = [
					{
						'key':'5',
						'name':'灾难'
					},
					{
						'key':'4',
						'name':'严重'
					},
					{
						'key':'3',
						'name':'一般严重'
					},
					{
						'key':'2',
						'name':'警告'
					},
					{
						'key':'1',
						'name':'信息'
					},
					{
						'key':'0',
						'name':'未分类'
					}
			];
	var popObj = jQuery('#' + id + '_popup');
	jQuery('.action-menu').hide();
	if(popObj.length >= 1){
		popObj.show();
	}else{
		popup(obj,data);
	}
	
}

//故障数量图
function drawAlarmPic(interval) {
	if(interval == null) {
		interval = 24;
	}
	sData = [];
	jQuery.ajax({
		method:"POST",
		data:{
			interval : interval
		},
		url:"${ctx}/screen/countAbnormalAlarmScreen.json",
		async:false,		
		success:function(data){
			for(var i=0;i<data.length;i++){
				p=new Object();
				p.name=data[i].time;
				p.y=data[i].num;
				sData.push(p);
			}
			//console.log(sData);
		},
		error:function(err){
			alert(err);
		}
	});
	
	$('#container-trafficAnalysis').highcharts({
	    chart: {
	        type: 'areaspline'
	    },
	    title: {
	        text: ''
	    },
	    legend: {
	        layout: 'vertical',
	        align: 'left',
	        verticalAlign: 'top',
	        x: 150,
	        y: 100,
	        floating: true,
	        borderWidth: 1,
	        enabled:false,
	        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#fff'
	    },
	    xAxis: {
	        type: 'category',
	        title: {
	            text: ''
	        }
	    },
	    yAxis: {
	        title: {
	            text: '数量(个)'
	        }
	    },
	    tooltip: {
	        headerFormat: '',
	        pointFormat: '<b>{point.y}</b><br/>'
	    },
	    credits: {
	        enabled: false
	    },
	    plotOptions: {
	        areaspline: {
	            fillOpacity: 0.5
	        }
	    },
	    series: [{
	        name: '',
	        data: sData,
	        color:'#2df1d0'
	    }]
	});
}

//当前故障列表 筛选数据
 jQuery('body').on('click', '#filterData_popup li',function(event){
	var target = event.target;
	priority =jQuery(target).attr('value');
	if(jQuery('#selectNumber_popup').length > 0){
		num=jQuery('#selectNumber_popup .selected').attr('value');
	}else {
		num=20;
	}
	popupli(target,event);
	loadPriorityDetailScreen(priority,num);
}); 


//故障数量趋势 选择周期
 function selectCycle(obj,event){
 	event.stopPropagation();
 	var id = jQuery(obj).attr('id');
 	var data = [{
 		'key':'day',
 		'name':'一天内'
 	},	
 	{
 		'key':'month',
 		'name':'一月内'
 	},
 	{
 		'key':'year',
 		'name':'一年内'
 	}];
 	var popObj = jQuery('#' + id + '_popup');
 	jQuery('.action-menu').hide();
 	if(popObj.length >= 1){
 		popObj.show();
 	}else{
 		popup(obj,data);
 	}
 }
 
//故障数
function loadAlarmNum(){
	temp=[];
	jQuery.ajax({
		method:"POST",
		url:"${ctx}/screen/alarmNum.json",
		success:function(data){
			var alarmNum=data.numberCount.monitorAlarmNum;
			temp.push(alarmNum);
			temp=temp.join('');
			jQuery("#alarmNum").html(temp);
		},
		error:function(err){
			alert(err);
		}
	});
}
//故障设备
function loadAlarmMechine(){
	tempTwo=[];
	jQuery.ajax({
		method:"POST",
		url:"${ctx}/screen/alarmNum.json",
		success:function(data){
			var alarmMechine=data.numberCount.falutMonitorNodeNum;
			tempTwo.push(alarmMechine);
			tempTwo=tempTwo.join('');
			jQuery("#alarmMechine").html(tempTwo);
		},
		error:function(err){
			alert(err);
		}
	});
}
//加载饼图
function loadPriorityCount(){
	tempArray=[];
	jQuery.ajax({
		method:"POST",
		url:"${ctx}/screen/countGroupPriority.json",
		async:false,
		success:function(data){
			for(var i=0;i<data.length;i++){
				 p=new Object();
				var priority=data[i].priority;
				if(priority ==0){
					p.name='未分类';
					p.color='#8acff8';
				}else if(priority ==1){
					p.name='信息';
					p.color='#33d3a1';
				}else if(priority ==2){
					p.name='警告';
					p.color='#e07808';
				}else if(priority ==3){
					p.name='一般严重';
					p.color='#da9715';
				}else if(priority ==4){
					p.name='严重';
					p.color='#E45959';
				}else{
					p.name='灾难';
					p.color='#cd4718';
				}
				p.y=data[i].num;
				tempArray.push(p);
			}
			totalValue = 0;
			for(var j = 0; j < tempArray.length; j++){
					totalValue += tempArray[j].y;
			  }
		   },
		   error:function(err){
				alert(err);
			}
			
		});
	 //console.log(tempArray);
	//当前故障级别
	var chart = null;
	Highcharts.getOptions().plotOptions.pie.colors = (function () {
	    var colors = ['#063050','#0e61a1','#3da5d9','#ea7317','#f0e67b','#5ac2ee'];
	    return colors;
	}());
	$('#container-faultTrend').highcharts({
	     /*  chart: {
	           plotBackgroundColor: null,
	           plotBorderWidth: null,
	           plotShadow: false,
	           spacing : [20, 0 , 20, 10]
	       },
	       title: {
	           floating:true,
	           text: ' '
	       },
	       credits: {
	    	   enabled:false
	       },
	       tooltip: {
	           pointFormat: '',
	           headerFormat:'<span style="font-size: 10px">{point.key}</span><span>: {point.y}个</span>'
	       },
	       legend : {
	    	   layout: 'vertical',
	           backgroundColor: '#FFFFFF',
	           floating: false,
	           align: 'left',
	           verticalAlign: 'top',
	           x: 20,
	           y: 15,
	           labelFormatter: function () {
	               return this.name + ' <span style="color:#b6daff;">'+this.percentage.toFixed(2)+'%</span>';
	           }
	       },
	       plotOptions: {
	           pie: {
	               allowPointSelect: true,
	               cursor: 'pointer',
	               showInLegend:true,
	               dataLabels: {
	                   enabled: false,
	                   
	                   format: '<b>{point.name}</b>: {point.percentage:.1f} ',
	                   style: {
	                       color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
	                   }
	               },
	               point: {
	                   events: {
	                       mouseOver: function(e) {  // 鼠标滑过时动态更新标题
	                           // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
	                           chart.setTitle({
	                               text: e.target.name+ '\t'+ e.target.y
	                           });
	                       }
	                   }
	               },
	           }
	       },
	       series: [{
	           type: 'pie',
	           innerSize: '50%',
	           name: '',
	           data: tempArray
	       }],
	       responsive: {
		        rules: [{
		            condition: {
		                maxWidth: 300
		            },
		            chartOptions: {
		           	  plotOptions: {
		         	        pie: {
		         	            dataLabels: {
		         	                enabled: true,
		         	                distance: 0, 
		         	               
		         	                format: '{point.percentage:.1f}%',
		         	                style: {
		         	                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
		         	                }
		         	            }
		         	        }
		         	    }
		            }
		        }]
		    } */
		    chart: {
		        plotBackgroundColor: null,
		        plotBorderWidth: null,
		        plotShadow: false,
		        renderTo:'container-alldevice',
		        spacing : [20, 0 , 20, 0]
		    },
		    title: {
		        floating:true,
		        text: ' '
		    },
		    tooltip: {
		      	 pointFormat: '',
		      	 headerFormat:'<span style="font-size: 10px">{point.key}</span><span>: {point.y}个</span>'
		    },
		    credits:{
		    	enabled:false
		    },
		    legend : {
		 	    layout: 'vertical',
		        backgroundColor: '#FFFFFF',
		        floating: false,
		        align: 'left',
		        verticalAlign: 'top',
		        x: 10,
		        y: 15,
		        labelFormatter: function () {
		            return this.name + ' <span style="color:#b6daff;">'+this.y+'个</span>';
		        }
		    },
		    subtitle: {    
		        text: ''
		    },
		    plotOptions: {
		        pie: {
		            allowPointSelect: true,
		            cursor: 'pointer',
		            showInLegend:true,
		            dataLabels: {
		                enabled: true,
		                distance: -30, 
		                format: '{point.percentage:.1f}%',
		                style: {
		                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
		                }
		            },
		            point: {
		                events: {}
		            },
		        }
		    },
		    series: [{
		    	type: 'pie',
		        innerSize: '50%',
		        name: '',
		        data: tempArray
		    }],
		    responsive: {
		        rules: [{
		            condition: {
		                maxWidth: 300
		            },
		            chartOptions: {
		           	  plotOptions: {
		         	        pie: {
		         	            dataLabels: {
		         	                enabled: true,
		         	                distance: 0, 
		         	               
		         	                format: '{point.percentage:.1f}%',
		         	                style: {
		         	                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
		         	                }
		         	            }
		         	        }
		         	    }
		            }
		        }]
		    } 
		    
		    
	   }, function(c) {
	       // 环形图圆心
	       var centerY = c.series[0].center[1],
	           titleHeight = parseInt(c.title.styles.fontSize);
	       c.setTitle({
	    	   x:53,
	           y:centerY -3+ titleHeight/2,
	           text:totalValue+ '个'
	       });
	       chart = c;
	   });
}
function _ajaxSettings(priority,num){
	return {
		url: "${ctx}/screen/priorityDetailScreen.json",
		method:"POST",
		data:{
			priority:priority,
			limit:num
		}
	};
}
//加载当前故障列表
//整个数据重新加载
function loadPriorityDetailScreen(priority,num){
	//刷新
	jQuery("#monitorList").remove();
	jQuery(".tempWrap").remove();
	jQuery('.loading').remove();
	jQuery(".bd").html("");
	jQuery(".bd").prepend('<div class="loading"><img src="screen/ajax-loader.gif"><label><font color="white">正在加载请稍等……</font></label></div>');
	priority= priority!=undefined ?priority:5;
		num=num!=undefined ? num:20;
	 var tempArray=[];
	 if(xhr){
		 xhr.abort();
	 }
	 xhr = jQuery.ajax(_ajaxSettings(priority,num));
	 xhr.success(function(data){
		jQuery('.loading').remove();
		if(data.length <= 0){
			jQuery(".bd").html('<li><font color="white" class="white" style="margin-left:-63px">未发生故障</font></li>');
			return;
		}
		for(var i = 0;i< data.length; i++){
			var f=data[i];
			var description=f.description;
			var host=f.host;
			var startClock=f.startClock;
			    startClock=getLocalTime(startClock);
			var subClock=f.subClock;
			var priority=f.priority;
			if(priority==0){
				tempArray.push('<li class="traffic-list-li traffic-prompt">');
			}else if(priority==1){
				tempArray.push('<li class="traffic-list-li traffic-info">');
			}else if(priority==2){
				tempArray.push('<li class="traffic-list-li traffic-warning">');
			}else if(priority==3){
				tempArray.push('<li class="traffic-list-li traffic-general">');
			}else if(priority==4){
				tempArray.push('<li class="traffic-list-li traffic-serious">');
			}else{
				tempArray.push('<li class="traffic-list-li traffic-disaster">');
			}
			tempArray.push('<span class="traffic-time">'+startClock+'</span>'
					+'<span class="traffic-content">'
					+'<span class="traffic-h1">'+description+'</span>'
					+'<span class="traffic-span-left">持续时间:'+subClock+'</span>'
					+'<span class="traffic-span-right">'
					+'<span class="iconfont icon-zhujiguanli"></span>'
					+'<label>主机:'+host+'</label></span></span></li>');	
			}
		tempArray=tempArray.join('');
		jQuery(".bd").append('<ul class="traffic-list-ul clearfix" id="monitorList"></ul>')
		jQuery("#monitorList").html(tempArray);
		visnumber = parseInt(jQuery('.txtScroll-top2').height() / jQuery('.traffic-list-li').outerHeight()) + 1;
		jQuery(".txtScroll-top2").slide({mainCell:".bd ul",autoPage:true,effect:"topMarquee",autoPlay:true,vis:visnumber,interTime:50});
	}).error(function(xhr,st,err){
		xhr=null;
	}).complete(function( jqXHR, status ) {
		if ( jqXHR ===xhr ) {
		    xhr = null;
		}
	});
}

function refreshPriorityDetail(){
	num = $('#selectNumber span').html();
	priority= $('#filterData span').html();
	//debugger;
	if(priority=='未分类'){
		priority=0
	}else if(priority=='信息'){
		priority=1;
	}else if(priority=='警告'){
		priority=2;
	}else if(priority=='一般严重'){
		priority=3;
	}else if(priority=='严重'){
		priority=4;
	}else{
		priority=5;
	}
	loadPriorityDetailScreen(priority,num);
}



//故障数量趋势 选择周期
jQuery('body').on('click', '#selectCycle_popup li',function(event){
	var target = event.target;
	popupli(target,event);
	var key = jQuery('#selectCycle_popup li .selected').attr('value');
	var interval = 0;
	if(key == 'day') {
		interval = 24;
	} else if(key == 'month') {
		interval = 30;
	} else {
		interval = 12;
	}
	drawAlarmPic(interval);
});

//重置周期
jQuery('body').on('click', '#refreshCycle',function(event){
	var key = jQuery('#selectCycle_popup li .selected').attr('value');
	var interval = 0;
	if(key == 'day' || typeof(key)==="undefined") {
		interval = 24;
	} else if(key == 'month') {
		interval = 30;
	} else {
		interval = 12;
	}
	drawAlarmPic(interval);
});

//获得本地时间
function getLocalTime(nS) {     
    return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");      
 }
 
//用户刷新时间
function getUserRefresh(){
	  jQuery.ajax({
		  method: "POST",
		  url: "${ctx}/screen/getUserRefresh.json",
		  async:false,
		  data: {
			  userId:userId,
		  },
		  success:function(data) {
			  if(null != data && 0 != data){
				  refreshTime = data*1000;
			  }else{
				  refreshTime = 60000;
			  }

		  },
		  error:function(err){
				alert(err);
			} 
	  });	  
	  return refreshTime;
}
</script>
</body>
</html>