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

* Update network.html * Update network.html * Update network.html
nezhahq · Mar 23, 2024 · b1348eb · b1348eb
1 parent 753199a
commit b1348eb
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/resource/template/theme-daynight/network.html b/resource/template/theme-daynight/network.html
@@ -111,7 +111,7 @@ <h3>@#server.Name#@</h3>
         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 @@ <h3>@#server.Name#@</h3>
             mounted() {
                 this.DarkMode();
                 this.parseMonitorInfo(monitorInfo);
+		window.addEventListener('resize', this.resizeHandle);
+            },
+	    destroyed () {
+                window.removeEventListener('resize', this.resizeHandle)
             },
             methods: {
                 DarkMode() {
@@ -239,7 +243,10 @@ <h3>@#server.Name#@</h3>
                     }
                     myChart.clear();
                     myChart.setOption(this.option);
-                }
+                },
+	        resizeHandle () {
+                    this.myChart.resize();
+                },
             }
         });
     </script>

diff --git a/resource/template/theme-default/network.html b/resource/template/theme-default/network.html
@@ -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: {
@@ -98,7 +102,11 @@
         mixins: [mixinsVue],
         mounted() {
             this.renderChart();
-             this.parseMonitorInfo(monitorInfo);
+            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();

diff --git a/resource/template/theme-mdui/network.html b/resource/template/theme-mdui/network.html
@@ -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: {
@@ -121,7 +125,11 @@
         },
         mounted() {
             this.renderChart();
-             this.parseMonitorInfo(monitorInfo);
+            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();