{{# 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": "Search"}, lang008 = {"ch": "选中应用对比分析", "en": "Compare Selected Protocols"}, lang009 = {"ch": "流量趋势", "en": "Traffic Trend"}, lang010 = {"ch": "最近三天", "en": "Last 3 Days"}, lang011 = {"ch": "最近一月", "en": "Last Month"}, lang012 = {"ch": "数据加载中", "en": "Data Loading..."}, lang013 = {"ch": "请选择需要操作的协议", "en": "Please select the protocol(s) to operate on first"}, lang014 = {"ch": "最多同时选择16个协议", "en": "Select up to 16 protocols simultaneously"}, lang015 = {"ch": "应用协议对比分析", "en": "Protocol Comparison Analysis"}, lang016 = {"ch": "上行流量", "en": "Uplink Traffic"}, lang017 = {"ch": "下行流量", "en": "Downlink Traffic"}, lang018 = {"ch": "协议名称", "en": "Protocol Name"}, lang019 = {"ch": "连接数", "en": "Sessions"}, lang020 = {"ch": "流入bps", "en": "Downlink Rate (bps)"}, lang021 = {"ch": "流出bps", "en": "Uplink Rate (bps)"}, lang022 = {"ch": "累计流量", "en": "Total Traffic (Bytes)"}, lang023 = {"ch": "最近10分钟流量", "en": "Traffic (Last 10 Mins)"}, lang024 = {"ch": "合计", "en": "Total"}; }}  <style> .paui-page-appgroup-stat .layui-progress-text{line-height: 26px;} .paui-page-appgroup-stat .layui-progress{top:14px;} </style>  <div style="margin:10px">     <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">{{ lang001[g_lang] || "自动刷新" }}</label>             <div class="layui-input-inline" style="width:80px">                 <select name="refresh" lay-filter="select_ipobj_refresh" id="select_appstat_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>             <div class="layui-input-inline" style="width: 160px;">                 <input type="hidden" name="bridge" value="{{d.bridge}}">                 <input type="hidden" name="action" value="load_appstat">                 <input type="hidden" name="app" value='{{d.app}}'>                 <input type="text" name="keyword" class="layui-input" autocomplete="off" placeholder='{{ lang007[g_lang] || "关键字搜索" }}'>             </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-primary 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">{{ lang008[g_lang] || "选中应用对比分析" }}</span>             </div>         </div>     </form>      <div class="layui-row paui-bg-white paui-page-appgroup-stat" style="padding:10px 10px 0px 10px;">         <table id="tab_appstat" lay-filter="tab_appstat"></table>         <div class="layui-table-page" id="page_appstat"></div>     </div>      <div class="layui-card" style="margin-top: 10px;">         <div class="layui-card-header">             <span>{{ lang009[g_lang] || "流量趋势" }}</span>             <div class="paui-card-tool">                 <span class="abtn" appstat-event="btnevt_chart" types="3day">{{ lang010[g_lang] || "最近三天" }}</span>                 &nbsp;                 <span class="abtn" appstat-event="btnevt_chart" types="month">{{ lang011[g_lang] || "最近一月" }}</span>             </div>         </div>         <div class="layui-card-body">             <div class="paui-chart-div" id="paui-appstat-chart">                 <div class="layui-row layui-word-aux" style="text-align:center;line-height:80px">{{ lang012[g_lang] || "数据加载中" }}</div>             </div>         </div>     </div> </div>  <script id="tpl_app_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.last %}</div>     </div> </script>  <script> layui.use(function(){     var $ = layui.$,     util = layui.util,     form = layui.form,     patpl = layui.patpl,     table = layui.table,     element = layui.element;      var pa_table = new Paui_table();     var pa_timer = new Paui_timer();      var l_sort = {"field": "last", "type": "asc"};       var event_center = {         btnevt_cmp: function(){ var appname = "";             var appcname = ""; var chk = table.checkStatus('tab_appstat'); if(chk.data.length == 0){ layer.msg('{{ lang013[g_lang] || "请选择需要操作的协议" }}'); return; }; if(chk.data.length > 16){ layer.msg('{{ lang014[g_lang] || "最多同时选择16个协议" }}'); return; }; layui.each(chk.data, function(index, elem){ appname = appname + elem.appid + ";";                 appcname = appcname + elem.appname + ";"; });             popupWindow({                 "bridge": '{{d.bridge}}',                 "appname": appname,                 "appcname": appcname,                 "pop_title": '{{ lang015[g_lang] || "应用协议对比分析" }}',                 "pop_route":"proto/app_chart_cmp"             }, 1340, 720);         },          btnevt_chart: function(){             var time = $(this).attr("time");  popChart({ "name":'{{ lang016[g_lang] || "上行流量" }}|{{ lang017[g_lang] || "下行流量" }}', "tags": '{{d.app}}.bpsout|{{d.app}}.bpsin', "types": time, "title": 'bps',                 "legend": true,                 "bridge": '{{d.bridge}}', "pop_title": (time == '3day' ? '{{ lang010[g_lang] || "最近三天" }}->' : '{{ lang011[g_lang] || "最近一月" }}->') });         }     };       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_percent").html() ).render(r);              case "last":                 r.type = "last";                 return patpl( $("#tpl_app_percent").html() ).render(r);         }     };       var table_search = function(){         var search = form.getValue("form_appstat_search");         search.sort = l_sort.field;         layer.load();         pa_table.reload({             where: search,             initSort: l_sort         });     };       /* 页面渲染 */     form.render();  pa_table.render({ elem: '#tab_appstat', url: '/cgi-bin/proto/ajax_app', initSort: l_sort, autoSort: false,         page: {'layout':['prev', 'page', 'next']}, pageElem: 'page_appstat', height: 'full-435', 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: '{{ lang018[g_lang] || "协议名称" }}', width: 140, templet: col_render}             ,{field: 'flow', title: '{{ lang019[g_lang] || "连接数" }}', sort: true}             ,{field: 'bpsdn', title: '{{ lang020[g_lang] || "流入bps" }}', sort: true}             ,{field: 'bpsup', title: '{{ lang021[g_lang] || "流出bps" }}', sort: true}             ,{field: 'all', title: '{{ lang022[g_lang] || "累计流量" }}', sort: true, width: 210, templet: col_render}             ,{field: 'last', title: '{{ lang023[g_lang] || "最近10分钟流量" }}', sort: true, width: 210, templet: col_render} ]],         done: function(json){             layer.closeAll("loading");             $(".paui-page-app-stat .layui-laypage-count").remove();             $(".paui-page-app-stat .layui-laypage-limits").remove();             element.render();         } });       /* 趋势图 */     pa_ajax({         url: '/cgi-bin/dashboard/ajax_chart_dump',         data: {"action": "chart_dump", "tags": " tag={{d.app}}.bpsout tag={{d.app}}.bpsin"},         success: function(json){             json.data[0].name = '{{ lang016[g_lang] || "上行流量" }}';             json.data[1].name = '{{ lang017[g_lang] || "下行流量" }}';              pachart_line("paui-appstat-chart", {                 yAxis: {title:{ text:'bps' }},                 series: json.data,                 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 = '', s3 = '';                         var cnt = 0;                         $.each(this.points, function () {                             cnt += this.y;                             s2 += '<br><span style="color: '+this.color+'">\u25CF</span>';                             s2 += '<span style="font:normal 9px sans-serif; color:#666;">'+this.series.name+': '+                             numberformat(this.y)+'</span>';                         });                         s3 = '<br><span style="font-size:9px;">{{ lang024[g_lang] || "合计" }}:'+numberformat(cnt)+'</span>';                         return s1+s2+s3;                     }                 }             });         }     });       /* 事件绑定 */     util.event('appstat-event', event_center); table.on('sort(tab_appstat)', function(obj){ l_sort = obj.type == null ? {"field": "in", "type": "asc"} : obj;         if(l_sort.type == "desc") l_sort.type = "asc"; table_search(); });  table.on('tool(tab_appstat)', function(obj){         popupApp(obj.data.appid, obj.data.appname, 2); });      form.on('submit(submit_appstat_search)', function(obj){         table_search();         return false;     });      pa_timer.render('select_appstat_refresh', table_search, 0);  }); </script>