🐛 revert shit

README.md

@@ -59,7 +59,6 @@ You can change the dashboard language in the settings page (`/setting`) after th
 <a href="https://github.com/iilemon" title="Sean"><img src="https://avatars.githubusercontent.com/u/33201711?v=4" width="50;" alt="Sean"/></a>
 <a href="https://github.com/fscarmen" title="fscarmen"><img src="https://avatars.githubusercontent.com/u/62703343?v=4" width="50;" alt="fscarmen"/></a>
 <a href="https://github.com/ch8o" title="no-name-now"><img src="https://avatars.githubusercontent.com/u/9103372?v=4" width="50;" alt="no-name-now"/></a>
-<a href="https://github.com/HsukqiLee" title="HsukqiLee"><img src="https://avatars.githubusercontent.com/u/79034142?v=4" width="50;" alt="HsukqiLee"/></a>
 <a href="https://github.com/DarcJC" title="Darc Z."><img src="https://avatars.githubusercontent.com/u/53445798?v=4" width="50;" alt="Darc Z."/></a>
 <a href="https://github.com/Creling" title="Creling"><img src="https://avatars.githubusercontent.com/u/43109504?v=4" width="50;" alt="Creling"/></a>
 <a href="https://github.com/coreff" title="Core F"><img src="https://avatars.githubusercontent.com/u/38347122?v=4" width="50;" alt="Core F"/></a>
@@ -77,6 +76,7 @@ You can change the dashboard language in the settings page (`/setting`) after th
 <a href="https://github.com/MartijnLindeman" title="Martijn Lindeman"><img src="https://avatars.githubusercontent.com/u/78365708?v=4" width="50;" alt="Martijn Lindeman"/></a>
 <a href="https://github.com/KorenKrita" title="KorenKrita"><img src="https://avatars.githubusercontent.com/u/22239339?v=4" width="50;" alt="KorenKrita"/></a>
 <a href="https://github.com/techotaku" title="Ian Li"><img src="https://avatars.githubusercontent.com/u/1948179?v=4" width="50;" alt="Ian Li"/></a>
+<a href="https://github.com/HsukqiLee" title="HsukqiLee"><img src="https://avatars.githubusercontent.com/u/79034142?v=4" width="50;" alt="HsukqiLee"/></a>
 <a href="https://github.com/GreenTeodoro839" title="GreenTeodoro839"><img src="https://avatars.githubusercontent.com/u/77104800?v=4" width="50;" alt="GreenTeodoro839"/></a>
 <a href="https://github.com/Es-dese" title="Esdese"><img src="https://avatars.githubusercontent.com/u/71542548?v=4" width="50;" alt="Esdese"/></a>
 <a href="https://github.com/wwng2333" title="Crazy"><img src="https://avatars.githubusercontent.com/u/17147265?v=4" width="50;" alt="Crazy"/></a><!--GAMFC_DELIMITER_END-->

resource/static/theme-default/css/main.css

@@ -10,14 +10,6 @@
   .ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui) {
     margin-top:0.4em !important;
   }
-  .ui.card>.content>.header,.ui.cards>.card>.content>.header {
-    padding-top: 0.5rem;
-    display: flex;
-    color: rgba(0, 0, 0, .85);
-    align-items: center;
-    padding-bottom: .2em;
-    border-bottom: 1px solid rgba(0, 0, 0, .2);
-  }
   .ui.menu .item>img:not(.ui){
     width: 2.2rem;
   }

resource/template/theme-daynight/network.html

@@ -107,250 +107,149 @@
 <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;
-    }
+	    }
-    new Vue({
+        // 基于准备好的dom，初始化echarts实例
-        el: '#app',
+        var myChart = echarts.init(document.getElementById('monitor-info-container'));
-        delimiters: ['@#', '#@'],
+        // 使用刚指定的配置项和数据显示图表。
-        data: {
+        var statusCards = new Vue({
-            page: 'network',
+            el: '#network',
-            defaultTemplate: {{.Conf.Site.Theme}},
+            delimiters: ['@#', '#@'],
-            templates: {{.Themes}},
+            data: {
-            servers: initData,
+                servers: initData,
-            option: {
+                cache: [],
-                tooltip: {
+                option: {
-                    trigger: 'axis',
+                    tooltip: {
-                    position: function (pt) {
+                        trigger: 'axis',
-                        return [pt[0], '10%'];
+                        position: function (pt) {
-                    },
+                            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: {
-                    left: 'center',
-                    text: "",
-                    textStyle: {}
-                },
-                legend: {
-                    top: '5%',
-                    data: [],
-                    textStyle: {
-                        fontSize: 14
-                    }
-                },
-                grid: {
-                    left: '8%',
-                    right: '8%',
-                },
-                backgroundColor: 'rgba(255, 255, 255, 0.8)',
-                toolbox: {
-                    feature: {
-                        dataZoom: {
-                            yAxisIndex: 'none'
                         },
-                        restore: {},
+                        formatter: function(params){
-                        saveAsImage: {}
+                            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: {
+                        left: 'center',
+                        text: "",
+                        textStyle: {}
+                    },
+                    legend: {
+                        top: '5%',
+                        data: [],
+                        textStyle: {
+                            fontSize: 14
+                        }
+                    },
+                    toolbox: {
+                        feature: {
+                            dataZoom: {
+                                yAxisIndex: 'none'
+                            },
+                            restore: {},
+                            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";
                     }
                 },
-                dataZoom: [
+                redirectNetwork(id) {
-                    {
-                        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 = app.__vue__;
+                          var vm = network.__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 = [];
-                var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+                    for (let i = 0; i < monitorInfo.result.length; i++) {
-                let maxPing = 0;
+                        let loss = 0;
-                for (let i = 0; i < monitorInfo.result.length; i++) {
+                        let data = [];
-                	 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 = Math.round(monitorInfo.result[i].avg_delay[j]);
+                            avgDelay = monitorInfo.result[i].avg_delay[j];
-                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
+                            if (avgDelay > 0.9 * MaxTCPPingValue) {
-                            maxPing = avgDelay;
+                                loss += 1
-                        }
+                            }
-                	 }
-                }
-                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]);
                         }
-                        else {
+                        lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
-                            loss += 1;
+			            legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
-                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                        tLegendData.push(legendName);
-                        }
+                        tSeries.push({
+                                name: legendName,
+                                type: 'line',
+                                smooth: true,
+                                symbol: 'none',
+                                data: data
+                        });
                     }
-                    lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
+                    this.option.title.text = monitorInfo.result[0].server_name;
-                    if (lossRate > 99) {
+                    this.option.series = tSeries;
-                        datal = [];
+                    this.option.legend.data = tLegendData;
+                    const hour = new Date(Date.now()).getHours()
+                    if (hour > 17 || hour < 4) {
+                        this.option.legend.textStyle.color = "#F1F1F2";
+                        this.option.title.textStyle.color = "#ccc";
                     }
-                    legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
+                    myChart.clear();
-                    tLegendData.push(legendName);
+                    myChart.setOption(this.option);
-                    tSeries.push({
+                },
-                            name: legendName,
+	        resizeHandle () {
-                            type: 'line',
+                    this.myChart.resize();
-                            smooth: true,
+                },
-                            symbol: 'none',
+            }
-                            data: data,
+        });
-                            markPoint: {
+    </script>
-                                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/home.html

@@ -15,7 +15,7 @@
             <div v-for="server in group.data" :id="server.ID" class="ui card">
               <div class="content" v-if="server.Host" style="margin-top: 10px; padding-bottom: 5px">
                 <div class="header">
-                <img v-if="server.Host.CountryCode" style="border-radius: 5px;width:45px;" :src="'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.5/flags/4x3/'+server.Host.CountryCode + '.svg'" alt="国家"/>&nbsp;<i v-if='server.Host.Platform == "darwin"'
+                <i style="width: 22px;border-radius: 4px;" :class="'fi fi-' + server.Host.CountryCode"></i>&nbsp;<i v-if='server.Host.Platform == "darwin"'
                     class="apple icon"></i><i v-else-if='isWindowsPlatform(server.Host.Platform)'
                     class="windows icon"></i><i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i>
                   @#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@

resource/template/theme-default/network.html

@@ -185,37 +185,19 @@
             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 && avgDelay < MaxTCPPingValue) {
+                        if (avgDelay > 0.9 * MaxTCPPingValue) {
-                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
+                            loss += 1
                         }
-                        else {
+                        if (avgDelay > 0) {
-                            loss += 1;
+                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
-                            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({
@@ -226,31 +208,17 @@
                             data: data,
                             markPoint: {
                                 data: [
-                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
+                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
-                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
+                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
                                 ]
                             }
                     });
-                    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,37 +208,19 @@
             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 && avgDelay < MaxTCPPingValue) {
+                        if (avgDelay > 0.9 * MaxTCPPingValue) {
-                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
+                            loss += 1
                         }
-                        else {
+                        if (avgDelay > 0) {
-                            loss += 1;
+                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
-                            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({
@@ -248,20 +230,12 @@
                             symbol: 'none',
                             data: data,
                             markPoint: {
-                                data: [
+                            data: [
-                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
+                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
-                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
+                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
                                 ]
                             }
                     });
-                    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,37 +171,19 @@
             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 && avgDelay < MaxTCPPingValue) {
+                        if (avgDelay > 0.9 * MaxTCPPingValue) {
-                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
+                            loss += 1
                         }
-                        else {
+                        if (avgDelay > 0) {
-                            loss += 1;
+                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
-                            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({
@@ -212,19 +194,11 @@
                             data: data,
                             markPoint: {
                                 data: [
-                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
+                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
-                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
+                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
                                 ]
                             }
                     });
-                    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;