mirror of
https://github.com/Buriburizaem0n/nezha_domains.git
synced 2026-02-05 21:20:06 +00:00
improve: status-server主题network页 (#422)
This commit is contained in:
nap0o
GitHub
229
resource/template/theme-server-status/home.html
vendored
229
resource/template/theme-server-status/home.html
vendored
@@ -483,24 +483,27 @@
|
||||
// 如果所有元素的 Temperature 都为 0，则返回一个默认值 0
|
||||
return 0;
|
||||
},
|
||||
showCharts(event, id) {
|
||||
const chartContainer = this.$refs[`chart${id}`][0];
|
||||
const chartboxShow = chartContainer.getAttribute('chartbox-show');
|
||||
chartContainer.setAttribute('chartbox-show', chartboxShow === '0' ? '1' : '0');
|
||||
const isAriaExpandedFalse = event.currentTarget.getAttribute('aria-expanded') === 'false';
|
||||
if (!isAriaExpandedFalse) return;
|
||||
showCharts(id,changeChartboxShow=true) {
|
||||
const chartContainer = document.getElementById(`chart-${id}`);
|
||||
if(changeChartboxShow){
|
||||
const chartboxShow = chartContainer.getAttribute('chartbox-show');
|
||||
chartContainer.setAttribute('chartbox-show', chartboxShow === '0' ? '1' : '0');
|
||||
const collapseContainer = document.getElementById(`r${id}`);
|
||||
const isAriaExpandedFalse = collapseContainer.getAttribute('aria-expanded') === 'false';
|
||||
if (!isAriaExpandedFalse) return;
|
||||
}
|
||||
// 发起数据请求
|
||||
const url = `/api/v1/monitor/${id}`;
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.result) { // 数据请求成功，更新数据并渲染图表
|
||||
this.chartDataList[id - 1] = data.result;
|
||||
this.chartDataList[id] = data.result;
|
||||
this.$nextTick(() => {
|
||||
this.renderCharts(id);
|
||||
});
|
||||
} else {
|
||||
console.log('this agent (id:'+ id + ') has no monitor.');
|
||||
console.log('this server (id:'+ id + ') has no monitor.');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
@@ -508,22 +511,18 @@
|
||||
});
|
||||
},
|
||||
renderCharts(id, reload = false) {
|
||||
if (!this.chartDataList[id - 1]) return;
|
||||
const chartData = this.chartDataList[id - 1];
|
||||
const chartContainer = this.$refs[`chart${id}`][0];
|
||||
if (reload) { //点击切换亮色/暗色风格模式时,重新载入echarts图表的逻辑,
|
||||
// 第一步,查找已经渲染出的图表容器,并销毁它
|
||||
if (!this.chartDataList[id]) return;
|
||||
const chartData = this.chartDataList[id];
|
||||
const chartContainer = document.getElementById(`chart-${id}`);
|
||||
if (reload) {
|
||||
const existingChart = echarts.getInstanceByDom(chartContainer);
|
||||
if (existingChart) existingChart.dispose();
|
||||
// 第二步,如果图表容器处于不可见状态chartboxShow=0,不重新渲染出新的图表,
|
||||
// 如果图表容器处于可见状态chartboxShow=1,重新渲染出新的图表
|
||||
const chartboxShow = chartContainer.getAttribute('chartbox-show');
|
||||
if ( chartboxShow === '0' ) return;
|
||||
}
|
||||
// 定义图表参数值
|
||||
const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
|
||||
const fontSize = this.isMobile ? 10 : 14;
|
||||
const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 30 : 40) : (this.isMobile ? 25 : 36);
|
||||
const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 36 : 42) : (this.isMobile ? 25 : 36);
|
||||
const gridRight = this.isMobile ? 5 : 20;
|
||||
const legendLeft = this.isMobile ? 'center' : 'center';
|
||||
const legendTop = this.isMobile ? 5 : 5;
|
||||
@@ -537,47 +536,91 @@
|
||||
const tooltipBorderColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.9)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,1)");
|
||||
const lineStyleWidth = this.isMobile ? 1 : 2;
|
||||
const splitLineWidth = this.isMobile ? 0.5 : 1;
|
||||
// 渲染图表
|
||||
const chart = echarts.init(chartContainer, chartTheme, {
|
||||
const markLineItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
|
||||
const markLineLineStyleWidth = this.isMobile ? 0.15 : 0.3;
|
||||
const chart = echarts.init(chartContainer, chartTheme, { // init图表
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false,
|
||||
width: 'auto',
|
||||
height: 300,
|
||||
height: 300
|
||||
});
|
||||
const xAxisData = chartData[0].created_at.map(time => new Date(time).toLocaleString());
|
||||
const seriesData = chartData.map(item => {
|
||||
let legendData = [];
|
||||
let seriesData = [];
|
||||
chartData.forEach((item,key)=> {
|
||||
let loss = 0;
|
||||
const data = item.avg_delay.map((avgDelay, index) => {
|
||||
if(avgDelay > 0 && avgDelay < MaxTCPPingValue){
|
||||
loss += avgDelay > 0.9 * MaxTCPPingValue ? 1 : 0;
|
||||
return [item.created_at[index], avgDelay.toFixed(2)];
|
||||
}else{
|
||||
let totalLossRate = 0;
|
||||
let legendName = '';
|
||||
let data = { main: [], markLine: []};
|
||||
item.avg_delay.forEach((avgDelay, index) => {
|
||||
const threshold = 0.9 * MaxTCPPingValue; // 定义阀值,用于判断是否丢包
|
||||
// 定义丢包 1. avgDelay==0 2. avgDelay>=MaxTCPPingValue 3. avgDelay>=threshold
|
||||
if(avgDelay == 0 || avgDelay >= MaxTCPPingValue){ //绝对丢包
|
||||
loss += 1;
|
||||
const lossrate = 100 * loss / (index + 1);
|
||||
if(lossrate != 100) {
|
||||
data['markLine'].push({
|
||||
xAxis: item.created_at[index],
|
||||
label: { show: false },
|
||||
emphasis: { disabled: true },
|
||||
lineStyle: { type: "solid" }
|
||||
});
|
||||
}
|
||||
} else if (avgDelay >= threshold && avgDelay < MaxTCPPingValue){ // 相对丢包
|
||||
loss += 1;
|
||||
const lossrate = 100 * loss / (index + 1);
|
||||
if(lossrate != 100) {
|
||||
data['main'].push(
|
||||
[item.created_at[index], avgDelay, lossrate]
|
||||
);
|
||||
data['markLine'].push({
|
||||
xAxis: item.created_at[index],
|
||||
label: { show: false },
|
||||
emphasis: { disabled: true },
|
||||
lineStyle: { type: "solid" }
|
||||
});
|
||||
}
|
||||
} else { // 未丢包
|
||||
const lossrate = 100 * loss / (index + 1);
|
||||
data['main'].push(
|
||||
[item.created_at[index], avgDelay, lossrate]
|
||||
);
|
||||
}
|
||||
});
|
||||
const lossRate = ((loss / item.created_at.length) * 100).toFixed(1);
|
||||
item.monitor_name = item.monitor_name.includes("%") ? item.monitor_name : `${item.monitor_name} ${lossRate}%`;
|
||||
return {
|
||||
name: item.monitor_name,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
data: data,
|
||||
connectNulls: true,
|
||||
legendHoverLink: false,
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
lineStyle: {
|
||||
width: lineStyleWidth
|
||||
}
|
||||
};
|
||||
totalLossRate = ((loss / item.created_at.length) * 100).toFixed(1);
|
||||
legendName = `${item.monitor_name} ${totalLossRate}%`;
|
||||
legendData.push(legendName);
|
||||
seriesData.push(
|
||||
{
|
||||
name: legendName,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
connectNulls: true,
|
||||
legendHoverLink: false,
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
lineStyle: {
|
||||
width: lineStyleWidth
|
||||
},
|
||||
data: data['main'],
|
||||
markLine: {
|
||||
symbol: "none",
|
||||
symbolSize :0,
|
||||
data: data['markLine'],
|
||||
itemStyle: {
|
||||
opacity: markLineItemStyleOpacity
|
||||
},
|
||||
lineStyle:{
|
||||
width: markLineLineStyleWidth
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const legendData = chartData.map(item => item.monitor_name);
|
||||
const maxLegendsPerRowMobile = localStorage.getItem("maxLegendsPerRowMobile") ? localStorage.getItem("maxLegendsPerRowMobile") : 3;
|
||||
const maxLegendsPerRowPc = localStorage.getItem("maxLegendsPerRowPc") ? localStorage.getItem("maxLegendsPerRowPc") : 6;
|
||||
const autoIncrement = Math.floor((legendData.length - 1) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 20 : 28);
|
||||
const autoIncrement = Math.floor((legendData.length - 1) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 20 : 28);
|
||||
const height = 300 + autoIncrement;
|
||||
const gridTop = 40 + autoIncrement;
|
||||
const legendIcon = this.isMobile ? 'rect' : "";
|
||||
@@ -587,39 +630,24 @@
|
||||
width: 'auto',
|
||||
height: height
|
||||
});
|
||||
|
||||
const option = {
|
||||
color: this.colors,
|
||||
backgroundColor: backgroundColor,
|
||||
textStyle: {
|
||||
fontSize: fontSize,
|
||||
color: fontColor
|
||||
},
|
||||
grid: {
|
||||
top: gridTop,
|
||||
left: gridLeft,
|
||||
right: gridRight,
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: tooltipBackgroundColor,
|
||||
borderColor: tooltipBorderColor,
|
||||
textStyle: {
|
||||
fontSize: fontSize,
|
||||
color: fontColor
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: legendData,
|
||||
show: true,
|
||||
icon: legendIcon,
|
||||
textStyle: {
|
||||
fontSize: fontSize,
|
||||
color: fontColor
|
||||
},
|
||||
top: legendTop,
|
||||
bottom: 0,
|
||||
left: legendLeft,
|
||||
padding: legendPadding,
|
||||
itemWidth: itemWidth,
|
||||
itemHeight: itemHeight,
|
||||
show: false,
|
||||
},
|
||||
series: seriesData.flat(),
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
data: xAxisData,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: fontSize
|
||||
@@ -639,30 +667,57 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: legendData,
|
||||
show: true,
|
||||
icon: legendIcon,
|
||||
textStyle: {
|
||||
fontSize: fontSize,
|
||||
color: fontColor
|
||||
},
|
||||
top: legendTop,
|
||||
bottom: 0,
|
||||
left: legendLeft,
|
||||
padding: legendPadding,
|
||||
itemWidth: itemWidth,
|
||||
itemHeight: itemHeight,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: tooltipBackgroundColor,
|
||||
borderColor: tooltipBorderColor,
|
||||
textStyle: {
|
||||
fontSize: fontSize,
|
||||
color: fontColor
|
||||
},
|
||||
formatter: function (params) {
|
||||
let tooltipContent = '';
|
||||
const formattedTime = new Date(params[0].value[0]).toLocaleString();
|
||||
tooltipContent += `<span style="line-height:2em">${formattedTime}</span><br>`;
|
||||
params.forEach(param => {
|
||||
const formattedTime = new Date(param.value[0]).toLocaleString();
|
||||
if (!param.seriesName.includes('stack')) {
|
||||
const name = param.seriesName.replace(/\s\d+(\.\d+)?%$/, '');
|
||||
tooltipContent += `<span style="line-height:2em">${param.marker} ${name} ${param.value[2].toFixed(1)}% ${param.value[1].toFixed(2)}</span><br>`;
|
||||
}
|
||||
});
|
||||
return tooltipContent;
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: seriesData,
|
||||
textStyle: {
|
||||
fontSize: fontSize,
|
||||
color: fontColor
|
||||
},
|
||||
grid: {
|
||||
top: gridTop,
|
||||
left: gridLeft,
|
||||
right: gridRight
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
},
|
||||
reloadCharts() { // 重新加载所有图表
|
||||
reloadCharts() {
|
||||
this.servers.forEach(node => {
|
||||
const id = node.ID;
|
||||
const chartData = this.chartDataList[id - 1];
|
||||
const chartData = this.chartDataList[id];
|
||||
if (chartData) {
|
||||
this.renderCharts(id,true);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user