<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- 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 = [];
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;
}
}
}
var newArr = redArr.concat(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>