<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE html>
<html>
<head lang="en">
	<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
 	<%@include file="../../../frame/assets/header-all.jsp"%>
 	<script type="text/javascript" src="<%= basePath%>/yw/common/js/echarts/echarts.min.js"></script>
	<style>
	.form-line .text-content{
		width:120px;
	}
	td{
		width:260px;
		    height: 10px;
	}
	.progress-text{    border: 1px solid green;}
		tr td:nth-child(1){text-align:left;    width: 86px;}
	tr td:nth-child(2){}
	.progress-value{background-color:green;}
	</style>
</head>
<body class="easyui-layout">
	<div>
					 <table style="    font-size: 12px;    width: 320px;height: 135px; margin-left: 40px;    margin-bottom: 22px;    margin-top: 12px;">
            <tr>
                <td><label>机器名称：</label></td><td><label id="mc"></label></td>
            </tr>
            <tr>
                <td><label>设备IP：</label></td><td><label id="ip"></label></td>
            </tr>
            <tr>
                <td><label>检测时间：</label></td><td><label id="jcsj"></label></td>
            </tr>
            <tr>
                <td><label>主机状态：</label></td>
                <td><label id="zjzt"></label></td>
            </tr>
        </table>
        <div style="display:flex;border:1px solid #d2d2d2;width:90%;justify-content:space-between;margin:0 auto;">
        	<div style="position:relative;">
        		<div style="text-align: center; line-height: 32px;color: #cd240d;">cpu使用率:<span id="cpuTitle"></span></div>
        		<div id="cpuGrap" style="width:200px;height:164px;">
        		
        		</div>
        		<!-- <div	 style="border: 1px solid #d4d4d4;height: 99px;width: 150px;position: absolute;top: 48px;left: 25px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none;">
        		</div>
 -->        	</div>
        	<div  style="position:relative;">
        		<div style="text-align: center; line-height: 32px;color: #cd240d;">内存使用率:<span id="memoryTitle"></span></div>
        		<div id="memoryGrap" style="width:200px;height:164px;">
        		
        		</div>
        		<div	 style="border: 1px solid #d4d4d4;height: 126px;width: 128px;position: absolute; top: 50px; left: 36px;border-radius: 100%;">
        		</div>
        		<div style="position: absolute; left: -22px;top: 47px; width: 1px;height: 130px;border-left: 1px solid #d4d4d4;"></div>
        	</div>
        	<div style="position:relative;">
        		<div style="text-align: center; line-height: 32px;color: #cd240d;">硬盘使用率:<span id="diskTitle"></span></div>
        		<div id="diskGrap" style="width:200px;height:164px;">
        		
        		</div>
        		<div	 style="border: 1px solid #d4d4d4;height: 126px;width: 128px;position: absolute; top: 50px; left: 36px;border-radius: 100%;">
        		</div>
        		<div style="position: absolute; left: -22px;top: 47px; width: 1px;height: 130px;border-left: 1px solid #d4d4d4;"></div>
        	</div>
        </div>
	</div>
</body>
</html>
<script type="text/javascript">
	var winId	= $.getUrlParam("winId");
	var records = top.$("#"+winId).panel("options").data;
	var historystateid = records.historystateid;
	$(function(){

		$.ajax({
			type : 'post',
			dataType : 'json',
			url : 'ywmachinehistorystateAction!get_Ywmachinehistorystate.do',
			data : {'historystateid':historystateid},
			success : function(res){
					$('#mc').html(res.machinename);
					$('#ip').html(res.machineip);
					$('#jcsj').html(res.currentstatetime);
					
					// 主机状态
					var zjhtml='';
					var zjzt = res.machinestate;
					if(zjzt == "1"){
						zjzt = "正常";
						zjhtml = "<div style='height:13px;width:13px;background-color:green;border-radius:50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;margin:0 auto 0 0;'></div>";
					}else if(zjzt == "0"){
						zjzt = "异常";
						zjhtml = "<div style='height:13px;width:13px;background-color:#fe0000;border-radius:50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;margin:0 auto 0 0;'></div>";
					}
					$('#zjzt').html(zjzt);
					$('#zj').append(zjhtml);
					
					
					//cpu状态
					var cpuhtml='';
					var cpuusage = res.cpuusage;
					var cpuzt = res.cpustatus;
					if(cpuusage == null || cpuusage == ''){
						if(cpuzt == "1"){
							cpuzt = "正常";
						}else if(cputzt == '0'){
							cpuzt = "异常";
						}
					}else{
						cpuusage = cpuusage.indexOf('%')>0 ? cpuusage.replace("%",""):cpuusage;
						if(cpuzt == "1"){
							cpuzt = "正常";
							cpuhtml = '<div class="progress" style="width:140px"><div class="progress-value"  style="background-color:red;width: ' + (cpuusage || 0) + 'px;"><div class="progress-text"  style="border:1px solid red;">' + (cpuusage+"%" || "") + "</div></div></div>"
						}else if(cpuzt == '0'){
							cpuzt = "异常";
							cpuhtml = $.gridProgressBar(cpuusage+"%",100*cpuusage/100.00);
						}
					}					
					$('#cpuzt').html(cpuzt);
					$('#cpu').append(cpuhtml);
					var cpuusageLength=cpuusage.split(".")[1];  
					if(cpuusageLength&&cpuusageLength.length>2){
						cpuusage=cpuusage.toFixed(2);
					}
					cpuGrap(cpuusage)
					$("#cpuTitle").html(cpuzt);
					if(cpuzt=='正常'){
							$("#cpuTitle").parent().css("color","#000");
						}


					// 内存状态
					var nchtml = '';
					var memorytotal = res.memorytotal;
					var memoryusage = res.memoryusage;
					var nczt = res.memorystate;
					if(memorytotal == null || memorytotal == ''){
						if(memoryusage != null && memoryusage != ''){
							memoryusage = memoryusage.indexOf('%')>0 ? memoryusage.replace("%",""):memoryusage;
							if(nczt == 0){
								nczt = '异常';
								nchtml = '<div class="progress" style="width:140px">'+
											'<div class="progress-value"  style="border:1px solid red;background-color:red;width: ' + (memoryusage || 0) + 'px;">'+
												'<div class="progress-text"  style="border:1px solid red;">' + (memoryusage+"%" || "") + "</div>" +
											"</div>" + 
										"</div>";
							}else if(nczt == 1){
								nczt = '正常';
								nchtml = '<div class="progress" style="width:140px">'+
											'<div class="progress-value"  style="width: ' + (memoryusage || 0) + 'px;">'+
												'<div class="progress-text">' + (memoryusage+"%" || "") + "</div>" +
											"</div>" +
										"</div>";
							}
						}
					}else{
						var ncrl = res.memorytotal.toUpperCase();
						var dw = "G";
						if(ncrl.indexOf('G') > 0){
							ncrl = ncrl.replace("G","");
							dw = "G";
						}else if(ncrl.indexOf('M') > 0){
							ncrl = ncrl.replace("M","");
							dw = "M";
						}else if(ncrl.indexOf('KB') > 0){
							ncrl = ncrl.replace("KB","");
							dw = "KB";
						}
						var sync = "";
						if(memoryusage != null && memoryusage != ''){
							memoryusage = memoryusage.indexOf('%')>0 ? memoryusage.replace("%",""):memoryusage;
							sync = (ncrl * memoryusage)/100;
							var syncLength=sync.toString().split(".")[1];  
							if(syncLength&&syncLength.length>2){
								sync=sync.toString().split(".")[0]+"."+syncLength.substring(0,2);
							}
							var ncrlLength=ncrl.toString().split(".")[1];  
							if(ncrlLength&&ncrlLength.length>2){
								ncrl=ncrl.toString().split(".")[0]+"."+ncrlLength.substring(0,2);
							}
							ncrl = parseFloat(ncrl);
							sync = parseFloat(sync);
							if(nczt == 0){
								nczt = '异常';
								nchtml = '<div class="progress" style="width:140px">'+
											'<div class="progress-value"  style="background-color:red;width: ' + (memoryusage || 0) + 'px;">'+
												'<div class="progress-text"  style="border:1px solid red;">' + (memoryusage+"%" || "") + "</div>" +
											"</div>" + 
											"<div style='position: relative;left: 105px; top: -18px;'>"+sync+dw+" / "+ncrl+dw+"(总)</div>"+
										"</div>";
							}else if(nczt == 1){
								nczt = '正常';
								nchtml = '<div class="progress" style="width:140px">'+
											'<div class="progress-value"  style="width: ' + (memoryusage || 0) + 'px;">'+
												'<div class="progress-text">' + (memoryusage+"%" || "") + "</div>" +
											"</div>" +
											"<div style='position: relative;left: 105px; top: -18px;'>"+sync+dw+" / "+ncrl+dw+"(总)</div>"+
										"</div>";
							}
						}
					}
					var radio=sync+dw+" / "+ncrl+dw;
					$('#nczt').html(nczt);
					$('#nc').append(nchtml);
					var memoryusageLength=memoryusage.split(".")[1];  
					if(memoryusageLength&&memoryusageLength.length>2){
						memoryusage=memoryusage.toFixed(2);
					}
					memoryGrap(memoryusage,radio);
					$("#memoryTitle").html(nczt);
					if(nczt== '正常'){
						
						$("#memoryTitle").parent().css("color","#000");
						
					}
					
		
					// 硬盘状态				
					var yphtml = '';
					var harddisktotal = res.harddisktotal;
					var harddiskusage = res.harddiskusage;
					var ypzt = res.harddiskstate;
					if(harddisktotal == null || harddisktotal == ''){
						if(harddiskusage != null && harddiskusage != ''){
							harddiskusage = harddiskusage.indexOf('%')>0 ? harddiskusage.replace("%",""):harddiskusage;
							if(ypzt == 0){
								ypzt = '异常';
								yphtml = '<div class="progress" style="width:140px">'+
											'<div class="progress-value"  style="background-color:red;width: ' + (harddiskusage || 0) + 'px;">'+
												'<div class="progress-text"  style="border:1px solid red;">' + (harddiskusage+"%" || "") + "</div>" +
											"</div>" + 
										"</div>";
							}else if(ypzt == 1){
								ypzt = '正常';
								yphtml = '<div class="progress" style="width:140px">'+
											'<div class="progress-value"  style="width: ' + (harddiskusage || 0) + 'px;">'+
												'<div class="progress-text">' + (harddiskusage+"%" || "") + "</div>" +
											"</div>" +
										"</div>";
							}
						}
					}else{
						var yprl = res.harddisktotal.toUpperCase();
						var dw = "G";
						if(yprl.indexOf('G') > 0){
							yprl = yprl.replace("G","");
							dw = "G";
						}else if(yprl.indexOf('M') > 0){
							yprl = yprl.replace("M","");
							dw = "M";
						}else if(yprl.indexOf('KB') > 0){
							yprl = yprl.replace("KB","");
							dw = "KB";
						}
						var sy = "";
						if(harddiskusage != null && harddiskusage != ''){
							harddiskusage = harddiskusage.indexOf('%')>0 ? harddiskusage.replace("%",""):harddiskusage;
							sy = (yprl * harddiskusage)/100;
							var syLength=sy.toString().split(".")[1];  
							if(syLength&&syLength.length>2){
								sy=sy.toString().split(".")[0]+"."+syLength.substring(0,2);
							}
							var yprlLength=yprl.toString().split(".")[1];  
							if(yprlLength&&yprlLength.length>2){
								yprl=yprl.toString().split(".")[0]+"."+yprlLength.substring(0,2);
							}
							yprl = parseFloat(yprl);
							sy = parseFloat(sy);
							if(ypzt == 0){
								ypzt = '异常';
								yphtml = '<div class="progress" style="width:140px">'+
											'<div class="progress-value"  style="background-color:red;width: ' + (harddiskusage || 0) + 'px;">'+
												'<div class="progress-text"  style="border:1px solid red;">' + (harddiskusage+"%" || "") + "</div>" +
											"</div>" + 
											"<div style='position: relative;left: 105px; top: -18px;'>"+sy+dw+" / "+yprl+dw+"(总)</div>"+
										"</div>";
							}else if(ypzt == 1){
								ypzt = '正常';
								yphtml = '<div class="progress" style="width:140px">'+
											'<div class="progress-value"  style="width: ' + (harddiskusage || 0) + 'px;">'+
												'<div class="progress-text">' + (harddiskusage+"%" || "") + "</div>" +
											"</div>" +
											"<div style='position: relative;left: 105px; top: -18px;'>"+sy+dw+" / "+yprl+dw+"(总)</div>"+
										"</div>";
							}
						}
					}
					var radio=sy+dw+" / "+yprl+dw;
					$('#ypzt').html(ypzt);
					$('#yp').append(yphtml);
					harddiskGrap(harddiskusage,radio);
					$("#diskTitle").html(ypzt);
					if(ypzt=='正常'){
						
						$("#diskTitle").parent().css("color","#000");
						
					}
					
			}		
		});
		
		
	})
	
	function harddiskGrap(data,radio){
		var myChart = echarts.init(document.getElementById('diskGrap'));
		var color="#1fba44";
		if(data>50){
			color="#d51717";
		}
		option = {

		    series: [
		        {
		            name:'访问来源',
		            type:'pie',
		            radius: ['50%', '70%'],
		            label: {
		                normal: {
		                    show: false,
		                    position: 'left'
		                },
		                emphasis: {
		                    show: false,
		                    textStyle: {
		                        fontSize: '10',
		                        fontWeight: 'bold'
		                    }
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: true
		                }
		            },
		            data:[
		                {value:data, name:data+'%\n'+radio,label:{show:true,fontSize:10,color:color,position:"center",align:"center",verticalAlign :"bottom"},itemStyle:{color:color}},
		                {value:100-data, name:'',itemStyle:{color:'#bfbfbf'}},
		            ]
		        }
		    ]
		};
		
	    myChart.setOption(option, true);
	}
	function memoryGrap(data,radio){

		var myChart = echarts.init(document.getElementById('memoryGrap'));
		var color="#1fba44";
		if(data>50){
			color="#d51717";
		}

		option = {

		    series: [
		        {
		            name:'访问来源',
		            type:'pie',
		            radius: ['50%', '70%'],
		            label: {
		                normal: {
		                    show: false,
		                    position: 'left'
		                },
		                emphasis: {
		                    show: false,
		                    textStyle: {
		                        fontWeight: 'bold'
		                    }
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: true
		                }
		            },
		            data:[
		                {value:data, name:data+'%\n'+radio,label:{show:true,color:color,position:"center",align:"center",verticalAlign :"bottom"},itemStyle:{color:color}},
		                {value:100-data, name:'',itemStyle:{color:'#bfbfbf'}},
		            ]
		        }
		    ]
		};

			    myChart.setOption(option, true);
		
		
	}
	
	function cpuGrap(data){
		var myChart = echarts.init(document.getElementById('cpuGrap'));
		var color="#1fba44";
		if(data>50){
			color="#d51717";
		}
		option = {
			    tooltip : {
			        formatter: "{a} <br/>{b} : {c}%"
			    },
			    toolbox: {
			        feature: {
			        }
			    },
			    series: [
			             {
			                 name: '业务指标',
			                 radius:'80%',
			                 type: 'gauge',
			                 splitNumber:0,
			                 axisTick:{show:false},
			                 splitLine:{show:false},
			                 axisLine:{
			                     lineStyle:{
			                         width:3,
			                         color:[[0.5,{
			                             type: 'linear',
			                            colorStops: [{
			                                offset: 0, color: '#4db51d' // 0% 处的颜色
			                            }, {
			                                offset: 1, color: '#dcd018' // 100% 处的颜色
			                            },],
			                             globalCoord: false // 缺省为 false
			                    }],[1,{
			                         type: 'linear',
			                                 colorStops: [{
			                                offset: 0, color: '#dcd018' // 0% 处的颜色
			                            }, {
			                                offset: 1, color: '#cd2a0e' // 100% 处的颜色
			                            },],
			                    }]]
			                     }
			                 },
			                 detail:{show:false},
			              axisLabel:{show:false},
			                 startAngle:220,
			                 pointer:{show:false},
			                 data: [{value: data, name: ''}]
			             },
			        {
			            name: 'cpu使用率',
			            type: 'gauge',
			            splitNumber:2,
			            radius:"70%",
			            axisLine:{show:true,
			                 lineStyle:{
			                    color:[[0.5,{
			                             type: 'linear',
			                            colorStops: [{
			                                offset: 0, color: '#4db51d' // 0% 处的颜色
			                            }, {
			                                offset: 1, color: '#dcd018' // 100% 处的颜色
			                            },],
			                             globalCoord: false // 缺省为 false
			                    }],[1,{
			                         type: 'linear',
			                                 colorStops: [{
			                                offset: 0, color: '#dcd018' // 0% 处的颜色
			                            }, {
			                                offset: 1, color: '#cd2a0e' // 100% 处的颜色
			                            },],
			                    }]]
			                 }
			            },
			            splitLine :{show:false
			            },
			            axisTick:{show:false},
			            axisLabel:{
			                distance:-60,
			             color:"cd2a0e"
			                
			            },
			            pointer:{
			            	  length:'50%',
			                  width:4
			            },
			            detail: {fontSize:12,formatter:'CPU:{value}%',offsetCenter:[0,'80%'],color:color},
			            data: [{value: data, name: ''}]
			        } 
			    ]
			};


			    option.series[0].data[0].value =data;
			    myChart.setOption(option, true);


	}
</script>
