{{# var lang001 = {"ch": "网卡抓包", "en": "NIC Packet Capture"}, lang002 = {"ch": "关键字搜索策略", "en": "Search Policy"}, lang003 = {"ch": "删除", "en": "Delete"}, lang004 = {"ch": "添加", "en": "Add"}, lang005 = {"ch": "编辑", "en": "Edit"}, lang006 = {"ch": "抓取大小", "en": "Capture Size"}, lang007 = {"ch": "抓取进度", "en": "Capture Progress"}, lang008 = {"ch": "开始抓包", "en": "Start Capture"}, lang009 = {"ch": "下载报文", "en": "Download Packet"}, lang010 = {"ch": "说明", "en": "Information"}, lang011 = {"ch": "添加抓包策略", "en": "Add Capture Policy"}, lang012 = {"ch": "清空抓包策略", "en": "Clear Capture Policies"}, lang013 = {"ch": "停止抓包", "en": "Stop Capture"}, lang014 = {"ch": "非IP报文", "en": "Non-IP Packet"}, lang015 = {"ch": "添加策略", "en": "Add Policy"}, lang016 = {"ch": "确定要清空策略列表吗？", "en": "Confirm to clear policy list?"}, lang017 = {"ch": "编辑策略", "en": "Edit Policy"}, lang018 = {"ch": "确定要提交吗？", "en": "Confirm Submit?"}, lang019 = {"ch": "流入", "en": "Inbound"}, lang020 = {"ch": "流出", "en": "Outbound"}, lang021 = {"ch": "其他", "en": "Other"}, lang022 = {"ch": "网卡", "en": "NIC"}, lang023 = {"ch": "方向", "en": "Direction"}, lang024 = {"ch": "源地址:端口", "en": "Src IP:Port"}, lang025 = {"ch": "目地址:端口", "en": "Dst IP:Port"}, lang026 = {"ch": "协议", "en": "Protocol"}, lang027 = {"ch": "数据包类型", "en": "Packet Type"}, lang028 = {"ch": "抓取数量", "en": "Capture Count"}, lang029 = {"ch": "操作", "en": "Action"}, lang030 = {"ch": "停止抓包才能下载", "en": "Stop capture to enable download."}, lang031 = {"ch": "格式：文件大小 / 报文数量", "en": "Format: File Size / Packet Count"}, lang032 = {"ch": "双向", "en": "Both"}, lang033 = {"ch": "TCP标记", "en": "TCP Flag"}; }}  <style> .paui-page-pcap-policy-list .paui-table-form-left .abtn{margin-right: 10px;} .paui-page-pcap-policy-list .paui-pcap-split{     height: 28px;     line-height: 28px;     margin-top: -4px;     margin-left: -5px;     border-left: 1px solid #ccc; } .paui-app-theme-dark .paui-page-pcap-policy-list .paui-pcap-split{border-color: #444;} </style>  <div class="layui-tab layui-tab-brief paui-page-pcap-policy-list"> <ul class="layui-tab-title"> <li class="layui-this">{{ lang001[g_lang] || "网卡抓包" }}</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_pcap_policy">                 <div class="layui-form-item paui-table-form-left">                     <div class="layui-form-mid">                         <span class=" layui-hide" pcap-event="btnevt_reload" id="paui-btn-pcap-policy-search"></span>                         <span class="abtn" pcap-event="btnevt_add">                             <i class="layui-icon layui-icon-add-1"></i>{{ lang011[g_lang] || "添加抓包策略" }}                         </span>                         <span class="abtn" pcap-event="btnevt_clear">                             <i class="layui-icon layui-icon-delete"></i>{{ lang012[g_lang] || "清空抓包策略" }}                         </span>                     </div>                     <div class="layui-form-mid">                         <div class="paui-pcap-split">&nbsp;</div>                     </div>                     <div class="layui-form-mid">                         <span class="abtn" id="btnevt_catch_pcap" pcap-event="btnevt_catch_pcap"                         paui-right-click="btnevt_right_click" tips="{{ lang008[g_lang] || "开始抓包" }}">                             <i class="layui-icon layui-icon-play" style="font-size: 18px;"></i>                         </span>                         <span class="abtn" pcap-event="btnevt_export_pcap" title='{{ lang009[g_lang] || "下载报文" }}'>                             <i class="pa-icon pa-download" style="font-size: 18px;"></i>                         </span>                         <span class="paui-color-disable">{{ lang007[g_lang] || "抓取进度" }}</span>                     </div>                     <div class="layui-form-mid" style="width: 240px;">                         <div class="layui-progress layui-progress-big" lay-filter="paui-progress-pcap-size">                             <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>                         </div>                     </div>                     <div class="layui-form-mid paui-color-disable">                         <span id="paui-progress-pcap-per">0%</span>，                         <span paui-right-click="btnevt_right_click" tips='{{ lang031[g_lang] || "格式：文件大小 / 报文数量" }}'>                             {{ lang006[g_lang] || "抓取大小" }}:                             <span id="paui-progress-pcap-nums">0 / 0</span>                         </span>                     </div>                 </div>             </form>             <div class="paui-table-card" style="margin-top: -4px;">                 <table id="tab_pcap_policy_list" lay-filter="tab_pcap_policy_list"></table>             </div>         </div> </div> </div>  <script id="tpl_pcap_policy_action" type="text/html">     <span class="abtn" lay-event="tabevt_edit" title='{{ lang005[g_lang] || "编辑" }}'>         <i class="layui-icon layui-icon-edit"></i>     </span> <span class="abtn" lay-event="tabevt_rmv" title='{{ lang003[g_lang] || "删除" }}'> <i class="layui-icon layui-icon-delete"></i> </span> </script>   <script> layui.use(function(){ var $ = layui.$,     util = layui.util,     form = layui.form,     patpl = layui.patpl, table = layui.table,     element = layui.element;      var api = '/cgi-bin/dashboard/ajax_pcap';     var pa_table = new Paui_table();     var pa_tiemr = new Paui_timer();      var l_pcap_stat = {};     var l_proto_type = {         "pppoe": "PPPoE",         "mpls": "MPLS",         "ipv4": "IPv4",         "ipv6": "IPv6",         "gre": "GRE",         "nonip": '{{ lang014[g_lang] || "非IP报文" }}'     };     var l_dir_desc = {         "both": '{{ lang032[g_lang] || "双向" }}',         "in": '{{ lang019[g_lang] || "流入" }}',         "out": '{{ lang020[g_lang] || "流出" }}'     };       var load_pcap_stat = function(){         if( $("#tab_pcap_policy_list").length == 0 ) return;          pa_ajax({             url: api,             data: {'action': 'load_pcap_stat'},             success: function(json){                 l_pcap_stat = json.data;                 layui.each(l_pcap_stat, function(key, val){                     if(typeof val == "number")                         l_pcap_stat[key] = Number(val);                 });                  if(l_pcap_stat.bufsize == 0)                     var per = 0;                 else                     var per = ( l_pcap_stat.bytes / l_pcap_stat.bufsize * 100 ).toFixed(2);                  element.progress('paui-progress-pcap-size', per+'%');                 $("#paui-progress-pcap-per").html(per+'%');                 $("#paui-progress-pcap-nums").html(formatBytes(l_pcap_stat.bytes) + ' / ' + l_pcap_stat.pktcnt);                  if(l_pcap_stat.running == 0){                     $("#btnevt_catch_pcap").removeClass('paui-color-warring')                     .html('<i class="layui-icon layui-icon-play"></i>')                     .attr('tips', '{{ lang008[g_lang] || "开始抓包" }}');                 } else {                     $("#btnevt_catch_pcap").addClass('paui-color-warring')                     .html('<i class="pa-icon pa-stop"></i>')                     .attr('tips', '{{ lang013[g_lang] || "停止抓包" }}');                     table_search();                 }             }         });     };       var event_center = {         btnevt_catch_pcap: function(){             pa_ajax({                 url: api,                 data: {                     'action': 'config_pcap_stat',                     'stat': l_pcap_stat.running == 1 ? "stop" : "start"                 },                 success: function(json){                     if(json.code != 0)                         alert_err(json.msg);                     else                         load_pcap_stat();                 }             });         },          btnevt_export_pcap: function(){             if(l_pcap_stat.running == 1){                 layer.msg('{{ lang030[g_lang] || "停止抓包才能下载" }}');                 return false;             }             paui_goto_url(api, {action: 'dump_pcap'});         },          btnevt_reload: function(){             table_search();         },          btnevt_add: function(){             paopen({                 title: '{{ lang015[g_lang] || "添加策略" }}',                 area: ['620px', '480px'],                 url: '/html/warring/pcap_policy_add.html',                 btn: 'default',                 subElem: '#submit_pcap_addpolicy'             });         },                  btnevt_clear: function(){             var data = table.cache.tab_pcap_policy_list;             var ids  = "";             layui.each(data, function(index, elem){                 ids += elem.id + " ";             });             pa_confirm('{{ lang016[g_lang] || "确定要清空策略列表吗？" }}', function(index){                 layer.close(index);                 pa_ajax({                     url: api,                     data: {'action': 'clear_policy', 'ids': ids},                     success: function(json){                         if(json.code != 0)                             alert_err(json.msg);                         else                             alert_ok(json.msg);                         table_search();                     }                 });             });         },          tabevt_edit: function(obj){             obj.data.action = "edit_policy";             paopen({                 title: '{{ lang017[g_lang] || "编辑策略" }}',                 area: ['620px', '480px'],                 url: '/html/warring/pcap_policy_add.html',                 data: obj.data,                 btn: 'default',                 subElem: '#submit_pcap_addpolicy'             });         },          tabevt_rmv: function(obj){             pa_confirm('{{ lang018[g_lang] || "确定要提交吗？" }}', function(index){                 layer.close(index);                 obj.data.action = "rmv_policy";                 pa_ajax({                     url: api,                     data: obj.data,                     success: function(json){                         if(json.code != 0) {                             alert_err(json.msg);                         } else {                             alert_ok(json.msg);                             table_search();                         }                     }                 });             });         }     };       var col_render = function(r){         switch(this.field){             case "id":                 return '<span class="abtn" lay-event="tabevt_edit" title="{{ lang005[g_lang] || "编辑" }}">' + r.id + '</span>';              case "ifname":                 if(r.ifname == "any") return 'any';                 return '<span class="abtn" lay-event="tabevt_ifname">' + r.ifname + '</span>';              case "dir":                 return l_dir_desc[r.dir] || r.dir;              case "src":                 if(r.src == "" && r.sport == "any")                     return '<div style="padding: 5px 0px;">any</div>';                 else                     return patpl($("#paui-tpl-policy-ip").html()).render({ip: r.src, port: r.sport});              case "dst":                 if(r.dst == "" && r.dport == "any")                     return '<div style="padding: 5px 0px;">any</div>';                 else                     return patpl($("#paui-tpl-policy-ip").html()).render({ip: r.dst, port: r.dport});              case "tcp":                 var html = "";                 if(r.syn == 1)                     html += '<div class="paui-label paui-color-normal">SYN</div>';                 if(r.rst == 1)                     html += '<div class="paui-label paui-color-normal">RST</div>';                 return html;              case "proto":                 var desc = {'tcp': 'TCP', 'udp': 'UDP', 'icmpv4': 'ICMP v4', 'icmpv6': 'ICMP v6', 'other': '{{ lang021[g_lang] || "其他" }}'};                 return desc[r.proto] || r.proto;              case "vlan":                 return r.vlan == 0 ? '' : r.vlan;              case "type":                 var html = "";                 layui.each(r, function(key, val){                     if(l_proto_type[key] && val == 1){                         html += '<div class="paui-label paui-color-normal">' + l_proto_type[key] + '</div>';                     }                 });                 return html;         }     };       var table_search = function(){         var search = form.getValue("form_pcap_policy");         pa_table.reload({             where: search         });     };       /* 页面渲染 */     load_pcap_stat();      pa_table.render({         elem: '#tab_pcap_policy_list',         height: 'full-{{d.pop_route ? 70 : 145}}',         url: api,         where: {'action': 'list_policy'},         parseData: function(json){             var data = [];             var search = form.getValue('form_pcap_policy');             layui.each(json.data, function(index, elem){                 if(pa_str_find(JSON.stringify(elem), search.keyword))                     data.push(elem);             });             json.data = data;             return json;         },         colHeight: 'auto',         cols: [[             {field: 'id', title: 'ID', width: 100, templet: col_render},             {field: 'ifname', title: '{{ lang022[g_lang] || "网卡" }}', templet: col_render},             {field: 'dir', title: '{{ lang023[g_lang] || "方向" }}', templet: col_render},             {field: 'vlan', title: 'VLAN', templet: col_render},             {field: 'proto', title: '{{ lang026[g_lang] || "协议" }}', templet: col_render},             {field: 'tcp', title: '{{ lang033[g_lang] || "TCP标记" }}', minWidth: 150, templet: col_render},             {field: 'type', title: '{{ lang027[g_lang] || "数据包类型" }}', minWidth: 350, templet: col_render},             {field: 'src', title: '{{ lang024[g_lang] || "源地址:端口" }}', minWidth: 150, templet: col_render},             {field: 'dst', title: '{{ lang025[g_lang] || "目地址:端口" }}', minWidth: 150, templet: col_render},             {field: 'pkts', title: '{{ lang028[g_lang] || "抓取数量" }}'},             {field: 'action', title: '{{ lang029[g_lang] || "操作" }}', align: 'right', templet: '#tpl_pcap_policy_action'}         ]]     });       /* 事件绑定 */     util.event('pcap-event', event_center);     table.on('tool(tab_pcap_policy_list)', function(obj){         event_center[obj.event](obj);     });           /* 定时刷新 */     var l_timer = setInterval(load_pcap_stat, 2000);     g_Intervaltimer.push(l_timer);  }); </script>