From a7d1bd74872def010bf9fe75ccbc09fda8f03f8e Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 01:04:03 +0800
Subject: [PATCH] Update network.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

美化了三网延迟界面：
1. 将Marker缩小降低曲线遮挡
2. 设置为曲线对应的颜色使其更加直观
3. 设置Marker透明度降低对画面的影响
4. 将延迟极小值的Marker倒置显示以快速区别极大值
5. 将超过MaxTCPPingValue的点删除
6. 显示丢包分布（细线），以及服务器断流区间（粗线）
---
 resource/template/theme-default/network.html | 44 +++++++++++++++++---
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/resource/template/theme-default/network.html b/resource/template/theme-default/network.html
index b3ecf59..c353a9e 100644
--- a/resource/template/theme-default/network.html
+++ b/resource/template/theme-default/network.html
@@ -185,19 +185,37 @@
             parseMonitorInfo(monitorInfo) {
                 let tSeries = [];
                 let tLegendData = [];
+                var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+                let maxPing = 0;
                 for (let i = 0; i < monitorInfo.result.length; i++) {
+                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
+                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
+                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
+                            maxPing = avgDelay;
+                        }
+                	 }
+                }
+                for (let i = 0; i < monitorInfo.result.length; i++) {
+                    var lcolor = lcolors[i % lcolors.length];
+                    var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
+                    var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
                     let loss = 0;
                     let data = [];
+                    let datal = [];
                     for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
                         avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if (avgDelay > 0.9 * MaxTCPPingValue) {
-                            loss += 1
-                        }
-                        if (avgDelay > 0) {
+                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
                             data.push([monitorInfo.result[i].created_at[j], avgDelay]);
                         }
+                        else {
+                            loss += 1;
+                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                        }
                     }
                     lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
+                    if (lossRate > 99) {
+                        datal = [];
+                    }
                     legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
                     tLegendData.push(legendName);
                     tSeries.push({
@@ -208,17 +226,31 @@
                             data: data,
                             markPoint: {
                                 data: [
-                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
-                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
+                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
+                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
                                 ]
                             }
                     });
+                    tSeries.push({
+                            name: legendName,
+                            type: 'bar',
+                            smooth: true,
+                            symbol: 'none',
+                            data: datal,
+                            itemStyle: { color: rgbaColorBar }
+                    });
                 }
                 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);
+            },
+                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')