{{# var lang001 = {"ch": "自动刷新", "en": "Refresh"}, lang002 = {"ch": "不刷新", "en": "No Refresh"}, lang003 = {"ch": "5秒", "en": "5s"}, lang004 = {"ch": "10秒", "en": "10s"}, lang005 = {"ch": "20秒", "en": "20s"}, lang006 = {"ch": "60秒", "en": "60s"}, lang007 = {"ch": "端口", "en": "Port"}, lang009 = {"ch": "任意", "en": "Any"}, lang010 = {"ch": "传输协议", "en": "Transport Protocol"}, lang016 = {"ch": "秒", "en": "seconds"}, lang020 = {"ch": "源", "en": "Src"}, lang021 = {"ch": "目", "en": "Dst"}, lang022 = {"ch": "应用", "en": "Application"}, lang023 = {"ch": "协议", "en": "Protocol"}, lang033 = {"ch": "应用协议", "en": "Protocol"};  var util = layui.util,     ntmlog = layui.ntmlog; }}   <form class="layui-form layui-form-pane paui-table-form" lay-filter="form_visit_search"> <div class="layui-form-item paui-table-form-content"> {{# if(!d.hide_tab){ }} <div class="layui-form-item paui-table-form-right" style="float: right;"> <div class="layui-input-inline" style="width:100px; margin-right:0px;"> <div class="layui-btn-group report_session_type3 layui-btn-red"> <button type="button" isipv6="1" class="layui-btn layui-btn-sm layui-btn-primary"> IPv4 </button> <button type="button" isipv6="2" class="layui-btn layui-btn-sm layui-btn-primary"> IPv6 </button> </div> </div> </div> {{# } }}  <input type="hidden" name="type" class="layui-input" value="v4"> <input type="hidden" name="isipv6" class="layui-input" value="1">  <div class="paui-table-form-init"> <label class="layui-form-label">{{ lang001[g_lang] || "自动刷新" }}</label> <div class="layui-input-inline" style="width:120px"> <select name="refresh" lay-filter="select_visit_refresh" id="select_visit_refresh"> <option value="" selected>{{ lang002[g_lang] || "不刷新" }}</option> <option value=5>{{ lang003[g_lang] || "5秒" }}</option> <option value=10>{{ lang004[g_lang] || "10秒" }}</option> <option value=20>{{ lang005[g_lang] || "20秒" }}</option> <option value=60>{{ lang006[g_lang] || "60秒" }}</option> </select> </div>  <input type="hidden" name="action" value="get_ipobj_listflow">    {{# if(d.hide_tab){ }} <label class="layui-form-label">{{ lang010[g_lang] || "传输协议" }}</label> <div class="layui-input-inline" style="width:120px"> <select name="proto"> <option value="">{{ lang009[g_lang] || "任意" }}</option> <option value="icmp">ICMP</option> <option value="tcp">TCP</option> <option value="udp">UDP</option> </select> </div>  <label class="layui-form-label">{{ lang033[g_lang] || "应用协议" }}</label> <div class="layui-input-inline" style="width:120px"> <input type="hidden" id="ipt_appname" name="appname" class="layui-input"> <input type="text" name="appcname" id="ipt_appcname" class="layui-input" placeholder='{{ lang009[g_lang] || "任意" }}' readonly onclick="select_app()"> </div>  <label class="layui-form-label">显示条数</label> <div class="layui-input-inline" style="width: 120px"> <select name="topn" lay-filter="submit_visit_select"> <option value="10">10</option> <option value="20" selected>20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> </select> </div>  <label class="layui-form-label">源端口</label> <div class="layui-input-inline" style="width: 120px"> <select name="show_sport" lay-filter="submit_visit_select"> <option value="1">是</option> <option value="0" selected>否</option> </select> </div>  <input type="hidden" name="srcip" class="layui-input"> <input type="hidden" name="sport" class="layui-input"> <input type="hidden" name="dstip" class="layui-input"> <input type="hidden" name="dport" class="layui-input"> <input type="hidden" name="host" class="layui-input"> {{# }else{ }} <label class="layui-form-label">源IP</label> <div class="layui-input-inline" style="width:120px"> <input type="text" name="srcip" class="layui-input"> </div> <label class="layui-form-label">源端口</label> <div class="layui-input-inline" style="width:120px"> <input type="text" name="sport" class="layui-input"> </div> <label class="layui-form-label">目标IP</label> <div class="layui-input-inline" style="width:120px"> <input type="text" name="dstip" class="layui-input"> </div> <label class="layui-form-label">目标端口</label> <div class="layui-input-inline" style="width:120px"> <input type="text" name="dport" class="layui-input"> </div> {{# } }}  <div class="layui-form-mid" style="padding: 0px !important"> <button class="layui-btn layui-btn-sm layui-btn-normal"  id="submit_visit_search" lay-submit lay-filter="submit_visit_search" paui-form-toggle="btnevt_form_hide_evt"> <i class="layui-icon layui-icon-search"></i> </button> {{- ntmlog.reset_form() }} </div>  <div class="layui-form-mid" style="padding:5px 0px 0px 0px!important"> <span class="abtn" paui-form-toggle="btnevt_form_toggle_evt"> 更多条件&nbsp;<i class="layui-icon layui-icon-down"></i> </span> </div>    </div>  <div class="paui-table-form-hide"> <div class="paui-table-form-inline">  {{# if(!d.hide_tab){ }} <label class="layui-form-label">{{ lang010[g_lang] || "传输协议" }}</label> <div class="layui-input-inline" style="width:120px"> <select name="proto"> <option value="">{{ lang009[g_lang] || "任意" }}</option> <option value="icmp">ICMP</option> <option value="tcp">TCP</option> <option value="udp">UDP</option> </select> </div>  <label class="layui-form-label">{{ lang033[g_lang] || "应用协议" }}</label> <div class="layui-input-inline" style="width:120px"> <input type="text" name="appname" id="ipt_appname2"  class="layui-input" style="display: none;"> <input type="text" name="appcname" id="ipt_appcname2"class="layui-input" placeholder='{{ lang009[g_lang] || "任意" }}' readonly onclick="select_app()"> </div>  <label class="layui-form-label">显示条数</label> <div class="layui-input-inline" style="width: 120px"> <select name="topn" lay-filter="submit_visit_select"> <option value="10">10</option> <option value="20" selected>20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> </select> </div>  <label class="layui-form-label">源端口</label> <div class="layui-input-inline" style="width: 120px"> <select name="show_sport" lay-filter="submit_visit_select"> <option value="1">是</option> <option value="0" selected>否</option> </select> </div> {{# } }}  <label class="layui-form-label">目标端口</label> <div class="layui-input-inline" style="width: 120px"> <select name="show_dport" lay-filter="submit_visit_select"> <option value="1">是</option> <option value="0" selected>否</option> </select> </div> </div>  </div> </div> </form>  <div class="layui-row layui-col-space8"> {{# if(!d.hide_tab){ }} <div class="layui-col-xs8"> {{# } }}  {{# if(d.hide_tab){ }} <div class="layui-col-xs6" id="vi-left"> {{# } }} <div class="layui-row paui-table-card" style="position: relative;"> <div id="visit_chart" style="width: 100%; height: calc(100vh - 100px); margin-top: 6px;"></div>  <div id="emptydata" style="position: absolute; top: 50%; left: 50%; font-size: 12px; color: #666; transform: translate(-50%, -50%); display: none; z-index: 999;">无数据</div> </div>  {{# if(d.hide_tab){ }} </div> <div class="layui-col-xs6" id="vi-right"> <div class="layui-row paui-table-card" style="position: relative;"> <div id="visit_chart2" style="width: 100%; height: calc(100vh - 100px); margin-top: 6px;"></div>  <div id="emptydata1-2" style="position: absolute; top: 50%; left: 50%; font-size: 12px; color: #666; transform: translate(-50%, -50%); display: none; z-index: 999;">无数据</div> </div> </div> {{# } }}   {{# if(!d.hide_tab){ }} </div> <div class="layui-col-xs4" id="tab_today_vitis"> <div class="layui-row paui-table-card">     <table id="tab_ipobj_topn" lay-filter="tab_ipobj_topn"></table>     <div class="layui-table-page" id="page_user_topn_tab"></div> </div> </div> {{# } }} </div>   <script> layui.use(function(){ var $ = layui.$,     form = layui.form, table = layui.table, element = layui.element, layer = layui.layer, util = layui.util, laytpl = layui.laytpl;  var parent_data = JSON.parse('{{- JSON.stringify(d) }}'); var api = '/cgi-bin/dashboard/ajax_ipobj'; var pa_timer = new Paui_timer(); var pa_table = new Paui_table();   if(!parent_data.hide_tab){ $(".report_session_type3 button").click(function(){ $(this).addClass("layui-btn-normal"); $(this).removeClass("layui-btn-primary"); $(this).siblings().removeClass("layui-btn-normal"); $(this).siblings().addClass("layui-btn-primary"); paui_db.save("isipv6", $(this).attr("isipv6")); form.val("form_visit_search", {"isipv6": paui_db.get("isipv6")}); if(paui_db.get("isipv6") == "1"){ form.val("form_visit_search", {"type": 'v4'}); }else if(paui_db.get("isipv6") == "2"){ form.val("form_visit_search", {"type": 'v6'}); } $("#submit_visit_search").click(); });    if(typeof paui_db.get("isipv6") != undefined){ if(paui_db.get("isipv6") == "1"){ $(".report_session_type3 button").eq(0).addClass("layui-btn-normal"); $(".report_session_type3 button").eq(0).removeClass("layui-btn-primary"); $(".report_session_type3 button").eq(1).addClass("layui-btn-primary"); $(".report_session_type3 button").eq(1).removeClass("layui-btn-normal"); form.val("form_visit_search", {"isipv6": "1"}); form.val("form_visit_search", {"type": "v4"}); }else if(paui_db.get("isipv6") == "2"){ $(".report_session_type3 button").eq(0).addClass("layui-btn-primary"); $(".report_session_type3 button").eq(0).removeClass("layui-btn-normal"); $(".report_session_type3 button").eq(1).addClass("layui-btn-normal"); $(".report_session_type3 button").eq(1).removeClass("layui-btn-primary"); form.val("form_visit_search", {"isipv6": "2"}); form.val("form_visit_search", {"type": "v6"}); } } } if(parent_data.value){ if(parent_data.hide_tab && isStrictDomain(parent_data.value)){ form.val("form_visit_search", {"type": 'v4'}); form.val("form_visit_search", {"isipv6": '1'}); }else if((parent_data.value).indexOf(":") != -1){ form.val("form_visit_search", {"type": 'v6'}); form.val("form_visit_search", {"isipv6": '2'}); } }    var def_ip = ''; if(parent_data.visit){ $("#visit_chart").css("height", "calc(100vh - 150px)"); }    var uniqueObjArray = function(arr, key) { var map = new Map(); return arr.filter(obj => { var keyValue = key ? obj[key] : JSON.stringify(obj); return map.has(keyValue) ? false : map.set(keyValue, true); }); };  var mergeData = function (data) { var result = []; var map = new Map(); if(data.length != 0){ data.forEach(item => { var key = `${item.source}|${item.target}`; if(map.has(key)){ var existing = map.get(key); existing.value += item.value; }else{ var newItem = { appname: item.appname, source: item.source, target: item.target, value: item.value }; map.set(key, newItem); result.push(newItem); } }); } return result; };  var col_render = function(r){     switch(this.field){         case "ipaddr":             return '<span class="abtn" lay-event="tabevt_ip" paui-copy-tips="btnevt_copy_tips" paui-right-click="btnevt_right_click">'+ r.ipaddr + '</span>';          case "flowcnt":             return '<span paui-copy-tips="btnevt_copy_tips" paui-right-click="btnevt_right_click">'+ r.flowcnt + '</span>';          case "inbps":             return '<span paui-copy-tips="btnevt_copy_tips" paui-right-click="btnevt_right_click">'+ r.inbps + '</span>';          case "outbps":             return '<span paui-copy-tips="btnevt_copy_tips" paui-right-click="btnevt_right_click">'+ r.outbps + '</span>';     } };   var event_center = {     btnevt_selectapp: function(){         select_app({             ret_name: 'paui_ipview_session_appname22',             ret_cname: 'paui_ipview_session_appcname22'         });     },  tabevt_ip: function(obj){ def_ip = obj.data.ipaddr; show_chart(); } };  var option = { tooltip: { trigger: 'item', triggerOn: 'mousemove', }, title: [ { text: "源", left: '0', textStyle: { color: '#666', fontSize:12 } }, { right: '0', text: '目标',  textStyle: { color: '#666', fontSize:12 } } ], tooltip: {   formatter: function(re){   var _html = "";   if(re.dataType == "edge"){   _html = "<span style='padding-right: 5px;'>连接:</span>" + re.name + "</br><span style='padding-right: 5px;'>次数:</span>" + re.value;   }   return _html;   } }, series: { type: 'sankey', draggable: false, layout: 'none', left: '0', top: '3%', right: '0', bottom: '2%', layoutIterations: 0, lineStyle: { color: 'source', opacity: 0.6, curveness: 0.5, color: '#aab2c3' }, data: [], links: [], label: { normal:{ color:"#fff", fontSize:12, formatter: function(params, i) { if(params.data.label.val && (params.data.name).indexOf(".") != -1){ return params.data.name + "(" + params.data.label.val + ")"; }else{ return params.data.name; } }, rich:{ white:{ fontSize:12, padding:[10,0,0,0] } } } } } };  if($("body").hasClass("paui-app-theme-dark")){ /*option.title[0].textStyle.color = "#bbb"; option.title[1].textStyle.color = "#bbb"; option.title[2].textStyle.color = "#bbb"; option.series.lineStyle.opacity = 0.3;*/ }   var get_chart_data = function(delip,callback){ var search = form.getValue("form_visit_search"); if(parent_data.hide_tab){ delete search[delip]; } var loadIndex = layer.load(0); if(search.srcip == '' && search.dstip == ''){ search.srcip = def_ip; } if(search.appname == "any"){ search.appname = ""; search.appcname = ""; } pa_ajax({ url: api, data: search, success: function(json){ callback(json.data); layer.close(loadIndex); } }); };  var show_chart = function(){ var visit = echarts.init(document.getElementById('visit_chart')); visit.dispose(); var data = [];  get_chart_data("dstip", function(json){ if(json.length == 0){ $("#emptydata").show(); }else{ $("#emptydata").hide(); json = mergeData(json); for(var i = 0; i < json.length; i++){ data.push({ name: json[i].source, label: { position: 'right', color: "#333" } }); data.push({ name: json[i].target, label: { position: 'left', color: "#333", val: json[i].value, appname: json[i].appname } }); } data = uniqueObjArray(data, "name"); option.series.data = data; option.series.links = json; var visit = echarts.init(document.getElementById('visit_chart')); visit.setOption(option);  window.addEventListener('resize', function() { visit.resize(); }); visit.on('click', function(params) { if(params.dataType == "edge"){ var opt = {}; opt.appname = params.data.appname; opt.pop_title = '连接信息'; opt.pop_route = 'monitor/ipview_session';  if(params.data.source.indexOf(".") != -1 || params.data.source.indexOf(":") != -1){ opt.ip = params.data.source; opt.appcname = params.data.target; if(params.data.source.indexOf("/") != -1 && params.data.source.indexOf(":") != -1){ opt.ip = params.data.source.split("/")[0]; opt.port = params.data.source.split("/")[1]; opt.isipv6 = "2"; } if(params.data.source.indexOf(".") != -1 && params.data.source.indexOf(":") != -1){ opt.ip = params.data.source.split(":")[0]; opt.port = params.data.source.split(":")[1]; opt.isipv6 = "1"; } if(params.data.source.indexOf(".") != -1 && params.data.source.indexOf(":") == -1 && params.data.source.indexOf("/") == -1){ opt.ip = params.data.source; opt.isipv6 = "1"; } if(params.data.source.indexOf(".") == -1 && params.data.source.indexOf(":") != -1 && params.data.source.indexOf("/") == -1){ opt.ip = params.data.source; opt.isipv6 = "2"; } } if(params.data.target.indexOf(".") != -1 || params.data.target.indexOf(":") != -1){ opt.ip = params.data.target.split(":")[0]; opt.appcname = params.data.source; if(params.data.target.indexOf("/") != -1 && params.data.target.indexOf(":") != -1){ opt.ip = params.data.target.split("/")[0]; opt.port = params.data.target.split("/")[1]; opt.isipv6 = "2"; } if(params.data.target.indexOf(".") != -1 && params.data.target.indexOf(":") != -1){ opt.ip = params.data.target.split(":")[0]; opt.port = params.data.target.split(":")[1]; opt.isipv6 = "1"; } if(params.data.target.indexOf(".") != -1 && params.data.target.indexOf(":") == -1 && params.data.target.indexOf("/") == -1){ opt.ip = params.data.target; opt.isipv6 = "1"; } if(params.data.target.indexOf(".") == -1 && params.data.target.indexOf(":") != -1 && params.data.target.indexOf("/") == -1){ opt.ip = params.data.target; opt.isipv6 = "2"; } } popupWindow(opt, 1360, 700); }else if(params.dataType == "node" && !parent_data.hide_tab){ if(params.data.label.position == "right"){ if(paui_db.get("isipv6") == "1"){ if(params.data.name.indexOf(":") == -1){ form.val("form_visit_search", {"srcip": params.data.name}); }else{ form.val("form_visit_search", {"srcip": params.data.name.split(":")[0]}); form.val("form_visit_search", {"sport": params.data.name.split(":")[1]}); } } if(paui_db.get("isipv6") == "2"){ if(params.data.name.indexOf("/") == -1){ form.val("form_visit_search", {"srcip": params.data.name}); }else{ form.val("form_visit_search", {"srcip": params.data.name.split("/")[0]}); form.val("form_visit_search", {"sport": params.data.name.split("/")[1]}); } } }  if(params.data.label.position == "left" && params.data.name.indexOf(".") == -1 && params.data.name.indexOf(":") == -1){ form.val("form_visit_search", {"appcname": params.data.name}); form.val("form_visit_search", {"appname": params.data.label.appname}); }  if(params.data.label.position == "left" && (params.data.name.indexOf(".") != -1 || params.data.name.indexOf(":") != -1)){ if(paui_db.get("isipv6") == "1"){ if(params.data.name.indexOf(":") == -1){ form.val("form_visit_search", {"dstip": params.data.name}); }else{ form.val("form_visit_search", {"dstip": params.data.name.split(":")[0]}); form.val("form_visit_search", {"dport": params.data.name.split(":")[1]}); } } if(paui_db.get("isipv6") == "2"){ if(params.data.name.indexOf("/") == -1){ form.val("form_visit_search", {"dstip": params.data.name}); }else{ form.val("form_visit_search", {"dstip": params.data.name.split("/")[0]}); form.val("form_visit_search", {"dport": params.data.name.split("/")[1]}); } } } form.render(); $("#submit_visit_search").click();  } }); }  }); };  var show_chart2 = function(ip){ var visit2 = echarts.init(document.getElementById('visit_chart2')); visit2.dispose(); var data = [];  get_chart_data("srcip", function(json){ if(json.length == 0){ $("#emptydata1-2").show(); }else{ $("#emptydata1-2").hide();  json = mergeData(json); for(var i = 0; i < json.length; i++){ data.push({ name: json[i].source, label: { position: 'right', color: "#333" } }); data.push({ name: json[i].target, label: { position: 'left', color: "#333", val: json[i].value, appname: json[i].appname } }); } data = uniqueObjArray(data, "name"); option.series.data = data; option.series.links = json; var visit2 = echarts.init(document.getElementById('visit_chart2')); visit2.setOption(option);  window.addEventListener('resize', function() { visit2.resize(); }); visit2.on('click', function(params) { if(params.dataType == "edge"){ var opt = {}; opt.appname = params.data.appname; opt.pop_title = '连接信息'; opt.pop_route = 'monitor/ipview_session'; if(params.data.source.indexOf(".") != -1){ opt.ip = params.data.source; opt.appcname = params.data.target; if(params.data.source.indexOf(":") != -1){ opt.ip = params.data.source.split(":")[0]; opt.port = params.data.source.split(":")[1]; } } if(params.data.target.indexOf(".") != -1){ opt.ip = params.data.target.split(":")[0]; opt.appcname = params.data.source; if(params.data.target.indexOf(":") != -1){ opt.ip = params.data.target.split(":")[0]; opt.port = params.data.target.split(":")[1]; } } popupWindow(opt, 1360, 700); } }); } }); };  var initSort = { field: 'flowcnt', type: 'desc' };   var load_page = function(){  pa_table.render({ elem: '#tab_ipobj_topn', url: api, initSort, pageElem: 'page_user_topn_tab', height: 'full-{{d.pop_route ? 110 : 190}}', where: { "action": "load_ipobj_list", 'sort': 'flowcnt', 'order': 'desc', 'keyword': form.val("form_visit_search").srcip || form.val("form_visit_search").dstip, 'type': form.val("form_visit_search").type }, dbkey: 'tab_ipobj_topn', filterElem: '.paui-user-topn-table-filter', parseData: function(json){ json.count = json.data.total; json.data = json.data.data; if(json.data.length > 1){ json.data.pop(); } if(json.data.length > 0){ def_ip = json.data[0].ipaddr; } show_chart(); return json; }, cols: [[ {field: 'id', title: '序号', width: 20} ,{field: 'ipaddr', title: 'IP', minWidth: 110, templet: col_render} ,{field: 'flowcnt', title: '连接数', sort: true, templet: col_render} ,{field: 'inbps', title: '流入bps', sort: true, templet: col_render} ,{field: 'outbps', title: '流出bps', sort: true, templet: col_render} ]],  done: function(json){ } });  };  form.render();  /* 锟铰硷拷锟斤拷锟斤拷 */ util.event('ipview-session-event', event_center); table.on('tool(tab_ipobj_topn)', function(obj){ event_center[obj.event](obj); });  form.on('submit(submit_visit_search)', function(){ if(parent_data.hide_tab){ if(isStrictDomain(parent_data.value)){ show_chart2(); }else{ show_chart(); show_chart2(); } }else{ load_page(); }     return false; });  form.on('select(submit_visit_select)', function(){ $("#submit_visit_search").click();     return false; });  table.on('sort(tab_ipobj_topn)', function(obj){ pa_table.reload({     where: { "action": "load_ipobj_list", "sort": obj.field, "order": obj.type },     initSort: obj, done: function(json){ } }); });  var laod_two_data = function(){ show_chart(); show_chart2(); };  if(parent_data.hide_tab){ /*form.val("form_visit_search", {"dstip": parent_data.value});*/ if(isStrictDomain(parent_data.value)){ form.val("form_visit_search", {"host": parent_data.value}); pa_timer.render('select_visit_refresh', show_chart2, 0); $("#vi-left").hide(); $("#vi-right").css({"width": "100%"}); }else{ form.val("form_visit_search", {"srcip": parent_data.value}); form.val("form_visit_search", {"dstip": parent_data.value}); pa_timer.render('select_visit_refresh', laod_two_data, 0); $("#visit_chart").css({"height": "calc(100vh - 206px)"}); } $("#submit_visit_search").click(); $("#visit_chart2").css({"height": "calc(100vh - 206px)"}); }else{ pa_timer.render('select_visit_refresh', load_page, 0); load_page(); }   if(parent_data.type == 'ipview'){ $("#visit_chart").css({"height": "calc(100vh - 110px)"}); $("#visit_chart2").css({"height": "calc(100vh - 110px)"}); } }); </script>