<!DOCTYPE HTML>
<html>
<head>
<#include "/adminPage/common.html"/>
<style type="text/css">

.long{
	width: 150px!important;
}

.short{
	width: 50px!important;
}

.ali{ 
	color: red;
	font-weight: bolder;
}

</style>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">

		<#include "/adminPage/header.html"/>
		<#include "/adminPage/menu.html"/>

		<div class="layui-body">
			<div style="padding: 15px">
				<fieldset class="layui-elem-field layui-field-title">
					<legend>${menuStr.monitor}</legend>
				</fieldset>
				
				<input type="hidden" id="isInit" value="${isInit}"> 

				<div style="padding: 20px; background-color: #F2F2F2;">
					<div class="layui-row layui-col-space15">
						<!-- 监控 -->
						<div class="layui-col-md6">
							<div class="layui-card">
								<div class="layui-card-header">
									${monitorStr.cpuRatio}&nbsp;&nbsp;<span id="cpuCount" style="color: teal;"></span>
								</div>

								<div class="layui-card-body">
									<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="cpu">
										<div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
									</div>
								</div>

								<div class="layui-card-header">
									${monitorStr.memUse}&nbsp;&nbsp;<span id="memContent" style="color: teal;"></span>
								</div>

								<div class="layui-card-body">
									<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="mem">
										<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
									</div>
								</div>
								
								<div class="layui-card-header">
									${monitorStr.diskUse}&nbsp;&nbsp;<span id="diskContent" style="color: teal;"></span>
								</div>
								
								<div class="layui-card-body">
									<#list list as disk>
										${disk.usedSpace}
										<span class="layui-breadcrumb"><a href="javacript:">${disk.path} (${disk.useSpace} / ${disk.totalSpace})</a></span>
										<div class="layui-progress" lay-showpercent="true" style="margin-top: 20px;margin-bottom: 10px;">
											<div class="layui-progress-bar layui-bg-blue" lay-percent="${disk.percent}"></div>
										</div>
									</#list>
								</div>
							</div>
						</div>
						
						<!-- 广告 -->
						<div class="layui-col-md6">
							<div class="layui-card" id="netDiv" style="height: 500px;">
								
								
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div style="height: 0px; width: 0px; overflow: hidden;">
		<div class="layui-form" id="nginxGuideDiv" style="padding: 15px; display: none">
		
			<div id="selectForm" >
				<div class="layui-form-item">
					<label class="layui-form-label long">${monitorStr.install}</label>
					<div class="layui-input-inline">
						<input type="radio" name="install" id="check0" value="0" title="${monitorStr.install0}" checked>
      					<input type="radio" name="install" id="check1" value="1" title="${monitorStr.install1}" >
					</div>
				</div>
	
				<div class="layui-form-item" style="text-align: center;">
					<button type="button" class="layui-btn layui-btn-normal" style="width: 100px;" onclick="selectNginxGiudeOver()">${commonStr.submit}</button>
				</div>
			</div>
			
			
			<div id="addForm" style="display: none;">
	
				<div class="layui-form-item">
					<label class="layui-form-label long">nginx ${monitorStr.exe}</label>
					<div class="layui-input-inline">
						<input type="text" id="nginxExe" class="layui-input" value="${nginxExe}">
					</div>
					<div class="layui-input-inline short">
						<i class="layui-icon layui-icon-export" onclick="selectRoot('nginxExe')"></i>   
					</div>
				</div>
	
				<div class="layui-form-item">
					<label class="layui-form-label long">nginx ${commonStr.dir}</label>
					<div class="layui-input-inline">
						<input type="text" id="nginxDir" class="layui-input" value="${nginxDir}">
					</div>
					<div class="layui-input-inline short">
						<i class="layui-icon layui-icon-export" onclick="selectRoot('nginxDir')"></i>   
					</div>
				</div>
	
				<div class="layui-form-item" style="text-align: center;">
					<button type="button" class="layui-btn" style="width: 100px;" onclick="back()">${commonStr.back}</button>
					<button type="button" class="layui-btn layui-btn-normal" style="width: 100px;" onclick="addNginxGiudeOver()">${commonStr.submit}</button>
				</div>
			</div>
		</div>
	
	</div>


	<#include '/adminPage/script.html'/>
	<#include '/adminPage/select_root.html'/>
	<script src="${ctx}/js/adminPage/monitor/index.js?v=${jsrandom}" type="text/javascript"></script>
</body>


</html>