{{# var lang001 = {"ch": "Top域名", "en": "Top Domain"}, lang002 = {"ch": "-","en": "-"}, lang003 = {"ch": "-","en": "-"}, lang004 = {"ch": "参数配置", "en": "Configuration"}, lang005 = {"ch": "关键字搜索", "en": "Search"}, lang006 = {"ch": "占比", "en": "Percentage"}, lang007 = {"ch": "优", "en": "Excellent"}, lang008 = {"ch": "良", "en": "Good"}, lang009 = {"ch": "中", "en": "Normal"}, lang010 = {"ch": "差", "en": "Poor"}, lang011 = {"ch": "失败", "en": "Failure"}, lang012 = {"ch": "最后访问时间","en": "Last Access Time"}, lang013 = {"ch": "DNS失败数","en": "DNS Fails"}, lang014 = {"ch": "DNS平均时延","en": "DNS Avg Latency"}, lang015 = {"ch": "应用失败数","en": "App Fails"}, lang016 = {"ch": "应用平均时延","en": "App Avg Latency"}, lang017 = {"ch": "DNS访问","en": "DNS Access"}, lang018 = {"ch": "应用访问","en": "App Access"}, lang019 = {"ch": "类型", "en": "Type"}, lang020 = {"ch": "请求数", "en": "Requests"}, lang021 = {"ch": "失败数", "en": "Fails"}, lang022 = {"ch": "失败率", "en": "Fail Rate"}, lang023 = {"ch": "次", "en": "Times"}, lang024 = {"ch": "-", "en": "-"}, lang025 = {"ch": "域名", "en": "Domain"}, lang026 = {"ch": "DNS时延分布", "en": "DNS Latency Distribution"}, lang027 = {"ch": "应用时延分布", "en": "Application Latency Distribution"}, lang028 = {"ch": "导出", "en": "Export"}, lang029 = {"ch": "Top域名", "en": "Top Domain"}, lang030 = {"ch": "无请求", "en": "No Requests"}; }}  <style> .paui-domain-list-fail{background-color: #eeeeee;} .paui-domain-list-fail div{background-color:#ABE1FC}  /* 暗色主题 */ .paui-app-theme-dark .paui-domain-list-fail{background-color: #04161e;} .paui-app-theme-dark .paui-domain-list-fail div{background-color:#325d93} </style>  <div class="layui-tab layui-tab-brief"> {{# if(!d.pop_route) { }} <ul class="layui-tab-title"> <li class="layui-this">{{ lang001[g_lang] || "Top域名" }}</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_domain_topn"> <div class="layui-form-item paui-table-form-left"> <label class="layui-form-label" style="width:100px">{{ lang017[g_lang] || "DNS访问" }}>=</label>                     <div class="layui-input-inline" style="width:110px">                         <input type="text" name="dnstotal" class="layui-input" autocomplete="off"                         lay-affix="clear" lay-filter="clear_domain_topn" lay-verify="number">                     </div> <label class="layui-form-label" style="width:120px">{{ lang014[g_lang] || "DNS平均时延" }}>=</label>                     <div class="layui-input-inline" style="width:110px">                         <input type="text" name="dnsavg" class="layui-input" autocomplete="off"                         placeholder="ms" lay-affix="clear" lay-filter="clear_domain_topn" lay-verify="number">                     </div> <label class="layui-form-label" style="width:100px">{{ lang018[g_lang] || "应用访问" }}>=</label>                     <div class="layui-input-inline" style="width:110px">                         <input type="text" name="apptotal" class="layui-input" autocomplete="off"                         lay-affix="clear" lay-filter="clear_domain_topn" lay-verify="number">                     </div> <label class="layui-form-label" style="width:120px">{{ lang016[g_lang] || "应用时延" }}>=</label>                     <div class="layui-input-inline" style="width:110px">                         <input type="text" name="appavg" class="layui-input" autocomplete="off"                         placeholder="ms" lay-affix="clear" lay-filter="clear_domain_topn" lay-verify="number">                     </div> <div class="layui-input-inline" style="width:140px"> <input class="layui-input" name="keyword" type="text" autocomplete="off" placeholder='{{ lang005[g_lang] || "关键字搜索" }}' lay-affix="clear" lay-filter="clear_domain_topn"> </div> <div class="layui-input-inline" style="width:40px"> <span class="layui-hide" domain_topn_event="btnevt_reload" id="paui-btn-domain-reload"></span> <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="submit_domain_search"> <i class="layui-icon layui-icon-search"></i> </button> </div> </div> <div class="layui-form-item paui-table-form-right"> <div class="layui-form-mid"> <span class="abtn" domain_topn_event="btnevt_config"> <i class="layui-icon layui-icon-set"></i>&nbsp;{{ lang004[g_lang] || "参数配置" }} </span> <span class="abtn" domain_topn_event="btnevt_download"> <i class="pa-icon pa-download"></i>&nbsp;{{ lang028[g_lang] || "导出" }} </span> </div> </div> </form> <div class="paui-table-card"> <table id="tab_domain_list" lay-filter="tab_domain_list"></table> <div class="layui-table-page" id="page_ip_domain"></div> </div> </div> </div> </div>  <script id="tpl_domain_td_tips" type="text/html"> <div class="layui-row" style="max-width: 140px; cursor: pointer;" autoclose="false" paui-hover-evt="paui_tips" showzone="4"> <div class="paui-hover-tips-content" style="display: none;"> {%# layui.each(d.delay, function(index, elem){ %} <div class=layui-row> <div class="layui-inline" style="background-color:#{% d.segdelay[index] %};height:6.68px"> &nbsp;&nbsp; </div> &nbsp;{% d.segdelay_desc[index] %}： {% d[d.td + index] %} {{lang023[g_lang] || "次"}}， {{lang006[g_lang] || "占比"}} {% elem.toFixed(2) %}% </div> {%# }); %} </div> {%# layui.each(d.delay, function(index, elem){ %} <div  style="float:left;width:{% elem %}%;background-color:#{% d.segdelay[index] %}">&nbsp;</div> {%# }); %} <div class="layui-row paui-td-fixed">{% d[d.td + 'avg'] %}</div> </div> </script>  <script id="tpl_domain_total_tips" type="text/html"> <div class="layui-row" style="max-width: 140px; cursor: pointer;" paui-hover-evt="paui_tips" showzone="4"> <div class="paui-hover-tips-content" style="display: none;"> <div class="layui-row">{{lang020[g_lang] || "请求数"}}: {% d.total %} {{lang023[g_lang] || "次"}}</div> <div class="layui-row">{{lang021[g_lang] || "失败数"}}: {% d.fail %} {{lang023[g_lang] || "次"}}</div> <div class="layui-row">{{lang022[g_lang] || "失败率"}}: {% d.per %} %</div> </div> <div class="paui-domain-list-fail"> <div style="width:{% d.per %}%;">&nbsp;</div> </div> <div class="layui-row paui-td-fixed">{% d.fail %}</div> </div> </script>   <script> layui.use(function(){ var $ = layui.$, util = layui.util, form = layui.form, table = layui.table;  var pa_table = new Paui_table();      var api = "/cgi-bin/dashboard/ajax_domain_topn"; var l_sort = {"field": "ltime", "type": "desc"};      var segdelay = []; var segdelay_desc = [ '{{ lang007[g_lang] || "优" }}', '{{ lang008[g_lang] || "良" }}', '{{ lang009[g_lang] || "中" }}', '{{ lang010[g_lang] || "差" }}' ]; var desc_data = {};  var event_center = { btnevt_reload: function(){ get_info(); },  btnevt_config: function(){ paopen({ title: '{{ lang004[g_lang] || "参数配置" }}', area: ["800px", "600px"], url: '/html/monitor/domain_topn_edit.html', data: desc_data, btn: "default", subElem: "#submit_domain", }); },  btnevt_download: function(){ var cur_sec = Date.parse(new Date()); var cur_time = util.toDateString(cur_sec, 'MMddHHmmss');  layer.load();  pa_ajax({ url: api, data: {'action': 'list_domain'}, success: function(json){ layer.closeAll('loading');  var ctx = []; var data = filter_data(json);  layui.each(data.data, function(index, elem){ ctx.push(elem.dns) });  var urlObject = window.URL || window.webkitURL || window; var export_blob = new Blob([ctx.join('\n')]);  var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href = urlObject.createObjectURL(export_blob); save_link.download = '{{ lang029[g_lang] || "Top域名" }}_' + cur_time + ".txt"; save_link.click(); } }); } };   var get_info = function(){ pa_ajax({ url: api, data: {"action": "topdns_stat"}, success: function(json){ var formData = {}; desc_data = json.data;  json.data.dnsdelay.split(',').forEach((item, index)=>{ desc_data['dns'+index] = formData['dns'+index] = item/1000; });  json.data.appdelay.split(',').forEach((item, index)=>{ desc_data['app'+index] = formData['app'+index] = item/1000; });  segdelay = json.data.colors.split(',');  table_render(); } }); };   var filter_data = function(json){ var search = form.getValue("form_domain_topn"); var data = [];  layui.each(search, function(key, val){ if(key == "keyword") return; search[key] = Number(val); });  layui.each(json.data, function(index, elem){ elem.dnstotal = elem.dns0 + elem.dns1 + elem.dns2 + elem.dns3; elem.apptotal = elem.app0 + elem.app1 + elem.app2 + elem.app3; elem.dnsall = elem.dnstotal + elem.dnsfails; elem.appall = elem.apptotal + elem.appfails;  elem.dnsavg = elem.dnstotal == 0 ? 0 : (elem.dnsus / elem.dnstotal / 1000).toFixed(2); elem.appavg = elem.apptotal == 0 ? 0 : (elem.appus / elem.apptotal / 1000).toFixed(2);  if(elem.dnstotal < search.dnstotal) return; if(elem.dnsavg < search.dnsavg) return; if(elem.apptotal < search.apptotal) return; if(elem.appavg < search.appavg) return;  if(pa_str_find(elem.dns, search.keyword)) data.push(elem); });  if(l_sort.type == "asc") data = layui.sort(data, l_sort.field); else data = layui.sort(data, l_sort.field, true);  json.count = data.length; json.data = data;  return json; };   var table_col_render = function(r){ switch(this.field){ case "ltime":                 return  util.toDateString(r.ltime*1000);  case "dnsavg": if(r.dnsfails != 0 && r.dnsus == 0) return '<span class="paui-color-danger">{{ lang011[g_lang] || "失败" }}</span>';  if(r.dnstotal == 0) return '<span class="paui-color-disable">{{ lang030[g_lang] || "无请求" }}</span>';  r.td = 'dns'; r.delay = []; r.segdelay = segdelay; r.segdelay_desc = segdelay_desc;  for(var i = 0; i < 4; i++) r.delay.push(r[r.td + i] / r.dnstotal * 100);  return patpl( $("#tpl_domain_td_tips").html() ).render(r);  case "appavg": if(r.appfails != 0 && r.appus == 0) return '<span class="paui-color-danger">{{ lang011[g_lang] || "失败" }}</span>';  if(r.apptotal == 0) return '<span class="paui-color-disable">{{ lang030[g_lang] || "无请求" }}</span>';  r.td = 'app'; r.delay = []; r.segdelay = segdelay; r.segdelay_desc = segdelay_desc;  for(var i = 0; i < 4; i++) r.delay.push(r[r.td + i] / r.apptotal * 100);  return patpl( $("#tpl_domain_td_tips").html() ).render(r);  case "dnsfails": r.fail = r.dnsfails; r.total = r.dnstotal + r.dnsfails; r.per= r.total == 0 ? 0 : (r.dnsfails/r.total*100).toFixed(2); return patpl( $("#tpl_domain_total_tips").html() ).render(r);  case "appfails": r.fail = r.appfails; r.total = r.apptotal + r.appfails; r.per = r.total == 0 ? 0 : (r.appfails/r.total*100).toFixed(2); return patpl( $("#tpl_domain_total_tips").html() ).render(r); }; };   var table_search = function(){ var search = form.getValue("form_domain_topn"); pa_table.reload({             where: search, initSort: l_sort         }); };   var table_render = function(){ pa_table.render({ elem: '#tab_domain_list' ,id: 'tab_domain_list' ,initSort: l_sort ,height: 'full-190' ,load: true ,page: true ,autoSort: false ,pageType:'web' ,pageElem: "page_ip_domain" ,url: api ,where: {"action": 'list_domain'} ,parseData: function(json){ return filter_data(json); } ,cols: [[ {field: 'dns', title: '{{ lang025[g_lang] || "域名" }}', minWidth:250} ,{field: 'ltime', title: '{{ lang012[g_lang] || "最后访问时间" }}', sort: true, templet: table_col_render} ,{field: 'dnsall', title: '{{ lang017[g_lang] || "DNS访问" }}', sort: true, width: 100} ,{field: 'dnsfails', title: '{{ lang013[g_lang] || "DNS失败数" }}', sort: true ,templet: table_col_render} ,{field: 'dnsavg', title: '{{ lang026[g_lang] || "DNS时延分布" }}(ms)', sort:true, templet: table_col_render} ,{field: 'appall', title: '{{ lang018[g_lang] || "应用访问" }}', sort: true, width: 100} ,{field: 'appfails', title: '{{ lang015[g_lang] || "应用失败数" }}', sort: true, templet: table_col_render} ,{field: 'appavg', title: '{{ lang027[g_lang] || "应用时延分布" }}(ms)', sort: true, templet: table_col_render} ]] }); };   /* 进入页面 */ form.render(); get_info();   /* 事件绑定 */ util.event("domain_topn_event", event_center);  table.on('sort(tab_domain_list)', function(obj){ obj.type = obj.type == null ? "asc" : obj.type; l_sort = obj; table_search(); });  form.on('input-affix(clear_domain_topn)', table_search); form.on("submit(submit_domain_search)", function(obj){ table_search(); return false; });  }); </script>