{{# var lang001 = {"ch": "策略前QPS", "en": "QPS (Before Policy)"}, lang002 = {"ch": "策略后QPS", "en": "QPS (After Policy)"}, lang003 = {"ch": "最近三天", "en": "Last 3 Days"}, lang004 = {"ch": "最近一月", "en": "Last 30 Days"}, lang005 = {"ch": "时间", "en": "Time"}; }}  <div class="layui-row"> <div class="layui-card"> <div class="layui-card-header"> <span>{{ lang001[g_lang] || "策略前QPS" }}</span> <div class="paui-card-tool"> <span class="abtn" chart_event="day3_dnsreqs">{{ lang003[g_lang] || "最近三天" }}</span> &nbsp;&nbsp; <span class="abtn" chart_event="month_dnsreqs">{{ lang004[g_lang] || "最近一月" }}</span> </div> </div> <div class="layui-card-body"> <div class="paui-chart-div" id="month_dnsreqs"></div> </div> </div> <div class="layui-card" style="margin-top:8px"> <div class="layui-card-header"> <span>{{ lang002[g_lang] || "策略后QPS" }}</span> <div class="paui-card-tool"> <span class="abtn" chart_event="day3_dnsreqsx">{{ lang003[g_lang] || "最近三天" }}</span> &nbsp;&nbsp; <span class="abtn" chart_event="month_dnsreqsx">{{ lang004[g_lang] || "最近一月" }}</span> </div> </div> <div class="layui-card-body"> <div class="paui-chart-div" id="chart_dnsreqsx"></div> </div> </div> </div>  <script> layui.use('patpl', function(){ var $ = layui.$, util = layui.util;  var api = '/cgi-bin/dashboard/ajax_chart_dump';   var event_center = { /* 策略前QPS */ day3_dnsreqs: function(obj){ popChart({ "name": "DNS QPS", "tags": "dnsreq", "types": "3day", "title": "QPS", "handle": "source", "pop_title": '{{ lang003[g_lang] || "最近三天" }}->{{ lang001[g_lang] || "策略前QPS" }}', }); },  month_dnsreqs: function(obj){ popChart({ "name": "DNS QPS", "tags": "dnsreq", "types": "month", "title": "QPS", "handle": "source", "pop_title": '{{ lang004[g_lang] || "最近一月" }}->{{ lang001[g_lang] || "策略前QPS" }}', }); },  /* 策略后QPS */ day3_dnsreqsx: function(obj){ popChart({ "name": "DNS QPS", "tags": "dnsreqX", "types": "3day", "title": "QPS", "handle": "source", "pop_title": '{{ lang003[g_lang] || "最近三天" }}->{{ lang002[g_lang] || "策略后QPS" }}', }); },  month_dnsreqsx: function(obj){ popChart({ "name": "DNS QPS", "tags": "dnsreqX", "types": "month", "title": "QPS", "handle": "source", "pop_title": '{{ lang004[g_lang] || "最近一月" }}->{{ lang002[g_lang] || "策略后QPS" }}', }); }, };  /* 策略前QPS */ pa_ajax({ url: api, data: {"action": "chart_dump", "tags": "tag=dnsreq"}, success: function(json){ json.data[0].name = '{{ lang001[g_lang] || "策略前QPS" }}';  pachart_line("month_dnsreqs", { yAxis: {title:{ text:'QPS' }}, legend: { enabled: false }, tooltip: { formatter:function(){ var dd = new Date(this.x); var str = '{{ lang005[g_lang] || "时间" }}：' + dd.getDate()+'/'+dd.getHours()+':'+dd.getMinutes(); return str+'<br>DNS QPS:' +' '+ numberformat(this.y); } }, series: [json.data[0]] }); } });  /* 策略后QPS */ pa_ajax({ url: api, data: {"action": "chart_dump", "tags": "tag=dnsreX"}, success: function(json){ json.data[0].name = '{{ lang002[g_lang] || "策略后QPS" }}'; pachart_line("chart_dnsreqsx", { yAxis: {title:{ text:'QPS' }}, legend: { enabled: false }, tooltip: { formatter:function(){ var dd = new Date(this.x); var str = '{{ lang005[g_lang] || "时间" }}：' + dd.getDate()+'/'+dd.getHours()+':'+dd.getMinutes(); return str+'<br>DNS QPS:' +' '+ numberformat(this.y); } }, series: [json.data[0]] }); } });  /* 批量绑定事件 */ util.event('chart_event', event_center); }); </script>