tcjlj/nezha
1
0
Fork 0
mirror of https://github.com/nezhahq/nezha.git synced 2025-02-08 12:38:13 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resource/template/theme-daynight/network.html vendored
View File

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

15
resource/template/theme-default/network.html vendored
View File

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

15
resource/template/theme-mdui/network.html vendored
View File

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