Remove redundant code for MaxTCPPingValue initialization

This commit is contained in:
naiba 2024-03-24 22:45:56 +08:00
parent 5a2ab8a7ee
commit 6c718c4f38
4 changed files with 117 additions and 125 deletions

View File

@ -20,101 +20,101 @@
</head> </head>
<body data-theme="light" data-gridlist="grid"> <body data-theme="light" data-gridlist="grid">
<header> <header>
<section class="nav-bar clearfix"> <section class="nav-bar clearfix">
<figure class="logo"> <figure class="logo">
<a href="/"> <a href="/">
<img src="/static/logo.svg?v20210804" alt='{{tr "NezhaMonitoring"}}' width="50" height="50"> <img src="/static/logo.svg?v20210804" alt='{{tr "NezhaMonitoring"}}' width="50" height="50">
</a> </a>
<a href="/">{{.Conf.Site.Brand}}</a> <a href="/">{{.Conf.Site.Brand}}</a>
</figure> </figure>
<div class="icon-container"> <div class="icon-container">
<div class="row cf"> <div class="row cf">
<div class="three col"> <div class="three col">
<div class="hamburger" id="hamburger-icon"><span class="line"></span><span <div class="hamburger" id="hamburger-icon"><span class="line"></span><span
class="line"></span><span class="line"></span></div> class="line"></span><span class="line"></span></div>
</div>
</div>
</div>
<nav class="nav-menu">
<ul>
<li><a href="/">{{tr "Home"}}</a></li>
<li><a href="/service">{{tr "Services"}}</a></li>
<li><a href="/network">{{tr "NetworkSpiter"}}</a></li>
{{if .Admin}}
<li><a href="/server">{{tr "AdminPanel"}}</a></li>
{{else}}
<li><a href="/login">{{tr "Login"}}</a></li>
{{end}}
</ul>
</nav>
</section>
</header>
<main>
<div id="network">
<div class="server-info-container" v-for='server in servers' :id="server.ID">
<div class="info-body" @click="redirectNetwork(server.ID)">
<ul class="server-info-body-container">
<li>
<h3>@#server.Name#@</h3>
</li>
<li><img :src="'/static/theme-daynight/img/flag/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'"
:title="server.Host.CountryCode.toUpperCase()" /></li>
</ul>
</div> </div>
</div> </div>
</div> </div>
<nav class="nav-menu"> <div class="network-chart" style="height: 800px;overflow: hidden">
<ul> <div id="monitor-info-container" style="height: 520px;max-width: 1400px">
<li><a href="/">{{tr "Home"}}</a></li>
<li><a href="/service">{{tr "Services"}}</a></li>
<li><a href="/network">{{tr "NetworkSpiter"}}</a></li>
{{if .Admin}}
<li><a href="/server">{{tr "AdminPanel"}}</a></li>
{{else}}
<li><a href="/login">{{tr "Login"}}</a></li>
{{end}}
</ul>
</nav>
</section>
</header>
<main>
<div id="network">
<div class="server-info-container" v-for='server in servers' :id="server.ID" style="font-size: .6em">
<div class="info-body" @click="redirectNetwork(server.ID)">
<ul class="server-info-body-container">
<li>
<h3>@#server.Name#@</h3>
</li>
<li><img :src="'/static/theme-daynight/img/flag/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'"
:title="server.Host.CountryCode.toUpperCase()" /></li>
</ul>
</div> </div>
</div> </div>
</div> <div class="sidebar-container">
<div class="network-chart" style="height: 800px;overflow: hidden"> <ul>
<div id="monitor-info-container" style="height: 520px;max-width: 1400px"> <li><i class="fas fa-sun" title='{{tr "LightMode"}}'></i><span>{{tr "LightMode"}}</span></li>
<li><i class="fas fa-moon" title='{{tr "DarkMode"}}'></i><span>{{tr "DarkMode"}}</span></li>
<li><i class="fas fa-th" title='{{tr "GridLayout"}}'></i><span>{{tr "GridLayout"}}</span></li>
<li><i class="fas fa-list-ul" title='{{tr "ListLayout"}}'></i><span>{{tr "ListLayout"}}</span></li>
</ul>
</div> </div>
</div> </main>
<div class="sidebar-container">
<ul>
<li><i class="fas fa-sun" title='{{tr "LightMode"}}'></i><span>{{tr "LightMode"}}</span></li>
<li><i class="fas fa-moon" title='{{tr "DarkMode"}}'></i><span>{{tr "DarkMode"}}</span></li>
<li><i class="fas fa-th" title='{{tr "GridLayout"}}'></i><span>{{tr "GridLayout"}}</span></li>
<li><i class="fas fa-list-ul" title='{{tr "ListLayout"}}'></i><span>{{tr "ListLayout"}}</span></li>
</ul>
</div>
</main>
<section class="dark-light-toggle"> <section class="dark-light-toggle">
<label class="switcher"> <label class="switcher">
<input type="checkbox" name="theme" id="dark-light" /> <input type="checkbox" name="theme" id="dark-light" />
<div> <div>
<i class="fas fa-adjust"></i> <i class="fas fa-adjust"></i>
</div> </div>
</label> </label>
</section> </section>
<!-- Back to top button --> <!-- Back to top button -->
<a id="back-to-top"></a> <a id="back-to-top"></a>
<footer> <footer>
<div class="footer-container"> <div class="footer-container">
<div><a href="https://github.com/naiba/nezha" target="_blank">Powered by {{tr "NezhaMonitoring"}} · {{.Version}}</a> <div><a href="https://github.com/naiba/nezha" target="_blank">Powered by {{tr "NezhaMonitoring"}} ·
<p>&copy; <span id="copyright-date"> {{.Version}}</a>
<p>&copy; <span id="copyright-date">
<script>document.getElementById('copyright-date').appendChild(document.createTextNode(new Date().getFullYear()))</script> <script>document.getElementById('copyright-date').appendChild(document.createTextNode(new Date().getFullYear()))</script>
</span> · <a href="https://blog.jackiesung.com" target="_blank">Theme designed by Jackie Sung</a> </span> · <a href="https://blog.jackiesung.com" target="_blank">Theme designed by Jackie Sung</a>
</p> </p>
</div>
</div> </div>
</div> </footer>
</footer>
<script src="/static/theme-daynight/js/main.js?v202102012266"></script> <script src="/static/theme-daynight/js/main.js?v202102012266"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script> <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script> <script
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script>
<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) {
MaxTCPPingValue = 1000;
}
// 基于准备好的dom初始化echarts实例 // 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('monitor-info-container')); const myChart = echarts.init(document.getElementById('monitor-info-container'));
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
var statusCards = new Vue({ var statusCards = new Vue({
el: '#network', el: '#network',
@ -128,11 +128,11 @@
position: function (pt) { position: function (pt) {
return [pt[0], '10%']; return [pt[0], '10%'];
}, },
formatter: function(params){ formatter: function (params) {
let result = params[0].axisValueLabel + "<br />"; let result = params[0].axisValueLabel + "<br />";
params.forEach(function(item){ params.forEach(function (item) {
result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />"; result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />";
}) })
return result; return result;
}, },
confine: true, confine: true,
@ -179,9 +179,9 @@
mounted() { mounted() {
this.DarkMode(); this.DarkMode();
this.parseMonitorInfo(monitorInfo); this.parseMonitorInfo(monitorInfo);
window.addEventListener('resize', this.resizeHandle); window.addEventListener('resize', this.resizeHandle);
}, },
destroyed () { destroyed() {
window.removeEventListener('resize', this.resizeHandle) window.removeEventListener('resize', this.resizeHandle)
}, },
methods: { methods: {
@ -195,19 +195,19 @@
}, },
redirectNetwork(id) { redirectNetwork(id) {
this.getMonitorHistory(id) this.getMonitorHistory(id)
.then(function(monitorInfo) { .then(function (monitorInfo) {
var vm = network.__vue__; var vm = network.__vue__;
vm.parseMonitorInfo(monitorInfo); vm.parseMonitorInfo(monitorInfo);
}) })
.catch(function(error){ .catch(function (error) {
window.location.href = "/404"; 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 = [];
@ -242,7 +242,7 @@
if (lossRate > 99) { if (lossRate > 99) {
datal = []; datal = [];
} }
legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%"; legendName = monitorInfo.result[i].monitor_name + " " + lossRate + "%";
tLegendData.push(legendName); tLegendData.push(legendName);
tSeries.push({ tSeries.push({
name: legendName, name: legendName,
@ -252,7 +252,7 @@
data: data, data: data,
markLine: { markLine: {
symbol: "none", symbol: "none",
symbolSize :0, symbolSize: 0,
data: datal data: datal
}, },
markPoint: { markPoint: {
@ -266,34 +266,35 @@
this.option.title.text = monitorInfo.result[0].server_name; this.option.title.text = monitorInfo.result[0].server_name;
this.option.series = tSeries; this.option.series = tSeries;
this.option.legend.data = tLegendData; this.option.legend.data = tLegendData;
this.myChart.clear(); myChart.clear();
this.myChart.setOption(this.option); myChart.setOption(this.option);
}, },
resizeHandle () { resizeHandle() {
this.myChart.resize(); myChart.resize();
}, },
} }
}); });
</script> </script>
</body> </body>
<style> <style>
#network { #network {
display: grid; width: calc(100vw - 6em);
/*grid-template-columns: repeat(5, 1fr);*/ max-width: 1400px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); margin: 1em auto;
grid-gap: 1em; }
width: 100%;
width: calc(100vw - 6em); #monitor-info-container {
max-width: 1400px; margin: 0em auto;
margin: 1em auto; align-content: start;
align-content: start; background-color: #F1F1F2;
} }
#monitor-info-container{
margin: 0em auto; .server-info-container {
align-content: start; font-size: .6em;
background-color: #F1F1F2; width: fit-content;
} display: inline-block;
}
</style> </style>
</html> </html>
{{end}} {{end}}

View File

@ -28,9 +28,6 @@
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) {
MaxTCPPingValue = 1000;
}
new Vue({ new Vue({
el: '#app', el: '#app',
delimiters: ['@#', '#@'], delimiters: ['@#', '#@'],

View File

@ -55,9 +55,6 @@
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) {
MaxTCPPingValue = 1000;
}
new Vue({ new Vue({
el: '#app', el: '#app',
delimiters: ['@#', '#@'], delimiters: ['@#', '#@'],

View File

@ -22,9 +22,6 @@
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) {
MaxTCPPingValue = 1000;
}
new Vue({ new Vue({
el: '#app', el: '#app',
delimiters: ['@#', '#@'], delimiters: ['@#', '#@'],