{{# var lang001 = {"ch": "核心列表", "en": "Core List"}, lang002 = {"ch": "网卡队列", "en": "NIC Queues"}, lang003 = {"ch": "网卡", "en": "NIC"}, lang004 = {"ch": "处理单元1", "en": "Processing Unit 1"}, lang005 = {"ch": "处理单元2", "en": "Processing Unit 2"}, lang006 = {"ch": "与单元1一致会忽略配置", "en": "If consistent with Unit 1, the configuration will be ignored"}, lang007 = {"ch": "核心", "en": "Core"}, lang008 = {"ch": "未配置", "en": "Not Configured"}, lang009 = {"ch": "核心", "en": "Core"}, lang010 = {"ch": "合计", "en": "Total"}, lang011 = {"ch": "等待包", "en": "Waiting Packets"}, lang012 = {"ch": "突发值", "en": "Burst Value"}, lang013 = {"ch": "网卡队列", "en": "NIC Queues"}, lang014 = {"ch": "格式：网卡 - 队列 PPS，可以拖动调整网卡队列的处理单元1", "en": "Format: NIC - Queue PPS. You can drag to adjust Processing Unit 1 for the NIC queue"}; }}  <style> .paui-ifsch-header{     font-weight:bold;     color:#666666 } .paui-if-core-box{     margin-top: 0px; }  .paui-interface-info-title{width:35px}  #paui-card-body-core .layui-table-cell{     height: auto!important;     line-height: unset!important; } #paui-card-body-core .paui-label {     color: #2E8AE3;     border: 1px solid #b0c9ff;     background-color: #fff;     border-radius: 4px;     font-size: 12px;     transform: scale(.9);     cursor: move;     max-width: 120px; } #paui-card-body-core .paui-label-left {     width: 40%;     padding: 0px 2px;     display: inline-block;     background-color: #F5F9FD;     border-right: 1px dotted #b0c9ff; } #paui-card-body-core .paui-label-right {     background-color: #ffffff;     display: inline-block;     padding: 0px 2px;     width: 59%; } #paui-if-queue-tbody td{     padding:2px 10px;     min-height: 18px;     line-height: 18px; } </style>  <div class="layui-row layui-col-space8">     <div class="layui-col-xs8">         <div class="layui-card">             <div class="layui-card-header">{{ lang001[g_lang] || "核心列表" }}</div>             <div class="layui-card-body" id="paui-card-body-core">                 <table id="tab_core_list" lay-filter="tab_core_list"></table>             </div>         </div>     </div>     <div class="layui-col-xs4">         <div class="layui-card">             <div class="layui-card-header">{{ lang002[g_lang] || "网卡队列" }}</div>             <div class="layui-card-body" id="paui-card-body-queue" style="padding-top: 4px;">                 <form class="layui-row layui-form" lay-filter="form_set_int_queue">                     <table class="layui-table" style="width:100%; border:0px;" lay-skin="line" lay-size="sm">                         <thead class="layui-table-header">                             <tr>                                 <td class="paui-ifsch-header" style="width:20%">{{ lang003[g_lang] || "网卡" }}</td>                                 <td class="paui-ifsch-header" style="width:28%">{{ lang004[g_lang] || "处理单元1" }}</td>                                 <td class="paui-ifsch-header" style="width:28%">                                     {{ lang005[g_lang] || "处理单元2" }}                                     <i class="layui-icon layui-icon-tips" style="font-weight: normal;"                                     paui-hover-evt="paui_tips" tips='{{ lang006[g_lang] || "与单元1一致会忽略配置" }}'></i>                                 </td>                                 <td class="paui-ifsch-header" style="width:24%">PPS</td>                             </tr>                         </thead>                         <tbody id="paui-if-queue-tbody"></tbody>                     </table>                 </form>             </div>         </div>     </div> </div>  <script id="tpl_if_queue" type="text/html"> <table class="layui-table" style="width:100%; border:0px;" lay-skin="line" lay-size="sm"> {%#         var num = 0;         layui.each(d.queue, function(index, elem){             num++;             var name = elem.name;             var queue = elem.queue;             var flow1 = elem.setflow.split("/")[0];             var flow2 = elem.setflow.split("/")[1];             flow1 = flow1 != 0 ? flow1 : elem.autoflow1;             flow2 = flow2 != 0 ? flow2 : elem.autoflow2;     %} <tr> <td style="width:20%">{% elem.name %}-{% elem.queue %}</td> <td style="width:30%"> <div style="width:80px"> <select name="core1_{% index %}" lay-filter="select_set_int_queue"> {%#                             layui.each(d.core, function(_, e){     var sel_tag = flow1 == e.flow ? "selected" : "";                         %} <option value="{% e.flow %}" {% sel_tag %}>{{ lang007[g_lang] || "核心" }}{% e.flow %}</option>                         {%# }); %} </select> </div> </td> <td style="width:30%"> <div style="width:80px"> <select name="core2_{%index%}" lay-filter="select_set_int_queue">                         <option value="">{{ lang008[g_lang] || "未配置" }}</option> {%#                             layui.each(d.core, function(_, e){     var sel_tag = flow2 == e.flow ? "selected" : "";                         %} <option value="{% e.flow %}" {% sel_tag %}>{{ lang009[g_lang] || "核心" }}{% e.flow %}</option>                         {%# }); %} </select> <input type="hidden" name="queue_{% index %}" value="{% queue %}_{% name %}"> </div> </td> <td style="width:20%"> <span id="paui-ifpps-{% name %}-{% queue %}">{% elem.pps %}</span> </td> </tr> {%# }); %} </table>     <input type="hidden" name="number" value="{% num %}"> </script>  <script id="tpl_if_core" type="text/html">     <div class="layui-row layui-col-space4 paui-if-core-box paui-core-drag-box-{% d.flow %}" core="{% d.flow %}">         {%#             layui.each(d.queue, function(index, elem){                 var flow = elem.setflow.split("/")[0];                 if(flow == 0) flow = elem.autoflow1;                 if(flow != d.flow) return;         %}             <div class="layui-col-xs3 paui-label paui-if-queue-box" queue="{% elem.queue %}_{% elem.name %}">                 <div class="paui-label-left">{% elem.name %}-{% elem.queue %}</div>                 <div class="paui-label-right if_queue_{% elem.name %}">{% elem.pps %}</div>             </div>         {%# }); %}     </div> </script>  <script> layui.use(function(){ var $ = layui.$, util = layui.util, form = layui.form, table = layui.table,     patpl = layui.patpl, element = layui.element;      var api = '/cgi-bin/network/ajax_interface';     var pa_table = new Paui_table();      var l_init = 0;     var l_timer = "";     var l_queue = [];       var init_page = function(){         var height1 = $("#paui-card-body-core").height();         var height2 = $("#paui-card-body-queue").height();         if(height1 > height2)             $("#paui-card-body-queue").height(height1+6);         else             $("#paui-card-body-core").height(height2 - 6);     };       var show_queue = function(data){ if(l_init++ == 0) { patpl($("#tpl_if_queue").html()).render(data, function(html){ $("#paui-if-queue-tbody").html(html); form.render(); }); } else { layui.each(data.queue, function(index, elem){ $("#paui-ifpps-" + elem.name.replace('.', '-')).text(elem.pps); }); }     };       var set_queue = function(obj){         var data = [];         var obj = $(".paui-if-core-box");          layui.each(obj, function(index, elem){             var core = $(elem).attr("core");             var subElem = $(elem).find(".paui-if-queue-box");             layui.each(subElem, function(i, e){                 var queue = $(e).attr("queue");                 data.push(core + "__" + queue);             });         });          pa_ajax({             url: api,             data: {"action": "set_if_queue", "data": data.join(";")},             success: function(json){                 l_init = 0;                 pa_table.reload();                 json.code != 0 ? alert_err(json.msg) : alert_ok(json.msg);             }         });     };       var col_render = function(r){         switch(this.field){             case "flow":                 return r.flow == "0" ? '{{ lang010[g_lang] || "合计" }}' : r.flow;              case "queue":                 r.queue = l_queue;                 return r.flow == "0" ? '<div class="layui-word-aux">-</div>' : patpl($("#tpl_if_core").html()).render(r);         }     };       pa_table.render({         elem: '#tab_core_list'         ,url: api         ,where: {'action': 'load_ifsch_env'}         ,parseData: function(json){             show_queue(json.data);             l_queue = json.data.queue;             json.data = json.data.core;             var wait = 0, burst = 0, pps = 0;             layui.each(json.data, function(index, elem){                 wait += Number(elem.wait);                 burst += Number(elem.burst);                 pps += Number(elem.pps);             });             json.data.push({flow: '0', wait: wait, burst: burst, pps: pps});             return json;         }         ,cols: [[             {field: 'flow', title: '{{ lang010[g_lang] || "核心" }}', templet: col_render}             ,{field: 'wait', title: '{{ lang011[g_lang] || "等待包" }}'}             ,{field: 'burst', title: '{{ lang012[g_lang] || "突发值" }}'}             ,{field: 'pps', title: 'PPS'}             ,{                 field: 'queue',                  title: paui_tabcol_tips('{{ lang013[g_lang] || "网卡队列" }}', '{{ lang014[g_lang] || "格式：网卡 - 队列 PPS，可以拖动调整网卡队列的处理单元1" }}'),                 minWidth: 580,                 templet: col_render             }         ]]         ,done: function(json){             layui.each(json.data, function(index, elem){                 if(elem.flow == "0") return;                 new Sortable($(".paui-core-drag-box-" + elem.flow)[0], {                     sort: true,                     group: 'shared',                     animation: 150,                     handle: '.paui-label',                     onEnd: function (evt) {                         if(evt.to != evt.from) set_queue();                     },                 });             });         }     });       /* 事件绑定 */     form.on('select(select_set_int_queue)', function(obj){         var data = [], core1 = "", core2 = "", queue = "";         var submit = form.getValue("form_set_int_queue");          for(var i = 0; i < Number(submit.number); i++){             core1 = submit["core1_" + i];             core2 = submit["core2_" + i];             queue = submit["queue_" + i];             data.push(core1 + "_" + core2 + "_" + queue);         }          pa_ajax({             url: api,             data: {"action": "set_if_queue", "data": data.join(";")},             success: function(json){                 l_init = 0;                 pa_table.reload();                 json.code != 0 ? alert_err(json.msg) : alert_ok(json.msg);             }         });     });       /* 定时刷新 */ l_timer = setInterval(function(){         pa_table.reload(); }, 5000);  g_Intervaltimer.push(l_timer);  }); </script>