{{# var lang001 = {"ch": "流入速率", "en": "In(bps)"}, lang002 = {"ch": "流出速率", "en": "Out(bps)"}, lang003 = {"ch": "连接数", "en": "Sessions"}, lang004 = {"ch": "最近三天", "en": "Last 3 Days"}, lang005 = {"ch": "最近一月", "en": "Last Month"}, lang006 = {"ch": "时间", "en": "Time"}, lang007 = {"ch": "合计", "en": "Total"}, lang008 = {"ch": "最近24小时", "en": "Last 24 Hours"}, lang009 = {"ch": "24小时前", "en": "24 Hours Ago"}, lang010 = {"ch": "48小时前", "en": "48 Hours Ago"}, lang011 = {"ch": "最近1周", "en": "Last Week"}, lang012 = {"ch": "最近1月", "en": "Last Month"}, lang013 = {"ch": "线路对比", "en": "Interface Comparison"};      if(d.time)         d.name = d.name.split(","); }}  <div class="layui-row" style="margin: 10px;"> <div class="layui-card"> <div class="layui-card-header"> {{# if(d.time) { }}             <span>{{ d.name[0] }}</span> {{# } else { }}             <span>{{ lang001[g_lang] || "流入速率" }}</span> <div class="paui-card-tool"> <span class="abtn" chart-event="histor_chart" time="3day" chart-tag="inbps" name='{{ lang001[g_lang] || "流入速率" }}' titles='bps'> {{ lang004[g_lang] || "最近三天" }} </span> &nbsp;&nbsp; <span class="abtn" chart-event="histor_chart" time="month" chart-tag="inbps" name='{{ lang001[g_lang] || "流入速率" }}' titles='bps'> {{ lang005[g_lang] || "最近一月" }} </span> &nbsp;&nbsp; </div> {{# } }} </div> <div class="layui-card-body"> <div class="paui-chart-div" id="chart_0"></div> </div> </div>  <div class="layui-card" style="margin-top:10px"> <div class="layui-card-header"> {{# if(d.time) { }}         <span>{{ d.name[1] }}</span>    {{# } else { }}         <span>{{ lang002[g_lang] || "流出速率" }}</span> <div class="paui-card-tool"> <span class="abtn" chart-event="histor_chart" time="3day" chart-tag="outbps" name='{{ lang002[g_lang] || "流出速率" }}' titles='bps'> {{ lang004[g_lang] || "最近三天" }} </span> &nbsp;&nbsp; <span class="abtn" chart-event="histor_chart" time="month" chart-tag="outbps" name='{{ lang002[g_lang] || "流出速率" }}' titles='bps'> {{ lang005[g_lang] || "最近一月" }} </span> &nbsp;&nbsp; </div>             {{# } }} </div> <div class="layui-card-body"> <div class="paui-chart-div" id="chart_1"></div> </div> </div>      <div class="layui-card" style="margin-top:10px; margin-bottom:10px;">         <div class="layui-card-header"> {{# if(d.time) { }}             <span>{{ d.name[2] }}</span> {{# } else { }}             <span>{{ lang003[g_lang] || "连接数" }}</span>             <div class="paui-card-tool">                 <span class="abtn" chart-event="histor_chart" time="3day" chart-tag="flow" name='{{ lang003[g_lang] || "连接数" }}' titles='Session'>                     {{ lang004[g_lang] || "最近三天" }}                 </span>                 &nbsp;&nbsp;                 <span class="abtn" chart-event="histor_chart" time="month" chart-tag="flow" name='{{ lang003[g_lang] || "连接数" }}' titles='Session'>                     {{ lang005[g_lang] || "最近一月" }}                 </span>                 &nbsp;&nbsp;             </div> {{# } }}         </div>         <div class="layui-card-body">             <div class="paui-chart-div" id="chart_2"></div>         </div>     </div>  </div>   {{# if(d.time) { }}     <script>     layui.use(function(){         var $ = layui.$,         util = layui.util;              var api = "/cgi-bin/dashboard/ajax_chart_dump";         var names = '{{d.names}}'.split(',');          pa_ajax({             url: api,             data: {'action': 'history_chart_dump', 'tags': '{{d.tags}}'},             success: function(json){                 layui.each(json.data, function(index, elem){                     layui.each(elem, function(i, e){                         e.name = names[i];                     });                     pachart_area("chart_" + index, {                         yAxis: {title:{ text:'{{ d.title }}' }},                         series: elem,                         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;">{{ lang007[g_lang] || "合计" }}:'+numberformat(cnt)+'</span>';                                 return s1+s2+s3;                             }                         },                     });                 });             }         });     });     </script> {{# } else { }}     <script>     layui.use(function(){         var $ = layui.$,         util = layui.util;          var api = "/cgi-bin/dashboard/ajax_chart_dump";          var items = '{{d.items}}'.split(',');         var names = '{{d.names}}'.split(',');          var cur_inbps_tag  = "";         var cur_outbps_tag = "";         var cur_flow_tag   = "";         var his_inbps_tag  = "";         var his_outbps_tag = "";         var his_flow_tag   = "";          layui.each(items, function(index, elem){             if(elem == "") return;             cur_inbps_tag   += ' tag=pxyinbps_' + elem;             cur_outbps_tag  += ' tag=pxyoutbps_' + elem;             cur_flow_tag    += ' tag=pxyflow_' + elem;             his_inbps_tag   += 'pxyinbps_' + elem + '|';             his_outbps_tag  += 'pxyoutbps_' + elem + '|';             his_flow_tag    += 'pxyflow_' + elem + '|';         });          $(".abtn").eq(0).attr('tags', his_inbps_tag);         $(".abtn").eq(1).attr('tags', his_inbps_tag);         $(".abtn").eq(2).attr('tags', his_outbps_tag);         $(".abtn").eq(3).attr('tags', his_outbps_tag);         $(".abtn").eq(4).attr('tags', his_flow_tag);         $(".abtn").eq(5).attr('tags', his_flow_tag);          /* 下行流量 */         pa_ajax({             url: api,             data: {'action': 'chart_dump', 'tags': cur_inbps_tag},             success: function(json){                 layui.each(json.data, function(index, elem){                     elem.name = names[index];                 });                 pachart_area("chart_0", {                     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;">{{ lang007[g_lang] || "合计" }}:'+numberformat(cnt)+'</span>';                             return s1+s2+s3;                         }                     },                 });             }         });           /* 上行流量 */         pa_ajax({             url: api,             data: {'action': 'chart_dump', 'tags': cur_outbps_tag},             success: function(json){                 layui.each(json.data, function(index, elem){                     elem.name = names[index];                 });                 pachart_area("chart_1", {                     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;">{{ lang007[g_lang] || "合计" }}:'+numberformat(cnt)+'</span>';                             return s1+s2+s3;                         }                     },                 });             }         });           /* 连接数 */         pa_ajax({             url: api,             data: {'action': 'chart_dump', 'tags': cur_flow_tag},             success: function(json){                 layui.each(json.data, function(index, elem){                     elem.name = names[index];                 });                 pachart_area("chart_2", {                     yAxis: {title:{ text:'Session' }},                     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;">{{ lang007[g_lang] || "合计" }}:'+numberformat(cnt)+'</span>';                             return s1+s2+s3;                         }                     },                 });             }         });           /* 事件绑定 */         util.event('chart-event', {             histor_chart: function(){                 var name = $(this).attr("name");                 var time = $(this).attr("time");                 var title = $(this).attr("titles");                 var tags = $(this).attr("tags");                 var type = $(this).text();                  if(time == "3day"){                     var names = [                         name + '->{{ lang008[g_lang] || "最近24小时" }}',                         name + '->{{ lang009[g_lang] || "24小时前" }}',                         name + '->{{ lang010[g_lang] || "48小时前" }}',                     ].join(',');                 } else {                     var names = [                         name + '->{{ lang008[g_lang] || "最近24小时" }}',                         name + '->{{ lang011[g_lang] || "最近1周" }}',                         name + '->{{ lang012[g_lang] || "最近1月" }}',                     ].join(',');                 };                  popupWindow({                     time: time,                     name: names,                     tags: tags,                     title: title,                     names: '{{d.names}}',                     pop_title: '{{ lang013[g_lang] || "线路对比" }}',                     pop_route: 'network/proxy_cmp'                 }, 670, 650);             }         });     });     </script> {{# } }}