{{# var lang001 = {"ch": "协议状态", "en": "Protocol Status"}, lang002 = {"ch": "流量趋势", "en": "Traffic Trend"}, lang003 = {"ch": "下行趋势", "en": "Downlink Trend"}, lang004 = {"ch": "最近三天", "en": "Last 3 Days"}, lang005 = {"ch": "最近一月", "en": "Last Month"}, lang006 = {"ch": "数据加载中", "en": "Data Loading..."}, lang007 = {"ch": "上行趋势", "en": "Uplink Trend"}, lang008 = {"ch": "虚拟链路", "en": "Virtual Link"}, lang009 = {"ch": "合计", "en": "Total"}, lang010 = {"ch": "协议组名称", "en": "Protocol Group Name"}, lang011 = {"ch": "连接数", "en": "Sessions"}, lang012 = {"ch": "流入bps", "en": "Downlink Rate (bps)"}, lang013 = {"ch": "流出bps", "en": "Uplink Rate (bps)"}, lang014 = {"ch": "代理流入bps", "en": "Proxy Downlink Rate (bps)"}, lang015 = {"ch": "代理流出bps", "en": "Proxy Uplink Rate (bps)"}, lang016 = {"ch": "累计流量", "en": "Total Traffic (Bytes)"}, lang017 = {"ch": "最近10分钟流量", "en": "Traffic (Last 10 Mins)"};       var i_bridge = "";     var i_type = "v4";      if(d.bridge != 0 && d.bridge != 9)         i_bridge = d.bridge;      if(d.bridge == 9) i_type = "v6"; }}  <style> .paui-page-appgroup-stat .layui-progress-text{line-height: 26px;} .paui-page-appgroup-stat .layui-progress{top:14px;} </style>   <div class="layui-tab layui-tab-brief">     <ul class="layui-tab-title">         <li class="layui-this">{{ lang001[g_lang] || "协议状态" }}</li>         <li>{{ lang002[g_lang] || "流量趋势" }}</li>     </ul>     <div class="layui-tab-content">         <div class="layui-tab-item layui-show">             <div class="layui-row paui-bg-white paui-page-appgroup-stat" style="padding:10px 10px 0px 10px;">                 <table id="tab_app_group" lay-filter="tab_app_group"></table>             </div>         </div>         <div class="layui-tab-item" style="padding-bottom: 10px;">             <div class="layui-card">                 <div class="layui-card-header">                     <span>{{ lang003[g_lang] || "下行趋势" }}</span>                     <div class="paui-card-tool">                         <span class="abtn" vlink_stat_event="btnevt_chart" tag="bpsin" types="3day">{{ lang004[g_lang] || "最近三天" }}</span>                         &nbsp;                         <span class="abtn" vlink_stat_event="btnevt_chart" tag="bpsin" types="month">{{ lang005[g_lang] || "最近一月" }}</span>                     </div>                 </div>                 <div class="layui-card-body">                     <div class="paui-chart-div" id="paui-chart-inbps">                         <div class="layui-row layui-word-aux" style="text-align:center;line-height:80px">{{ lang006[g_lang] || "数据加载中" }}</div>                     </div>                 </div>             </div>                          <div class="layui-card" style="margin-top: 10px;">                 <div class="layui-card-header">                     <span>{{ lang007[g_lang] || "上行趋势" }}</span>                     <div class="paui-card-tool">                         <span class="abtn" vlink_stat_event="btnevt_chart" tag="bpsout" types="3day">{{ lang004[g_lang] || "最近三天" }}</span>                         &nbsp;                         <span class="abtn" vlink_stat_event="btnevt_chart" tag="bpsout" types="month">{{ lang005[g_lang] || "最近一月" }}</span>                     </div>                 </div>                 <div class="layui-card-body">                     <div class="paui-chart-div" id="paui-chart-outbps">                         <div class="layui-row layui-word-aux" style="text-align:center;line-height:80px">{{ lang006[g_lang] || "数据加载中" }}</div>                     </div>                 </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.$;     form = layui.form,     util = layui.util,     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 l_data = JSON.parse('{{- JSON.stringify(d) }}');       var event_center = {         btnevt_chart: function(){             popupWindow({                 'bridge': '{{d.id}}',                 'tag': $(this).attr("tag"),                 'types': $(this).attr("types"),                 'pop_title': '{{ lang008[g_lang] || "虚拟链路" }}->' + l_data.name + ' {{ lang007[g_lang] || "上行趋势" }}',                 'pop_route': 'proto/app_chart_history'             }, 940, 720);         },          tabevt_app: function(obj){             popupWindow({                 'app': obj.data.appid,                 'bridge': '{{d.id}}',                 'name': '{{d.name}}',                 'pop_title': '{{ lang008[g_lang] || "虚拟链路" }}->' + l_data.name + ' [' + obj.data.appname + ']',                 'pop_route': 'object/vlink_view_group'             }, 900, 700);         }     };   var render_area = function(box, json, title){ layui.each(json.data, function(index, elem){ var name = elem.name.split(".")[0]; elem.name = {{ g_lang != "ch" ? "name" : "json.name[name].name" }}; elem.color = g_app_color[name] || '#cccccc'; });  pachart_area(box, { 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;">{{ lang009[g_lang] || "合计" }}:'+numberformat(cnt)+'</span>'; return s1+s2+s3; } }, yAxis: {title: {text: title},}, series: json.data }); };       var col_render = function(r){         switch(this.field){             case "appname":                 if(r.appid == "total") return (g_lang == "ch" ? r.appname : r.appid);                 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 = {};         search.sort = l_sort.field;         pa_table.reload({             where: search,             initSort: l_sort         });     };       /* 协议状态 */     pa_table.render({         elem: "#tab_app_group" ,initSort: l_sort ,autoSort: false         ,height: 'full-70'         ,url: '/cgi-bin/proto/ajax_app'         ,where: {'action': 'load_appstat', 'app': 'group', 'showsum': 'on', 'bridge': '{{d.id}}'}         ,parseData: function(json){             json.data = json.data.data;             return json;         }         ,cols: [[             {field: 'appname', title: '{{ lang010[g_lang] || "协议组名称" }}', width: 110, templet: col_render}             ,{field: 'flow', title: '{{ lang011[g_lang] || "连接数" }}', sort: true}             ,{field: 'bpsdn', title: '{{ lang012[g_lang] || "流入bps" }}', sort: true}             ,{field: 'bpsup', title: '{{ lang013[g_lang] || "流出bps" }}', sort: true}             ,{field: 'natbpsdown', title: '{{ lang014[g_lang] || "代理流入bps" }}', sort: true}             ,{field: 'natbpsup', title: '{{ lang015[g_lang] || "代理流出bps" }}', sort: true}             ,{field: 'all', title: '{{ lang016[g_lang] || "累计流量" }}', sort: true, width: 200, templet: col_render}             ,{field: 'last', title: '{{ lang017[g_lang] || "最近10分钟流量" }}', sort: true, width: 200, templet: col_render}         ]]         ,done: function(json){             element.render();         }     });       /* 下行趋势图 */     pa_ajax({         url: "/cgi-bin/dashboard/ajax_group_stat",         data: {"action": "appgroup_bpsdw", "bridge": "{{d.id}}"},         success: function(json){             render_area("paui-chart-inbps", json.data, "bps");         }     });      /* 上行趋势图 */     pa_ajax({         url: "/cgi-bin/dashboard/ajax_group_stat",         data: {"action": "appgroup_bpsup", "bridge": "{{d.id}}"},         success: function(json){             render_area("paui-chart-outbps", json.data, "bps");         }     });       /* 事件绑定 */     util.event('vlink_stat_event', event_center);     table.on('tool(tab_app_group)', function(obj){         event_center[obj.event](obj);     });  table.on('sort(tab_app_group)', function(obj){ l_sort = obj.type == null ? {"field": "in", "type": "asc"} : obj;         if(l_sort.type == "desc") l_sort.type = "asc"; table_search(); });      setInterval(table_search, 10000); }); </script>