{{# var lang001 = {"ch": "Top连接", "en": "Top Sessions"}, lang002 = {"ch": "用户类型","en": "User Type"}, lang003 = {"ch": "内网用户","en": "Internal User"}, lang004 = {"ch": "外网用户","en": "External User"}, lang005 = {"ch": "应用协议","en": "Protocol"}, lang006 = {"ch": "任意协议","en": "Any Protocol"}, lang007 = {"ch": "IP备注","en": "IP Note"}, lang008 = {"ch": "IP画像","en": "IP Profile"}, lang009 = {"ch": "画像","en": "Profile"}, lang010 = {"ch": "备注","en": "Notes"}, lang011 = {"ch": "序号","en": "No."}, lang012 = {"ch": "连接数","en": "Sessions"}, lang013 = {"ch": "操作","en": "Action"}, lang014 = {"ch": "IP类型","en": "IP Type"}, lang015 = {"ch": "所有类型","en": "All Types"}; }}  <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-row layui-form layui-form-pane" lay-filter="form_flow_search"> <div class="layui-form-item"> <label class="layui-form-label">{{ lang014[g_lang] || "IP类型" }}</label> <div class="layui-input-inline" style="width: 100px"> <select name="ipv6" lay-filter="select_flow_search"> <option value="-1">{{ lang015[g_lang] || "所有类型" }}</option> <option value="0">IPv4</option> <option value="1">IPv6</option> </select> </div> <label class="layui-form-label">{{ lang002[g_lang] || "用户类型" }}</label> <div class="layui-input-inline" style="width: 100px"> <select name="type" lay-filter="select_flow_search"> <option value="inner" {{ d.type == "inner" ? "selected" : ""}}>{{ lang003[g_lang] || "内网用户" }}</option> <option value="outer" {{ d.type == "outer" ? "selected" : ""}}>{{ lang004[g_lang] || "外网用户" }}</option> </select> </div> <label class="layui-form-label">{{ lang005[g_lang] || "应用协议" }}</label> <div class="layui-input-inline" style="width: 120px"> <input type="hidden" name="appname" id="ipt_appname" value="any" class="layui-input"> <input type="text" name="appcname" id="ipt_appcname" class="paui-flow-act layui-input" paui-event="btnevt_appcname" value='{{ lang006[g_lang] || "任意协议" }}' readonly> </div> <div class="layui-form-mid" style="padding:0px!important"> <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="submit_ipsesc_search"> <i class="layui-icon layui-icon-search"></i> </button> </div> </div> </form> <div class="paui-table-card"> <table id="tab_ip_flow" lay-filter="tab_ip_flow"></table> <div class="layui-table-page" id="page_ip_flow"></div> </div> </div> </div> </div>  <script id="tpl_ip_desc" type="text/html"> <form class="layui-form" style="margin-top:20px" lay-filter="form_ip_desc"> <div class="layui-form-item"> <div class="layui-form-label">IP</div> <div class="layui-input-inline"> <input type="text" name="ip" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-form-label">{{ lang007[g_lang] || "IP备注" }}</div> <div class="layui-input-inline"> <input type="text" name="desc" class="layui-input"> <input type="hidden" name="action" value="ipdesc_set"> </div> </div> <div class="layui-hide"> <button id="submit_ipdesc" lay-filter="submit_ipdesc" lay-submit></button> </div> </form> </script>  <script id="tpl_flow_topn_act" type="text/html"> {{# if(g_sys_env.ntm == 1) { }} <span class="abtn" lay-event="tabevt_edit">{{ lang010[g_lang] || "备注" }}</span> &nbsp;&nbsp; <span class="abtn" lay-event="tabevt_view">{{ lang009[g_lang] || "画像" }}</span> {{# } else { }} <span class="abtn" lay-event="tabevt_edit">{{ lang010[g_lang] || "备注" }}</span> {{# } }} </script>  <script> layui.use('form', function(){ var $ = layui.$, form = layui.form, table = layui.table;  var pa_table = new Paui_table();   var event_center = { tabevt_ip: function(obj){ popupIPobj(obj.data.ip, 1); },  tabevt_edit: function(obj){ obj.data.desc = obj.data.desc == "-" ? "" : obj.data.desc; paopen({ title: '{{ lang007[g_lang] || "IP备注" }}', content: $("#tpl_ip_desc").html(), area: ["400px", "200px"], btn: 'default', btn1: function(){ $("#submit_ipdesc").click(); }, success: function(layero, index){ form.val("form_ip_desc", obj.data); form.on("submit(submit_ipdesc)", function(data){ pa_ajax({ url: "/cgi-bin/dashboard/ajax_flow_topn", data: data.field, success: function(json){ if(json.code != 0) alert_err(json.msg); else { table_search(); layer.close(index); alert_ok(json.msg); } } }); return false; }); } }); },  tabevt_view: function(obj){ var args = objtourl({ srcip: obj.data.ip, popup_from_ntm: 1, pop_title: '{{lang008[g_lang] || "IP画像"}}', pop_route: 'domain/draw_ip' }); ShowWindow('/cgi-bin/common/popup' + args, "", 1400, 664); },  btnevt_appcname: function(){ select_app(); } };   var col_render = function(r) { switch(this.field) { case "ip": return [ '<span class="abtn" lay-event="tabevt_ip" autoclose="false">', r.ip, '</span>' ].join(''); } };   var table_search = function(){ pa_table.reload({ where: form.getValue("form_flow_search") }); };   /* 进入页面 */ form.render(); pa_table.render({ elem: '#tab_ip_flow' ,height: 'full-{{ d.pop_route ? 112 : 192}}' ,page: true ,pageElem: "page_ip_flow" ,url: '/cgi-bin/dashboard/ajax_flow_topn' ,where: {"action": "flow_list", "type": "{{d.type || 'inner'}}"} ,parseData: function(json){ var item = ""; var _ip  = ""; var desc = ""; var ret = []; var tmp = {}; for(var i = 0; i < json.flow.data.length; i++){ desc = "-"; item = json.flow.data[i]; _ip = item["ip"]; if (json.desc[_ip]) desc = json.desc[_ip]; tmp = {"ip": item["ip"], "flow": item["flow"], "desc": desc}; ret.push(tmp); }; return {"code": 0, msg: "OK", data: ret, "count": json.flow.total} } ,cols: [[ {type: 'numbers', title:'{{ lang011[g_lang] || "序号" }}', width: 60} ,{field:'ip', title:'IP', templet: col_render} ,{field:'flow', title:'{{ lang012[g_lang] || "连接数" }}'} ,{field:'desc', title:'{{ lang007[g_lang] || "IP备注" }}'} ,{field:'act', title:'{{ lang013[g_lang] || "操作" }}', width: 100, templet: "#tpl_flow_topn_act"} ]], done: function(json){ right_copy_evt($(".layui-table-body .layui-table-cell"));         } });   /* 事件绑定 */ table.on('tool(tab_ip_flow)', function(obj){ event_center[obj.event](obj); });  $(".paui-flow-act").on("click", function(){ var event = $(this).attr("paui-event"); event_center[event](); });  form.on('select(select_flow_search)', table_search); form.on("submit(submit_ipsesc_search)", function(obj){ table_search(); return false; }); }); </script>