网络监控页面相关优化 (#333)

* Update network.html

* Update network.html

* Update network.html
This commit is contained in:
HsukqiLee 2024-03-23 12:40:38 +08:00 committed by GitHub
parent 753199a3b8
commit b1348eb545
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 35 additions and 6 deletions

View File

@ -111,7 +111,7 @@
const initData = JSON.parse('{{.Servers}}').servers;
let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
if (MaxTCPPingValue == null) {
MaxTCPPingValue = 300;
MaxTCPPingValue = 1000;
}
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('monitor-info-container'));
@ -179,6 +179,10 @@
mounted() {
this.DarkMode();
this.parseMonitorInfo(monitorInfo);
window.addEventListener('resize', this.resizeHandle);
},
destroyed () {
window.removeEventListener('resize', this.resizeHandle)
},
methods: {
DarkMode() {
@ -239,7 +243,10 @@
}
myChart.clear();
myChart.setOption(this.option);
}
},
resizeHandle () {
this.myChart.resize();
},
}
});
</script>

View File

@ -17,7 +17,7 @@
</table>
</div>
</div>
<div class="ui container" style="max-width: 95vw">
<div class="ui container">
<div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div>
</div>
</div>
@ -67,6 +67,10 @@
fontSize: 14
}
},
grid: {
left: '8%',
right: '8%',
},
backgroundColor: 'rgba(255, 255, 255, 0.8)',
toolbox: {
feature: {
@ -99,6 +103,10 @@
mounted() {
this.renderChart();
this.parseMonitorInfo(monitorInfo);
window.addEventListener('resize', this.resizeHandle);
},
destroyed () {
window.removeEventListener('resize', this.resizeHandle)
},
methods: {
getFontLogoClass(str) {
@ -219,6 +227,9 @@
this.myChart = echarts.init(this.$refs.chartDom);
this.myChart.setOption(this.option);
},
resizeHandle () {
this.myChart.resize();
},
},
beforeDestroy() {
this.myChart.dispose();

View File

@ -38,7 +38,7 @@
</table>
</div>
</div>
<div class="ui container" style="max-width: 95vw">
<div class="ui container">
<div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div>
</div>
</div>
@ -91,6 +91,10 @@
fontSize: 14
}
},
grid: {
left: '8%',
right: '8%'
},
backgroundColor: 'rgba(255, 255, 255, 0.8)',
toolbox: {
feature: {
@ -122,6 +126,10 @@
mounted() {
this.renderChart();
this.parseMonitorInfo(monitorInfo);
window.addEventListener('resize', this.resizeHandle);
},
resizeHandle () {
this.myChart.resize();
},
methods: {
getFontLogoClass(str) {
@ -242,6 +250,9 @@
this.myChart = echarts.init(this.$refs.chartDom);
this.myChart.setOption(this.option);
},
resizeHandle () {
this.myChart.resize();
},
},
beforeDestroy() {
this.myChart.dispose();