<!doctype html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="Generator" content="EditPlus®">
|
<meta name="Author" content="">
|
<meta name="Keywords" content="">
|
<meta name="Description" content="">
|
<style type="text/css">
|
body {
|
background-image: url(images/nybj.png);
|
background-size: 100% 100%;
|
font-weight: bold;
|
font-family: 苹方;
|
overflow: hidden;
|
position: relative;
|
|
}
|
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
|
}
|
|
.main {
|
width: 1024px;
|
height: 768px;
|
position: relative;
|
margin: auto;
|
}
|
|
div {
|
border: 0px solid white;
|
/* margin: 1px; */
|
}
|
|
.layer {
|
position: relative;
|
width: 100%;
|
}
|
|
#layer01 {}
|
|
#layer01 img {
|
text-align: center;
|
display: block;
|
height: 35px;
|
padding-top: 35px;
|
margin: auto;
|
}
|
|
#layer02>div {
|
height: 100%;
|
float: left;
|
position: relative;
|
}
|
|
.layer02-data {
|
position: absolute;
|
width: auto;
|
height: 100px;
|
color: white;
|
top: 45px;
|
left: 65px;
|
}
|
|
.layer03-panel {
|
height: 100%;
|
position: relative;
|
float: left;
|
}
|
|
.layer03-left-label {
|
position: absolute;
|
}
|
|
#layer03_left_label01 {
|
top: 10px;
|
left: 10px;
|
color: white;
|
height: 20px;
|
width: 200px;
|
font-weight: bold;
|
}
|
|
#layer03_left_label02 {
|
right: 10px;
|
top: 10px;
|
color: #036769;
|
height: 20px;
|
width: 200px;
|
}
|
|
.layer03-left-chart {
|
position: relative;
|
float: left;
|
height: 100%;
|
}
|
|
#layer03_right_label {
|
position: absolute;
|
top: 10px;
|
left: 40px;
|
color: white;
|
height: 20px;
|
width: 100px;
|
}
|
|
#layer03_right_label_02 {
|
position: absolute;
|
top: 10px;
|
left: 200px;
|
color: white;
|
height: 20px;
|
width: 100px;
|
}
|
|
#layer03_right_label_03 {
|
position: absolute;
|
top: 10px;
|
left: 385px;
|
color: white;
|
height: 20px;
|
width: 100px;
|
}
|
|
.layer03-right-chart {
|
position: relative;
|
float: left;
|
height: 100%;
|
width: 32%;
|
}
|
|
.layer03-right-chart-label {
|
color: white;
|
text-align: center;
|
position: absolute;
|
bottom: 60px;
|
width: 100%;
|
}
|
|
.layer04-panel {
|
position: relative;
|
float: left;
|
height: 93%;
|
width: 48%;
|
/* overflow: hidden; */
|
}
|
|
.layer04-panel-label {
|
width: 100%;
|
height: 15%;
|
color: white;
|
padding-top: 5px;
|
}
|
|
.layer04-panel-chart {
|
width: 100%;
|
height: 85%;
|
}
|
|
|
|
/* /// */
|
ul>li {
|
list-style: none;
|
}
|
|
/* *{
|
;
|
|
} */
|
.scroll-table {
|
width: 100%;
|
/* margin: 17px auto 25px auto; */
|
height: 216px;
|
|
}
|
|
.scroll-table-head {
|
height: 44px;
|
border: 1px solid rgba(74, 137, 219, 0.36);
|
width: 100%;
|
font-size: 16px;
|
color: #D1E7FF;
|
font-weight: bold;
|
display: flex;
|
justify-content: space-around;
|
padding: 0;
|
margin: 0;
|
|
|
|
}
|
|
.scroll-table-head>li {
|
float: left;
|
border-right: 1px solid rgba(74, 137, 219, 0.36);
|
text-align: center;
|
height: 100%;
|
line-height: 42px;
|
width: auto;
|
|
flex-grow: 1;
|
}
|
|
|
|
.scroll-table-body {
|
height: calc(100% - 44px);
|
width: 100%;
|
border: 1px solid rgba(74, 137, 219, 0.36);
|
border-top: 0;
|
overflow: hidden;
|
|
|
}
|
|
.scroll-table-body-inner {
|
position: relative;
|
height: 100%;
|
|
|
width: 100%;
|
}
|
|
.scroll-table-body-inner ul {}
|
|
.scroll-table-body-inner>ul:nth-child(odd) {
|
background: rgba(255, 255, 255, 0.08);
|
|
|
}
|
|
.scroll-table-body-inner>ul {
|
height: 33%;
|
line-height: 48px;
|
border-bottom: 1px solid rgba(74, 137, 219, 0.36);
|
overflow: hidden;
|
position: absolute;
|
left: 0;
|
width: 100%;
|
top: 100%;
|
display: flex;
|
justify-content: space-around;
|
|
}
|
|
.scroll-table-body-inner>ul>li {
|
font-size: 12px;
|
color: #FFFFFF;
|
height: 100%;
|
font-weight: 0;
|
/* flex-grow: 1; */
|
width: 163.17px;
|
/* float: left; */
|
text-align: center;
|
}
|
|
|
|
.scroll-table-body-inner>ul.scroll-table-body-row-1 {
|
top: 0;
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.scroll-table-body-inner>ul.scroll-table-body-row-2 {
|
top: 33%;
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.scroll-table-body-inner>ul.scroll-table-body-row-3 {
|
top: 66%;
|
display: flex;
|
justify-content: space-around;
|
}
|
</style>
|
|
<title>服务资源实时监控</title>
|
</head>
|
|
<body>
|
<div class="main">
|
|
<div id="layer02" class="layer" style="height:15%;">
|
<div id="layer02_01" style="width:20%;">
|
<div class="layer02-data">
|
<span style="font-size:26px;" id="totalserver">3102</span>
|
<span style="font-size:16px;">条</span>
|
</div>
|
<canvas width="200" height="100"></canvas>
|
</div>
|
<div id="layer02_02" style="width:20%;">
|
<div class="layer02-data">
|
<span style="font-size:26px;" id="activetotal">111</span>
|
<span style="font-size:16px;">条</span>
|
</div>
|
<canvas width="200" height="100"></canvas>
|
</div>
|
<div id="layer02_03" style="width:21%;">
|
<div class="layer02-data">
|
<span style="font-size:26px;" id="warningtotal">11111</span>
|
<span style="font-size:16px;">条</span>
|
</div>
|
<canvas width="200" height="100"></canvas>
|
</div>
|
<!-- <div id="layer02_04" style="width:12%;">
|
<div class="layer02-data">
|
<span style="font-size:26px;">50</span>
|
<span style="font-size:16px;">PB</span>
|
</div>
|
<canvas width="120" height="100"></canvas>
|
</div>
|
<div id="layer02_05" style="width:12%;">
|
<div class="layer02-data">
|
<span style="font-size:26px;">25</span>
|
<span style="font-size:16px;">个</span>
|
</div>
|
<canvas width="120" height="100"></canvas>
|
</div>
|
<div id="layer02_06" style="width:12%;">
|
<div class="layer02-data">
|
<span style="font-size:26px;">5</span>
|
<span style="font-size:16px;">个</span>
|
</div>
|
<canvas width="120" height="100"></canvas>
|
</div> -->
|
</div>
|
<div id="layer03" class="layer" style="height:40%;">
|
<div id="layer03_left" style="width:48%;" class="layer03-panel">
|
<div id="layer03_left_label01" class="layer03-left-label">资源目录统计</div>
|
<!--
|
<div id="layer03_left_label02" class="layer03-left-label">(左)在线数量 (右)上线率</div>
|
-->
|
<div id="layer03_left_01" class="layer03-left-chart" style="width:100%;">
|
<!-- <canvas width="100" height="200" style="margin:30px 0 0 20px;"></canvas> -->
|
</div>
|
|
<!-- <div id="layer03_left_02" class="layer03-left-chart" style="width:80%;"></div> -->
|
<!--
|
<div id="layer03_left_03" class="layer03-left-chart" style="width:80%;"></div>
|
-->
|
</div>
|
<div id="layer03_right" style="width:50%;" class="layer03-panel">
|
<div id="layer03_right_label">资源类型统计</div>
|
<div id="layer03_right_chart01" class="layer03-right-chart">
|
<!-- <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
|
<div class="layer03-right-chart-label">Hdfs</div> -->
|
</div>
|
<div id="layer03_right_label_02">资源审核状态</div>
|
<div id="layer03_right_chart02" class="layer03-right-chart">
|
<!-- <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
|
<div class="layer03-right-chart-label">Rdbms</div> -->
|
</div>
|
<div id="layer03_right_label_03">共享协议</div>
|
<div id="layer03_right_chart03" class="layer03-right-chart">
|
|
</div>
|
</div>
|
</div>
|
<div id="layer04" class="layer" style="height:30%;">
|
<div id="layer04_left" class="layer04-panel">
|
<div id="layer04_left_label" class="layer04-panel-label">每日服务访问量统计</div>
|
<div id="layer04_left_chart" class="layer04-panel-chart">
|
<iframe src="http://71.3.21.232:8070/visitlogchartperday.html" width="100%" height="100%" frameborder="0"></iframe>
|
</div>
|
</div>
|
<div id="layer04_right" class="layer04-panel" style="background-color: transparent;">
|
|
<div class="scroll-table">
|
<ul class="scroll-table-head">
|
<li>名称</li>
|
<li>状态</li>
|
<li>时间</li>
|
</ul>
|
<div class="scroll-table-body">
|
<div class="scroll-table-body-inner">
|
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
<script src="jquery-3.1.0.min.js"></script>
|
<script src="echarts_4.1.0.rc2_echarts.min.js"></script>
|
<script src="monitor.js"></script>
|
<script>
|
/*列表滚动*/
|
$(function () {
|
var scrollIndex = 0;
|
var scrollIndex1 = 1;
|
var scrollIndex2 = 2;
|
var scrollIndex3 = 3;
|
var scrolltimer = null;
|
var scrollimgs = $(".scroll-table-body-inner>ul");
|
var scrolltime = 1500;
|
var scrollplayNum = scrollimgs.length - 1;
|
|
function moveTop() {
|
scrollimgs.eq(scrollIndex).stop(true).animate({
|
top: '-33%'
|
}, function () {
|
$(this).css({
|
top: "100%"
|
});
|
});
|
scrollimgs.eq(scrollIndex1).stop(true).animate({
|
top: 0
|
});
|
scrollimgs.eq(scrollIndex2).stop(true).animate({
|
top: '33%'
|
});
|
scrollimgs.eq(scrollIndex3).stop(true).animate({
|
top: '66%'
|
});
|
scrollimgs.removeClass();
|
}
|
|
function autoPlay() {
|
if (scrollIndex > scrollplayNum) {
|
scrollIndex = 0;
|
}
|
if (scrollIndex1 > scrollplayNum) {
|
scrollIndex1 = 0;
|
}
|
if (scrollIndex2 > scrollplayNum) {
|
scrollIndex2 = 0;
|
}
|
if (scrollIndex3 > scrollplayNum) {
|
scrollIndex3 = 0;
|
}
|
moveTop();
|
scrollIndex++;
|
scrollIndex1++;
|
scrollIndex2++;
|
scrollIndex3++;
|
}
|
scrolltimer = setInterval(autoPlay, scrolltime);
|
$(".scroll-table-body").mouseenter(function () {
|
clearInterval(scrolltimer);
|
}).mouseleave(function () {
|
scrolltimer = setInterval(autoPlay, scrolltime);
|
});
|
|
|
//end
|
// -----
|
drawLayer02Label($("#layer02_01 canvas").get(0), "服务资源总数", 80, 200);
|
drawLayer02Label($("#layer02_02 canvas").get(0), "今日活跃资源总数", 80, 300);
|
drawLayer02Label($("#layer02_03 canvas").get(0), "服务资源告警总数", 80, 400);
|
|
|
});
|
|
|
// window.onload = function () {
|
|
|
$.ajax({
|
url: 'http://71.3.21.232:8082/res/jitmonitor/warning',
|
dataType: "json",
|
type: "get",
|
async: false,
|
success: function (data) {
|
for (let i = 0; i < data.length; i++) {
|
let temp = `<ul>
|
<li>
|
<div>${data[i].TITLE}</div>
|
</li>
|
<li>${data[i].SERVERSTATUS}</li>
|
<li><span>${data[i].TIME}</span></li>
|
</ul>`
|
|
$('.scroll-table-body-inner').append(temp)
|
}
|
|
|
},
|
error: function (s1, s2, s3) {
|
|
}
|
});
|
|
|
$.ajax({
|
url: 'http://71.3.21.232:8082/res/jitmonitor/index',
|
dataType: "json",
|
type: "get",
|
async: false,
|
success: function (data) {
|
renderLayerleft(data)
|
renderLayerleft1(data)
|
renderLayerleft2(data)
|
renderLayerleft3(data)
|
|
},
|
error: function (s1, s2, s3) {
|
|
}
|
});
|
</script>
|
</body>
|
|
</html>
|
