修复echarts不显示bug (#330)

* angel-kanade模版增加主题切换功能

* Add files via upload

* 调整legend图例间距

* 渲染方式调整会canvas

* Update home.html

resource/template/theme-default/home.html

@@ -140,7 +140,7 @@
       page: 'index',
       defaultTemplate: {{.Conf.Site.Theme}},
       templates: {{.Themes}},
-      data: [],
+      servers: [],
       groups: [],
       cache: [],
       chartDataList: [], 
@@ -148,7 +148,7 @@
     },
     mixins: [mixinsVue],
     created() {
-      this.data = JSON.parse('{{.Servers}}').servers;
+      this.servers = JSON.parse('{{.Servers}}').servers;
       this.group()
     },
     methods: {
@@ -188,8 +188,9 @@
         const MaxTCPPingValue = {{.MaxTCPPingValue}} ? {{.MaxTCPPingValue}} : 300;
         const isMobile = this.checkIsMobile();
         const fontSize = isMobile ? 10 : 9;
-        const itemGap = isMobile ? 5 : 2;
+        const itemGap = isMobile ? 6 : 6;
-        const itemWidth = isMobile ? 20 : 15;
+        const itemWidth = isMobile ? 10 : 10;
+        const itemHeight = isMobile ? 10 : 10;
         const gridLeft = 25;
         const gridRight = 12;
         const fontColor = "rgba(0, 0, 0, 0.68)";
@@ -210,10 +211,10 @@
             if (avgDelay > 0.9 * MaxTCPPingValue) {
               loss += 1;
             }
-            return [new Date(item.created_at[index]).toLocaleString(), avgDelay];
+            return [item.created_at[index], avgDelay];
           });
           const lossRate = ((loss / item.created_at.length) * 100).toFixed(1);
-          item.monitor_name = item.monitor_name + " " + lossRate + "%";
+          item.monitor_name = item.monitor_name.includes("%") ? item.monitor_name : `${item.monitor_name} ${lossRate}%`;
           return {
             name: item.monitor_name,
             type: 'line',
@@ -236,6 +237,7 @@
             }
           },
           legend: {
+            icon: 'rect',
             data: chartData.map(item => item.monitor_name),
             show: true,
             textStyle: {
@@ -249,6 +251,7 @@
             bottom: 0,
             itemGap: itemGap,
             itemWidth: itemWidth,
+            itemHeight: itemHeight,
             padding: [5,0,5,0]
           },
           xAxis: {
@@ -282,7 +285,7 @@
             color: fontColor
           },
           grid: {
-            top: '40',
+            top: '30',
             bottom: '20',
             left: gridLeft,
             right: gridRight
@@ -357,7 +360,7 @@
         return '';
       },
       group() {
-        this.groups = groupingData(this.data, "Tag")
+        this.groups = groupingData(this.servers, "Tag")
       },
       formatPercent(live, used, total) {
         const percent = live ? (parseInt(used / total * 100) || 0) : -1

resource/template/theme-server-status/home.html

@@ -24,10 +24,12 @@
             page: 'index',
             defaultTemplate: {{.Conf.Site.Theme}},
             templates: {{.Themes}},
+            cache: [],
             servers: [],
             nodesTag: [],
             nodesNoTag: [],
-            chartDataList: []
+            chartDataList: [],
+            ws: null
         },
         mixins: [mixinsVue],
         created() {
@@ -39,7 +41,18 @@
             }
         },
         mounted() {
+            // 初始化时建立WebSocket连接
             this.connect();
+            // 监听页面可见性变化
+            document.addEventListener("visibilitychange", () => {
+                if (document.visibilityState === "visible") {
+                    setTimeout(() => {
+                        if (document.hasFocus()) {
+                            this.connect();
+                        }
+                    }, 200);
+                }
+            });
         },
         methods: {
             isWindowsPlatform(str) {
@@ -157,12 +170,18 @@
                 return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
             },
             connect() {
-                const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws"
+                // 如果已经存在 WebSocket 连接并且处于开启状态，则不重复建立连接
-                const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
+                if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-                ws.onopen = function () {
+                    console.log('Closing old WebSocket connection...');
+                    this.ws.close();
+                }
+                const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
+                this.ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
+
+                this.ws.onopen = function () {
                     console.log("Connection open ...")
                 }
-                ws.onmessage = (evt) => {
+                this.ws.onmessage = (evt) => {
                     let jsonData = evt.data
                     const data = JSON.parse(jsonData)
                     for (let i = 0; i < data.servers?.length; i++) {
@@ -180,13 +199,13 @@
                         this.nodesNoTag = this.handleNodes(data.servers);
                     }
                 }
-                ws.onclose = () => {
+                this.ws.onclose = () => {
-                    setTimeout(function () {
+                    setTimeout(() => {
-                        this.connect()
+                        this.connect();
                     }, 5000);
-                }
+                };
-                ws.onerror = function () {
+                this.ws.onerror = () => {
-                    ws.close()
+                    this.ws.close()
                 }
             },
             handleNodes(servers) {
@@ -290,12 +309,10 @@
                         if (avgDelay > 0.9 * MaxTCPPingValue) {
                             loss += 1;
                         }
-                        return [new Date(item.created_at[index]).toLocaleString(), avgDelay];
+                        return [item.created_at[index], avgDelay];
                     });
                     const lossRate = ((loss / item.created_at.length) * 100).toFixed(1);
-                    if (!item.monitor_name.includes("%")) {
+                    item.monitor_name = item.monitor_name.includes("%") ? item.monitor_name : `${item.monitor_name} ${lossRate}%`;
-                        item.monitor_name = item.monitor_name + " " + lossRate + "%";
-                    }                        
                     return {
                         name: item.monitor_name,
                         type: 'line',