{{# var lang001 = {"ch": "防护类型", "en": "Protection"}, lang002 = {"ch": "TCP报文标志合法性", "en": "TCP Packet Flag Legitimacy"}, lang003 = {"ch": "Ping of Death", "en": "Ping of Death"}, lang004 = {"ch": "超大ICMP报文", "en": "Oversized ICMP Packet"}; }}  <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 {         border-left: 1px solid #c1c1c1;         width: 82%;         margin-top: 5px;     }      #paui-loggroup-tree .layui-icon-component {         font-size: 14px;         color: #aaa     }      #paui-protection-content .layui-tab-title li {         font-size: 12px;     }      #paui-protection-content .layui-table-page {         width: 90%;     }      .layui-tab .layui-tab-content {         padding: 0px;     } </style> {{# if(d.state) { }}    <div class="paui-protection-content" id="paui-protection-content" style="overflow-y: auto;"></div> {{#  }else{ }}     <div class="layui-tab layui-tab-brief">     <ul class="layui-tab-title">         <li class="layui-this">{{ lang001[g_lang] || "防护类型" }}</li>     </ul>     <div class="layui-tab-content" style="padding:0px">         <div class="layui-tab-item layui-show">             <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_logstat"                                 obj='{"title":"SYN Flood","spread":true,"type":"synflood"}'></span>                         </div>                         <div class="layui-row" id="paui-loggroup-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-protection-content" style="overflow-y: auto;"></div>             </div>         </div>     </div> </div> {{# } }}  <script>     layui.use(function () {         var $ = layui.$,             tree = layui.tree,             laytpl = layui.laytpl;          var api = '/cgi-bin/protection/ajax_attackpro';         var pdata = JSON.parse('{{- JSON.stringify(d) }}');          var showTree = function () {             tree.render({                 elem: '#paui-loggroup-tree'                 , data: [{                     title: 'SYN Flood',                     spread: true,                     type: 'synflood'                  }, {                     title: 'UDP Flood',                     spread: true,                     type: 'udpflood'                 }, {                     title: 'ICMP Flood',                     spread: true,                     type: 'icmpflood'                 }, {                     title: 'ARP Flood',                     spread: true,                     type: 'arpflood'                 }, {                     title: '{{ lang002[g_lang] || "TCP报文标志合法性" }}',                     spread: true,                     type: 'tcpflag'                 }, {                     title: '{{ lang003[g_lang] || "Ping of Death" }}',                     spread: true,                     type: 'pingofdeath'                 }, {                     title: '{{ lang004[g_lang] || "超大ICMP报文" }}',                     spread: true,                     type: 'hugeicmp'                 }]                 , accordion: true                 , onlyIconControl: true                 , click: function (obj) {                     show_content(obj);                 }             });         };           var show_content = function (obj_) {             var obj = $("#paui-protection-content");             var data = {};                       if(pdata.state=='log'){               /*  data = obj_ ? obj_.data : $.parseJSON($("#btn_show_logstat").attr("obj")); */                 data.state = 'log';             }else{                 data.state = 'event';               }                  obj.html("");             var path = '/html/protection/log_list_content.html';             pa_get_html(path, function (html) {                 laytpl(html).render(data, function (string) {                     obj.html(string);                 });             });         };          /* 初始渲染 */         if(pdata.state){             $("#paui-protection-content").height(($(window).height() - {{ d.pop_route ? 60 : 100 }}) + "px");             $("#paui-protection-content").css('margin',"10px");         }else{             showTree();             $("#paui-protection-content").height(($(window).height() - {{ d.pop_route ? 80 : 120 }}) + "px");         };         show_content();         /* 高度自适应 */         $("#paui-loggroup-tree").height(($(window).height() - {{ d.pop_route ? 100 : 140 }}) + "px"); }); </script>