{{#     /*         说明：协议组状态页面          参数：             @ form: []                 * app_tree, 来自协议树页面             @ field: 应用协议英文名称             @ title: 应用协议中文名称     */  var lang001 = {"ch": "协议概览", "en": "Protocol Overview"}, lang002 = {"ch": "趋势分析", "en": "Trend Analysis"}, lang003 = {"ch": "Top应用", "en": "Top Applications"}, lang004 = {"ch": "自动刷新", "en": "Refresh"}, lang005 = {"ch": "不刷新", "en": "No Refresh"}, lang006 = {"ch": "5秒", "en": "5s"}, lang007 = {"ch": "10秒", "en": "10s"}, lang008 = {"ch": "20秒", "en": "20s"}, lang009 = {"ch": "60秒", "en": "60s"}, lang010 = {"ch": "网桥链路", "en": "Bridge Link"}, lang011 = {"ch": "所有链路", "en": "All Links"}, lang012 = {"ch": "协议类型", "en": "APP Type"}, lang013 = {"ch": "应用协议", "en": "Protocol"}, lang014 = {"ch": "任意协议", "en": "Any Protocol"}, lang015 = {"ch": "关键字搜索", "en": "Search"}, lang016 = {"ch": "选中应用对比分析", "en": "Compare Selected Protocols"}, lang017 = {"ch": "最近三天", "en": "Last 3 Days"}, lang018 = {"ch": "最近一月", "en": "Last Month"}, lang019 = {"ch": "数据加载中", "en": "Data Loading..."}, lang020 = {"ch": "请选择需要操作的协议", "en": "Please select the protocol(s) to operate on first"}, lang021 = {"ch": "最多同时选择16个协议", "en": "Select up to 16 protocols simultaneously"}, lang022 = {"ch": "应用协议对比分析", "en": "Application Protocol Comparison Analysis"}, lang023 = {"ch": "上行流量", "en": "Uplink Traffic (bps)"}, lang024 = {"ch": "下行流量", "en": "Downlink Traffic (bps)"}, lang025 = {"ch": "连接数", "en": "Sessions"}, lang026 = {"ch": "协议名称", "en": "Protocol Name"}, lang027 = {"ch": "流入bps", "en": "Downlink Rate (bps)"}, lang028 = {"ch": "流出bps", "en": "Uplink Rate (bps)"}, lang029 = {"ch": "代理流入bps", "en": "Proxy Downlink Rate (bps)"}, lang030 = {"ch": "代理流出bps", "en": "Proxy Uplink Rate (bps)"}, lang031 = {"ch": "累计流量", "en": "Total Traffic (Bytes)"}, lang032 = {"ch": "最近10分钟流量", "en": "Traffic (Last 10 Mins)"}, lang033 = {"ch": "操作", "en": "Action"}, lang044 = {"ch": "配置", "en": "Configuration"}, lang045 = {"ch": "大屏分析", "en": "Dashboard Analysis"};      var card = [         {"cname": lang023[g_lang] || "上行流量", "name": "bpsout", 'title': 'bps', 'tag': 'bpsout'},         {"cname": lang024[g_lang] || "下行流量", "name": "bpsin", 'title': 'bps', 'tag': 'bpsin'},         {"cname": lang025[g_lang] || "连接数", "name": "flow", 'title': 'Session', 'tag': 'flow'}     ];      var height = d.form == "app_tree" ? 226 : 190;     if (d.height) height = d.height; }}  <style> .paui-page-app-stat .layui-progress-text{line-height: 26px;} .paui-page-app-stat .layui-progress{top:14px;} .paui-page-app-stat .paui-infosys-loadtips{text-align:center;line-height:80px} </style>  <div class="layui-tab layui-tab-brief paui-page-app-stat" lay-filter="menu_app_stat" style="width: 100%;"> <ul class="layui-tab-title paui-bg-white"> {{# if(d.form == "app_tree"){ }}         <li class="layui-this">{{ lang001[g_lang] || "协议概览" }}</li>         <li>{{ lang002[g_lang] || "趋势分析" }}</li> {{# } else { }}         <li class="layui-this">{{ lang003[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_appstat_search">                 <div class="layui-form-item paui-table-form-left">                     <label class="layui-form-label">{{ lang004[g_lang] || "自动刷新" }}</label>                     <div class="layui-input-inline" style="width:80px">                         <select name="refresh" lay-filter="select_appstat_refresh" id="select_appstat_refresh">                             <option value="" selected>{{ lang005[g_lang] || "不刷新" }}</option>                             <option value=5>{{ lang006[g_lang] || "5秒" }}</option>                             <option value=10>{{ lang007[g_lang] || "10秒" }}</option>                             <option value=20>{{ lang008[g_lang] || "20秒" }}</option>                             <option value=60>{{ lang009[g_lang] || "60秒" }}</option>                         </select>                     </div>                     <label class="layui-form-label">{{ lang010[g_lang] || "网桥链路" }}</label>                     <div class="layui-input-inline" style="width:100px">                         <select name="bridge" id="select_appstat_search" lay-filter="select_appstat_search">                             <option value="">{{ lang011[g_lang] || "所有链路" }}</option>                         </select>                     </div>                     <label class="layui-form-label">{{ lang012[g_lang] || "协议类型" }}</label>                     <div class="layui-input-inline" style="width:80px">                         <select name="type" lay-filter="select_appstat_search">                             <option value="v4">IPv4</option>                             <option value="v6">IPv6</option>                         </select>                     </div> <label class="layui-form-label">{{ lang013[g_lang] || "应用协议" }}</label> <div class="layui-input-inline" style="width: 110px">                         <input type="hidden" name="action" value="load_appstat"> <input type="hidden" name="app" id="ipt_appname" value='{{d.field || "any"}}' class="layui-input"> <input type="text" name="appcname" id="ipt_appcname" class="paui-flow-act layui-input" appstat-event="btnevt_select_app" value='{{d.field ? d.title :  (lang014[g_lang] || "任意协议") }}' readonly"> </div>                     <div class="layui-input-inline" style="width: 160px;">                         <input type="text" name="keyword" class="layui-input" autocomplete="off"                         placeholder='{{ lang015[g_lang] || "关键字搜索" }}' lay-affix="clear" lay-filter="clear_appstat_search">                     </div>                     <div class="layui-input-inline" style="width:60px">                         <span id="paui-appstat-resize" appstat-event="btnevt_resize"></span>                         <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="submit_appstat_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" style="width:110px; margin-right: 0px;">                         <span class="abtn" appstat-event="btnevt_cmp">{{ lang016[g_lang] || "选中应用对比分析" }}</span>                     </div>                 </div>             </form>             <div class="layui-row paui-table-card">                 <table id="tab_appstat" lay-filter="tab_appstat"></table>                 <div class="layui-table-page" id="page_appstat"></div>             </div>         </div>         <div class="layui-tab-item" style="margin-top:-10px; padding-bottom:10px;"> {{# layui.each(card, function(index, elem){ }}             <div class="layui-card" style="margin-top:10px;">                 <div class="layui-card-header">                     <span>{{ elem.cname }} -> <span class="paui-appstat-chart-title">{{ g_lang == "ch" ? d.title : d.field }}</span></span>                     <div class="paui-card-tool">                         <span class="abtn" appstat-event="btnevt_history" time="3day" name="{{ elem.cname }}" title="{{ elem.title }}" tag="{{ elem.tag }}">                             {{ lang017[g_lang] || "最近三天" }}                         </span>                         &nbsp;                         <span class="abtn" appstat-event="btnevt_history" time="month" name="{{ elem.cname }}" title="{{ elem.title }}" tag="{{ elem.tag }}">                             {{ lang018[g_lang] || "最近一月" }}                         </span>                     </div>                 </div>                 <div class="layui-card-body">                     <div class="paui-chart-div" id="paui-appstat-chart-{{ elem.name }}">                         <div class="layui-row layui-word-aux paui-infosys-loadtips">{{ lang019[g_lang] || "数据加载中" }}</div>                     </div>                 </div>             </div> {{# }); }}         </div> </div> </div>  <script id="tpl_app_td_percent" type="text/html">     <div class="layui-row">         <div class="layui-col-xs8">             <div class="layui-progress" lay-showPercent="true">                 <div class="layui-progress-bar paui-bg-blue" lay-percent='{% d.type == "all" ? d.per1 : d.per2 %}%'></div>             </div>         </div>         <div class="layui-col-xs4">&nbsp;{% d.type == "all" ?  d.all : d.lall %}</div>     </div> </script>  <script id="tpl_app_td_action" type="text/html">     <span class="abtn" lay-event="tabevt_app" title='{{　lang044[g_lang] || "配置" }}'>         <i class="layui-icon layui-icon-set"></i>     </span>     &nbsp; {{# if( g_sys_env.ntm == 1 ) { /* NTM版本，大屏选项 */ }}     <span class="abtn" lay-event="tabevt_screen" title='{{ lang045[g_lang] || "大屏分析" }}'>         <i class="layui-icon layui-icon-chart-screen"></i>     </span> {{# } }} </script>  <script> layui.use(function(){ var $ = layui.$,     util = layui.util,     form = layui.form, table = layui.table,     patpl = layui.patpl,     element = layui.element;      var pa_table = new Paui_table();     var pa_timer = new Paui_timer();      var l_sort = {"field": "last", "type": "desc"};     var api = '/cgi-bin/proto/ajax_app';       var event_center = { tabevt_screen: function(obj){ paui_goto_url('/html/App/ntm/screen/app_protocol/view.html', {                 appname: encodeURI(obj.data.appname),                 appid: obj.data.appid             }, 1); },          tabevt_app: function(obj){             popupApp(obj.data.appid, obj.data.appname, '{{ d.form == "app_tree" ? 0 : 2}}');         },          btnevt_resize: function(){             table.resize("tab_appstat");         },          btnevt_select_app: function(){             select_app({                 'showany': '{{d.form == "app_tree" ? "no" : ""}}'             });         },          btnevt_history: function(){             var search = form.getValue("form_appstat_search");             var tag = $(this).attr("tag");             var name = $(this).attr("name");             var time = $(this).attr("time");             var title = $(this).attr("title");  popChart({ "name":name, "tags": search.app + '.' + tag, "types": time, "title": title, "handle": "source", "pop_title": (time == '3day' ? '{{ lang017[g_lang] || "最近三天" }}->' : '{{ lang018[g_lang] || "最近一月" }}->') + ( g_lang == "ch" ? search.appcname : search.app) });         },          btnevt_cmp: function(){ var appname = "";             var appcname = ""; var chk = table.checkStatus('tab_appstat'); if(chk.data.length == 0){ layer.msg('{{ lang020[g_lang] || "请选择需要操作的协议" }}'); return; }; if(chk.data.length > 16){ layer.msg('{{ lang021[g_lang] || "最多同时选择16个协议" }}'); return; }; layui.each(chk.data, function(index, elem){ appname = appname + elem.appid + ";";                 appcname = appcname + elem.appname + ";"; });             popupWindow({                 "appname": appname,                 "appcname": appcname,                 "pop_title": '{{ lang022[g_lang] || "应用协议对比分析" }}',                 "pop_route":"proto/app_chart_cmp"             }, 1340, 720);         }     };       var chart_render = function(){         var search = form.getValue("form_appstat_search");         var chart_api = "/cgi-bin/dashboard/ajax_chart_dump";          /* 上行流量 */         pa_ajax({             url: chart_api,             data: {"action": "chart_dump", "tags": 'tag='+search.app+'.bpsout'},             success: function(json){                 json.data[0].name = '{{ lang023[g_lang] || "上行流量" }}';                  pachart_line("paui-appstat-chart-bpsout", {                     series: json.data,                     yAxis: {title:{ text:'bps' }},                     legend: { enabled: false },                     tooltip:{                         shared: true,                         formatter: function () {                             var s1 = '<span style="font:normal 9px sans-serif;">' + Highcharts.dateFormat("%m/%d %H:%M", this.x)+'</span>';                             var s2 = '';                             $.each(this.points, function () {                                 s2 += '<br><span style="font:normal 9px sans-serif; color:#666;">'+this.series.name+': '+                                 numberformat(this.y)+'</span>';                             });                             return s1+s2;                         }                     }                 });             }         });          /* 下行流量 */         pa_ajax({             url: chart_api,             data: {"action": "chart_dump", "tags": 'tag='+search.app+'.bpsin'},             success: function(json){                 json.data[0].name = '{{ lang024[g_lang] || "下行流量" }}';                  pachart_line("paui-appstat-chart-bpsin", {                     series: json.data,                     yAxis: {title:{ text:'bps' }},                     legend: { enabled: false },                     tooltip:{                         shared: true,                         formatter: function () {                             var s1 = '<span style="font:normal 9px sans-serif;">' + Highcharts.dateFormat("%m/%d %H:%M", this.x)+'</span>';                             var s2 = '';                             $.each(this.points, function () {                                 s2 += '<br><span style="font:normal 9px sans-serif; color:#666;">'+this.series.name+': '+                                 numberformat(this.y)+'</span>';                             });                             return s1+s2;                         }                     }                 });             }         });          /* 连接数 */         pa_ajax({             url: chart_api,             data: {"action": "chart_dump", "tags": 'tag='+search.app+'.flow'},             success: function(json){                 json.data[0].name = '{{ lang025[g_lang] || "连接数" }}';                  pachart_line("paui-appstat-chart-flow", {                     yAxis: {title:{ text:'Session#' }},                     legend: { enabled: false },                     series: json.data,                 });             }         });     };       var col_render = function(r){         switch(this.field){             case "appname":                 return '<span class="abtn" lay-event="tabevt_app">' + (g_lang == "ch" ? r.appname : r.appid) + '</span>';              case "all":                 r.type = "all";                 return patpl( $("#tpl_app_td_percent").html() ).render(r);              case "last":                 r.type = "last";                 return patpl( $("#tpl_app_td_percent").html() ).render(r);         }     };       var table_search = function(){         var search = form.getValue("form_appstat_search");         search.sort = l_sort.field;         pa_table.reload({             where: search,             initSort: l_sort         });     };       /* 页面渲染 */     form.render();     chart_render();      pa_ajax({         url: '/cgi-bin/object/ajax_select_object',         data: {'action': 'load_bridge'},         success: function(json){             layui.each(json.data, function(index, elem){                 var opt = '<option value="'+ elem.id +'">' + elem.name + '</option>';                 $("#select_appstat_search").append(opt);             });             form.render();         }     });  pa_table.render({ elem: '#tab_appstat', url: api, initSort: l_sort, autoSort: false,         page: {'layout':['prev', 'page', 'next']}, pageElem: 'page_appstat', height: 'full-{{ height }}', where: form.getValue("form_appstat_search"),         parseData: function(json){             json.count = json.data.total;             json.data = json.data.data;             return json;         }, cols: [[             {type: 'checkbox'} ,{field: 'appname', title: '{{ lang026[g_lang] || "协议名称" }}', width: 140, templet: col_render}             ,{field: 'flow', title: '{{ lang025[g_lang] || "连接数" }}', sort: true}             ,{field: 'bpsdn', title: '{{ lang027[g_lang] || "流入bps" }}', sort: true}             ,{field: 'bpsup', title: '{{ lang028[g_lang] || "流出bps" }}', sort: true}             ,{field: 'natbpsdown', title: '{{ lang029[g_lang] || "代理流入bps" }}', sort: true}             ,{field: 'natbpsup', title: '{{ lang030[g_lang] || "代理流出bps" }}', sort: true}             ,{field: 'all', title: '{{ lang031[g_lang] || "累计流量" }}', sort: true, width: 210, templet: col_render}             ,{field: 'last', title: '{{ lang032[g_lang] || "最近10分钟流量" }}', sort: true, width: 210, templet: col_render}             ,{field: 'action', title: '{{ lang033[g_lang] || "操作" }}', templet: '#tpl_app_td_action', width: 60} ]],         done: function(json){             element.render();         } });       /* 事件绑定 */     util.event("appstat-event", event_center); table.on('sort(tab_appstat)', function(obj){         l_sort = obj;         l_sort.type = "desc"; table_search(); });  table.on('tool(tab_appstat)', function(obj){ event_center[obj.event](obj); });      form.on('input-affix(clear_appstat_search)', table_search); form.on('select(select_appstat_search)', table_search);     form.on('submit(submit_appstat_search)', function(obj){         table_search();         chart_render();         $(".paui-appstat-chart-title").text(obj.field.appcname);         return false;     });      pa_timer.render('select_appstat_refresh', table_search, 0); }); </script>