{{#  var lang001 = {"ch": "隐藏", "en": "Hide"},     lang002 = {"ch": "端口", "en": "Port"},     lang003 = {"ch": "链路状态", "en": "Link Status"},     lang004 = {"ch": "已连接", "en": "Connected"},     lang005 = {"ch": "断开", "en": "Disconnected"},     lang006 = {"ch": "接入方向", "en": "Direction"},     lang007 = {"ch": "接内", "en": "Internal"},     lang008 = {"ch": "接外", "en": "External"},     lang009 = {"ch": "工作速率", "en": "Link Speed"},     lang010 = {"ch": "流入速率", "en": "In(bps)"},     lang011 = {"ch": "流出速率", "en": "Out(bps)"},     lang012 = {"ch": "流入PPS", "en": "In(PPS)"},     lang013 = {"ch": "流出PPS", "en": "Out(PPS)"},     lang014 = {"ch": "子网掩码", "en": "Subnet Mask"},     lang015 = {"ch": "默认网关", "en": "Gateway"}; }} <style> .paui-netif-group{margin: 0px 2px;} .paui-netif-group-title{position: absolute; width: 100%; text-align: center; border: 1px solid #ccc; border-bottom: 0px; height: 26px; margin-top: -10px;} .paui-netif-group-title div{margin: -10px auto; background-color: #FDFDFE; width: 40px;} .paui-netif-item {width: 55px;height: 70px;text-align: center; color: #666666; margin: 0px 6px;} .paui-netif-name{color: #666666; line-height: 22px; height: 22px;} .paui-netif-icon{height: 48px; line-height: 48px; text-align: center; background-color: #f3f3f3;} .paui-netif-icon .pa-netif{font-size: 32px;} .paui-netif-icon-down {transform: rotatex(180deg)} .paui-netif-item:hover, .paui-netif-item:hover .paui-netif-icon{cursor: pointer; background-color: #F0F2F5;}  .paui-interface-tips{width: 200px} .panel_icon{ display: inline-block;font-size: 12px; margin: auto -2px; padding-top: 1px; }  /* 暗色主题 */ .paui-app-theme-dark .paui-netif-group-title{border: 1px solid #444; border-bottom: 0px;} .paui-app-theme-dark .paui-netif-group-title div{background-color: #1B1A1A;} .paui-app-theme-dark .paui-netif-icon{background-color: #1B2733;} .paui-app-theme-dark .paui-netif-item:hover, .paui-app-theme-dark .paui-netif-item:hover .paui-netif-icon{background-color: #21344D;} </style>  <div class="layui-card">     <div class="layui-card-header">         {{ d.title }}         <div class="paui-card-tool paui-hover-menu">             <i class="pa-icon pa-menu paui-card-more"></i>             <dl class="layui-nav-child layui-anim layui-anim-upbit">                 <div class="layui-row abtn paui-card-more-btn" dashboard_event="card_close" name="{{ d.index }}">                     {{ lang001[g_lang] || "隐藏" }}                 </div>             </dl>         </div>     </div>     <div class="layui-card-body paui-chart-div" style="display: flex; align-items: center; justify-content: center;">         <div class="layui-inline paui-netif-group" style="margin-top: 70px;">             <div class="layui-inline">                 <div class="paui-netif-item" name="CONSOLE">                     <div class="paui-netif-icon paui-netif-icon-up">                         <i class="pa-icon pa-netif"></i>                     </div>                     <div class="paui-netif-name">CONSOLE</div>                 </div>             </div>         </div>         <div class="layui-inline paui-netif-group" style="margin-top: 70px;">             <div class="layui-inline">                 <div class="paui-netif-item" name="MGT" devint_mouse="btnevt_show_tips">                     <div class="paui-netif-icon paui-netif-icon-up">                         <i class="pa-icon pa-netif paui-color-good"></i>                     </div>                     <div class="paui-netif-name">MGT</div>                 </div>             </div>         </div>         <div class="layui-inline paui-netif-group">             <div class="paui-netif-group-title">                 <div>GE</div>             </div> {{# for(var i = 0; i < 8; i+= 2) { }}             <div class="layui-inline">                 <div class="paui-netif-item" name="GE{{i}}" devint_event="btnevt_show_interface" devint_mouse="btnevt_show_tips">                     <div class="paui-netif-name">&nbsp;</div>                     <div class="paui-netif-icon paui-netif-icon-up">                         <i class="pa-icon pa-netif"></i>                     </div>                 </div>                 <div class="paui-netif-item" name="GE{{i+1}}" devint_event="btnevt_show_interface" devint_mouse="btnevt_show_tips">                     <div class="paui-netif-icon paui-netif-icon-down">                         <i class="pa-icon pa-netif"></i>                     </div>                     <div class="paui-netif-name">                         <i class="layui-icon layui-icon-triangle-d paui-netif-icon-down panel_icon"></i>                         {{i}}/{{i+1}}                         <i class="layui-icon layui-icon-triangle-d panel_icon"></i>                     </div>                 </div>             </div> {{# } }}         </div>          <div class="layui-inline paui-netif-group">             <div class="paui-netif-group-title">                 <div>GE</div>             </div> {{# for(var i = 8; i < 16; i+= 2) { }}             <div class="layui-inline">                 <div class="paui-netif-item" name="GE{{i}}" devint_event="btnevt_show_interface" devint_mouse="btnevt_show_tips">                     <div class="paui-netif-name">&nbsp;</div>                     <div class="paui-netif-icon paui-netif-icon-up">                         <i class="pa-icon pa-netif"></i>                     </div>                 </div>                 <div class="paui-netif-item" name="GE{{i+1}}" devint_event="btnevt_show_interface" devint_mouse="btnevt_show_tips">                     <div class="paui-netif-icon paui-netif-icon-down">                         <i class="pa-icon pa-netif"></i>                     </div>                     <div class="paui-netif-name">                         <i class="layui-icon layui-icon-triangle-d paui-netif-icon-down panel_icon"></i>                         {{i}}/{{i+1}}                         <i class="layui-icon layui-icon-triangle-d panel_icon"></i>                     </div>                 </div>             </div> {{# } }}         </div>          <div class="layui-inline paui-netif-group">             <div class="paui-netif-group-title">                 <div>XE</div>             </div> {{# for(var i = 0; i < 4; i+= 2) { }}             <div class="layui-inline">                 <div class="paui-netif-item" name="XE{{i}}" devint_event="btnevt_show_interface" devint_mouse="btnevt_show_tips">                     <div class="paui-netif-name">&nbsp;</div>                     <div class="paui-netif-icon paui-netif-icon-up">                         <i class="pa-icon pa-netif"></i>                     </div>                 </div>                 <div class="paui-netif-item" name="XE{{i+1}}" devint_event="btnevt_show_interface" devint_mouse="btnevt_show_tips">                     <div class="paui-netif-icon paui-netif-icon-down">                         <i class="pa-icon pa-netif"></i>                     </div>                     <div class="paui-netif-name">                         <i class="layui-icon layui-icon-triangle-d paui-netif-icon-down panel_icon"></i>                         {{i}}/{{i+1}}                         <i class="layui-icon layui-icon-triangle-d panel_icon"></i>                     </div>                 </div>             </div> {{# } }}         </div>      </div> </div>  <script id="tpl_panaos_port_tips" type="text/html">     <div class="paui-interface-tips">         <div class="layui-row">             <div class="layui-col-xs5">{{ lang002[g_lang] || "端口" }}：</div>             <div class="layui-col-xs7">{% d.name %}</div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">{{ lang003[g_lang] || "链路状态" }}：</div>             <div class="layui-col-xs7">                 {%# if(d.state == 'up') { %}                     <span class="paui-color-good">{{ lang004[g_lang] || "已连接" }}</span>                 {%# } else { %}                     <span class="paui-color-danger">{{ lang005[g_lang] || "断开" }}</span>                 {%# } %}             </div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">{{ lang006[g_lang] || "接入方向" }}：</div>             <div class="layui-col-xs7">{% d.zone == 'inside' ? '{{ lang007[g_lang] || "接内" }}' : '{{ lang008[g_lang] || "接外" }}' %}</div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">{{ lang009[g_lang] || "工作速率" }}：</div>             <div class="layui-col-xs7">{% d.speed %}</div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">{{ lang010[g_lang] || "流入速率" }}：</div>             <div class="layui-col-xs7">{% numberformat(d.inbps) %}</div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">{{ lang011[g_lang] || "流出速率" }}：</div>             <div class="layui-col-xs7">{% numberformat(d.outbps) %}</div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">{{ lang012[g_lang] || "流入PPS" }}：</div>             <div class="layui-col-xs7">{% d.inpps %}</div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">{{ lang013[g_lang] || "流出PPS" }}：</div>             <div class="layui-col-xs7">{% d.outpps %}</div>         </div>     </div> </script> <script id="tpl_panaos_mgt_tips" type="text/html">     <div class="paui-interface-tips">         <div class="layui-row">             <div class="layui-col-xs5">{{ lang002[g_lang] || "端口" }}：</div>             <div class="layui-col-xs7">{% d.mgif %}</div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">MAC：</div>             <div class="layui-col-xs7">{% d.mac %}</div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">IP：</div>             <div class="layui-col-xs7">                 <div class="layui-col-xs7">{% d.ip %}</div>             </div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">{{ lang014[g_lang] || "子网掩码" }}：</div>             <div class="layui-col-xs7">{% d.mask %}</div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">{{ lang015[g_lang] || "默认网关" }}：</div>             <div class="layui-col-xs7">{% d.gateway %}</div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">DNS1：</div>             <div class="layui-col-xs7">{% d.dns1 %}</div>         </div>         <div class="layui-row">             <div class="layui-col-xs5">DNS2：</div>             <div class="layui-col-xs7">{% d.dns2 %}</div>         </div>     </div> </script>  <script> layui.use(function(){     var $ = layui.$,     util = layui.util,     patpl = layui.patpl;      var l_interface = {};     var mgt_list = {};          var event_center = {         btnevt_show_interface: function(){             var name = $(this).attr("name"); var type = $(this).attr("type");             popupInterface(name);         },          btnevt_show_tips: function(){             var name = $(this).attr("name");             var type = $(this).attr("type");              var data = l_interface[name] || {};             var tpl = "",render_data = [];              if(name == "MGT"){                 tpl = $("#tpl_panaos_mgt_tips").html();                 render_data = mgt_list;             }else{                 tpl = $("#tpl_panaos_port_tips").html();                 render_data = data;             }              layer.tips(patpl(tpl).render(render_data), $(this), {                 maxWidth: 2400,                 time: 10000,                 tips: [2, '#323E4Dcc']             });              $(this).off('mouseleave'); $(this).on('mouseleave', function(){ layer.closeAll('tips'); });         }     };       var list_panaos_interface = function(){         pa_ajax({             url: '/cgi-bin/network/ajax_interface',             data: {'action': 'load_if_list'},             success: function(json){                 layui.each(json.data.list, function(index, elem){                                         if(json.data.iftap && json.data.iftap[elem.name]){                         elem.outbps = json.data.iftap[elem.name].outbps;                         elem.outpps = json.data.iftap[elem.name].outpps;                     }                      l_interface[elem.name] = elem;                     var dom = $(".paui-netif-item[name='"+ elem.name +"']");                     if(elem.state == "up")                         dom.find('.pa-netif').addClass('paui-color-good');                     else                         dom.find('.pa-netif').removeClass('paui-color-good');                 });                 if(json.data.console.length > 0){                     $(".paui-netif-item[name=CONSOLE]").find('.pa-netif').addClass('paui-color-good');                 }else{                     $(".paui-netif-item[name=CONSOLE]").find('.pa-netif').removeClass('paui-color-good');                 }             }         });     };      var stat_mgt = function(){         pa_ajax({             url: '/cgi-bin/system/ajax_sys_setting',             data: {'action': 'load_ifadmin'},             success: function(json){                 mgt_list = json.data;             }         });     };      /* 页面初始 */     list_panaos_interface();     stat_mgt();       /* 事件绑定 */     util.event('devint_event', event_center);     util.event('devint_mouse', event_center, 'mouseenter');       /* 定时刷新 */     l_tiemr = setInterval(function(){         list_panaos_interface();     }, 10000);      g_Intervaltimer.push(l_tiemr);  }); </script>