{{# var lang001 = {"ch": "选择网络模式", "en": "Select Network Mode"},     lang002 = {"ch": "网络配置", "en": "Network Configuration"},     lang003 = {"ch": "完成", "en": "Complete"},     lang004 = {"ch": "网关模式", "en": "Gateway Mode"},     lang005 = {"ch": "透明网桥模式", "en": "Transparent Bridge Mode"},     lang006 = {"ch": "旁路分析模式", "en": "Bypass Analysis Mode"},     lang007 = {"ch": "配置如下网卡参数", "en": "Configure the following network card parameters"},     lang008 = {"ch": "名称", "en": "Name"},     lang009 = {"ch": "线路类型", "en": "Line Type"},     lang010 = {"ch": "网关地址", "en": "Gateway"},     lang011 = {"ch": "手动设置地址", "en": "Static"},     lang012 = {"ch": "DHCP自动获取", "en": "DHCP"},     lang013 = {"ch": "PPPOE账号", "en": "PPPoE Account"},     lang014 = {"ch": "PPPOE密码", "en": "PPPoE Password"},     lang015 = {"ch": "掩码", "en": "Subnet Mask"},     lang016 = {"ch": "DHCP服务", "en": "DHCP Service"},     lang017 = {"ch": "地址范围", "en": "IP Pool"},     lang018 = {"ch": "关闭", "en": "Off"},     lang019 = {"ch": "开启", "en": "On"},     lang020 = {"ch": "高级设置", "en": "Advanced Settings"},     lang021 = {"ch": "上一步", "en": "Previous"},     lang022 = {"ch": "下一步", "en": "Next"},     lang023 = {"ch": "确认提交", "en": "Submit"},     lang024 = {"ch": "未配置", "en": "Not Configured"},     lang025 = {"ch": "lan线路", "en": "LAN Interface"},     lang026 = {"ch": "至少需要配置一个网卡设备", "en": "At least one network card must be configured"},     lang027 = {"ch": "参数设置错误", "en": "Parameter Setting Error"},     lang028 = {"ch": "接内", "en": "In"},     lang029 = {"ch": "接外", "en": "Out"},     lang030 = {"ch": "拖动可设置网卡对接位置", "en": "Drag to set network card docking position"},     lang031 = {"ch": "请填写正确的内网IP网段，设备通过内网网段来区分上下行流量",                "en": "Please enter the correct internal IP segment. The device distinguishes upstream and downstream traffic based on the internal network segment."},     lang032 = {"ch": "合法IP", "en": "Valid IP"},     lang033 = {"ch": "网桥", "en": "Bridge"},     lang034 = {"ch": "对端网卡", "en": "Peer Network Card"},     lang035 = {"ch": "已达上限", "en": "Reached Limit"},     lang036 = {"ch": "PPPOE拨号", "en": "PPPoE Dialing"},     lang037 = {"ch": "提交后会先清空现有配置，确定要继续吗？", "en": "Submitting will first clear the existing configuration. Confirm to continue?"},     lang038 = {"ch": "空", "en": "Empty"};  }} <style> #guide .layui-form-label{ width: 75px; } #bridge_co{ width: 770px; margin: 0 auto; } .mode_item{ margin: 59px auto !important; } .mode_change{ width: 243px;     border: solid 1px #dedede;     border-radius: 10px;     text-align: center;     height: 260px;     line-height: 260px;     margin: 0 17px; font-size: 18px; display: inline-block; } .mode_change:hover,.modeActive{ background-color:#4E97EE ; color: #fff; } .modeContent{ width: 350px;margin: 0 auto;} .layui-netcard:hover,.active{ color: #4E97EE; } .bridge_sin{ width: 45%;     height: 125px;     border: solid 1px #c9c9c9;     margin: 2% 2%;     float: left;     border-radius: 40px; position: relative; }  .bra_title_left{ font-size: 18px;     background: #c1d2e6;     border-top-left-radius: 40px;     border-bottom-left-radius: 40px;     color: #fff;     line-height: 125px;     height: 125px;     width: 12%; position: absolute; top: 0; left: 0; } .bra_title_right{ font-size: 18px;     background: #c1d2e6;     border-top-right-radius: 40px;     border-bottom-right-radius: 40px;     color: #fff;     line-height: 125px;     height: 125px;     width:12%; position: absolute; top: 0; right: 0; } .confres_item{ margin: 15px 0;     font-weight: bold;     font-size: 15px; } .confres_span{ margin: 0 10px;     color: #a0a0a0;     font-size: 14px; } #guide .layui-form-switch{ background-color:#FFB800; } #guide .layui-form-onswitch {     border-color: #4E97EE;     background-color: #4E97EE; } #guide .layui-form-switch>div{ color: #fff !important;  } #guide .layui-form-switch>i{ background-color: #fff !important; }  #mode_0 .bra_are{ width: 56px; margin: 0 8px; }  .modeCO{ height: 125px; }  .modeCO .pa-netif{ font-size: 48px !important; display: block; }  .modeCO .bra_are{ width: 38%;     float: left;     line-height: 55px;     font-size: 14px; margin:0 6%; cursor: pointer; }  .netCard{ display: flex; justify-content: center; padding-bottom: 20px; }   </style> <div class="layui-card" id="guide"> <div class="layui-card-body" style="padding-top: 20px;"> <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;"> <div carousel-item style="height: 92%;"> <div class="mode_item"> <div style="display: flex;justify-content: center;"> <div class="mode_change" config_center="choose_mode" id="gateway">{{ lang004[g_lang] || "网关模式" }}</div> <div class="mode_change" config_center="choose_mode" id="bridge">{{ lang005[g_lang] || "透明网桥模式" }}</div> <div class="mode_change" config_center="choose_mode" id="bypass">{{ lang006[g_lang] || "旁路分析模式" }}</div> </div> </div> <div> <form class="layui-form" style="margin: 0px auto;text-align: center;padding-top: 40px;width: 100%;height: 500px;overflow: auto;" lay-filter="form_config" id="form_config">  <div id="gateway_co"> <div id="netCard" style="margin-bottom: 20px;"></div> <div style="margin-bottom: 20px;">{{ lang007[g_lang] || "配置如下网卡参数" }}:</div> <div class="modeContent"> <div class="layui-form-item">  <label class="layui-form-label">*{{ lang008[g_lang] || "名称" }}</label> <div class="layui-input-inline"> <input type="text" name="name" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="modeContent" id="modeWan">  <div class="layui-form-item" > <label class="layui-form-label">{{ lang009[g_lang] || "线路类型" }}</label> <div class="layui-input-inline"> <select name="type" lay-verify="required" lay-filter="select_linetype"> <option value="proxy">{{ lang011[g_lang] || "手动设置地址" }}</option> <option value="dhcpwan">{{ lang012[g_lang] || "DHCP自动获取" }}</option> <option value="pppoe">{{ lang036[g_lang] || "PPPOE拨号" }}</option> </select> </div> </div> <div id="proxy"> <div class="layui-form-item" id="IP">  <label class="layui-form-label">*IP</label> <div class="layui-input-inline"> <input type="text" name="ip" autocomplete="off" class="layui-input" lay-verify="required|isIP"> </div> </div> <div class="layui-form-item">  <label class="layui-form-label">*{{ lang010[g_lang] || "网关地址" }}</label> <div class="layui-input-inline"> <input type="text" name="gateway" autocomplete="off" class="layui-input" lay-verify="isIP"> </div> </div> </div> <div id="pppoe" style="display: none;"> <div class="layui-form-item">  <label class="layui-form-label">*{{ lang013[g_lang] || "PPPOE账号" }}</label> <div class="layui-input-inline"> <input type="text" name="username" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item">  <label class="layui-form-label">*{{ lang014[g_lang] || "PPPOE密码" }}</label> <div class="layui-input-inline"> <input type="text" name="password" autocomplete="off" class="layui-input"> </div> </div> </div> </div> <div class="modeContent" id="modeLan" style="display: none;"> <div class="layui-form-item">  <label class="layui-form-label">*IP</label> <div class="layui-input-inline"> <input type="text" name="ip1" autocomplete="off" class="layui-input" lay-verify="required" lay-verify="isIP"> </div> </div> <div class="layui-form-item">  <label class="layui-form-label">*{{ lang015[g_lang] || "掩码" }}</label> <div class="layui-input-inline"> <input type="text" name="mask" autocomplete="off" class="layui-input"> </div> </div> <fieldset class="layui-elem-field layui-field-title" style="text-align: left;"> <legend> <span class="abtn paui-add-more" target="#paui-addacct-proxy"> {{ lang020[g_lang] || "高级设置" }}&nbsp; <i class="layui-icon layui-icon-up" style="font-size:12px"></i> </span> </legend> </fieldset> <div class="layui-form-item" > <label class="layui-form-label">{{ lang016[g_lang] || "DHCP服务" }}</label> <div class="layui-input-inline"> <select name="dhcpserver" lay-filter="dhcp_show"> <option value="0">{{ lang018[g_lang] || "关闭" }}</option> <option value="1">{{ lang019[g_lang] || "开启" }}</option>  </select> </div> </div> <div style="display: none;" id="dhcp_content"> <div class="layui-form-item"> <label class="layui-form-label">{{ lang017[g_lang] || "地址范围" }}</label> <div class="layui-input-inline"> <input type="text" id="ippool" name="ippool" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item">  <label class="layui-form-label">DNS1</label> <div class="layui-input-inline"> <input type="text" id="dns1"  name="dns1" autocomplete="off" class="layui-input" value="114.114.114.114"> </div> </div> <div class="layui-form-item">  <label class="layui-form-label">DNS2</label> <div class="layui-input-inline"> <input type="text" id="dns2" name="dns2" autocomplete="off" class="layui-input" value="8.8.8.8"> </div> </div> </div> </div> </div> <div id="bridge_co"> </div> <div id="bypass_co"> <div style="width: 350px;margin: 0 auto;"> <div style="margin-bottom: 30px;">{{ lang031[g_lang] || "请填写正确的内网IP网段，设备通过内网网段来区分上下行流量" }}</div> <div class="layui-form-item" > <label class="layui-form-label">{{ lang032[g_lang] || "合法IP" }}</label> <div> <div class="layui-input-inline"> <input type="text" name="legal_ip1" autocomplete="off" class="layui-input"> </div> <span class="abtn" config_center="add_bypass"> <i class="layui-icon layui-icon-addition"></i>&nbsp; </span> </div>  </div> </div> </div>  <div class="layui-form-item"> <div> <button type="button" class="layui-btn layui-btn-primary pre">{{ lang021[g_lang] || "上一步" }}</button> <button type="button" class="layui-btn layui-btn-primary next">{{ lang022[g_lang] || "下一步" }}</button>  </div> </div> </form> </div> <div> <div style="text-align: center;margin-top: 30px;"> <i class="layui-icon layui-circle" style="color: white;font-size:30px;font-weight:bold;background: #4e97ee;padding: 20px;line-height: 80px;">&#xe605;</i>  <div id="config_result" style="height:340px;overflow:auto"></div> </div> <div style="text-align: center;margin-top: 50px;"> <button class="layui-btn layui-btn-primary pre">{{ lang021[g_lang] || "上一步" }}</button> <button class="layui-btn layui-btn-primary" lay-submit lay-filter="config_submit">{{ lang023[g_lang] || "确认提交" }}</button> </div> </div> </div> </div>  </div> </div> <script> layui.use(function () { var $ = layui.$, form = layui.form, util = layui.util, element=layui.element, step = layui.step; var api  = "/cgi-bin/object/ajax_quick_config"; var proxyData=[];/*网卡数据*/ var bypass_len=1,bypass_index=1;/*旁路分析模式输入框数量控制*/ var config={};/*配置数据保存*/ var mode="gateway",netCard='';/*当前模式，活跃网卡*/ var data_structure={ proxy:['ip','gateway'], dhcpwan:[], pppoe:['username','password'], rtif:['ip1','mask','dhcpserver','ippool','dns1','dns2'] }; /*请求网卡*/ pa_ajax({ url: api, data: {"action": "load_interface_list"}, success: function(json){ proxyData=json.data; } }); /*渲染网桥槽*/ var slot_render=function(){ var len=Math.min(Math.ceil(proxyData.length/2), 4);/*槽数量*/ var solt=''; var netCard=''; proxyData.forEach(function(item){ netCard+=`<div class="bra_are" id="${item.name}"> ${item.name} <i class="pa-icon pa-netif" style="font-size:32px"></i> </div>` }); solt += `<div id="mode_0" class="netCard">${netCard}</div>`; solt += `<div style="margin-bottom: 20px;">{{ lang030[g_lang] || "拖动可设置网卡对接位置" }}</div>`; for (var i=0;i<len;i++){ solt+=` <div class="bridge_sin"> <div style="position: absolute;top: -25px;left: 45%;"> {{ lang033[g_lang] || "网桥" }}${i+1} </div> <div> <div class="bra_title_left">{{ lang028[g_lang] || "接内" }}</div> <div id="mode_${i+1}" class="modeCO"> </div> <div class="bra_title_right">{{ lang029[g_lang] || "接外" }}</div> </div>  </div>`; } $('#bridge_co').html(solt); for (var i=0;i<len+1;i++){ new Sortable(eval(`mode_${i}`), { animation: 150, group: 'shared', ghostClass: 'blue-background-class', invertSwap: true, onAdd: function (evt) { /*拖动元素占据位置的原div交换*/ var child=$(evt.to).find('.bra_are')[parseInt(evt.newIndex)+1]; $(child).appendTo($(evt.from)); } }); } }; /*网卡渲染*/ var proxy_render=function(){ var html=''; config={}; if(mode=="gateway"){ proxyData.forEach(function(item){ config[item.name]=form.getValue('form_config'); html+=`<div class="layui-form-item layui-inline" config_center="choose_netcard"> <label class="layui-form-label layui-netcard" id="${item.name}" style="text-align:center;padding:5px 0px"> <i class="pa-icon pa-netif" style="font-size:32px"></i> <div>${item.name}</div></label> <div class=""> <input type="checkbox" name="${item.name}"  lay-skin="switch" lay-filter="switchNet" title="LAN|WAN"> </div> </div>` }); $('#netCard').html(html); $('#netCard').find('.layui-form-item').eq(0).addClass('active');  netCard=proxyData[0].name;  config[netCard][netCard]="on"; form.val('form_config',config[netCard]);  form.render(); }  }; /*根据模型切换页面内容*/ var mode_render=function(){ $('#gateway_co').css('display','none'); $('#bridge_co').css('display','none'); $('#bypass_co').css('display','none'); $('#'+mode+'_co').css('display','block'); if(mode=="bridge"){ slot_render(); } proxy_render(); }; /*切换网卡*/ var change_netCard=function(id,context,check){  var _self=context; /*保存旧表单值*/ var old_type=config[netCard].type;  for(var key in form.getValue('form_config')){ if(form.getValue('form_config')[key]!="on"){ config[netCard][key]=form.getValue('form_config')[key]; } } config[netCard].type=old_type; /*切换活跃id*/ netCard=id; /*修改活跃样式*/ var data=$('#netCard').find('.layui-form-item'); data.each(function(i){ $(data[i]).removeClass('active'); }); $(_self).addClass('active'); config[netCard][netCard]=check?"on":'';/*避免switch重新渲染*/ form.val('form_config',config[netCard]);  }; var linetype_render=function(value){ config[netCard].type=value; $('#proxy').css('display','none'); $('#pppoe').css('display','none'); $('#'+value).css('display','block'); if(value=="proxy"){ $('#IP').css('display','block'); }else{ $('#IP').css('display','none'); show_dhcp(config[netCard].dhcpserver); } }; /*根据switch渲染页面*/ var switch_fun=function(value){ if(value){ $('#modeLan').css('display','block'); $('#modeWan').css('display','none'); config[netCard].type="rtif"; }else{ $('#modeWan').css('display','block'); $('#modeLan').css('display','none'); /*config[netCard].type="proxy";*/ } /*根据线路类型渲染dom*/ linetype_render(config[netCard]["type"]); }; /*表单校验*/ var form_check=function(list){ if(list.type=="proxy"){ return list.ip&&list.gateway&&IsIPAddr(list.ip)&&IsIPAddr(list.gateway); }else if(list.type=="pppoe"){ return list.username&&list.password; } else if(list.type=="rtif"){ return list.ip1&&list.mask&&IsIPAddr(list.ip1); }else{ return true; } };  var finish_render=function(){ var conf_html=""; var type={ rtif:'{{ lang025[g_lang] || "lan线路" }}', proxy:'{{ lang011[g_lang] || "手动设置地址" }}', dhcpwan:'{{ lang012[g_lang] || "DHCP自动获取地址" }}', pppoe:'PPPOE拨号', }; conf_html+=`<div class="confres_item">${mode=="gateway"?'{{ lang004[g_lang] || "网关模式" }}' :mode=="bridge"?'{{ lang005[g_lang] || "网桥模式" }}':'{{ lang006[g_lang] || "旁路分析模式" }}'}</div>`; if(mode=="bypass"){ conf_html+=`<div class="confres_item">{{ lang032[g_lang] || "合法IP" }}：${config} <div>`; }else{ for(var key in config){ if(mode=="gateway"){ conf_html+=`<div class="confres_item">${key}： <span class="confres_span">{{ lang008[g_lang] || "名称" }}：${config[key].name||'{{ lang024[g_lang] || "未配置" }}'}</span> <span class="confres_span">IP：${config[key].ip||config[key].ip1||'{{ lang024[g_lang] || "未配置" }}'}</span> <span class="confres_span">{{ lang009[g_lang] || "线路类型" }}：${type[config[key].type||'{{ lang024[g_lang] || "未配置" }}']}</span> <div>`; }else if(mode=="bridge"){ conf_html+=`<div class="confres_item">${key}： <span class="confres_span">{{ lang033[g_lang] || "网桥" }}：{{ lang033[g_lang] || "网桥" }}${config[key].mode}</span> <span class="confres_span">{{ lang034[g_lang] || "对端网卡" }}：${config[config[key].peer]?config[key].peer:'{{ lang038[g_lang] || "空" }}'}</span> <span class="confres_span">${config[key].zone=='inside' ? '{{ lang028[g_lang] || "接内" }}' : '{{ lang029[g_lang] || "接外" }}'}</span> <div>`; } }; } $('#config_result').html(conf_html); step.next('#stepForm'); }; var event_center={ /*切换模式*/ choose_mode:function(){ config={},netCard=''; $("#form_config")[0].reset(); $(`.mode_change[id=${mode}]`).removeClass("modeActive");/*去除选中样式*/ $(this).addClass('modeActive'); mode=$(this).attr('id');/*保存模式id*/ step.next('#stepForm'); mode_render(); if(mode=="gateway"){ /*linetype_render('proxy');*/ switch_fun(true); }  }, /*网卡选择事件*/ choose_netcard:function(){ var id=$($(this).find('label')).attr('id'); var res=config[id][id]&&config[id][id]=="on"; if(id!=netCard){ change_netCard(id,this,res); } switch_fun(res); }, /*添加合法IP*/ add_bypass:function(){ if(bypass_len>7){ layer.msg('{{ lang035[g_lang] || "已达上限" }}'); }else{ bypass_len+=1; bypass_index+=1; $(this).parent().parent().append(` <div style="margin-top: 15px;margin-left:105px"> <div class="layui-input-inline"> <input type="text" name="legal_ip${bypass_index}" autocomplete="off" class="layui-input"> </div> <span class="abtn" config_center="add_bypass"> <i class="layui-icon layui-icon-addition"></i>&nbsp; </span> <span class="abtn" config_center="del_bypass"> <i class="layui-icon layui-icon-subtraction"></i>&nbsp; </span> </div>`) }  }, /*删除合法IP*/ del_bypass:function(){ bypass_len-=1; $(this).parent().remove(); } }; step.render({ elem: '#stepForm', filter: 'stepForm', width: '100%', stepWidth: '550px', height: '620px', stepItems: [{ title:'{{ lang001[g_lang] || "选择网络模式" }}' }, { title: '{{ lang002[g_lang] || "网络配置" }}' }, { title: '{{ lang003[g_lang] || "完成" }}' }] }); form.render();   /*切换网关模式*/ form.on('switch(switchNet)',function(data){  if($(data.elem).parent().prev().attr('id')!=netCard){ change_netCard($(data.elem).parent().prev().attr('id'), $(data.elem).parent().parent(),data.elem.checked); }else{ config[netCard][netCard]=data.elem.checked?"on":''; } if(!data.elem.checked){ config[netCard].type="proxy"; } switch_fun(data.elem.checked); stopPropagation(); form.render();   }); form.on('select(select_linetype)',function(data){ linetype_render(data.value); }); var show_dhcp=function(value){ if(value==1){ $("#dhcp_content").css('display','block'); }else{ $("#dhcp_content").css('display','none'); }; };  form.on('select(dhcp_show)',function(data){ show_dhcp(data.value); });  form.on('submit(config_submit)', function (data) { var para_onfig=""; var res=[]; pa_confirm('{{ lang037[g_lang] || "提交后会先清空现有配置，确定要继续吗？" }}', function(index){ if(mode=="bypass"){ para_onfig=config; }else{ for(var key in config){ if(mode=="gateway"&&config[key].name){ var res_item=[config[key].type,config[key].name,key]; if(data_structure[config[key].type].length!=0){ data_structure[config[key].type].forEach(function(val){ res_item.push(config[key][val]); }) } res.push(res_item.join(',')); }else if(mode=="bridge"){ res.push(`${key},${config[key].mode},${config[config[key].peer]?config[key].peer:""},${config[key].zone}`) } } para_onfig=res.join(';'); } var loadIndex = ""; pa_ajax({ url: api, data: {"action": "quick_config",mode:mode,config:para_onfig}, success: function(json){ if(json.code != 0){ layer.msg(json.msg); }else { loadIndex = layer.msg('<span id="confirm">正在更新配置</span>', { icon: 16, shade: 0.01 }); var int=setInterval(function(){ pa_ajax({ url: api, data: {"action": "query_config_stat"}, success: function(json){ if(json.code == 1){ clearInterval(int); layer.close(loadIndex); alert_err(json.msg); }else if(json.msg == "RUN"){ $("#confirm").text(json.data); }else { clearInterval(int); layer.closeAll(); alert_ok(json.data || "操作成功"); } } }); },1000); } } }); });  return false; });  $('.pre').click(function () { step.pre('#stepForm'); });  $('.next').click(function () {  var Ifnext = true; if(mode=="gateway"){  var check=true,setName=""; var tips=[]; config[netCard]=form.getValue('form_config'); config[netCard].type=config[netCard][netCard]=="on"?'rtif':config[netCard].type; for(var key in config){ if(config[key].name){ setName=config[key].name; if(!form_check(config[key])){ tips.push(key); check=form_check(config[key]); } } } if(!setName){ layer.msg('{{ lang026[g_lang] || "至少需要配置一个网卡设备" }}',{ icon:0 }) }else if(check){ finish_render(); }else{ layer.msg(tips.join(',')+'{{ lang027[g_lang] || "参数设置错误" }}',{ icon:0 }) }  }else if(mode=="bridge"){ $('.modeCO .bra_are').each(function(index,item){ var nex=$(item.nextSibling).attr('id'); var pre=$(item.previousSibling).attr('id'); var name=$(item).attr("id"); if(!pre && !nex){ alert_err('配置错误'); Ifnext = false; return false; } var modeNum = $(item).parent().attr('id').split('_')[1];  config[name] = { mode: modeNum, peer: pre || nex, zone: pre ? 'outside' : 'inside', } }); if (!Ifnext) { return; } finish_render();  }else{ var formVal=form.getValue('form_config'); var bypass_res=[]; for(var key in formVal){ if(key.indexOf('legal_ip')>-1&&formVal[key]){ if(!IsIPAddr(formVal[key])){ alert_err('请填写正确的IP'); return false; }else{ bypass_res.push(formVal[key].trim()); } } } config=bypass_res.join(','); finish_render(); }  }); util.event("config_center", event_center); var stopPropagation=function(e) {               e = e || window.event;               if(e.stopPropagation) {                 e.stopPropagation();               } else {                   e.cancelBubble = true;             }           }  }) </script>