{{# var lang001 = {"ch": "流量概况", "en": "Traffic Overview"}, lang002 = {"ch": "IPv6概况", "en": "IPv6 Overview"}, lang003 = {"ch": "自定义显示", "en": "Customize Display"}, lang004 = {"ch": "恢复默认", "en": "Reset Default"}, lang005 = {"ch": "上行趋势", "en": "Upload Trend"}, lang006 = {"ch": "-", "en": "-"}, lang007 = {"ch": "流量概况", "en": "Traffic Overview"}, lang008 = {"ch": "下行趋势", "en": "Download Trend"}, lang009 = {"ch": "流量分布", "en": "Traffic Distribution"}, lang010 = {"ch": "连接趋势", "en": "Connection Trend"}, lang011 = {"ch": "连接分布", "en": "Connection Distribution"}, lang012 = {"ch": "系统信息", "en": "System Information"}, lang013 = {"ch": "接口线路", "en": "Interface Lines"}, lang014 = {"ch": "流量统计", "en": "Traffic Statistics"}, lang015 = {"ch": "TOP应用", "en": "TOP Applications"}, lang016 = {"ch": "TOP用户", "en": "TOP Users"}, lang017 = {"ch": "外网连接", "en": "External Connections"}, lang018 = {"ch": "WAN群组", "en": "WAN Groups"}, lang019 = {"ch": "设备面板", "en": "Device Panel"}; }}  <style> #paui-dashboard-hover-menu{width:160px;} .paui-dashboad-filter .pa-move{cursor:move;}  .paui-dashboad-canvas .layui-card-header{cursor:move;} .paui-dashboad-canvas .paui-hover-menu dl{top: 22px; left: -25px;} </style>  <div class="layui-tab layui-tab-brief">     <ul class="layui-tab-title"> <li dashboard_event="change_bridge" bridge="0" class="layui-this">{{ lang001[g_lang] || "流量概况" }}</li> <li dashboard_event="change_bridge" bridge="9">{{ lang002[g_lang] || "IPv6概况" }}</li> {{# layui.each(g_sys_env.bridge, function(index, elem){ }}         <li dashboard_event="change_bridge" bridge="{{elem.id}}">{{ g_lang == "ch" ? elem.name : elem.name.replace("网桥", "Bridge") }}</li> {{# }); }}     </ul> <div class="paui-card-tool"> <div class="layui-form-mid" id="paui-dashboard-hover-menu"> <i class="nbtn pa-icon pa-filter"></i> <dl class="layui-nav-child layui-anim layui-anim-upbit" style="top:15px;"></dl> </div> </div>     <div class="layui-tab-content" style="padding: 8px 10px 0px 10px;">         <div class="layui-tab-item layui-show">             <div class="paui-dashboad-overview"></div>             <div class="layui-row layui-col-space8 paui-dashboad-canvas" style="margin-bottom: 8px;"></div>         </div>     </div> </div>  <script id="tpl_card_filter" type="text/html"> <div class="layui-card paui-dashboad-filter" style="padding:10px 20px"> <div class="layui-row layui-word-aux" style="text-align:left"> <span>{{ lang003[g_lang] || "自定义显示" }}<span>&nbsp; <span class='abtn' dashboard_event="reset_layout">{{ lang004[g_lang] || "恢复默认" }}</span> </div> <div class="layui-form paui-form paui-dashboard-form-drag"> {%# layui.each(d, function(index, elem){ %} <div class="layui-form-item" style="margin-bottom:2px"> <div class="layui-input-inline" style="width:10px; padding-top:6px; height:20px"> <i class="pa-icon pa-move" use-index="{% d.use_index %}"></i> </div> <div class="layui-input-inline" style="width:60px"> <input type="checkbox" lay-skin="primary" lay-filter="dashboard_card" index="{% elem.use_index %}" title="{% elem.title %}" {% elem.hide ? '' : 'checked' %}>  </div> </div> {%# }); %} </div> </div> </script>  <script> layui.use(function(){ var $ = layui.$, util = layui.util,  form = layui.form, patpl = layui.patpl,     laytpl = layui.laytpl;  var l_bridge = 0;     var l_filter_sort = "";     var l_dbkey = "paui-sys-dashboard";      var l_card_list = [];     if(g_sys_env.release == "2") { /* 网吧版 */         var l_card_list_src = [{             path: 'item_grpbps_chart',             width: 8,             index: 10,             hide: true,             title: '{{ lang005[g_lang] || "上行趋势" }}',             type: 'up',             action: 'appgroup_bpsup'         }, {             path: 'item_app_view',             width: 4,             index: 11,             hide: true,             title: '{{ lang007[g_lang] || "流量概况" }}'         }, {             path: 'item_grpbps_chart',             width: 8,             index: 12,             hide: true,             title: '{{ lang008[g_lang] || "下行趋势" }}',             type: 'down',             action: 'appgroup_bpsdw'         }, {             path: 'item_app_pie',             width: 4,             index: 13,             hide: true,             title: '{{ lang009[g_lang] || "流量分布" }}',             type: 'bps'         }, {             path: 'item_grpbps_chart',             width: 8,             index: 14,             hide: true,             title: '{{ lang010[g_lang] || "连接趋势" }}',             type: 'flow',             action: 'appgroup_flow'         }, {             path: 'item_app_pie',             width: 4,             index: 15,             hide: true,             title: '{{ lang011[g_lang] || "连接分布" }}',             type: 'flow'         }, {             path: 'item_system_info',             width: 4,             index: 16,             hide: false,             title: '{{ lang012[g_lang] || "系统信息" }}'         }, {             path: 'item_proxy_list',             width: 4,             index: 17,             hide: false,             title: '{{ lang013[g_lang] || "接口线路" }}'         }, {             path: 'item_app_group',             width: 4,             index: 18,             hide: false,             title: '{{ lang014[g_lang] || "流量统计" }}'         }, {             path: 'item_top_app',             width: 4,             index: 19,             hide: false,             title: '{{ lang015[g_lang] || "TOP应用" }}'         }, {             path: 'item_top_user',             width: 4,             index: 20,             hide: false,             title: '{{ lang016[g_lang] || "TOP用户" }}'         }, {             path: 'item_top_flow',             width: 4,             index: 21,             hide: false,             title: '{{ lang017[g_lang] || "外网连接" }}'         }, {             path: 'item_wan_group',             width: 4,             index: 22,             hide: true,             title: '{{ lang018[g_lang] || "WAN群组" }}'         }];     } else {         var l_card_list_src = [{             path: 'item_grpbps_chart',             width: 8,             index: 10,             hide: false,             title: '{{ lang005[g_lang] || "上行趋势" }}',             type: 'up',             action: 'appgroup_bpsup'         }, {             path: 'item_app_view',             width: 4,             index: 11,             hide: false,             title: '{{ lang007[g_lang] || "流量概况" }}'         }, {             path: 'item_grpbps_chart',             width: 8,             index: 12,             hide: false,             title: '{{ lang008[g_lang] || "下行趋势" }}',             type: 'down',             action: 'appgroup_bpsdw'         }, {             path: 'item_app_pie',             width: 4,             index: 13,             hide: false,             title: '{{ lang009[g_lang] || "流量分布" }}',             type: 'bps'         }, {             path: 'item_grpbps_chart',             width: 8,             index: 14,             hide: false,             title: '{{ lang010[g_lang] || "连接趋势" }}',             type: 'flow',             action: 'appgroup_flow'         }, {             path: 'item_app_pie',             width: 4,             index: 15,             hide: false,             title: '{{ lang011[g_lang] || "连接分布" }}',             type: 'flow'         }, {             path: 'item_system_info',             width: 4,             index: 16,             hide: true,             title: '{{ lang012[g_lang] || "系统信息" }}'         }, {             path: 'item_proxy_list',             width: 4,             index: 17,             hide: true,             title: '{{ lang013[g_lang] || "接口线路" }}'         }, {             path: 'item_app_group',             width: 4,             index: 18,             hide: true,             title: '{{ lang014[g_lang] || "流量统计" }}'         }, {             path: 'item_top_app',             width: 4,             index: 19,             hide: true,             title: '{{ lang015[g_lang] || "TOP应用" }}'         }, {             path: 'item_top_user',             width: 4,             index: 20,             hide: true,             title: '{{ lang016[g_lang] || "TOP用户" }}'         }, {             path: 'item_top_flow',             width: 4,             index: 21,             hide: true,             title: '{{ lang017[g_lang] || "外网连接" }}'         }, {             path: 'item_wan_group',             width: 4,             index: 22,             hide: true,             title: '{{ lang018[g_lang] || "WAN群组" }}'         }];     }      if(g_sys_env.release == "7"){         l_card_list_src[6] = {             path: 'item_system_info',             width: 4,             index: 9,             hide: false,             title_hide: true,             title: '{{ lang012[g_lang] || "系统信息" }}'         };          /*         * 有未适配的硬件时，会导致页面404         * 允许异常，当前每款都需要单独适配面板         */         l_card_list_src.push({             path: 'item_panel_' + g_sys_env.hwproduct.toLowerCase(),             width: 8,             index: 8,             hide: false,             title: '{{ lang019[g_lang] || "设备面板" }}'         });     }      var event_center = {         change_bridge: function(){             l_bridge = $(this).attr("bridge");              $('li[dashboard_event="change_bridge"]').removeClass("layui-this");             $(this).addClass("layui-this");              layer.load();             show_overview();             show_cards();             layer.closeAll('loading');         },  reset_layout: function(obj){ $("#paui-dashboard-hover-menu dl").hide();             paui_db.remove(l_dbkey); show_cards(); },          card_close: function(){             var dom = $(this).parents(".paui-dashboard-item");             var index = dom.attr("index");              layui.each(l_card_list, function(i, elem){                 if (elem.use_index == index){                     elem.hide = true;                     return;                 }             });                          dom.removeClass("layui-show");             dom.addClass("layui-hide");             paui_db.save(l_dbkey, l_card_list);         }     };      var card_hide = function(obj){         var index = Number($(obj.elem).attr("index"));         var dom = $('.paui-dashboad-canvas .paui-dashboard-item[index="'+ index +'"]');          if (obj.elem.checked){             dom.removeClass("layui-hide");             dom.addClass("layui-show");         } else {             dom.removeClass("layui-show");             dom.addClass("layui-hide");         }          layui.each(l_card_list, function(i, elem){             if (elem.use_index == index){                 elem.hide = !obj.elem.checked;                 return;             }         }); paui_db.save(l_dbkey, l_card_list); };      var card_sort = function(evt, reload){         var new_index = evt.newIndex;         var old_index = evt.oldIndex;          if ( new_index == old_index )             return;                  l_card_list[old_index].new_index = new_index;  if ( new_index < old_index ) { for(var i = new_index; i < old_index; i++) l_card_list[i].new_index = i + 1; }  if (new_index > old_index ){ for(var i = new_index; i > old_index; i--) l_card_list[i].new_index = i - 1; }          layui.each(l_card_list, function(i, elem){ elem.use_index = typeof elem.new_index == "number" ? elem.new_index : elem.index; });          l_card_list = layui.sort(l_card_list, "use_index");         paui_db.save(l_dbkey, l_card_list);          if(reload) show_cards();     };      var show_overview = function(){         pa_get_html('/html/dashboard/item_sys_overview.html', function(tpl){             laytpl(tpl).render({bridge: l_bridge}, function(html){                 $(".paui-dashboad-overview").html(html);             });         });     };      var show_cards = function(){ var history = paui_db.get(l_dbkey) || []; l_card_list = history.length == 0 ? l_card_list_src : history;  layui.each(l_card_list, function(index, elem){ elem.use_index = typeof elem.new_index == "number" ? elem.new_index : elem.index; });  l_card_list = layui.sort(l_card_list, "use_index");          paui_clear_interval();         $(".paui-dashboad-canvas").html('');         layui.each(l_card_list, function(index, elem){             var boxhtml = [                  '<div class="paui-dashboard-item layui-col-xs', elem.width,                 elem.hide ? ' layui-hide' : ' layui-show',                 '" index="', elem.use_index, '"></div>'             ].join('');              $(".paui-dashboad-canvas").append(boxhtml);             var dom = $(".paui-dashboad-canvas .paui-dashboard-item").eq(index);             pa_get_html('/html/dashboard/'+ elem.path +'.html', function(tpl){                 elem.bridge = l_bridge;                 laytpl(tpl).render(elem, function(html){                     dom.html(html);                 });             });         });     };      var show_filter = function(){ $("#paui-dashboard-hover-menu dl").html("");  patpl($("#tpl_card_filter").html()).render(l_card_list, function(htmlstr){ $("#paui-dashboard-hover-menu dl").html( htmlstr ); });  form.render();  layui.off('checkbox(dashboard_card)'); form.on("checkbox(dashboard_card)", card_hide);  l_filter_sort.destroy && l_filter_sort.destroy(); l_filter_sort = new Sortable($(".paui-dashboard-form-drag")[0], { sort: true, animation: 150, handle: '.pa-move', onEnd: function(evt){                 card_sort(evt, true);             } }); };      /* 页面初始 */     show_overview();     show_cards();      /* 事件绑定 */     util.event('dashboard_event', event_center);      new Sortable($(".paui-dashboad-canvas")[0], {         sort: true,         animation: 150,         handle: '.layui-card-header',         onEnd: card_sort     });      $("#paui-dashboard-hover-menu").off('mouseenter').off('mouseleave');     $("#paui-dashboard-hover-menu").on('mouseenter', function(){         $(this).find("dl").show();         show_filter();     }).on('mouseleave', function(){         $(this).find("dl").hide();     });  }); </script>