Update network.html

resource/template/theme-daynight/network.html

@@ -113,15 +113,14 @@
     if (MaxTCPPingValue == null) {
         MaxTCPPingValue = 1000;
     }
-        // 基于准备好的dom，初始化echarts实例
-        var myChart = echarts.init(document.getElementById('monitor-info-container'));
-        // 使用刚指定的配置项和数据显示图表。
-        var statusCards = new Vue({
-            el: '#network',
+    new Vue({
+        el: '#app',
         delimiters: ['@#', '#@'],
         data: {
+            page: 'network',
+            defaultTemplate: {{.Conf.Site.Theme}},
+            templates: {{.Themes}},
             servers: initData,
-                cache: [],
             option: {
                 tooltip: {
                     trigger: 'axis',
@@ -150,6 +149,11 @@
                         fontSize: 14
                     }
                 },
+                grid: {
+                    left: '8%',
+                    right: '8%',
+                },
+                backgroundColor: 'rgba(255, 255, 255, 0.8)',
                 toolbox: {
                     feature: {
                         dataZoom: {
@@ -161,7 +165,7 @@
                 },
                 dataZoom: [
                     {
-                            start: 94,
+                        start: 0,
                         end: 100
                     }
                 ],
@@ -171,13 +175,15 @@
                 },
                 yAxis: {
                     type: 'value',
-                        boundaryGap: [0, '100%']
+                    boundaryGap: false
                 },
                 series: [],
-                }
             },
+            chartOnOff: true,
+        },
+        mixins: [mixinsVue],
         mounted() {
-                this.DarkMode();
+            this.renderChart();
             this.parseMonitorInfo(monitorInfo);
             window.addEventListener('resize', this.resizeHandle);
         },
@@ -185,18 +191,67 @@
             window.removeEventListener('resize', this.resizeHandle)
         },
         methods: {
-                DarkMode() {
-                    const hour = new Date(Date.now()).getHours()
-                    if (hour > 17 || hour < 4) {
-                        document.querySelector("input[name=theme]").checked = true;
-                        document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
-                        document.getElementById("monitor-info-container").style.backgroundColor = "#1E1E1E";
+            getFontLogoClass(str) {
+                if (["almalinux",
+                        "alpine",
+                        "aosc",
+                        "apple",
+                        "archlinux",
+                        "archlabs",
+                        "artix",
+                        "budgie",
+                        "centos",
+                        "coreos",
+                        "debian",
+                        "deepin",
+                        "devuan",
+                        "docker",
+                        "elementary",
+                        "fedora",
+                        "ferris",
+                        "flathub",
+                        "freebsd",
+                        "gentoo",
+                        "gnu-guix",
+                        "illumos",
+                        "kali-linux",
+                        "linuxmint",
+                        "mageia",
+                        "mandriva",
+                        "manjaro",
+                        "nixos",
+                        "openbsd",
+                        "opensuse",
+                        "pop-os",
+                        "raspberry-pi",
+                        "redhat",
+                        "rocky-linux",
+                        "sabayon",
+                        "slackware",
+                        "snappy",
+                        "solus",
+                        "tux",
+                        "ubuntu",
+                        "void",
+                        "zorin"].indexOf(str)
+                    > -1) {
+                    return str;
                 }
+                if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) {
+                    return 'tux';
+                }
+                if (str == 'amazon') {
+                    return 'redhat';
+                }
+                if (str == 'arch') {
+                    return 'archlinux';
+                }
+                return '';
             },
             redirectNetwork(id) {
                     this.getMonitorHistory(id)
                     .then(function(monitorInfo) {
-                          var vm = network.__vue__;
+                          var vm = app.__vue__;
                           vm.parseMonitorInfo(monitorInfo);
                     })
                     .catch(function(error){
@@ -272,13 +327,30 @@
                 this.option.legend.data = tLegendData;
                 this.myChart.clear();
                 this.myChart.setOption(this.option);
+            },
+                this.option.title.text = monitorInfo.result[0].server_name;
+                this.option.series = tSeries;
+                this.option.legend.data = tLegendData;
+                this.myChart.clear();
+                this.myChart.setOption(this.option);
+            },
+            isWindowsPlatform(str) {
+                return str.includes('Windows')
+            },
+            renderChart() {
+              this.myChart = echarts.init(this.$refs.chartDom);
+              this.myChart.setOption(this.option);
             },
             resizeHandle () {
               this.myChart.resize();
             },
-            }
+        },
+        beforeDestroy() {
+            this.myChart.dispose();
+            this.myChart = null;
+        },
     });
-    </script>
+</script>
 </body>
 <style>
 #network {