jquery 处理F5状态数据

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>运维平台</title>
		<!-- <link rel="stylesheet" type="text/css" href="/static/Css/Monitor/displayf5.css"> -->
		<!-- <link rel="stylesheet" type="text/css" href="/static/Css/Public/header.css"> -->
		<!-- <link rel="stylesheet" type="text/css" href="/static/Css/Public/menu.css"> -->
		<style type="text/css">
			body,div,ul,li,span{margin: 0; padding: 0; font-size: 20px; color: #333;}
			h1{height: 50px; line-height: 50px; margin: 0; background: #555; color: #f2f2f2; font-size: 30px; text-align: center;}
			ul,ol,li{list-style-type: none;}
			#list{
				margin: 0 auto;
				padding-top: 4px;
			}
			#list ul{
				display: flex;
				flex-wrap: wrap;
				margin-top: 30px;
			}
			#list li{
				flex: 1;
				min-width: 300px;
				margin: 2px 4px;
				padding: 5px 10px;
			}
			#list .red{
				background: #f00;
				background: rgba(255,0,0,.5);
			}
			#list .green{
				background: #0f0;
				background: rgba(0,255,0,.5);
			}
			#list .blue{
				background: #00f;
				background: rgba(0,0,255,.5);
			}
                        	.time{
	            position: absolute; top: 0px; right: 20px;
	            color: #fff;
	            font-size: 24px;
	        }
		</style>
	</head>
	<body>
                <h1>泰隆银行F5运行监控/90s<span class="time"></span></h1>
		<ul id="list"></ul>

		<script src="/static/Js/jquery-2.2.2.min.js"></script>
		<script src="/static/Js/F5/displayf5.js"></script>
		<!-- <script src="http://libs.mingsixue.com/jquery/1.12.4/jquery.min.js"></script> -->
		<script>
			$(function() {
                                var data={};
				$('#list').css('width', $(window).width());
                                	var renderTime = function() {
		            var now = new Date();
		            var y = now.getFullYear();
		            var m = now.getMonth() + 1;
		            var d = now.getDate();

		            var h = now.getHours();
		            var i = now.getMinutes();
		            var s = now.getSeconds();

		            m = m < 10 ? '0' + m : m;
		            d = d < 10 ? '0' + d : d;
		            h = h < 10 ? '0' + h : h;
		            i = i < 10 ? '0' + i : i;
		            s = s < 10 ? '0' + s : s;
		            var _date = y + '-' + m + '-' + d;
		            var _time = h + ':' + i + ':' + s;
		            $('.time').html(_date + ' ' + _time);
		        };

				// 渲染数据
				var render = function(data) {
					var _html = '';
					for (var i = 0; i < data.length; i++) {
						var newArr = data[i];
						_html += '<ul>';
						for (var j = 0; j < newArr.length; j++) {
							var arr = newArr[j].split('=>');
							console.log(arr);
							var path = (arr[0]).replace('/Common/', '');
							var ip = arr[1];
							var status = arr[2];
							var str = path + ' ' + ip;

							switch(status) {
								case 'AVAILABILITY_STATUS_GREEN':
									_html += '<li class="green">'+ str +'</li>';
									break;

								case 'AVAILABILITY_STATUS_RED':
								_html += '<li class="red">'+ str +'</li>';
									break;

								case 'AVAILABILITY_STATUS_BLUE':
									_html += '<li class="blue">'+ str +'</li>';
									break;
							}
						};
						_html += '</ul>';
					};

					$('#list').html(_html);
				};

				// 数据处理 带错误数据提取
				var dealData = function(data) {
					let redArr = [];
					let blueArr = [];
					for (var i = 0; i < data.length; i++) {
						var nArr = data[i];

						for (var j = 0; j < nArr.length; j++) {
							var arr = nArr[j].split('=>');
							if (arr[2] == 'AVAILABILITY_STATUS_RED') {
                                                                
								redArr.push(nArr);
								//data.splice(i, 1);
                                                                
								break;
							};
							if (arr[2] == 'AVAILABILITY_STATUS_BLUE') {
                                                                
								blueArr.push(nArr);
								//data.splice(i, 1);
                                                                
								break;
							};
							
						}
					}

					var newArr = redArr.concat(blueArr,data);
					render(newArr);
				};

				// 获取数据
				var getList = function() {
					$.ajax({
						type: 'GET',
						data: data,
						url: '/checkf5/',
						dataType: 'json',
						success: function(res){
							dealData(res);
						},
						error: function(e){
							alert('数据返回出错');
						}
					});
				};

				getList();

                               // 90秒刷新
				let n = 0;
		        setInterval(function() {
		            n++;
		            if (n >= 90) {
		                n = 0;
		                getList();
		            }
		            renderTime();
		        }, 1000);
			});
		</script>
	</body>
</html>
jquery 处理F5状态数据

猜你喜欢
