mirror of
https://dl.bcrjl.com/ghg/HaoOuBa/Joe.git
synced 2026-02-17 13:10:05 +08:00
更新
This commit is contained in:
杜恒
@@ -1,208 +1,296 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
/* 转换字节 */
|
||||
const bytesToSize = bytes => {
|
||||
const k = 1024,
|
||||
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
|
||||
i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
|
||||
};
|
||||
{
|
||||
/* 转换字节 */
|
||||
const bytesToSize = bytes => {
|
||||
const k = 1024,
|
||||
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
|
||||
i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
const categories = [];
|
||||
const upSeries = [];
|
||||
const downSeries = [];
|
||||
const categories = [];
|
||||
const upSeries = [];
|
||||
const downSeries = [];
|
||||
|
||||
const flowDom = document.querySelector('#flow');
|
||||
const workDom = document.querySelector('#work');
|
||||
const flowChart = flowDom && echarts.init(flowDom);
|
||||
const workChart = workDom && echarts.init(workDom);
|
||||
if (flowDom && workDom) initChart();
|
||||
const flowDom = document.querySelector('#flow');
|
||||
const workDom = document.querySelector('#work');
|
||||
const flowChart = flowDom && echarts.init(flowDom);
|
||||
const workChart = workDom && echarts.init(workDom);
|
||||
if (flowDom && workDom) initChart();
|
||||
|
||||
function initChart() {
|
||||
function initChart() {
|
||||
$.ajax({
|
||||
url: Joe.BASE_API,
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
routeType: 'server_status'
|
||||
},
|
||||
success(res) {
|
||||
{
|
||||
$('.joe_census__server-item .count .up').html(`总发送：${bytesToSize(res.upTotal)}`);
|
||||
$('.joe_census__server-item .count .down').html(`总接收：${bytesToSize(res.downTotal)}`);
|
||||
const stamp = new Date();
|
||||
const hours = String(stamp.getHours()).padStart(2, 0);
|
||||
const minutes = String(stamp.getMinutes()).padStart(2, 0);
|
||||
const seconds = String(stamp.getSeconds()).padStart(2, 0);
|
||||
const time = `${hours}:${minutes}:${seconds}`;
|
||||
categories.push(time);
|
||||
upSeries.push(res.up);
|
||||
downSeries.push(res.down);
|
||||
if (categories.length > 5) categories.shift();
|
||||
if (upSeries.length > 5) upSeries.shift();
|
||||
if (downSeries.length > 5) downSeries.shift();
|
||||
flowChart.setOption({
|
||||
title: {
|
||||
subtext: '单位 KB/s'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '0',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: categories
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
name: '上行',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f39494',
|
||||
areaStyle: {
|
||||
color: '#f39494'
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#f39494'
|
||||
}
|
||||
}
|
||||
},
|
||||
stack: '总量',
|
||||
data: upSeries
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: '下行',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#9dd3e8',
|
||||
areaStyle: {
|
||||
color: '#9dd3e8'
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#9dd3e8'
|
||||
}
|
||||
}
|
||||
},
|
||||
stack: '总量',
|
||||
data: downSeries
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
{
|
||||
/* CPU占用 */
|
||||
const cpuUse = res.cpu[0];
|
||||
/* 内存占用 */
|
||||
const memoryRealUse = Math.round((res.memory.memRealUsed / res.memory.memTotal) * 1000) / 10;
|
||||
/* 内存缓冲 */
|
||||
const memoryCacheUse = Math.round((res.memory.memCached / res.memory.memTotal) * 1000) / 10;
|
||||
/* 系统缓冲 */
|
||||
const memoryBufferUse = Math.round((res.memory.memBuffers / res.memory.memTotal) * 1000) / 10;
|
||||
/* 系统负载 */
|
||||
const systemLoad = Math.round((res.load.one / res.load.max) * 100) > 100 ? 100 : Math.round((res.load.one / res.load.max) * 100);
|
||||
workChart.setOption({
|
||||
title: {
|
||||
subtext: '单位 百分比'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: ['CPU占用', '内存占用', '系统缓冲', '内存缓冲', '系统负载']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: {
|
||||
data: [
|
||||
{
|
||||
name: 'CPU占用',
|
||||
value: cpuUse,
|
||||
itemStyle: {
|
||||
color: '#b3c25a'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '内存占用',
|
||||
value: memoryRealUse,
|
||||
itemStyle: {
|
||||
color: '#67b580'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '系统缓冲',
|
||||
value: memoryBufferUse,
|
||||
itemStyle: {
|
||||
color: '#86ba71'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '内存缓冲',
|
||||
value: memoryCacheUse,
|
||||
itemStyle: {
|
||||
color: '#feb041'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '系统负载',
|
||||
value: systemLoad,
|
||||
itemStyle: {
|
||||
color: '#fd7e55'
|
||||
}
|
||||
}
|
||||
],
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
label: {
|
||||
show: true,
|
||||
color: '#ffffff',
|
||||
formatter: params => `${params.data.value} %`
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
setTimeout(initChart, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* 初始化统计 */
|
||||
{
|
||||
const categoryDom = document.querySelector('#category');
|
||||
const categoryChart = echarts.init(categoryDom);
|
||||
const seriesData = [];
|
||||
$('.joe_census__basic-item.category ul li').each((index, item) => {
|
||||
seriesData.push({
|
||||
name: item.getAttribute('data-name'),
|
||||
value: item.getAttribute('data-value')
|
||||
});
|
||||
});
|
||||
categoryChart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 8
|
||||
},
|
||||
data: seriesData
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
/* 初始化评论统计 */
|
||||
{
|
||||
const latelyDom = document.querySelector('#lately');
|
||||
const latelyChart = echarts.init(latelyDom);
|
||||
$.ajax({
|
||||
url: Joe.BASE_API,
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
routeType: 'server_status'
|
||||
routeType: 'comment_lately'
|
||||
},
|
||||
success(res) {
|
||||
{
|
||||
$('.joe_census__server-item .count .up').html(`总发送：${bytesToSize(res.upTotal)}`);
|
||||
$('.joe_census__server-item .count .down').html(`总接收：${bytesToSize(res.downTotal)}`);
|
||||
const stamp = new Date();
|
||||
const hours = String(stamp.getHours()).padStart(2, 0);
|
||||
const minutes = String(stamp.getMinutes()).padStart(2, 0);
|
||||
const seconds = String(stamp.getSeconds()).padStart(2, 0);
|
||||
const time = `${hours}:${minutes}:${seconds}`;
|
||||
categories.push(time);
|
||||
upSeries.push(res.up);
|
||||
downSeries.push(res.down);
|
||||
if (categories.length > 5) categories.shift();
|
||||
if (upSeries.length > 5) upSeries.shift();
|
||||
if (downSeries.length > 5) downSeries.shift();
|
||||
flowChart.setOption({
|
||||
title: {
|
||||
subtext: '单位 KB/s'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '0',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: categories
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
name: '上行',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f39494',
|
||||
areaStyle: {
|
||||
color: '#f39494'
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#f39494'
|
||||
}
|
||||
}
|
||||
},
|
||||
stack: '总量',
|
||||
data: upSeries
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: '下行',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#9dd3e8',
|
||||
areaStyle: {
|
||||
color: '#9dd3e8'
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#9dd3e8'
|
||||
}
|
||||
}
|
||||
},
|
||||
stack: '总量',
|
||||
data: downSeries
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
{
|
||||
/* CPU占用 */
|
||||
const cpuUse = res.cpu[0];
|
||||
/* 内存占用 */
|
||||
const memoryRealUse = Math.round((res.memory.memRealUsed / res.memory.memTotal) * 1000) / 10;
|
||||
/* 内存缓冲 */
|
||||
const memoryCacheUse = Math.round((res.memory.memCached / res.memory.memTotal) * 1000) / 10;
|
||||
/* 系统缓冲 */
|
||||
const memoryBufferUse = Math.round((res.memory.memBuffers / res.memory.memTotal) * 1000) / 10;
|
||||
/* 系统负载 */
|
||||
const systemLoad = Math.round((res.load.one / res.load.max) * 100) > 100 ? 100 : Math.round((res.load.one / res.load.max) * 100);
|
||||
workChart.setOption({
|
||||
title: {
|
||||
subtext: '单位 百分比'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: ['CPU占用', '内存占用', '系统缓冲', '内存缓冲', '系统负载']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: {
|
||||
data: [
|
||||
{
|
||||
name: 'CPU占用',
|
||||
value: cpuUse,
|
||||
itemStyle: {
|
||||
color: '#b3c25a'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '内存占用',
|
||||
value: memoryRealUse,
|
||||
itemStyle: {
|
||||
color: '#67b580'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '系统缓冲',
|
||||
value: memoryBufferUse,
|
||||
itemStyle: {
|
||||
color: '#86ba71'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '内存缓冲',
|
||||
value: memoryCacheUse,
|
||||
itemStyle: {
|
||||
color: '#feb041'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '系统负载',
|
||||
value: systemLoad,
|
||||
itemStyle: {
|
||||
color: '#fd7e55'
|
||||
}
|
||||
}
|
||||
],
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
latelyChart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
show: true,
|
||||
color: '#ffffff',
|
||||
formatter: params => `${params.data.value} %`
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)'
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
setTimeout(initChart, 2000);
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: res.categories
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: {
|
||||
name: '数量',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#91cc75',
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#91cc75'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: res.series,
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
2
assets/js/joe.census.min.js
vendored
2
assets/js/joe.census.min.js
vendored
@@ -1 +1 @@
|
||||
document.addEventListener("DOMContentLoaded",()=>{function e(){$.ajax({url:Joe.BASE_API,type:"POST",dataType:"json",data:{routeType:"server_status"},success(l){{$(".joe_census__server-item .count .up").html(`总发送：${t(l.upTotal)}`),$(".joe_census__server-item .count .down").html(`总接收：${t(l.downTotal)}`);const e=new Date,n=String(e.getHours()).padStart(2,0),i=String(e.getMinutes()).padStart(2,0),m=String(e.getSeconds()).padStart(2,0),d=`${n}:${i}:${m}`;o.push(d),a.push(l.up),r.push(l.down),o.length>5&&o.shift(),a.length>5&&a.shift(),r.length>5&&r.shift(),s.setOption({title:{subtext:"单位 KB/s"},grid:{left:"3%",right:"4%",bottom:"0",containLabel:!0},tooltip:{trigger:"axis",axisPointer:{type:"cross",label:{backgroundColor:"#6a7985"}}},xAxis:{axisTick:{show:!1},type:"category",boundaryGap:!1,data:o},yAxis:{type:"value"},series:[{type:"line",name:"上行",smooth:!0,showSymbol:!1,itemStyle:{normal:{color:"#f39494",areaStyle:{color:"#f39494"},lineStyle:{width:2,color:"#f39494"}}},stack:"总量",data:a},{type:"line",name:"下行",smooth:!0,showSymbol:!1,itemStyle:{normal:{color:"#9dd3e8",areaStyle:{color:"#9dd3e8"},lineStyle:{width:2,color:"#9dd3e8"}}},stack:"总量",data:r}]})}{const e=l.cpu[0],t=Math.round(l.memory.memRealUsed/l.memory.memTotal*1e3)/10,o=Math.round(l.memory.memCached/l.memory.memTotal*1e3)/10,a=Math.round(l.memory.memBuffers/l.memory.memTotal*1e3)/10,r=Math.round(l.load.one/l.load.max*100)>100?100:Math.round(l.load.one/l.load.max*100);i.setOption({title:{subtext:"单位 百分比"},tooltip:{trigger:"axis",axisPointer:{type:"shadow"}},grid:{left:"3%",right:"3%",bottom:"3%",containLabel:!0},xAxis:{type:"category",axisTick:{show:!1},data:["CPU占用","内存占用","系统缓冲","内存缓冲","系统负载"]},yAxis:{type:"value"},series:{data:[{name:"CPU占用",value:e,itemStyle:{color:"#b3c25a"}},{name:"内存占用",value:t,itemStyle:{color:"#67b580"}},{name:"系统缓冲",value:a,itemStyle:{color:"#86ba71"}},{name:"内存缓冲",value:o,itemStyle:{color:"#feb041"}},{name:"系统负载",value:r,itemStyle:{color:"#fd7e55"}}],type:"bar",showBackground:!0,label:{show:!0,color:"#ffffff",formatter:e=>`${e.data.value} %`},backgroundStyle:{color:"rgba(180, 180, 180, 0.2)"}}})}setTimeout(e,2e3)}})}const t=e=>{const t=1024,o=["B","KB","MB","GB","TB","PB","EB","ZB","YB"],a=Math.floor(Math.log(e)/Math.log(t));return(e/Math.pow(t,a)).toPrecision(3)+" "+o[a]},o=[],a=[],r=[],l=document.querySelector("#flow"),n=document.querySelector("#work"),s=l&&echarts.init(l),i=n&&echarts.init(n);l&&n&&e()});
|
||||
document.addEventListener("DOMContentLoaded",()=>{{const t=e=>{const t=1024,o=["B","KB","MB","GB","TB","PB","EB","ZB","YB"],a=Math.floor(Math.log(e)/Math.log(t));return(e/Math.pow(t,a)).toPrecision(3)+" "+o[a]},o=[],a=[],r=[],l=document.querySelector("#flow"),i=document.querySelector("#work"),s=l&&echarts.init(l),n=i&&echarts.init(i);function e(){$.ajax({url:Joe.BASE_API,type:"POST",dataType:"json",data:{routeType:"server_status"},success(l){{$(".joe_census__server-item .count .up").html(`总发送：${t(l.upTotal)}`),$(".joe_census__server-item .count .down").html(`总接收：${t(l.downTotal)}`);const e=new Date,i=String(e.getHours()).padStart(2,0),n=String(e.getMinutes()).padStart(2,0),c=String(e.getSeconds()).padStart(2,0),m=`${i}:${n}:${c}`;o.push(m),a.push(l.up),r.push(l.down),o.length>5&&o.shift(),a.length>5&&a.shift(),r.length>5&&r.shift(),s.setOption({title:{subtext:"单位 KB/s"},grid:{left:"3%",right:"4%",bottom:"0",containLabel:!0},tooltip:{trigger:"axis",axisPointer:{type:"cross",label:{backgroundColor:"#6a7985"}}},xAxis:{axisTick:{show:!1},type:"category",boundaryGap:!1,data:o},yAxis:{type:"value"},series:[{type:"line",name:"上行",smooth:!0,showSymbol:!1,itemStyle:{normal:{color:"#f39494",areaStyle:{color:"#f39494"},lineStyle:{width:2,color:"#f39494"}}},stack:"总量",data:a},{type:"line",name:"下行",smooth:!0,showSymbol:!1,itemStyle:{normal:{color:"#9dd3e8",areaStyle:{color:"#9dd3e8"},lineStyle:{width:2,color:"#9dd3e8"}}},stack:"总量",data:r}]})}{const e=l.cpu[0],t=Math.round(l.memory.memRealUsed/l.memory.memTotal*1e3)/10,o=Math.round(l.memory.memCached/l.memory.memTotal*1e3)/10,a=Math.round(l.memory.memBuffers/l.memory.memTotal*1e3)/10,r=Math.round(l.load.one/l.load.max*100)>100?100:Math.round(l.load.one/l.load.max*100);n.setOption({title:{subtext:"单位 百分比"},tooltip:{trigger:"axis",axisPointer:{type:"shadow"}},grid:{left:"3%",right:"3%",bottom:"3%",containLabel:!0},xAxis:{type:"category",axisTick:{show:!1},data:["CPU占用","内存占用","系统缓冲","内存缓冲","系统负载"]},yAxis:{type:"value"},series:{data:[{name:"CPU占用",value:e,itemStyle:{color:"#b3c25a"}},{name:"内存占用",value:t,itemStyle:{color:"#67b580"}},{name:"系统缓冲",value:a,itemStyle:{color:"#86ba71"}},{name:"内存缓冲",value:o,itemStyle:{color:"#feb041"}},{name:"系统负载",value:r,itemStyle:{color:"#fd7e55"}}],type:"bar",showBackground:!0,label:{show:!0,color:"#ffffff",formatter:e=>`${e.data.value} %`},backgroundStyle:{color:"rgba(180, 180, 180, 0.2)"}}})}setTimeout(e,2e3)}})}l&&i&&e()}{const e=document.querySelector("#category"),t=echarts.init(e),o=[];$(".joe_census__basic-item.category ul li").each((e,t)=>{o.push({name:t.getAttribute("data-name"),value:t.getAttribute("data-value")})}),t.setOption({tooltip:{trigger:"item"},series:[{type:"pie",roseType:"area",itemStyle:{borderRadius:8},data:o}]})}{const e=document.querySelector("#lately"),t=echarts.init(e);$.ajax({url:Joe.BASE_API,type:"POST",dataType:"json",data:{routeType:"comment_lately"},success(e){t.setOption({tooltip:{trigger:"axis",axisPointer:{type:"cross",label:{backgroundColor:"#6a7985"}}},grid:{left:"3%",right:"3%",bottom:"3%",containLabel:!0},xAxis:{type:"category",axisTick:{show:!1},data:e.categories},yAxis:{type:"value"},series:{name:"数量",itemStyle:{normal:{color:"#91cc75",lineStyle:{width:2,color:"#91cc75"}}},data:e.series,type:"line",smooth:!0}})}})}});
|
||||
Reference in New Issue
Block a user