<%@ 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: 140px;}
	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>
                <td id="zj"></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>
        	<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;
console.log("跳转iframe: ",records);
$(function(){
	$.ajax({
		type : 'post',
		dataType : 'json',
		url : 'ywmachinestatusinfoAction!listYwmachinestatusinfoByPage.do',
		data : {'machineid':records.machineid,'statusupbatch':records.statusupbatch,'page':0,'rows':20},
		success : function(res){
//			console.log("测试：",res);
			var data = res.rows[0]
//			console.log("返回结果：",data);
			$('#mc').html(data.machinename);
			$('#ip').html(data.machineip);
			$('#jcsj').html(data.statusuptime);

			// 主机状态
			var zjhtml = '';
			var zjzt = data.zjzt;
			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);

			// CUP状态
			var cpuhtml='';
			var cpuusage = data.cpusy;
			var cpuzt = data.cpuzt;
			if(cpuusage == null || cpuusage == ''){
				if(cpuzt == "1"){
					cpuzt = "正常";
				} else if (cpuzt == '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);
			cpuGrap(cpuusage);
			$("#cpuTitle").html(cpuzt);
			if(cpuzt=='正常'){
				$("#cpuTitle").parent().css("color","#000");
			}

			// 内存状态
			var nchtml = '';
			var memorytotal = data.ncrl;
			var memoryusage = data.ncsy;
			var nczt = data.nczt;
			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 = data.ncrl.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;
					ncrl = Math.round(parseFloat(ncrl));
					sync = (ncrl * memoryusage)/100;
					sync = parseFloat(sync.toFixed(2));
					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>";
					}
				}
			}			
			$('#nczt').html(nczt);
			$('#nc').append(nchtml);
			if(memorytotal == null || memorytotal == '' || memoryusage == null || memoryusage == ''){
				memoryGrap('未知','未知');
			}else{
				var radio=sync+dw+" / "+ncrl+dw;
				memoryGrap(memoryusage,radio);
			}
			
			$("#memoryTitle").html(nczt);
			if(nczt== '正常'){
				$("#memoryTitle").parent().css("color","#000");
			}

			// 硬盘状态
			var yphtml = '';
			var harddisktotal = data.yprl;
			var harddiskusage = data.ypsy;
			var ypzt = data.ypzt;
			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 = data.yprl.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;
					yprl = Math.round(parseFloat(yprl));
					sy = (yprl * harddiskusage)/100;
					sy = parseFloat(sy.toFixed(2));
					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>";
					}
				}
			}			
			$('#ypzt').html(ypzt);
			$('#yp').append(yphtml);
			
			if(harddisktotal == null || harddisktotal == '' || harddiskusage == null || harddiskusage == ''){
				harddiskGrap('未知','未知');
			}else{
				var radio=sy+dw+" / "+yprl+dw;
				harddiskGrap(harddiskusage,radio);
			}
			
			$("#diskTitle").html(ypzt);
			if(ypzt=='正常'){
				$("#diskTitle").parent().css("color","#000");
			}
		}		
	});
});

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);
}

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 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);
}
</script>
