yan/mdserver-web
1
0
Fork 0
mirror of https://github.com/midoks/mdserver-web.git synced 2026-10-10 04:19:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

监控页面-自定义时间优化。

Browse Source
This commit is contained in:
midoks
2023-07-15 19:33:17 +08:00
parent 274592229e
commit 5c8527a5de
5 changed files with 180 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -110,6 +110,7 @@ docker run -itd --name mw-server --privileged=true -p 7200:7200 -p 80:80 -p 443:
* 修复子目录绑定-伪静态问题。
* [插件]docker - 添加IP地址池。
* PHP下载中国优化。
* 监控页面-自定义时间优化。
### JSDelivr安装地址
class/core/config_api.py
+1 -1
View File
@@ -27,7 +27,7 @@ from flask import request
class config_api:
__version = '0.15.0.2'
__version = '0.15.0.3'
__api_addr = 'data/api.json'
def __init__(self):
route/static/app/control.js
+128 -221
View File
@@ -1,78 +1,100 @@
//默认显示7天周期图表
setTimeout(function(){
Wday(0,'getload');
},500);
},100);
setTimeout(function(){
Wday(0,'cpu');
},500);
},200);
setTimeout(function(){
Wday(0,'mem');
},1000);
},500);
setTimeout(function(){
Wday(0,'disk');
},1500);
},100);
setTimeout(function(){
Wday(0,'network');
},2000);
},1500);
$(".st").hover(function(){
$(".searcTime .st").click(function(){
var status = $(this).data('status');
if (status == 'show'){
$(this).next().hide();
$(this).data('status','hide');
} else{
$(this).next().show();
$(this).data('status','show');
}
});
//自定义时间-切换
$(".searcTime .st").hover(function(){
$(this).data('status','show');
$(this).next().show();
},function(){
$(this).next().hide();
$(this).next().hover(function(){
$(this).show();
},function(){
$(this).hide();
})
// $(this).next().hide();
// $(this).next().hover(function(){
// $(this).show();
// },function(){
// $(this).hide();
// })
})
$(".searcTime .gt").click(function(){
$(this).addClass("on").siblings().removeClass("on");
})
$(".loadbtn").click(function(){
$(this).parents(".searcTime").find("span").removeClass("on");
$(this).parents(".searcTime").find(".st").addClass("on");
var b = (new Date($(this).parent().find(".btime").val()).getTime())/1000;
var e = (new Date($(this).parent().find(".etime").val()).getTime())/1000;
//渲染日期时间范围 start
var render_dlist = [
'loadbtn_rtime',
'cpubtn_rtime',
'membtn_rtime',
'diskbtn_rtime',
'networkbtn_rtime'
];
for (var i = 0; i < render_dlist.length; i++) {
laydate.render({
elem: '#'+render_dlist[i]
,type: 'datetime'
,range: true
});
var b = getBeforeDate(28).replaceAll('/','-') + " 00:00:00";
var e = getBeforeDate(0).replaceAll('/','-') + " 23:59:59";
$('#'+render_dlist[i]).val(b + ' - ' + e);
}
//渲染日期时间范围 end
$('.sbtn').click(function(){
$(".searcTime .st").next().hide();
var rtime = $(this).parent().find(".rtime").val();
var rarr = rtime.split(' - ');
var b = (new Date(rarr[0]).getTime())/1000;
var e = (new Date(rarr[1]).getTime())/1000;
b = Math.round(b);
e = Math.round(e);
getload(b,e)
})
$(".cpubtn").click(function(){
$(this).parents(".searcTime").find("span").removeClass("on");
$(this).parents(".searcTime").find(".st").addClass("on");
var b = (new Date($(this).parent().find(".btime").val()).getTime())/1000;
var e = (new Date($(this).parent().find(".etime").val()).getTime())/1000;
b = Math.round(b);
e = Math.round(e);
cpu(b,e)
})
$(".membtn").click(function(){
$(this).parents(".searcTime").find("span").removeClass("on");
$(this).parents(".searcTime").find(".st").addClass("on");
var b = (new Date($(this).parent().find(".btime").val()).getTime())/1000;
var e = (new Date($(this).parent().find(".etime").val()).getTime())/1000;
b = Math.round(b);
e = Math.round(e);
mem(b,e)
})
$(".diskbtn").click(function(){
$(this).parents(".searcTime").find("span").removeClass("on");
$(this).parents(".searcTime").find(".st").addClass("on");
var b = (new Date($(this).parent().find(".btime").val()).getTime())/1000;
var e = (new Date($(this).parent().find(".etime").val()).getTime())/1000;
b = Math.round(b);
e = Math.round(e);
disk(b,e)
})
$(".networkbtn").click(function(){
$(this).parents(".searcTime").find("span").removeClass("on");
$(this).parents(".searcTime").find(".st").addClass("on");
var b = (new Date($(this).parent().find(".btime").val()).getTime())/1000;
var e = (new Date($(this).parent().find(".etime").val()).getTime())/1000;
b = Math.round(b);
e = Math.round(e);
network(b,e)
})
if ($(this).hasClass('loadbtn')){
getload(b,e);
} else if ($(this).hasClass('cpubtn')){
cpu(b,e);
}else if ($(this).hasClass('membtn')){
mem(b,e);
} else if ($(this).hasClass('diskbtn')){
disk(b,e);
}
});
//指定天数
function Wday(day,name){
var now = (new Date().getTime())/1000;
@@ -94,19 +116,19 @@ function Wday(day,name){
}
switch (name){
case "cpu":
cpu(b,e);
cpu(b, e);
break;
case "mem":
mem(b,e);
mem(b, e);
break;
case "disk":
disk(b,e);
disk(b, e);
break;
case "network":
network(b,e);
network(b, e);
break;
case "getload":
getload(b,e);
getload(b, e);
break;
}
}
@@ -119,6 +141,7 @@ function getToday(){
return str;
}
getStatus();
//取监控状态
function getStatus(){
loadT = layer.msg('正在读取,请稍候...',{icon:16,time:0})
@@ -141,7 +164,7 @@ function getStatus(){
},'json');
}
getStatus();
//设置监控状态
function setControl(act, value=false){
@@ -172,8 +195,9 @@ function setControl(act, value=false){
loadT = layer.msg('正在处理,请稍候...',{icon:16,time:0})
$.post('/system/set_control','type='+type+'&day='+day,function(rdata){
layer.close(loadT);
layer.msg(rdata.msg,{icon:rdata.status?1:2});
showMsg(rdata.msg, function(){
layer.close(loadT);
},{icon:rdata.status?1:2})
},'json');
}
@@ -183,8 +207,9 @@ function closeControl(){
layer.confirm('您真的清空所有监控记录吗？',{title:'清空记录',icon:3,closeBtn:1}, function() {
loadT = layer.msg('正在处理,请稍候...',{icon:16,time:0})
$.post('/system/set_control','type=del',function(rdata){
layer.close(loadT);
layer.msg(rdata.msg,{icon:rdata.status?1:2});
showMsg(rdata.msg, function(){
layer.close(loadT);
},{icon:rdata.status?1:2})
},'json');
});
}
@@ -199,19 +224,18 @@ function getBeforeDate(n){
var day=d.getDate();
if(day <= n){
if(mon>1) {
mon=mon-1;
}
else {
year = year-1;
mon = 12;
mon = mon-1;
} else {
year = year-1;
mon = 12;
}
}
d.setDate(d.getDate()-n);
year = d.getFullYear();
mon=d.getMonth()+1;
day=d.getDate();
s = year+"/"+(mon<10?('0'+mon):mon)+"/"+(day<10?('0'+day):day);
return s;
s = year+"/"+(mon<10?('0'+mon):mon)+"/"+(day<10?('0'+day):day);
return s;
}
//cpu
function cpu(b,e){
@@ -229,20 +253,14 @@ function cpu(b,e){
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
axisPointer: { type: 'cross' },
formatter: '{b}<br />{a}: {c}%'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xData,
axisLine:{
lineStyle:{
color:"#666"
}
}
axisLine:{ lineStyle:{ color:"#666"} }
},
yAxis: {
type: 'value',
@@ -250,16 +268,8 @@ function cpu(b,e){
boundaryGap: [0, '100%'],
min:0,
max: 100,
splitLine:{
lineStyle:{
color:"#ddd"
}
},
axisLine:{
lineStyle:{
color:"#666"
}
}
splitLine:{ lineStyle:{ color:"#ddd" } },
axisLine:{ lineStyle:{ color:"#666" } }
},
dataZoom: [{
type: 'inside',
@@ -286,17 +296,13 @@ function cpu(b,e){
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(0, 153, 238)'
}
},
itemStyle: { normal: { color: 'rgb(0, 153, 238)' } },
data: yData
}
]
};
myChartCpu.setOption(option);
window.addEventListener("resize",function(){
window.addEventListener("resize",function(){
myChartCpu.resize();
});
},'json');
@@ -318,20 +324,14 @@ function mem(b,e){
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
axisPointer: { type: 'cross' },
formatter: '{b}<br />{a}: {c}%'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xData,
axisLine:{
lineStyle:{
color:"#666"
}
}
axisLine:{ lineStyle:{ color:"#666" } }
},
yAxis: {
type: 'value',
@@ -339,16 +339,8 @@ function mem(b,e){
boundaryGap: [0, '100%'],
min:0,
max: 100,
splitLine:{
lineStyle:{
color:"#ddd"
}
},
axisLine:{
lineStyle:{
color:"#666"
}
}
splitLine:{ lineStyle:{ color:"#ddd" } },
axisLine:{ lineStyle:{ color:"#666" } }
},
dataZoom: [{
type: 'inside',
@@ -375,11 +367,7 @@ function mem(b,e){
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(0, 153, 238)'
}
},
itemStyle: { normal: { color: 'rgb(0, 153, 238)' } },
data: zData
}
]
@@ -423,26 +411,14 @@ function disk(b,e){
type: 'category',
boundaryGap: false,
data: xData,
axisLine:{
lineStyle:{
color:"#666"
}
}
axisLine:{ lineStyle:{ color:"#666" }}
},
yAxis: {
type: 'value',
name: '单位:KB/s',
boundaryGap: [0, '100%'],
splitLine:{
lineStyle:{
color:"#ddd"
}
},
axisLine:{
lineStyle:{
color:"#666"
}
}
splitLine:{ lineStyle:{ color:"#ddd"} },
axisLine:{ lineStyle:{ color:"#666" } }
},
dataZoom: [{
type: 'inside',
@@ -469,11 +445,7 @@ function disk(b,e){
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(255, 70, 131)'
}
},
itemStyle: { normal: { color: 'rgb(255, 70, 131)' } },
data: rData
},
{
@@ -482,11 +454,7 @@ function disk(b,e){
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgba(46, 165, 186, .7)'
}
},
itemStyle: { normal: { color: 'rgba(46, 165, 186, .7)'} },
data: wData
}
]
@@ -522,9 +490,7 @@ function network(b,e){
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
axisPointer: { type: 'cross' }
},
legend: {
data:[lan.index.net_up,lan.index.net_down]
@@ -533,26 +499,14 @@ function network(b,e){
type: 'category',
boundaryGap: false,
data: xData,
axisLine:{
lineStyle:{
color:"#666"
}
}
axisLine:{ lineStyle:{ color:"#666" } }
},
yAxis: {
type: 'value',
name: lan.index.unit+':KB/s',
boundaryGap: [0, '100%'],
splitLine:{
lineStyle:{
color:"#ddd"
}
},
axisLine:{
lineStyle:{
color:"#666"
}
}
splitLine:{ lineStyle:{ color:"#ddd" } },
axisLine:{ lineStyle:{ color:"#666" } }
},
dataZoom: [{
type: 'inside',
@@ -579,11 +533,7 @@ function network(b,e){
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(255, 140, 0)'
}
},
itemStyle: { normal: { color: 'rgb(255, 140, 0)' } },
data: yData
},
{
@@ -592,11 +542,7 @@ function network(b,e){
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(30, 144, 255)'
}
},
itemStyle: { normal: { color: 'rgb(30, 144, 255)' } },
data: zData
}
]
@@ -879,17 +825,8 @@ function getload(b,e){
{
name: '资源使用率%',
type: 'line',
lineStyle: {
normal: {
width: 2,
color: 'rgb(255, 140, 0)'
}
},
itemStyle: {
normal: {
color: 'rgb(255, 140, 0)'
}
},
lineStyle: { normal: { width: 2, color: 'rgb(255, 140, 0)'}},
itemStyle: {normal: { color: 'rgb(255, 140, 0)' }},
data: yData
},
{
@@ -897,17 +834,8 @@ function getload(b,e){
yAxisIndex: 1,
name: '1分钟',
type: 'line',
lineStyle: {
normal: {
width: 2,
color: 'rgb(30, 144, 255)'
}
},
itemStyle: {
normal: {
color: 'rgb(30, 144, 255)'
}
},
lineStyle: { normal: {width: 2,color: 'rgb(30, 144, 255)' }},
itemStyle: { normal: { color: 'rgb(30, 144, 255)'} },
data: zData
},
{
@@ -915,17 +843,8 @@ function getload(b,e){
yAxisIndex: 1,
name: '5分钟',
type: 'line',
lineStyle: {
normal: {
width: 2,
color: 'rgb(0, 178, 45)'
}
},
itemStyle: {
normal: {
color: 'rgb(0, 178, 45)'
}
},
lineStyle: { normal: { width: 2, color: 'rgb(0, 178, 45)'} },
itemStyle: { normal: { color: 'rgb(0, 178, 45)' } },
data: aData
},
{
@@ -933,28 +852,16 @@ function getload(b,e){
yAxisIndex: 1,
name: '15分钟',
type: 'line',
lineStyle: {
normal: {
width: 2,
color: 'rgb(147, 38, 255)'
}
},
itemStyle: {
normal: {
color: 'rgb(147, 38, 255)'
}
},
lineStyle: { normal: { width: 2, color: 'rgb(147, 38, 255)'}},
itemStyle: { normal: { color: 'rgb(147, 38, 255)' } },
data: bData
}
],
textStyle: {
color: '#666',
fontSize: 12
}
textStyle: { color: '#666',fontSize: 12}
}
myChartgetload.setOption(option);
window.addEventListener("resize",function(){
myChartgetload.resize();
})
},'json')
},'json');
}
route/static/css/site.css
+9 -8
View File
@@ -1805,7 +1805,7 @@ html .menu .menu_exit:hover {
.view1,
.view2 {
margin-bottom: 15px
margin-bottom: 15px;
}
.searcTime {
@@ -1840,7 +1840,7 @@ html .menu .menu_exit:hover {
display: inline-block;
position: relative;
float: left;
line-height: 16px
line-height: 16px;
}
.searcTime .ss .st {
@@ -1848,7 +1848,7 @@ html .menu .menu_exit:hover {
border: #ddd 1px solid;
margin-right: -1px;
cursor: pointer;
float: left
float: left;
}
.searcTime .ss .time {
@@ -1859,26 +1859,27 @@ html .menu .menu_exit:hover {
position: absolute;
right: -1px;
top: 27px;
width: 217px;
z-index: 99
width: 306px;
z-index: 99;
}
.searcTime .ss .time span {
margin-bottom: 10px;
display: block
display: block;
}
.searcTime .ss .time input {
border: 1px solid #ddd;
height: 22px;
padding: 0 5px;
width: 132px
margin-left:5px;
width: 227px;
}
.searcTime .ss .time input:focus {
border: #66afe9 1px solid;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.searcTime .ss .sbtn {
route/templates/default/control.html
+41 -16
View File
@@ -51,14 +51,15 @@
<div class="ss">
<span class="st">自定义时间</span>
<div class="time">
<span class="bt">开始时间<input class="btime" type="text" value="2017/1/10 00:00:00"></span>
<span class="et">结束时间<input class="etime" type="text" value="2017/1/13 00:00:00"></span>
<span class="bt">时间范围
<input id="loadbtn_rtime" class="rtime" type="text" value="2023-07-06 00:00:00 - 2023-08-08 00:00:00">
</span>
<div class="sbtn loadbtn">提交</div>
</div>
</div>
</div>
</div>
<div id="getloadview" style="width:100%; height:330px"></div>
<div id="getloadview" style="width:100%; height:330px;"></div>
</div>
</div>
</div>
@@ -67,12 +68,18 @@
<div class="bgw pb15">
<div class="title c6 plr15">
<h3 class="c-tit f16">CPU</h3>
<div class="searcTime pull-right"><span class="tit">区间检索：</span><span class="gt" onclick="Wday(1,'cpu')">昨天</span><span class="gt on" onclick="Wday(0,'cpu')">今天</span><span class="gt" onclick="Wday(7,'cpu')">最近7天</span><span class="gt" onclick="Wday(30,'cpu')">最近30天</span>
<div class="searcTime pull-right">
<span class="tit">区间检索：</span>
<span class="gt" onclick="Wday(1,'cpu')">昨天</span>
<span class="gt on" onclick="Wday(0,'cpu')">今天</span>
<span class="gt" onclick="Wday(7,'cpu')">最近7天</span>
<span class="gt" onclick="Wday(30,'cpu')">最近30天</span>
<div class="ss">
<span class="st">自定义时间</span>
<div class="time">
<span class="bt">开始时间<input class="btime" type="text" value="2017/1/10 00:00:00"></span>
<span class="et">结束时间<input class="etime" type="text" value="2017/1/13 00:00:00"></span>
<span class="bt">时间范围
<input id="cpubtn_rtime" class="rtime" type="text" value="2023-07-06 00:00:00 - 2023-08-08 00:00:00">
</span>
<div class="sbtn cpubtn">提交</div>
</div>
</div>
@@ -87,12 +94,18 @@
<div class="bgw pb15">
<div class="title c6 plr15">
<h3 class="c-tit f16">内存</h3>
<div class="searcTime pull-right"><span class="tit">区间检索：</span><span class="gt" onclick="Wday(1,'mem')">昨天</span><span class="gt on" onclick="Wday(0,'mem')">今天</span><span class="gt" onclick="Wday(7,'mem')">最近7天</span><span class="gt" onclick="Wday(30,'mem')">最近30天</span>
<div class="searcTime pull-right">
<span class="tit">区间检索：</span>
<span class="gt" onclick="Wday(1,'mem')">昨天</span>
<span class="gt on" onclick="Wday(0,'mem')">今天</span>、
<span class="gt" onclick="Wday(7,'mem')">最近7天</span>
<span class="gt" onclick="Wday(30,'mem')">最近30天</span>
<div class="ss">
<span class="st">自定义时间</span>
<div class="time">
<span class="bt">开始时间<input class="btime" type="text" value="2017/1/10 00:00:00"></span>
<span class="et">结束时间<input class="etime" type="text" value="2017/1/13 00:00:00"></span>
<span class="bt">时间范围
<input id="membtn_rtime" class="rtime" type="text" value="2023-07-06 00:00:00 - 2023-08-08 00:00:00">
</span>
<div class="sbtn membtn">提交</div>
</div>
</div>
@@ -107,12 +120,18 @@
<div class="bgw pb15">
<div class="title c6 plr15 mb15">
<h3 class="c-tit f16">磁盘IO</h3>
<div class="searcTime pull-right"><span class="tit">$data['lan']['S1']</span><span class="gt" onclick="Wday(1,'disk')">昨天</span><span class="gt on" onclick="Wday(0,'disk')">今天</span><span class="gt" onclick="Wday(7,'disk')">最近7天</span><span class="gt" onclick="Wday(30,'disk')">最近30天</span>
<div class="searcTime pull-right">
<span class="tit">$data['lan']['S1']</span>
<span class="gt" onclick="Wday(1,'disk')">昨天</span>
<span class="gt on" onclick="Wday(0,'disk')">今天</span>
<span class="gt" onclick="Wday(7,'disk')">最近7天</span>
<span class="gt" onclick="Wday(30,'disk')">最近30天</span>
<div class="ss">
<span class="st">自定义时间</span>
<div class="time">
<span class="bt">开始时间<input class="btime" type="text" value="2017/1/10 00:00:00"></span>
<span class="et">结束时间<input class="etime" type="text" value="2017/1/13 00:00:00"></span>
<span class="bt">时间范围
<input id="diskbtn_rtime" class="rtime" type="text" value="2023-07-06 00:00:00 - 2023-08-08 00:00:00">
</span>
<div class="sbtn diskbtn">提交</div>
</div>
</div>
@@ -127,12 +146,18 @@
<div class="bgw pb15">
<div class="title c6 plr15 mb15">
<h3 class="c-tit f16">网络IO</h3>
<div class="searcTime pull-right"><span class="tit">$data['lan']['S1']</span><span class="gt" onclick="Wday(1,'network')">昨天</span><span class="gt on" onclick="Wday(0,'network')">今天</span><span class="gt" onclick="Wday(7,'network')">最近7天</span><span class="gt" onclick="Wday(30,'network')">最近30天</span>
<div class="searcTime pull-right">
<span class="tit">$data['lan']['S1']</span>
<span class="gt" onclick="Wday(1,'network')">昨天</span>
<span class="gt on" onclick="Wday(0,'network')">今天</span>
<span class="gt" onclick="Wday(7,'network')">最近7天</span>
<span class="gt" onclick="Wday(30,'network')">最近30天</span>
<div class="ss">
<span class="st">自定义时间</span>
<div class="time">
<span class="bt">开始时间<input class="btime" type="text" value="2017/1/10 00:00:00"></span>
<span class="et">结束时间<input class="etime" type="text" value="2017/1/13 00:00:00"></span>
<span class="bt">时间范围
<input id="networkbtn_rtime" class="rtime" type="text" value="2023-07-06 00:00:00 - 2023-08-08 00:00:00">
</span>
<div class="sbtn networkbtn">提交</div>
</div>
</div>
@@ -146,6 +171,6 @@
</div>
</div>
</div>
<script type="text/javascript" src="/static/laydate/laydate.js?v={{config.version}}"></script>
<script src="/static/app/control.js?v={{config.version}}"></script>
{% endblock %}