Update network.html

resource/template/theme-daynight/network.html

@@ -113,14 +113,15 @@
 	    if (MaxTCPPingValue == null) {
 	        MaxTCPPingValue = 1000;
 	    }
-    new Vue({
-        el: '#app',
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('monitor-info-container'));
+        // 使用刚指定的配置项和数据显示图表。
+        var statusCards = new Vue({
+            el: '#network',
             delimiters: ['@#', '#@'],
             data: {
-            page: 'network',
-            defaultTemplate: {{.Conf.Site.Theme}},
-            templates: {{.Themes}},
                 servers: initData,
+                cache: [],
                 option: {
                     tooltip: {
                         trigger: 'axis',
@@ -149,11 +150,6 @@
                             fontSize: 14
                         }
                     },
-                grid: {
-                    left: '8%',
-                    right: '8%',
-                },
-                backgroundColor: 'rgba(255, 255, 255, 0.8)',
                     toolbox: {
                         feature: {
                             dataZoom: {
@@ -165,7 +161,7 @@
                     },
                     dataZoom: [
                         {
-                        start: 0,
+                            start: 94,
                             end: 100
                         }
                     ],
@@ -175,15 +171,13 @@
                     },
                     yAxis: {
                         type: 'value',
-                    boundaryGap: false
+                        boundaryGap: [0, '100%']
                     },
                     series: [],
+                }
             },
-            chartOnOff: true,
-        },
-        mixins: [mixinsVue],
             mounted() {
-            this.renderChart();
+                this.DarkMode();
                 this.parseMonitorInfo(monitorInfo);
 		window.addEventListener('resize', this.resizeHandle);
             },
@@ -191,67 +185,18 @@
                 window.removeEventListener('resize', this.resizeHandle)
             },
             methods: {
-            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;
+                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";
                     }
-                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 = app.__vue__;
+                          var vm = network.__vue__;
                           vm.parseMonitorInfo(monitorInfo);
                     })
                     .catch(function(error){
@@ -324,21 +269,10 @@
                     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>
 </body>
@@ -363,4 +297,3 @@
 
 </html>
 {{end}}
-