{{# var lang001 = {"ch": "序号", "en": "No."}, lang002 = {"ch": "分类名称", "en": "Name"}, lang003 = {"ch": "描述", "en": "Description"},     lang004 = {"ch": "阻断", "en": "Block"},     lang005 = {"ch": "开启|关闭", "en": "on|off"},     lang006 = {"ch": "命中次数", "en": "Hits"},     lang007 = {"ch": "域名分类", "en": "Category"},     lang008 = {"ch": "关键字搜索", "en": "Search"},     lang009 = {"ch": "域名数量", "en": "Domain Count"},     lang010 = {"ch": "域名查询", "en": "Domain Query"},     lang011 = {"ch": "域名分类库", "en": "Domain Category Database"}; }}  <style> .paui-drag-box{display: flex; flex-direction: row; height: auto;} .paui-drag-left{display: flex; overflow-x: hidden; overflow-y: auto; padding: 5px; width: 17%;} .paui-drag-right{display: flex; border-left:1px solid #c1c1c1; width: 82%;} #paui-appgroup-tree .layui-icon-component{font-size:14px; color:#aaa} #paui-proto-content .layui-tab-title li {font-size: 12px;} #paui-proto-content .layui-table-page {width: 90%;} </style>  <div class="paui-drag-box">     <div class="paui-drag-left paui-bg-white">         <div class="layui-row" style="width: 100%;">             <div class="layui-row">                 <span class="layui-hide" id="btn_show_appstat" obj='{}'></span>             </div>             <div class="layui-row" id="paui-appgroup-tree" style="overflow-y: auto;">                 <div class="layui-anim layui-anim-rotate layui-anim-loop" style="margin-top:200px; text-align: center; ">                     <i class="pa-icon pa-loading" style="font-size:25px; color:#666666"></i>                 </div>             </div>         </div>     </div>     <div class="paui-drag-right" id="paui-proto-content" style="overflow-y: auto;">         <div class="paui-page-app-stat" lay-filter="menu_app_stat" style="width: 100%;">             <div style=" padding: 10px 10px 0px 10px;">                 <form class="layui-form layui-form-pane paui-table-form" lay-filter="form_urlstat_search">                     <div class="layui-form-item paui-table-form-left">                         <label class="layui-form-label">{{ lang007[g_lang] || "域名分类" }}</label>                         <div class="layui-input-inline" style="width: 110px">                             <input type="hidden" name="action" value="load_url_stat">                             <input type="hidden" name="node" value='{{d.id}}'>                             <input type="text" name="type" id="ipt_type" class="paui-flow-act layui-input" readonly>                         </div>                         <div class="layui-input-inline" style="width: 160px;">                             <input type="text" name="keyword" class="layui-input" autocomplete="off"                             placeholder='{{ lang008[g_lang] || "关键字搜索" }}' lay-affix="clear" lay-filter="clear_urlstat_search">                         </div>                         <div class="layui-input-inline" style="width:60px">                             <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="submit_urlstat_search">                                 <i class="layui-icon layui-icon-search"></i>                             </button>                         </div>                     </div>                     <div class="layui-form-item paui-table-form-right">                         <div class="layui-form-mid">                             <span class="abtn" urlstat-event="btnevt_url_query">                                 <i class="layui-icon layui-icon-search"></i>&nbsp;{{ lang010[g_lang] || "域名查询" }}                             </span>                         </div>                     </div>                 </form>                 <div class="layui-row paui-table-card">                     <table id="tab-url" lay-filter="tab-url"></table>                     <div class="layui-table-page" id="page_urlstat"></div>                 </div>             </div>         </div>     </div> </div>  <script id="tpl_block_enable" type="text/html">     <input         type="checkbox"         name="stat"         lay-skin="switch"         obj-node="{% d.id %}"         lay-filter="switch_set_black"         lay-text='{{ lang005[g_lang] || "开启|关闭"}}' {% d.ifblock == 1 ? 'checked' : '' %}     > </script>  <script> layui.use(function(){     var $ = layui.$,     tree = layui.tree,     form = layui.form, table = layui.table,     laytpl = layui.laytpl;      var pa_table = new Paui_table();     var l_app_list = '';     var api = '/cgi-bin/proto/ajax_url_cat';     var tree_data = '';     var activeType='';      get_tree_data = function() {         pa_ajax({             url: api,             data: {"action": "lib_url_list"},             success: function(json){                 l_app_list = json.data;                 tree_data = addNode(json.data[0], 0);                 showTree(l_app_list);             }         });     };      var addNode = function(pNode, index) {         var obj = {};         var node = {};          for (var i = index; i < l_app_list.length; i++) {             node = { ...l_app_list[i] };             if(node.pid == pNode.id) {                 if (node.type === 'sysgrp'){                     node.children = Object.values(addNode(node, i+1));                 }                  obj[node.id] = node;             }         }         return obj;     };      var showTree = function(data) {         var rootNode = [{             "pid": 0,             "id": 1037,             "type": "sysgrp",             "field": "",             "title": '{{ lang011[g_lang] || "域名分类库" }}' + `（${data[0] && data[0].url_num}）`,             "spread": true,             children: []         }];         rootNode[0].children = l_app_list.filter(item => {             item.title += `（${item.url_num}）`;             return item.type == 'sysgrp' && item.pid != 0;         });         if(!activeType){             activeType = rootNode[0].children[0].id;             $('#ipt_type')[0].value = tree_data[activeType].title;         }         show_content();          tree.render({             elem: '#paui-appgroup-tree'             ,data: rootNode             ,onlyIconControl: true             ,click: function(obj){                 activeType = obj.data.id;                 $('#ipt_type')[0].value = tree_data[activeType].title;                 table_search();             }         });     };      form.render();  var col_render = function(r){         switch(this.field){             case "ifblock":                 return patpl($("#tpl_block_enable").html()).render(r);         }     };      var event_center = {         switch_set_black: function(obj){             var node = obj.elem.getAttribute('obj-node');             var enable = obj.elem.checked ? 1 : 0;             pa_ajax({                 url: api,                 data: { node, action: obj.elem.checked ? 'add_black' : 'remove_black' },                 success: function(json){                     if(json.code != 0)                         alert_err(json.msg);                     else                         alert_ok(json.msg);                         get_tree_data();                 }             });         },         btnevt_url_query: function(){             paopen({                 title: '{{ lang010[g_lang] || "域名查询" }}',                 url: '/html/proto/url_query.html',                 area: ['420px', '400px'],             });         }     };      var table_search = function(){         var search = form.getValue("form_urlstat_search");         pa_table.reload({             data: tree_data[activeType].children.filter(item => {                 return JSON.stringify(item).indexOf(search.keyword) > -1;             })         });     };      var show_content = function(){         pa_table.render({             elem: '#tab-url',             data: tree_data[activeType].children,             autoSort: false,             pageElem: 'page_urlstat',             height: 'full-190',             pageType: 'web',             cols: [[                 {type: 'numbers', title: '{{ lang001[g_lang] || "序号" }}'}                 ,{field: 'title', title: '{{ lang002[g_lang] || "分类名称" }}'}                 ,{field: 'url_num', title: '{{ lang009[g_lang] || "域名数量" }}', sort: true}                 ,{field: 'desc', title: '{{ lang003[g_lang] || "描述" }}', width: 700}                 ,{field: 'ifblock', title: '{{ lang004[g_lang] || "阻断" }}', templet: col_render}                 ,{field: 'blocks', title: '{{ lang006[g_lang] || "命中次数" }}', sort: true}             ]]         });     };      var drag_render = function(){         var dict = {minWidth: 150, maxWidth: 400};         var drag_area = parseInt( $(".paui-drag-box").width() );          /* 初始拖拽变量 */         $(".paui-drag-left").on('mousemove', function(e){             var oLeft = $(this).offset().left             ,pLeft = e.clientX - oLeft;             dict.allowResize = $(this).width() - pLeft <= 5;             $('body').css('cursor', (dict.allowResize ? 'col-resize' : ''));         }).on('mouseleave', function(){             if(dict.resizeStart) return;             $('body').css('cursor', '');         }).on('mousedown', function(e){             if(dict.allowResize){                 e.preventDefault();                 dict.resizeStart = true;                 dict.offset = $(this).offset().left;             }         });          /* 开始拖拽 */         $(document).on('mousemove', function(e){             if(!dict.resizeStart) return;                          e.preventDefault();             var setWidth = e.clientX - dict.offset;             if(setWidth < dict.minWidth) setWidth = dict.minWidth;             if(setWidth > dict.maxWidth) setWidth = dict.maxWidth;              $(".paui-drag-left").css('width', setWidth + 'px');             $(".paui-drag-right").css('width', (drag_area - setWidth - 10) + 'px');             $("#paui-urlstat-resize").click();         }).on('mouseup', function(e){             if(dict.resizeStart){                 dict = {minWidth: 150, maxWidth: 400};                 $('body').css('cursor', '');             }         });     };      /* 初始渲染 */     get_tree_data();     drag_render();     l_tiemr = setInterval(function(){         get_tree_data();     }, 10000);      g_Intervaltimer.push(l_tiemr);       /* 高度自适应 */     $("#paui-appgroup-tree").height( ($(window).height() - 90) + "px");      /* 事件绑定 */     util.event("urlstat-event", event_center); table.on('tool(tab-url)', function(obj){ event_center[obj.event](obj); });      form.on('input-affix(clear_urlstat_search)', table_search);     form.on('submit(submit_urlstat_search)', function(obj){         table_search();         return false;     });     form.on('switch(switch_set_black)', function(obj){         event_center['switch_set_black'](obj);     });  }); </script>