MCSManager/public/template/center.html

<div id='CenterShow' class="OneContainer">

	<div class="row">
		<div class="col-md-12">
			<div class="Panel">
				<div class="PanelTitle PanelBlue">
					<!--请不要怀疑这是在欺骗您数据统计日期来自前端，事实上，后端是在每月1日统计至今，所以是一致的-->
					程序{{ new Date().getMonth()+1 }}月1日 ~ {{ new Date().getMonth()+1 }}月{{ new Date().getDate() }}日基础监控
				</div>
				<div class="PanelBody">
					<div class="row">
						<div class="col-md-2 col-sm-4">
							<div class="LogV">{{ loginCounter }} 次</div>
							<div class="LogK">用户总计登陆次数</div>
						</div>
						<div class="col-md-2 col-sm-4">
							<div class="LogV">{{ passwordError }} 次</div>
							<div class="LogK">错误密码登陆次数</div>
						</div>
						<div class="col-md-2 col-sm-4">
							<div class="LogV">{{ banip }} ip</div>
							<div class="LogK">触发防火墙临时禁封</div>
						</div>
						<div class="col-md-2 col-sm-4">
							<div class="LogV">{{ csrfCounter }} 次</div>
							<div class="LogK">可能的CSRF跨域</div>
						</div>
						<div class="col-md-2 col-sm-4">
							<div class="LogV">{{ notPermssionCounter }} 次</div>
							<div class="LogK">被拒绝的请求</div>
						</div>
						<div class="col-md-2 col-sm-4">
							<div class="LogV" v-text="time()"></div>
							<div class="LogK">系统正常运行的时间</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6">
			<div class="Panel PanelGray">
				<div class="PanelTitle">系统信息监控 ( {{ system }} )</div>
				<div class="PanelBody">
					<div class="">
						<div class="row">
							<div class="col-md-4 col-sm-4">
								<div class="LogV">{{ (sysTotalmem - sysFreemem).toFixed(1) }} MB</div>
								<div class="LogK">系统已使用内存</div>
							</div>
							<div class="col-md-4 col-sm-4">
								<div class="LogV">{{ sysFreemem }} MB</div>
								<div class="LogK">系统剩余内存 </div>
							</div>
							<div class="col-md-4 col-sm-4">
								<div class="LogV">{{ cpu }} %</div>
								<div class="LogK">中央处理器利用率</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-md-6 NextCol">
			<div class="Panel PanelGray">
				<div class="PanelTitle">控制面板内存监控</div>
				<div class="PanelBody">
					<div class="row">
						<div class="col-md-4 col-sm-4">
							<div class="LogV">{{ rss }} MB</div>
							<div class="LogK">程序使用的物理内存</div>
						</div>
						<div class="col-md-4 col-sm-4">
							<div class="LogV">{{ heapTotal }} MB</div>
							<div class="LogK">程序内部内存堆大小</div>
						</div>
						<div class="col-md-4 col-sm-4">
							<div class="LogV">{{ heapUsed }} MB</div>
							<div class="LogK">已使用内存堆大小</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>

	<!--服务器与用户统计-->
	<div class="row">
		<!--服务器统计-->
		<div class="col-md-6">
			<div class="Panel PanelGray">
				<div class="PanelTitle">Minecraft 服务器监控 </div>
				<div class="PanelBody">
					<div class="row">
						<div class="col-sm-4 ">
							<div class="LogV">{{ serverCounter }} 个</div>
							<div class="LogK">服务器总数</div>
						</div>
						<div class="col-sm-4">
							<div class="LogV">{{ runServerCounter }} 个</div>
							<div class="LogK">正在运行的服务器总数</div>
						</div>
						<div class="col-sm-4">
							<div class="LogV">{{serverCounter - runServerCounter }} 个</div>
							<div class="LogK">未启动的服务器总数</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--用户统计-->
		<div class="col-md-6 NextCol">
			<div class="Panel PanelGray">
				<div class="PanelTitle">用户管理权限监控 </div>
				<div class="PanelBody">
					<div class="row">
						<div class="col-sm-4 ">
							<div class="LogV">{{ userCounter }} 个</div>
							<div class="LogK">用户总数 (包括管理员)</div>
						</div>
						<div class="col-sm-4">
							<div class="LogV">{{ userOnlineCounter }} 个</div>
							<div class="LogK">正在线上的用户总数</div>
						</div>
						<div class="col-sm-4">
							<div class="LogV">{{ WebsocketCounter }} 会话</div>
							<div class="LogK">Websocket 链接数</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

<script>
	//创建
	MI.rListener('onload', function () {
		PAGE.time = function (value) {
			return function () {
				var theTime = parseInt(Math.floor(this.uptime)); // 秒
				var theTime1 = 0; // 分
				var theTime2 = 0; // 小时
				if (theTime > 60) {
					theTime1 = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
					if (theTime1 > 60) {
						theTime2 = parseInt(theTime1 / 60);
						theTime1 = parseInt(theTime1 % 60);
					}
				}
				var result = "";
				if (theTime1 > 0) {
					result = "" + parseInt(theTime1) + "分";
				}
				if (theTime2 > 0) {
					result = "" + parseInt(theTime2) + "时" + result;
				}
				return result;
			}
		}

		VIEW_MODEL.newVue('centerShow', {
			el: '#CenterShow',
			methods: {
				time: PAGE.time()
			}
		});

		PAGE.time = setInterval(function () {
			WS.sendMsg('center/show', '');
		}, 2100);
	})

	//关闭
	MI.rListener('onend', function () {
		clearInterval(PAGE.time);
	})
</script>