diff --git a/resource/template/theme-server-status/home.html b/resource/template/theme-server-status/home.html
index a6bf0b8..4e0263e 100644
--- a/resource/template/theme-server-status/home.html
+++ b/resource/template/theme-server-status/home.html
@@ -3,15 +3,15 @@
{{template "theme-server-status/menu" .}}
@@ -162,7 +162,10 @@
const tooltipBackgroundColor = this.theme == "dark" ? "#ffffff" : '#ffffff';
const tooltipBorderColor = this.theme == "dark" ? "#ffffff" : "#ffffff";
const fontSize = this.isMobile ? 10 : 12;
- const fontColor = this.theme == "dark" ? "#000000" : "#000000";
+ const fontColor = this.theme == "dark" ? "#000000" : "#000000";
+ const showLoadingMaskColor = this.theme == "dark" ? 'rgba(28, 29, 38, 1)' : 'rgba(249, 249, 249, 1)';
+ const showLoadingTextColor = this.theme == "dark" ? 'rgba(241, 241, 241, 1)' : 'rgba(0, 0, 0, 1)';
+ const showLoadingColor = inRangeColor;
const chartContainer = document.getElementById('mapChart');
const mapChart = echarts.init(chartContainer, '', { // init图表
renderer: 'canvas',
@@ -170,6 +173,13 @@
width: width,
height: height,
});
+ mapChart.showLoading({
+ text: 'loading',
+ textColor: showLoadingTextColor,
+ color: showLoadingColor,
+ maskColor: showLoadingMaskColor,
+ zlevel: 2
+ });
fetch(this.staticUrl + '/maps/' + this.countryMapGeoFile)
.then(response => response.json())
.then(worldMap => {
@@ -224,7 +234,10 @@
}
]
};
- mapChart.setOption(option);
+ setTimeout(() => {
+ mapChart.hideLoading();
+ mapChart.setOption(option);
+ }, 1000);
});
},
isWindowsPlatform(str) {
@@ -510,15 +523,15 @@
// 定义图表参数值
const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
const fontSize = this.isMobile ? 10 : 14;
- const gridLeft = this.isMobile ? 25 : 36;
+ const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 30 : 40) : (this.isMobile ? 25 : 36);
const gridRight = this.isMobile ? 5 : 20;
const legendLeft = this.isMobile ? 'center' : 'center';
const legendTop = this.isMobile ? 5 : 5;
const legendPadding= this.isMobile ? [5,0,5,0] : [5,0,5,0];
const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const theme = localStorage.getItem("theme") ? localStorage.getItem("theme") : systemDarkMode;
- const chartTheme = theme == "dark" ? "dark" : "default";
- const fontColor = theme == "dark" ? "#f1f1f1" : "#000000";
+ const chartTheme = this.theme == "dark" ? "dark" : "default";
+ const fontColor = this.theme == "dark" ? "#f1f1f1" : "#000000";
const backgroundColor = theme == "dark" ? '' : '';
const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)");
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)");
diff --git a/resource/template/theme-server-status/menu.html b/resource/template/theme-server-status/menu.html
index dcbdc57..940c0da 100644
--- a/resource/template/theme-server-status/menu.html
+++ b/resource/template/theme-server-status/menu.html
@@ -64,6 +64,6 @@
-
+
{{end}}
diff --git a/resource/template/theme-server-status/network.html b/resource/template/theme-server-status/network.html
index 36ca49b..32f6170 100644
--- a/resource/template/theme-server-status/network.html
+++ b/resource/template/theme-server-status/network.html
@@ -74,23 +74,24 @@
const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
const autoheight = this.isMobile ? (window.innerHeight - 200) : (window.innerHeight - 250);
const fontSize = this.isMobile ? 10 : 14;
- const gridLeft = this.isMobile ? 30 : 36;
+ const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 36 : 42) : (this.isMobile ? 30 : 36);
const gridRight = this.isMobile ? 12 : 20;
const legendLeft = this.isMobile ? 'center' : 'center';
const legendTop = this.isMobile ? 5 : 5;
const legendPadding= this.isMobile ? [5,0,5,0] : [5,0,5,0];
const fontColor = this.theme == "dark" ? "#f1f1f1" : "#000000";
+ const chartTheme = this.theme == "dark" ? "dark" : "default";
const backgroundColor = this.theme == "dark" ? '' : '';
const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)");
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 splitLineColor = this.theme == "dark" ? "rgba(110, 112, 121, 0.95)" : "rgba(224, 230, 241, 0.95)";
- const markPointLabelColor = this.theme == "dark" ? "#111111" : "#000000";
- const markPointItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
+ const markPointSymbolSize = this.isMobile ? 30 : 42;
+ const markPointItemStyleOpacity = this.semiTransparent ? 1 : 0.9;
+ const markPointFontSize = this.isMobile ? 8 : 10;
const markLineItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
const markLineLineStyleWidth = this.isMobile ? 0.15 : 0.3;
- this.chart = echarts.init(chartContainer, '', { // init图表
+ this.chart = echarts.init(chartContainer, chartTheme, { // init图表
renderer: 'canvas',
useDirtyRect: false,
width: 'auto',
@@ -182,10 +183,9 @@
itemStyle: {
opacity: markPointItemStyleOpacity
},
- symbolSize: 30,
+ symbolSize: markPointSymbolSize,
label: {
- fontSize: 8,
- color: markPointLabelColor,
+ fontSize: markPointFontSize,
formatter: function (params) {
return Math.round(params.value);
}
@@ -198,10 +198,9 @@
itemStyle: {
opacity: markPointItemStyleOpacity
},
- symbolSize: 30,
+ symbolSize: markPointSymbolSize,
label: {
- fontSize: 8,
- color: markPointLabelColor,
+ fontSize: markPointFontSize,
offset: [0, 8],
formatter: function (params) {
return Math.round(params.value);
@@ -218,7 +217,8 @@
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 height = autoheight + autoIncrement;
- const gridTop = 40 + autoIncrement;
+ const gridTop = this.isMobile ? ( 60 + autoIncrement) : (80 + autoIncrement);
+ const gridBottom = this.isMobile ? 70 : 90;
const legendIcon = this.isMobile ? 'rect' : "";
const itemWidth = this.isMobile ? 10 : 25;
const itemHeight = this.isMobile ? 10 : 14;
@@ -241,7 +241,8 @@
grid: {
top: gridTop,
left: gridLeft,
- right: gridRight
+ right: gridRight,
+ bottom: gridBottom
},
// 图表标题设置
title: {
@@ -268,8 +269,7 @@
},
splitLine: {
lineStyle: {
- width: splitLineWidth,
- color: splitLineColor
+ width: splitLineWidth
}
}
},
diff --git a/resource/template/theme-server-status/service.html b/resource/template/theme-server-status/service.html
index 410bf24..46c5814 100644
--- a/resource/template/theme-server-status/service.html
+++ b/resource/template/theme-server-status/service.html
@@ -3,24 +3,24 @@
{{template "theme-server-status/menu" .}}
-
+
No Valid Service Monitor Configuration Entries Found. Please Verify in the Admin Panel.
-
-
+
{{template "theme-server-status/service-group-true" .}}
-
+
-
+
No Valid Service Monitor Configuration Entries Found. Please Verify in the Admin Panel.
-
-
+
{{template "theme-server-status/service-group-false" .}}
-
+
{{if .CycleTransferStats}}
-
+
@@ -67,7 +67,7 @@
{{end}}
-
+
{{end}}
{{template "theme-server-status/footer" .}}