{{# var lang001 = {"ch": "接口", "en": "Interface"}, lang002 = {"ch": "目标", "en": "Target"}, lang003 = {"ch": "下一跳", "en": "Next Hop"}, lang004 = {"ch": "开始", "en": "Start"}, lang005 = {"ch": "管理口", "en": "MGMT Port"}, lang006 = {"ch": "目标", "en": "Target"}, lang007 = {"ch": "端口", "en": "Port"}, lang008 = {"ch": "Ping状态", "en": "Ping Status"}, lang009 = {"ch": "已发送", "en": "Sent"}, lang010 = {"ch": "超时", "en": "Missed"}, lang011 = {"ch": "丢包率", "en": "Miss Rate"}, lang012 = {"ch": "最大值", "en": "Max Latency"}, lang013 = {"ch": "最小值", "en": "Min Latency"}, lang014 = {"ch": "平均值", "en": "Avg Latency"}, lang015 = {"ch": "开始时间", "en": "Start Time"}, lang016 = {"ch": "经过时间", "en": "Elapsed Time"}, lang017 = {"ch": "开始跟踪", "en": "Start Trace"}, lang018 = {"ch": "跟踪完成", "en": "Trace Complete"}, lang019 = {"ch": "结束时间", "en": "End Time"}, lang020 = {"ch": "Ping明细", "en": "Ping Details"}, lang021 = {"ch": "时延", "en": "Latency"}, lang022 = {"ch": "最近三分钟时延趋势", "en": "3-Min Latency Trend"}, lang023 = {"ch": "搜索", "en": "Search"}, lang024 = {"ch": "停止", "en": "Stop"}, lang025 = {"ch": "超时时间", "en": "Timeout"}, lang026 = {"ch": "最大跳数", "en": "Max Hops"}, lang027 = {"ch": "跟踪明细", "en": "Trace Details"}, lang028 = {"ch": "正在请求，请稍等", "en": "Requesting, please wait"}; }}  <style> .paui-page-ping .layui-tab-title li{padding: 0px 20px;} .paui-page-ping .layui-form-pane xm-select{margin: 0px} .paui-ping-stat-item{padding-bottom: 10px;} .paui-ping-stat-label{text-align: right; width: 80px; padding: 2px 10px 2px 2px;} .paui-ping-stat-text{border-bottom: 1px solid #ddd; width: 80px; padding: 2px; color: #4E97EE; font-size: 14px;} .paui-ping-result-list{overflow-y: auto; padding-left: 20px;} </style>  <div class="layui-tab layui-tab-brief paui-page-ping" lay-filter="menu_ping">     <ul class="layui-tab-title">         <li class="layui-this">ICMP Ping</li>         <li>TCP Ping</li>         <li>Trace Route</li>     </ul>     <div class="layui-tab-content">         <div class="layui-tab-item layui-show">             <form class="layui-form layui-form-pane paui-table-form" lay-filter="form_icmp_ping">                 <div class="layui-form-item paui-table-form-left">                     <label class="layui-form-label">{{ lang001[g_lang] || "接口" }}</label>                     <div class="layui-input-inline" id="paui-ping-select-interface" style="width: 140px;"></div>                     <label class="layui-form-label">{{ lang002[g_lang] || "目标" }}</label>                     <div class="layui-input-inline" style="width: 140px;">                         <input type="hidden" name="type" value="icmp">                         <input type="hidden" name="action" value="send_ping_packet">                         <input class="layui-input" name="ip" type="text" autocomplete="off" lay-verify="required">                     </div>                     <div class="paui-form-item-nexthop" style="display: none;">                         <label class="layui-form-label">{{ lang003[g_lang] || "下一跳" }}</label>                         <div class="layui-input-inline" style="width: 140px;">                             <input class="layui-input" name="nexthop" type="text" autocomplete="off">                         </div>                     </div>                     <div class="layui-input-inline" style="width:40px">                         <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit                         lay-filter="submit_icmp_ping" id="submit_icmp_ping">                             <i class="layui-icon layui-icon-play"></i>&nbsp;{{ lang004[g_lang] || "开始" }}                         </button>                     </div>                 </div>             </form>             <div class="layui-card">                 <div class="layui-card-body" id="paui-ping-statbox-icmp"></div>             </div>         </div>         <div class="layui-tab-item">             <form class="layui-form layui-form-pane paui-table-form" lay-filter="form_tcp_ping">                 <div class="layui-form-item paui-table-form-left">                     <label class="layui-form-label">{{ lang001[g_lang] || "接口" }}</label>                     <div class="layui-input-inline" style="width: 80px;">                         <input type="hidden" name="id" value="0">                         <input type="hidden" name="type" value="tcp">                         <input type="hidden" name="action" value="send_ping_packet">                         <input type="text" class="layui-input layui-disabled" value='{{ lang005[g_lang] || "管理口" }}' readonly>                     </div>                     <label class="layui-form-label">{{ lang006[g_lang] || "目标" }}</label>                     <div class="layui-input-inline" style="width: 180px;">                         <input class="layui-input" name="ip" type="text" autocomplete="off" lay-verify="required">                     </div>                     <label class="layui-form-label">{{ lang007[g_lang] || "端口" }}</label>                     <div class="layui-input-inline" style="width: 80px;">                         <input class="layui-input" name="port" type="text" autocomplete="off" value="443" lay-verify="required">                     </div>                     <div class="layui-input-inline" style="width:40px">                         <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit                         lay-filter="submit_tcp_ping" id="submit_tcp_ping">                             <i class="layui-icon layui-icon-play"></i>&nbsp;{{ lang004[g_lang] || "开始" }}                         </button>                     </div>                 </div>             </form>             <div class="layui-card">                 <div class="layui-card-body" id="paui-ping-statbox-tcp"></div>             </div>         </div>         <div class="layui-tab-item">             <form class="layui-form layui-form-pane">                 <div class="layui-form-item paui-table-form-left">                     <label class="layui-form-label">{{ lang001[g_lang] || "接口" }}</label>                     <div class="layui-input-inline" style="width: 140px;">                         <select name="proxy" id="paui-trace-select-interface" lay-search></select>                     </div>                     <label class="layui-form-label">{{ lang006[g_lang] || "目标" }}IP</label>                     <div class="layui-input-inline" style="width: 140px;">                         <input class="layui-input" name="dst" type="text" autocomplete="off" lay-verify="required|isIP">                     </div>                     <label class="layui-form-label">{{ lang026[g_lang] || "最大跳数" }}</label>                     <div class="layui-input-inline" style="width: 80px;">                         <input type="hidden" name="hop" value="1">                         <input type="hidden" name="action" value="send_tracert_packet">                         <input class="layui-input" name="max_hop" type="text" autocomplete="off" value="30" lay-verify="required|number">                     </div>                     <div class="layui-input-inline" style="width:40px">                         <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit                         lay-filter="submit_trace_ping" id="submit_trace_ping">                             <i class="layui-icon layui-icon-play"></i>&nbsp;{{ lang004[g_lang] || "开始" }}                         </button>                     </div>                 </div>             </form>                          <div class="layui-card">                 <div class="layui-card-body">                     <div id="ping_status">                         <fieldset class="layui-elem-field layui-field-title" style="margin: 10px 0px;">                             <legend id="detail"> {{ lang027[g_lang] || "跟踪明细" }}</legend>                         </fieldset>                         <div class="paui-ping-result-list result-trace"></div>                     </div>                 </div>             </div>         </div>     </div> </div>  <script id="tpl_ping_result" type="text/html">     <fieldset class="layui-elem-field layui-field-title" style="margin: 10px 0px;">         <legend>{{ lang008[g_lang] || "Ping状态" }}</legend>     </fieldset>      <div class="layui-row">         <div class="layui-col-xs4">             <div class="paui-ping-stat-item">                 <div class="layui-inline paui-ping-stat-label">{{ lang009[g_lang] || "已发送" }}</div>                 <div class="layui-inline paui-ping-stat-text" id="paui-{% d.type %}-text-send">0</div>             </div>             <div class="paui-ping-stat-item">                 <div class="layui-inline paui-ping-stat-label">{{ lang010[g_lang] || "超时" }}</div>                 <div class="layui-inline paui-ping-stat-text" id="paui-{% d.type %}-text-miss">0</div>             </div>             <div class="paui-ping-stat-item">                 <div class="layui-inline paui-ping-stat-label">{{ lang011[g_lang] || "丢包率" }}</div>                 <div class="layui-inline paui-ping-stat-text" id="paui-{% d.type %}-text-rate">0</div>                 <div class="layui-inline layui-word-aux">%</div>             </div>         </div>         <div class="layui-col-xs4">             <div class="paui-ping-stat-item">                 <div class="layui-inline paui-ping-stat-label">Ping {{ lang012[g_lang] || "最大值" }}</div>                 <div class="layui-inline paui-ping-stat-text" id="paui-{% d.type %}-text-max">0</div>                 <div class="layui-inline layui-word-aux">ms</div>             </div>             <div class="paui-ping-stat-item">                 <div class="layui-inline paui-ping-stat-label">Ping {{ lang013[g_lang] || "最小值" }}</div>                 <div class="layui-inline paui-ping-stat-text" id="paui-{% d.type %}-text-min">0</div>                 <div class="layui-inline layui-word-aux">ms</div>             </div>             <div class="paui-ping-stat-item">                 <div class="layui-inline paui-ping-stat-label">Ping {{ lang014[g_lang] || "平均值" }}</div>                 <div class="layui-inline paui-ping-stat-text" id="paui-{% d.type %}-text-avg">0</div>                 <div class="layui-inline layui-word-aux">ms</div>             </div>         </div>         <div class="layui-col-xs4">             <div class="paui-ping-stat-item">                 <div class="layui-inline paui-ping-stat-label">{{ lang015[g_lang] || "开始时间" }}</div>                 <div class="layui-inline paui-ping-stat-text" id="paui-{% d.type %}-text-starttime">-</div>             </div>             <div class="paui-ping-stat-item">                 <div class="layui-inline paui-ping-stat-label">{{ lang016[g_lang] || "经过时间" }}</div>                 <div class="layui-inline paui-ping-stat-text" id="paui-{% d.type %}-text-keeptime">-</div>             </div>             <div class="paui-ping-stat-item">                 <div class="layui-inline paui-ping-stat-label">{{ lang019[g_lang] || "结束时间" }}</div>                 <div class="layui-inline paui-ping-stat-text" id="paui-{% d.type %}-text-endtime">-</div>             </div>         </div>     </div>      <div class="layui-row" style="margin-top: 10px;">         <div id="paui-{% d.type %}-stat-chart" style="height: 80px"></div>     </div>                 <fieldset class="layui-elem-field layui-field-title" style="margin: 10px 0px;">         <legend id="detail">{{ lang020[g_lang] || "Ping明细" }}</legend>     </fieldset>     <div class="paui-ping-result-list result-{% d.type %}"></div>      </script>  <script> layui.use(function(){     var $ = layui.$,     util = layui.util,     form = layui.form,     patpl = layui.patpl;      var api = "/cgi-bin/system/ajax_ping";     var TPL = $("#tpl_ping_result").html();     var pdata = JSON.parse('{{- JSON.stringify(d) }}');      var select_interfact_obj = "";       class Ping {         constructor(type){             this.type = type;             this.l_data = '';             this.taskid = '';             this.l_chart = '';             this.setTime = '';                          $("#paui-ping-statbox-" + type).html( patpl(TPL).render({ type: type }) );             this.init();         };                  init = function(){             this.init_chart("paui-" + this.type + "-stat-chart");                              this.state = 'stop';             this.ping_seq = 0;             this.ping_total = 0;             this.ping_miss = 0;             this.ping_pass = 0;             this.ping_time_min = 0;             this.ping_time_max = 0;             this.ping_time_all = 0;             this.ping_start_time = new Date().getTime();         };                  init_chart = function(elem){             var data = [];             var cur_time = Date.parse(new Date());              for(var i = 0; i < 180; i++){                 data.push({                     x: cur_time - (180 - i) * 1000,                     y: 0                 });             }                          $("#" + elem).html('');             this.l_chart = pachart_areaspline(elem, {                 xAxis: {visible: false},                 yAxis: {title:{ text:'{{ lang021[g_lang] || "时延" }}/ms' }},                 legend: { enabled: false },                 tooltip: {                     formatter: function() {                         var s = Highcharts.dateFormat("%H:%M:%S", this.x) +'<br>';                         var v = 0;                         for (i = 0; i < this.points.length; i++) {                             if (i == 2) v = this.points[i].y;                             else v = this.points[i].y;                             s += this.points[i].series.name + ': ' + v + '<br>';                         }                         return s;                     }                 },                 credits: {                     enabled: true,                     text: '{{ lang022[g_lang] || "最近三分钟时延趋势" }}',                     style: {                         fontSize: '9px',                         position: 'absolute',                         right: '10px',                         bottom: '0px'                     }                 },                 series: [{'name': '{{ lang021[g_lang] || "时延" }}', 'data': data}],             });         };                  start = function(data){             this.l_data = data;             $(".result-" + this.type).html('');             $("#submit_" + this.type +"_ping")                 .removeClass("layui-btn-normal")                 .addClass("layui-btn-danger")                 .html('<i class="pa-icon pa-stop"></i>&nbsp;{{ lang024[g_lang] || "停止" }}');              this.init();             this.state = "run";             this.send_packet();         };                  stop = function(){             var cur_time = new Date().getTime();             var keep_time = Math.ceil((cur_time - this.ping_start_time) / 1000);             $("#paui-"+ this.type + "-text-keeptime").text( sec_to_str(keep_time) );             $("#paui-"+ this.type + "-text-endtime").text( util.toDateString(cur_time, "HH:mm:ss") );                          $("#submit_"+ this.type +"_ping")                 .removeClass("layui-btn-danger")                 .addClass("layui-btn-normal")                 .html('<i class="layui-icon layui-icon-play"></i>&nbsp;{{ lang004[g_lang] || "开始" }}');              this.state = "stop";             clearTimeout(this.setTime);         };                  show_stat = function(json){             var series = this.l_chart.series[0],             shift = series.data.length > 180;                          if (json.data.ip)                 this.l_data.ip = json.data.ip;                          this.l_chart.series[0].addPoint({                 x: Date.parse(new Date()),                 y: json.data.timer || 0             }, true, shift);                          this.ping_seq++;                          if (json.code != 0) {                 var ret = $('<div class="paui-color-danger">SEQ=' + this.ping_seq + "，" + json.msg + '</div>');                 this.ping_miss++;             } else {                 if(this.type == "icmp"){                     var ret = $([                         '<div class="paui-color-disable">',                         'Reply from ', this.l_data.ip,                         ' : SEQ= ', this.ping_seq,                         '， TIME= ', json.data.timer,                         'ms，TTL= ', json.data.ttl,                         '</div>'                     ].join(''));                 } else                 if(this.type == "tcp") {                     var ret = $([                         '<div class="paui-color-disable">',                         'TCP Ping ', this.l_data.ip, ":", this.l_data.port,                          ' : SEQ= ', this.ping_seq ,                         '， TIME= ', json.data.timer,                         'ms</div>'                     ].join(''));                 }                  if(this.ping_time_min == 0) this.ping_time_min = json.data.timer;                 if(json.data.timer < this.ping_time_min) this.ping_time_min = json.data.timer;                 if(json.data.timer > this.ping_time_max) this.ping_time_max = json.data.timer;                 this.ping_time_all += json.data.timer;                 this.ping_pass++;             }             this.ping_total++;                          $(".result-"+this.type).append(ret).scrollTop($(".result-"+this.type)[0].scrollHeight);              var cur_time = new Date().getTime();             var keep_time = Math.ceil((cur_time - this.ping_start_time) / 1000);              if(this.ping_total == 0)                 var rate = 0;             else                 var rate = this.ping_miss <= 0 ? "0" : Math.round(this.ping_miss / this.ping_total * 100);                         if(this.ping_pass == 0)                 var avg = 0;             else                 var avg = (this.ping_time_all / this.ping_pass).toFixed(2);              $("#paui-"+ this.type + "-text-send").text(this.ping_total);             $("#paui-"+ this.type + "-text-miss").text(this.ping_miss);             $("#paui-"+ this.type + "-text-rate").text(rate);             $("#paui-"+ this.type + "-text-max").text(this.ping_time_max);             $("#paui-"+ this.type + "-text-min").text(this.ping_time_min);             $("#paui-"+ this.type + "-text-avg").text( avg );             $("#paui-"+ this.type + "-text-starttime").text( util.toDateString(this.ping_start_time, "HH:mm:ss") );             $("#paui-"+ this.type + "-text-keeptime").text( sec_to_str(keep_time) );             $("#paui-"+ this.type + "-text-endtime").text('-');         };                  send_packet = function(){             var _self = this;             pa_ajax({                 url: api,                 data: _self.l_data,                 success: function(json){                     if(json.code == 1){                         alert_err(json.msg);                         _self.stop();                         return;                     }                     _self.show_stat(json);                     if(_self.state == "stop") {                         _self.stop();                     } else {                         _self.setTime = setTimeout(function(){                             _self.send_packet();                         }, 1000);                     }                 }             });         };     };           class TraceRoute {         constructor(type){             this.state = 'stop';             this.data = '';         };                 start = function(data){             $(".result-trace").html('');             $("#submit_trace_ping")                 .removeClass("layui-btn-normal")                 .addClass("layui-btn-danger")                 .html('<i class="pa-icon pa-stop"></i>&nbsp;{{ lang024[g_lang] || "停止" }}');              $(".result-trace").append('{{ lang017[g_lang] || "开始跟踪" }}');             this.state = "run";             this.data = data;             this.send_packet();         };                  stop = function(){             $("#submit_trace_ping")                 .removeClass("layui-btn-danger")                 .addClass("layui-btn-normal")                 .html('<i class="layui-icon layui-icon-play"></i>&nbsp;{{ lang004[g_lang] || "开始" }}');             this.data.hop=1;             this.state = "stop";         };                  send_packet = function(){             var that = this;             $(".result-trace").append(`<div id="traceroute_result_${this.data.hop}"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i></div>`);             pa_ajax({                 url: api,                 data: that.data,                 success: function(json){                     if(json.code == 1){                         alert_err(json.msg);                         that.stop();                         return;                     }else{                         if(that.state != "stop" && parseInt(json.data.split('.')[0])<=that.data.hop) {                             that.show_stat(json.data);                         }                      }                                      }             });         };          show_stat = function(data){             $(`#traceroute_result_${this.data.hop}`).html('<pre>' + data + '</pre>');              if(this.data.hop >= this.data.max_hop || pa_str_find(data, this.data.dst)){                 this.stop();                 $(".result-trace").append('{{ lang018[g_lang] || "跟踪完成" }}');             } else {                 this.data.hop++;                 this.send_packet();                          }         }     };           var show_select = function(id, data){         select_interfact_obj = pa_select({             el: id,             radio: true,             name: 'id',             model: {                 icon: 'hidden',                 label: {                     type: 'text'                 }             },             clickClose: true,             paging: true,             pageSize: 20,             searchTips: '{{ lang023[g_lang] || "搜索" }}',             filterable: true,             delay: 0, /* 搜索时延 */             filterMethod: function(val, item, index, prop){                 if(pa_str_find(item.name, val))                     return true;                 else                     return false;             },             prop: {                 name: 'name',                 value: 'id',             },             data: data,             on: function(data){                 if(data.arr.length == 0) return;                 if( arryInclude(['rtif', 'rtif6', 'vrif', 'vrif6', 'grelan'], data.arr[0].type) )                     $(".paui-form-item-nexthop").show();                 else                     $(".paui-form-item-nexthop").hide();             }         });     };               var load_interface = function(){         pa_ajax({             url: api,             data: {'action': 'load_interface'},             success: function(json){                 var data = [{'name': '{{ lang005[g_lang] || "管理口" }}', 'id': 0, selected: true}];                  if(json.data.wan.length != 0){                     data.push({'name': 'WAN', 'children': json.data.wan});                     layui.each(json.data.wan, function(index, elem){                         var opt = new Option(elem.name, elem.id);                         $("#paui-trace-select-interface").append(opt);                     });                     layui.each(json.data.lan, function(index, elem){                         var opt = new Option(elem.name, elem.id);                         $("#paui-trace-select-interface").append(opt);                     });                     form.render();                 }                  if(json.data.lan.length != 0)                     data.push({'name': 'LAN', 'children': json.data.lan});                  show_select('#paui-ping-select-interface', data);                  /* 自动Ping */                 if(pdata.dopingnow == 1){                     select_interfact_obj.setValue([pdata.id]);                     form.val('form_icmp_ping', pdata);                     $("#submit_icmp_ping").click();                 }             }         });     };           var init_result_height = function(){         var max_height = $(document).height();          $(".result-icmp").height(max_height - 410);         $(".result-tcp").height(max_height - 410);         $(".result-trace").height(max_height - 158);     };           /* 页面渲染 */     var icmp_obj = new Ping('icmp');     var tcp_obj  = new Ping('tcp');     var trt_obj  = new TraceRoute();      form.render();     load_interface();     init_result_height();           /* 事件绑定 */     $(window).resize(init_result_height);          form.on('submit(submit_icmp_ping)', function(obj){         if(icmp_obj.state == "stop")             icmp_obj.start(obj.field);         else             icmp_obj.stop();                  return false;     });          form.on('submit(submit_tcp_ping)', function(obj){         if(tcp_obj.state == "stop")             tcp_obj.start(obj.field);         else             tcp_obj.stop();          return false;     });      form.on('submit(submit_trace_ping)', function(obj){         if(trt_obj.state == "stop")             trt_obj.start(obj.field);         else             trt_obj.stop();                 return false;      });      }); </script>