美化三网延迟界面 (#335)

* Update network.html

修复以下问题：
- 延迟默认最高300ms，超过后默认抹平
- 曲线上有很多ping值为0的无效散点，导致毛刺很多，干扰效果
- 图标的y轴比例失调，上方大片留白，大大降低了有效显示区域
- 默认只显示最近不到半小时左右的延迟表现，想看全天需要拖动，影响效果
- 曲线不显示极大极小值，不够直观

* Update config.go

修复了以下问题：
- 延迟默认最高300ms，超过后默认抹平
- 曲线上有很多ping值为0的无效散点，导致毛刺很多，干扰效果
- 图标的y轴比例失调，上方大片留白，大大降低了有效显示区域
- 默认只显示最近不到半小时左右的延迟表现，想看全天需要拖动，影响效果
- 曲线不显示极大极小值，不够直观

* Update network.html

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

* Update network.html

* Update network.html

* Update network.html

* Update network.html

resource/template/theme-daynight/network.html

@@ -107,149 +107,250 @@
 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script>
 
 <script>
-        const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
+    const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
-        const initData = JSON.parse('{{.Servers}}').servers;
+    const initData = JSON.parse('{{.Servers}}').servers;
-        let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
+    let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
-	    if (MaxTCPPingValue == null) {
+    if (MaxTCPPingValue == null) {
-	        MaxTCPPingValue = 1000;
+        MaxTCPPingValue = 1000;
-	    }
+    }
-        // 基于准备好的dom，初始化echarts实例
+    new Vue({
-        var myChart = echarts.init(document.getElementById('monitor-info-container'));
+        el: '#app',
-        // 使用刚指定的配置项和数据显示图表。
+        delimiters: ['@#', '#@'],
-        var statusCards = new Vue({
+        data: {
-            el: '#network',
+            page: 'network',
-            delimiters: ['@#', '#@'],
+            defaultTemplate: {{.Conf.Site.Theme}},
-            data: {
+            templates: {{.Themes}},
-                servers: initData,
+            servers: initData,
-                cache: [],
+            option: {
-                option: {
+                tooltip: {
-                    tooltip: {
+                    trigger: 'axis',
-                        trigger: 'axis',
+                    position: function (pt) {
-                        position: function (pt) {
+                        return [pt[0], '10%'];
-                            return [pt[0], '10%'];
-                        },
-                        formatter: function(params){
-                            let result = params[0].axisValueLabel + "<br />";
-                            params.forEach(function(item){
-                                result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />";
-                             })
-                            return result;
-                        },
-                        confine: true,
-                        transitionDuration: 0
                     },
-                    title: {
+                    formatter: function(params){
-                        left: 'center',
+                        let result = params[0].axisValueLabel + "<br />";
-                        text: "",
+                        params.forEach(function(item){
-                        textStyle: {}
+                            result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />";
+                         })
+                        return result;
                     },
-                    legend: {
+                    confine: true,
-                        top: '5%',
+                    transitionDuration: 0
-                        data: [],
+                },
-                        textStyle: {
+                title: {
-                            fontSize: 14
+                    left: 'center',
-                        }
+                    text: "",
-                    },
+                    textStyle: {}
-                    toolbox: {
+                },
-                        feature: {
+                legend: {
-                            dataZoom: {
+                    top: '5%',
-                                yAxisIndex: 'none'
+                    data: [],
-                            },
+                    textStyle: {
-                            restore: {},
+                        fontSize: 14
-                            saveAsImage: {}
-                        }
-                    },
-                    dataZoom: [
-                        {
-                            start: 94,
-                            end: 100
-                        }
-                    ],
-                    xAxis: {
-                        type: 'time',
-                        boundaryGap: false
-                    },
-                    yAxis: {
-                        type: 'value',
-                        boundaryGap: [0, '100%']
-                    },
-                    series: [],
-                }
-            },
-            mounted() {
-                this.DarkMode();
-                this.parseMonitorInfo(monitorInfo);
-		window.addEventListener('resize', this.resizeHandle);
-            },
-	    destroyed () {
-                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";
                     }
                 },
-                redirectNetwork(id) {
+                grid: {
+                    left: '8%',
+                    right: '8%',
+                },
+                backgroundColor: 'rgba(255, 255, 255, 0.8)',
+                toolbox: {
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: 'none'
+                        },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                dataZoom: [
+                    {
+                        start: 0,
+                        end: 100
+                    }
+                ],
+                xAxis: {
+                    type: 'time',
+                    boundaryGap: false
+                },
+                yAxis: {
+                    type: 'value',
+                    boundaryGap: false
+                },
+                series: [],
+            },
+            chartOnOff: true,
+        },
+        mixins: [mixinsVue],
+        mounted() {
+            this.renderChart();
+            this.parseMonitorInfo(monitorInfo);
+            window.addEventListener('resize', this.resizeHandle);
+        },
+        destroyed () {
+            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;
+                }
+                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){
                         window.location.href = "/404";
                     })
                 },
-                getMonitorHistory(id) {
+            getMonitorHistory(id) {
-                      return $.ajax({
+                  return $.ajax({
-                        url: "/api/v1/monitor/"+id,
+                    url: "/api/v1/monitor/"+id,
-                        method: "GET"
+                    method: "GET"
-                      });
+                  });
-                },
+            },
-                parseMonitorInfo(monitorInfo) {
+            parseMonitorInfo(monitorInfo) {
-                    let tSeries = [];
+                let tSeries = [];
-                    let tLegendData = [];
+                let tLegendData = [];
-                    for (let i = 0; i < monitorInfo.result.length; i++) {
+                var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-                        let loss = 0;
+                let maxPing = 0;
-                        let data = [];
+                for (let i = 0; i < monitorInfo.result.length; i++) {
-                        for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
+                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                            avgDelay = monitorInfo.result[i].avg_delay[j];
+                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                            if (avgDelay > 0.9 * MaxTCPPingValue) {
+                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
-                                loss += 1
+                            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 && avgDelay < MaxTCPPingValue) {
                             data.push([monitorInfo.result[i].created_at[j], avgDelay]);
                         }
-                        lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
+                        else {
-			            legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
+                            loss += 1;
-                        tLegendData.push(legendName);
+                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
-                        tSeries.push({
+                        }
-                                name: legendName,
-                                type: 'line',
-                                smooth: true,
-                                symbol: 'none',
-                                data: data
-                        });
                     }
-                    this.option.title.text = monitorInfo.result[0].server_name;
+                    lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
-                    this.option.series = tSeries;
+                    if (lossRate > 99) {
-                    this.option.legend.data = tLegendData;
+                        datal = [];
-                    const hour = new Date(Date.now()).getHours()
-                    if (hour > 17 || hour < 4) {
-                        this.option.legend.textStyle.color = "#F1F1F2";
-                        this.option.title.textStyle.color = "#ccc";
                     }
-                    myChart.clear();
+                    legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
-                    myChart.setOption(this.option);
+                    tLegendData.push(legendName);
-                },
+                    tSeries.push({
-	        resizeHandle () {
+                            name: legendName,
-                    this.myChart.resize();
+                            type: 'line',
-                },
+                            smooth: true,
-            }
+                            symbol: 'none',
-        });
+                            data: data,
-    </script>
+                            markPoint: {
+                                data: [
+                                    { 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')
+            },
+            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>
 <style>
 #network {

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) {
+                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
-                            loss += 1
-                        }
-                        if (avgDelay > 0) {
                             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: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
-                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
+                                    { 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')

resource/template/theme-mdui/network.html

@@ -208,19 +208,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) {
+                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
-                            loss += 1
-                        }
-                        if (avgDelay > 0) {
                             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({
@@ -230,12 +248,20 @@
                             symbol: 'none',
                             data: data,
                             markPoint: {
-                            data: [
+                                data: [
-                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
+                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
-                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
+                                    { 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;

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

@@ -171,19 +171,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) {
+                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
-                            loss += 1
-                        }
-                        if (avgDelay > 0) {
                             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({
@@ -194,11 +212,19 @@
                             data: data,
                             markPoint: {
                                 data: [
-                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
+                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
-                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
+                                    { 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;