// ==UserScript== // @name fw // @namespace http://tampermonkey.net/ // @version 0.2.5 // @description 对蜂网路由器后台进行优化,1.首页显示温度模块,2.内网主机可单机查看功能，3.防止自动退出登录，4.自动开启ping检测，5.ping检测日志列表处理... // @author 005 // @match *://*/*?PAGE=* // @icon https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net // @grant none // @license MIT // @downloadURL none // ==/UserScript== (function () { 'use strict'; // 1开启 0关闭 //---------------------- // 防止自动退出登录 const isOnLogin = 1 // 内网主机单机查看 const isOnIpCheck = 1 // 自动开启ping检测 const isOnPing = 1 // ping检测日志列表 const isOnPingLog = 1 // 点击logo跳转事件 const isOnLogoTo = 0 //---------------------------------------------------------------------------------------------- const logoToTime = 1500;//logo跳转时间（毫秒） const isDev = 0; // 权限测试 { // 只读权限禁止放行 const readonlyAPI = [ '/dhcp_log_del.htm', '/start_upgred.htm', '/updateprogress.htm', '/update_online_again.htm', '/fw_profile_reset.htm', '/fw_config_restore.htm', '/restart2.htm', '/poweroff.htm', '/fwlog_ping_del.htm', '/action/fwlog_delete.htm', ] // 只读权限放行 const whitelistAPI = [ '/auth', '/fw_quit.htm', '/is_bind_lan.htm', '/hosts_info.htm', '/show_connect.htm', '/show_connect_exe.htm', '/waf_get_server.htm', '/waf_get_rule.htm', '/waf_get_log.htm', ] // 请求过滤器 $.ajaxPrefilter(function (options, originalOptions, jqXHR) { if (!'只读权限') { for(let i=0;i { i = 1 }, 600000) sessionStorage.setItem('login', '1') } //检查ping检测日志是否开启，如未打开检测将自动开启所有wan if(isOnPing){ const toPingTime = 300; setTimeout(()=>{ $.get('/action/ping_check_log_read.htm',(msg1)=>{ //console.log(msg1) if(!msg1||msg1.line && msg1.line.length==0){ //开启 $.get('/action/wan_line_name_show.htm',(msg2)=>{ if(msg2.length>0){ const linesArr = [] for(let i=0;i{ $.post('/action/ping_check_log_write.htm', {data : JSON.stringify({ url: 'jd.com', check_num: 100, line: linesArr })}, function (res) { if (res.state == 1) { message('success','已开启ping检测') if (location.search.indexOf("?PAGE=ping") !== -1)location.reload(); } }, 'json'); },toPingTime) } },'json') } },'json'); },toPingTime) } // 首页 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- let IndexTime = null if (location.search.indexOf("?PAGE=index") !== -1) { IndexTime = null $.get('/action/env_check.htm', {}, function (msg) { // console.log(msg); let html = '' if (msg.cpu_term < 10 || msg.cpu_term > 85) { html += 'CPU温度：    [ ' + msg.cpu_term + ' ℃ ]'; $(".box-B10 p:nth(5)").after(`

CPU温度${msg.cpu_term} ℃

`) } else { html += 'CPU温度：    [ ' + msg.cpu_term + ' ℃ ]'; $(".box-B10 p:nth(5)").after(`

CPU温度${msg.cpu_term} ℃

`) } $(".box-B10 p:last-of-type").css("display", "none") }, "JSON") IndexTime = setInterval(() => { $.get('/action/env_check.htm', {}, function (msg) { //console.log(msg) if (msg.cpu_term < 10 || msg.cpu_term > 85) { $("#cpu_term").html(`${msg.cpu_term} ℃ `) } else { $("#cpu_term").html(msg.cpu_term + " ℃") } }, "JSON") }, 4000) //关闭跳转事件 $(".col-xs-7").off("click"); } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //内网主机 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- if (isOnIpCheck&&(location.search.indexOf("?PAGE=hosts_info") !== -1)) { $(".seitchH-ul>.PPPOE_div>.H20>p").html('') // 单机应用查看 { $(".PPPOE_div>.div-tab").prepend(` 单机查看：
查看
     |   `) $("#ipInp").val(localStorage.getItem("ipVal")||'') } //IP正则 let ipaddress = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])/; //遮罩层CSS { var maskCss = `background-color:rgba(0,0,0,.3); display:none; position:fixed; width:100%; min-width:1200px; height:100%; top:0; left:0; bottom:0; z-index:99999; transition: all .2s linear; box-sizing: border-box; overflow:auto; ` var maskGtDiv = `width:1200px; height:calc(100% - 110px); overflow:hidden; margin:55px auto; background-color:#fff; border-radius: 10px; padding:10px 0; box-sizing: border-box;` var refreshTimeCss = `background-color: #ffffff; color: #666666; font-size: 13px; height: 28px; line-height: 28px; text-indent: 10px; width: 52px; border: 1px solid #dbdfe6; padding: 0; border-radius: 4px; margin:0 5px;` var listTableWrapperCss = `width:100%; height:calc(100% - 100px); margin-top:45px; border:1px solid #f0f0f0; border-radius:0 0 10px 10px; padding-bottom:10px; overflow: auto; ` } //添加遮罩层 { $("body").append(`
连接列表
关闭
：
重置
确认
自动刷新：秒
启动
    
立即刷新
    • 连接类型
    • 优先级
    • 上传流量
    • 下载流量
    • 协议
    • 源端口
    • 目的端口
    • 目标地址
    • 外网接口
    • 连接状态
`) //回到顶部 /* $("#mask").append(`
↑
`) */ //添加排序元素 $(".listTableHead>li").append(`
`) //CSS----------------------- { $(".selCss>option").css({ border:"1px solid #f0f0f0", }) $(".listTableHead>li").css({ cursor: "pointer", userSelect: "none", transition: "all .2s linear" }) $("#listTableWrapper>li>ul").css({ display:"flex" }) $("#listTableWrapper>li>ul>li").css({ width:"10%", height:"40px", display:"flex", justifyContent: "center", alignItems: "center", borderBottom:"1px solid #f0f0f0", }) $("#listTableWrapper>li>ul").eq(0).children('li').css({ backgroundColor:"#fafafa", fontWeight: "bold", height:"40px" }) //hover------------------- //查看按钮 $("#searchBtn").hover(function(){ // 移入 $(this).css("background-color","#39ade6") }, function(){ // 移出 $(this).css("background-color","#26a3e9") }); // 遮罩层关闭按钮 $("#colseBtn").hover(function(){ $(this).css("color","#ff7875") $(this).css("background-color","#fff2f0") }, function(){ $(this).css("color","#ff4d4f") $(this).css("background-color","#fff") }); //按钮 $("#searchBtn,#reloadBtn,#okHideBtn,#StartStopBtn,#resetHideBtn").hover(function(){ // 移入 $(this).css("background-color","#39ade6") }, function(){ // 移出 $(this).css("background-color","#26a3e9") }); //列表头部排序 $(".listTableHead>li").hover(function(){ // 鼠标移入时的处理逻辑 $(this).css("background-color","#efefef") }, function(){ // 鼠标移出时的处理逻辑 $(this).css("background-color","#fafafa") }); //回到顶部按钮 $("#back-to-top").hover(function(){ // 鼠标移入时的处理逻辑 $(this).css("background-color","#f0f0f0") }, function(){ // 鼠标移出时的处理逻辑 $(this).css("background-color","#fff") }); } } //ip详情列表样式 function ipListTableCss(){ $("#listTableWrapper>li>ul").css({ display:"flex" }) $("#listTableWrapper>li>ul>li").css({ width:"10%", height:"30px", display:"flex", justifyContent: "center", alignItems: "center", borderBottom:"1px solid #f0f0f0", }) $("#listTableWrapper>li:gt(0)>ul").css({ transition: "all .2s linear" }) //hover------------------- //除第一个li其他选中 $("#listTableWrapper>li:gt(0)>ul").hover(function(){ // 鼠标移入时的处理逻辑 if($(this).children().last().text()=="稳定") $(this).css("background-color","#fafafa") }, function(){ // 鼠标移出时的处理逻辑 if($(this).children().last().text()=="稳定") $(this).css("background-color","#fff") }); } let timerReload=null;//刷新定时器 let isStart=false;//是否开始 let sort={state:0,type:'down'};//排序 let ipListData=[];//ip详情数据 //查看按钮点击事件 $(document).on("click", "#searchBtn",function(){ getIpList(); //初始显示隐藏组件 let hideEntryInp = sessionStorage.getItem('hideEntry')?JSON.parse(sessionStorage.getItem('hideEntry')):''; if(Object.prototype.toString.call(hideEntryInp) === '[object Object]'){ const keys = Object.keys(hideEntryInp); const values = Object.values(hideEntryInp); $("#hideType").val(keys[0]) if(keys[0]=='pri'){ switch(values[0]){ case "1":$('#hideInp').val("最高");break; case "2":$('#hideInp').val("高");break; case "3":$('#hideInp').val("中");break; case "4":$('#hideInp').val("低");break; case "5":$('#hideInp').val("最低");break; } }else{ $('#hideInp').val(values[0]); $('#isHide').val(hideEntryInp.isHide); } }else{ $('#hideInp').val(''); $('#isHide').val(1); } }); //隐藏重置点击事件 $(document).on("click", "#resetHideBtn", function(){ $("#hideInp").val('') sessionStorage.removeItem('hideEntry') getIpList()//发起请求 message('', '已重置') }); //隐藏输入框添加键盘事件 $('#hideInp').keydown(function(event) { // 使用 event.key 来判断按键 if (event.key === 'Enter') { hideOk(); } }); //隐藏确认点击事件 $(document).on("click", "#okHideBtn",hideOk); //自动刷新输入框添加键盘事件 $('#refreshTimeInp').keydown(function(event) { // 使用 event.key 来判断按键 if (event.key === 'Enter') { if($("#refreshTimeInp").val()>0){ clearInterval(timerReload) $("#StartStopBtn").text('停止') isStart=true timerReload=setInterval(getIpList,$("#refreshTimeInp").val()*1000) }else{ message('warning','大于 0 生效！') } } }); //启/停定时按钮 $(document).on("click", "#StartStopBtn", function(){ if(isStart){ $("#StartStopBtn").text('启动') clearInterval(timerReload) isStart=false message('', '已停止！') }else{ if($("#refreshTimeInp").val()>0){ message('success', '已启动！') $("#StartStopBtn").text('停止') isStart=true timerReload=setInterval(getIpList,$("#refreshTimeInp").val()*1000) }else{ message('warning', '大于 0 生效！') } } }); //立即刷新按钮 $(document).on("click", "#reloadBtn", function(){ getIpList() $("#StartStopBtn").text('启动') clearInterval(timerReload) isStart=false message('success', '刷新成功！') }); //排序点击事件 $(document).on("click", ".listTableHead>li", function(){ $(".listTableHead>li>div").each(function() { $(this).children().eq(0).css("border-bottom-color","#b1b1b1"); $(this).children().eq(1).css("border-top-color","#b1b1b1"); }) if(sort.type==this.dataset.type){ if(sort.state<2){ sort.state+=1 }else{ sort.state=0 } }else{ sort.state=1; sort.type=this.dataset.type; } switch(sort.state){ case 1:$(this).children().children().eq(0).css("border-bottom-color","#1677ff"); $(this).children().children().eq(1).css("border-top-color","#b1b1b1");break; case 2:$(this).children().children().eq(0).css("border-bottom-color","#b1b1b1"); $(this).children().children().eq(1).css("border-top-color","#1677ff");break; } addIpList() }); //隐藏确认 function hideOk(){ let hideType = $("#hideType").val() let hideVal = $("#hideInp").val().trim() let isOk = true if(hideType=="pri"){ if(/^[\u4e00-\u9fa5]{1,2}$/.test(hideVal)){ switch(hideVal){ case "最高":hideVal="1";break; case "高":hideVal="2";break; case "中":hideVal="3";break; case "低":hideVal="4";break; case "最低":hideVal="5";break; default:isOk = false; } }else{ isOk = false; } }else if(hideType=="proto"){ if(!(/TCP/i.test(hideVal) || /UDP/i.test(hideVal) || /ICMP/i.test(hideVal)))isOk = false; }else if(hideType=="sport"||hideType=="dport"){ const num = parseInt(hideVal, 10); if(!(!isNaN(num) && num >= 0 && num <= 65535))isOk = false; }else if(hideType=="daddr"){ const pattern = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; if(!pattern.test(hideVal))isOk = false; }else if(hideType=="wan"){ if(!((hideVal.indexOf('wan')!=-1)||(hideVal.indexOf('LAN')!=-1)||(hideVal.indexOf('l2tp')!=-1)||(hideVal.indexOf('pptp')!=-1)))isOk = false; }else if(hideType=="status"){ if(hideVal=="未响应"){ hideVal = 1 }else if(hideVal=="稳定"){ hideVal = 2 }else{ isOk = false } }else if(hideType=="appstat"){ console.log(isOk,hideType,hideVal) } if(isOk&&hideVal){ message('success', 'OK！') sessionStorage.setItem('hideEntry',JSON.stringify({[hideType]:hideVal,isHide:$("#isHide").val()})) }else{ console.log(isOk,hideType,hideVal) message('warning', '类型与值不匹配！') } getIpList()//发起请求 //console.log(isOk,hideType,hideVal) } // 请求获取ip详情列表 function getIpList(){ let ip = $("#ipInp")[0].value //判断输入IP是否正确 if (ipaddress.test(ip)) { let data = JSON.stringify({ ip, wan: $(".sel_line option:selected").attr("data") }) //请求数据 $.get('/action/show_connect_exe.htm', { data }, function (msg) { localStorage.setItem("ipVal",ip) if (msg.length > 0) { if(Array.isArray(msg[0])){ message('','有子数组'); }else{ ipListData = msg; addIpList() } $("#mask").css("display","block") } else { //没有查到数据 message('warning',"该IP无数据！") } }, "JSON") } else { message('error',"IP有误！") } } // 添加ip详情列表数据 function addIpList(){ //console.log(sort.state,sort.type); $("#listTableWrapper>li:gt(0)").remove() let sortData=JSON.parse(JSON.stringify(ipListData)); let hideEntry = sessionStorage.getItem('hideEntry')?JSON.parse(sessionStorage.getItem('hideEntry')):'' let hideEntryKey = ''; if(Object.prototype.toString.call(hideEntry) === '[object Object]'){ hideEntryKey = Object.keys(hideEntry)[0]; }else{ } switch(sort.state){ case 1:sortData.sort(function(a,b){return a[sort.type]-b[sort.type]});break; case 2:sortData.sort(function(a,b){return b[sort.type]-a[sort.type]});break; } let html = '' sortData=sort.state==0?ipListData:sortData sortData.forEach(function(item,index){ if(hideEntryKey){ if(hideEntry.isHide==1){ if(item[hideEntryKey]==hideEntry[hideEntryKey])return; }else{ if(item[hideEntryKey]!=hideEntry[hideEntryKey])return; } } html +=`
    • ${item.appstat}
    • ${(function(){ switch(item.pri){ case "1":return "最高"; case "2":return "高"; case "3":return "中"; case "4":return "低"; case "5":return "最低"; } })()}
    • ${formatFileSize(item.up)}
    • ${formatFileSize(item.down)}
    • ${item.proto}
    • ${item.sport}
    • ${item.dport}
    • ${item.daddr}
    • ${item.wan}
    • ${item.status==1?"未响应":"稳定"}
    • ` }) if(html=='')html=`
  • ☁
    暂无数据
    • ` $("#listTableWrapper").append(html) ipListTableCss() } $(document).ready(function() { //返回顶部按钮 // 绑定到某个元素（如按钮）的点击事件上 $('#back-to-top').click(function() { // 使用animate()方法来平滑地滚动到页面顶部 $('body, html').animate({ scrollTop: 0 }, 500); // 500是动画的持续时间，以毫秒为单位 return false; // 阻止链接的默认行为（如果有的话） }); //手动刷新 $(".auto-flush").val(0) //初始隐藏组件 let hideEntryInp = sessionStorage.getItem('hideEntry')?JSON.parse(sessionStorage.getItem('hideEntry')):''; if(Object.prototype.toString.call(hideEntryInp) === '[object Object]'){ const keys = Object.keys(hideEntryInp); const values = Object.values(hideEntryInp); $("#hideType").val(keys[0]) $('#hideInp').val(values[0]); $('#isHide').val(hideEntryInp.isHide); }else{ $('#hideInp').val(''); $('#isHide').val(1); } $("#mask").attr('tabindex', '0').focus() //添加键盘事件 $("#mask").keydown(function(event) { //console.log(event.keyCode) // 检查是否按下了空格键 if (event.key === ' ' || event.keyCode === 32) { message('', '已停止！') //停止自动刷新 $("#StartStopBtn").text('启动') clearInterval(timerReload) isStart=false // 阻止事件的默认行为 event.preventDefault(); return false; // 在jQuery中，返回false也会阻止事件冒泡 }else if(event.keyCode ===82){//R键 //立即刷新 $("#reloadBtn").click() }else if(event.keyCode ===84){ //回到顶部 $('#back-to-top').click() }else if(event.keyCode ===27){ $('#colseBtn').click() } }); }); //遮罩层关闭按钮 $("#colseBtn").click(function(){ $("#mask").css("display","none") $('#hideInp').val(''); clearInterval(timerReload) isStart=false $("#refreshTimeInp").val('') $("#StartStopBtn").text('启动') }) // 单机流量详情 { $("#tblMain>tr").click(function(){ //console.log(this) }) } } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //Ping检测 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- if (location.search.indexOf("?PAGE=ping") !== -1) { // 检测日志 if(isOnPingLog)checkLog() function checkLog(){ let changeLog = JSON.parse(localStorage.getItem('changeLog'))!=null?JSON.parse(localStorage.getItem('changeLog')):true; $("ul.detail-info>li").eq(3).append(`
    立即刷新
    删除
    `) //获取线路并添加到下拉列表 $.get('/action/wan_line_name_show.htm',(res)=>{ let ele = '' if(res.length>0){ res.forEach(item=>{ if(item.id[0]!='3')ele+=`` }) } $(".sel_line").append(ele) },'json') //判断是否启用日志列表 if(changeLog){ $("ul.detail-info>li:nth-child(4)>table").css("display","none") $("#ping_check_log").css("display","block") }else{ $("ul.detail-info>li:nth-child(4)>table").css("display","table") $("#ping_check_log_wra").css("display","none") } //添加滑块开关 $("div.pdg20-LR>div.fc").append(``) $("div.pdg20-LR>div.fc>div.menu>label").click(()=>{ $("#changeLogBtn").css("display","none") }) $("div.pdg20-LR>div.fc>div.menu>label").eq(3).off('click') $("div.pdg20-LR>div.fc>div.menu>label").eq(3).click(()=>{ changeLog = JSON.parse(localStorage.getItem('changeLog'))!=null?JSON.parse(localStorage.getItem('changeLog')):true; $("#changeLogBtn").css("display","block") $("#changeLog")[0].checked = changeLog }) //滑块开关点击事件 $("#changeLog").click(function(){ if($("#changeLog")[0].checked){ JSON.stringify(localStorage.setItem('changeLog',true)) $("ul.detail-info>li:nth-child(4)>table").css("display","none") $("#ping_check_log_wra").css("display","block") }else{ JSON.stringify(localStorage.setItem('changeLog',false)) $("ul.detail-info>li:nth-child(4)>table").css("display","table") $("#ping_check_log_wra").css("display","none") } //console.log(localStorage.getItem('changeLog')) }) //下拉列表选择事件 $(".sel_time,.sel_line").change(refPingLog) //刷新按钮 $("#ref_ping_log").click(refPingLog) function refPingLog(){ if($(".sel_line").val()=='0'&&$(".sel_time").val()=='0'){ getPingLog(true) }else{ $.get('/action/get_basic_info.htm',function(msg){ let selTimeVal = 0 if($(".sel_time").val()!=0){ selTimeVal=msg.time-$(".sel_time").val()*1 } //console.log(true,selTimeVal,$(".sel_line").val().toLowerCase()) getPingLog(true,selTimeVal,$(".sel_line").val().toLowerCase()) },'json') } } //删除按钮 $("#del_ping_log").click(()=>{ if (confirm("确定要删除吗？")) { $.get('/action/fwlog_ping_del.htm', {}, function(msg) { if(msg.state == 1){ message("success","删除成功！"); getPingLog() }else{ message("error","删除失败，请重试！"); } }, 'json'); } }) //按钮hover $("#ref_ping_log").hover(function () {$(this).css("background-color", "#39ade6") }, function () {$(this).css("background-color", "#26a3e9") }); $("#del_ping_log").hover(function () {$(this).css("background-color", "#ff7875") }, function () {$(this).css("background-color", "#ff4d4f") }); $("div.pdg20-LR>div.fc").css({ display:'flex', alignItems: 'center', }) getPingLog() function getPingLog(isMsg=false,timeFrame=false,wanLine=false){ const columns = [ { title: '时间', dataIndex: 'utime', key: 'utime', width:'200px' }, { title: '线路', dataIndex: 'line', key: 'line', }, { title: '域名/IP', dataIndex: 'domain', key: 'domain', }, { title: '发送（个包）', dataIndex: 'sent', key: 'sent', }, { title: '接收（个包）', dataIndex: 'accept', key: 'accept', }, { title: '最低延迟（ms）', dataIndex: 'lowest', key: 'lowest', }, { title: '最高延迟（ms）', dataIndex: 'highest', key: 'highest', }, { title: '平均延迟（ms）', dataIndex: 'average', key: 'average', }, { title: '丢包率（%）', dataIndex: 'packetloss', key: 'packetloss', }, ] const dataSource = [] $.get('/action/fwlog_ping.htm',function(msg){ if(msg.length>0){ if(isMsg)message("success","刷新成功！") //console.log(msg); msg.forEach((item,index) => { if(item.type=='0x7002'){ dataSource.push({ key: index, utime: item.utime, line: item.text.match(/(wan\d+|pptp\d+|L2TP\d+)/ig)[0], domain: item.text.match(/PING ([^\s]+)/)[0].replace(/PING /g, ''), sent: item.text.match(/发送(\d+(\.\d+)?)个包/g)[0].replace(/发送|个包/g, ''), accept: item.text.match(/收到(\d+(\.\d+)?)个包/g)[0].replace(/收到|个包/g, ''), lowest: item.text.match(/最低延迟(\d+(\.\d+)?)ms/g)[0].replace(/最低延迟|ms/g, ''), highest: item.text.match(/最高延迟(\d+(\.\d+)?)ms/g)[0].replace(/最高延迟|ms/g, ''), average: item.text.match(/,平均延迟(\d+(\.\d+)?)ms/g)[0].replace(/,平均延迟|ms/g, ''), packetloss: item.text.match(/,丢包率为(\d+(\.\d+)?)%/g)[0].replace(/,丢包率为|%/g, ''), }) }else{ dataSource.push({ key: index, utime: item.utime, line: item.text.match(/(wan\d+|pptp\d+|L2TP\d+)/ig)[0], domain: item.text.replace(item.text.match(/(wan\d+|pptp\d+|L2TP\d+)/ig)[0], '').replace(/！/g, ''), sent: '9999', accept: '9999', lowest: '9999', highest: '9999', average: '9999', packetloss: '9999', }) } }); let dataS=dataSource.sort((a,b)=>b.utime-a.utime) if(timeFrame&&timeFrame!=0)dataS=JSON.parse(JSON.stringify(dataS.filter(item => timeFrame<=item.utime))); if(wanLine&&wanLine!=0)dataS=JSON.parse(JSON.stringify(dataS.filter(item => (item.line.indexOf(wanLine)!=-1)))); table("#ping_check_log", dataS, columns,false,{ unit:{sent:'个包',accept:'个包',lowest:'ms',highest:'ms',average:'ms',packetloss:'%',}, changeVal:{utime:reverse_time}, status:{packetloss:{0:(a)=>(a==0),1:(a)=>(a>0&&a<10),2:(a)=>(a>10&&a<=100)}} }) }else if(msg.length==0){ if(isMsg)message("warning","暂无数据！") table("#ping_check_log", dataSource, columns,false) } },'json') } } } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //newfw //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- if(isOnLogoTo){ if (window.location.host.indexOf(':') > 0 && !isPrivateIpAddress(window.location.hostname) || isDev == 1) $(".back_logo").css({ "cursor": "pointer" }); // logo点击事件 $(".back_logo").click(function () { if (window.location.host.indexOf(':') > 0 && !isPrivateIpAddress(window.location.hostname) || isDev == 1) { let str = '' if (window.location.host.split(':').length == 1) { str = window.btoa(window.location.host + ':80' + '*@*' + ($.cookie("NAME") || '')); } else { str = window.btoa(window.location.host + '*@*' + ($.cookie("NAME") || '')); } let $temp = $(''); $('body').append($temp); $temp.val(str).select(); document.execCommand('copy'); $temp.remove(); $(".back_logo").html(`
    OK
    `); setTimeout(() => { if (isDev == 1) { window.open("http://localhost:5173/login"); } else { window.open("http://47.108.191.179:8887/login"); } $(".back_logo").html(""); }, logoToTime) } }); } // ip私有地址正则 function isPrivateIpAddress(ip) { // CIDR格式的私有IP地址段 var privateRegex = /^(?:(?:10|172\.(?:[1-9]|[1][0-9])|192\.168)\.)/; return privateRegex.test(ip); } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- } { $('#menu').css("border", "1px solid red !important") } //流量转换 function formatFileSize(size) { const scale = 1024; if (size == "") { return "0B"; } else if (size < scale) { return `${size}.00B`; } else if (size < scale * scale) { return `${(size / scale).toFixed(2)}KB`; } else if (size < scale * scale * scale) { return `${(size / (scale * scale)).toFixed(2)}MB`; } else if (size < scale * scale * scale * scale) { return `${(size / (scale * scale * scale)).toFixed(2)}GB`; } else { return `${size}`; } } //时间转换 function reverse_time(time){ let unixTimestamp = new Date(time*1000); let Y = unixTimestamp.getFullYear() + '-'; let M = (unixTimestamp.getMonth()+1 < 10 ? '0'+(unixTimestamp.getMonth()+1) : unixTimestamp.getMonth()+1) + '-'; let D = unixTimestamp.getDate() + ' '; let h = ((unixTimestamp.getHours()+'').length==1?'0'+unixTimestamp.getHours() :unixTimestamp.getHours())+ ':'; let m = ((unixTimestamp.getMinutes()+'').length==1?'0'+unixTimestamp.getMinutes() :unixTimestamp.getMinutes())+ ':'; let s = (unixTimestamp.getSeconds()+'').length==1?'0'+unixTimestamp.getSeconds() :unixTimestamp.getSeconds(); return Y+M+D+h+m+s; } //消息提示 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- /** * 消息提示 * @param {a} a 消息类型，例如：'default','success','warning','error' * @param {b} b 消息内容，例如：'这是一条消息提示' * @example * message('success', '恭喜你，这是一条成功消息') //@example示例代码 * @return {Function} 返回数据类型 */ _addMessageHTML(); let timerMessage = null; let topPX = 0; let arrMes = []; /** * 消息提示 * @param {a} a 消息类型，例如：'default','success','warning','error' * @param {b} b 消息内容，例如：'这是一条消息提示' * @example * message('success', '恭喜你，这是一条成功消息') //@example示例代码 * @return {Function} 返回数据类型 */ function message(a, b) { clearTimeout(timerMessage) switch (a) { case 'success': _success(); break; case 'warning': _warning(); break; case 'error': _error(); break; default: _default(); } $('#pmt_text').text(b) $('#prompt').css('opacity', 1) $('#prompt').css('top', '20px') timerMessage = setTimeout(() => { _closeMessage(); }, 3000) function _default() { $('#prompt').css('color', '#909399') $('#prompt').css('border-color', '#ebeef5') $('#prompt').css('background-color', '#edf2fc') $("#pmt_state").text('i'); $("#pmt_state").css("background-color", "#909399") } function _success() { $('#prompt').css('color', '#67c23a') $('#prompt').css('border-color', '#e1f3d8') $('#prompt').css('background-color', '#f0f9eb') $("#pmt_state").text('√'); $("#pmt_state").css("background-color", "#67c23a") } function _warning() { $('#prompt').css('color', '#e6a23c') $('#prompt').css('border-color', '#faecd8') $('#prompt').css('background-color', '#fdf6ec') $("#pmt_state").text('!'); $("#pmt_state").css("background-color", "#e6a23c") } function _error() { $('#prompt').css('color', '#f56c6c') $('#prompt').css('border-color', '#fde2e2') $('#prompt').css('background-color', '#fef0f0') $("#pmt_state").text('×'); $("#pmt_state").css("background-color", "#f56c6c") } } //关闭消息提示 function _closeMessage() { topPX -= 48; clearTimeout(timerMessage) $('#prompt').css('opacity', 0) $('#prompt').css('top', '-48px') } //添加消息提示元素 function _addMessageHTML() { const promptCSS = ` position: fixed; background-color: #edf2fc; border-color: #ebeef5; color: #909399; /* font-size: 12px; */ width: 380px; height: 48px; top: -48px; left: 50%; transform: translateX(-50%); border: 1px solid #ebeef5; border-radius: 3px; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; user-select: none; opacity: 0; transition: all .2s linear; z-index: 99999; ` const pmt_stateCSS = ` display: inline-block; font-size: 12px; font-weight: bold; width: 16px; height: 16px; line-height: 16px; border-radius: 50%; text-align: center; background-color: #909399; color: #edf2fc; margin-right: 10px; ` const pmt_clearCSS = ` font-size: 22px; color: #c4c5cc; cursor: pointer; transition: all .1s linear; ` $('body').append(`
    i 这是一条消息提示
    ×
    `) } //关闭消息提示按钮 $("#pmt_clear").click(() => { _closeMessage() }) //表格 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- /** * 表格 * @param {a} a DOM,添加到DOM里,例如：'#div','.div' * @param {b} b 列表数据，例如：[{key: '1',name: '张三',age: 18,address: '翻斗大街',}] * @param {c} c 列表头，例如：[{title: '姓名',dataIndex: 'name',key: 'name',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '住址',dataIndex: 'address',key: 'address',}] * @param {d} d false * @param {e} e 其他选项,unit(单位)、changeVal（值转换）、status（状态背景色）,例如： * @example * table("#ping_check_log", dataSource, columns,false, { unit:{sent:'个包',accept:'个包',lowest:'ms',highest:'ms',average:'ms',packetloss:'%',}, changeVal:{utime:reverse_time}, status:{packetloss:{0:(a)=>(a==0),1:(a)=>(a>0&&a<10),2:(a)=>(a>10)}} }) //@example示例代码 * @return {Function} 返回数据类型 */ function table(DOM, d, c, isCall = false, o={unit:{},changeVal:{},status:{}}) { !isCall && sessionStorage.setItem('originalD', JSON.stringify(d)); let sort;//排序 if(!isCall){ sort={ state: 0, type: '' }; }else{ sort = JSON.parse(sessionStorage.getItem('sort')) } //sort = JSON.parse(sessionStorage.getItem('sort')) || { state: 0, type: '' };//排序 switch (sort.state) { case 1: d.sort(function (a, b) { return a[sort.type] - b[sort.type] }); break; case 2: d.sort(function (a, b) { return b[sort.type] - a[sort.type] }); break; default: d = JSON.parse(sessionStorage.getItem('originalD')) || d; //console.log(JSON.parse(sessionStorage.getItem('originalD'))); } //if(!isCall)console.log(d,sort.state,sort.type) const _tableCSS = `width:100%;height:calc(100% - 30px);border:1px solid #f0f0f0; border-radius: 0 0 10px 10px; padding-bottom:10px; overflow: auto; box-sizing: border-box; font-size: 14px; color:#505459; margin-top:30px; background-color:#fff;` let html = `
      • ${(() => { let el = ''; for (let i = 0; i < c.length; i++) { el += `
      • ${c[i].title}
        • `; } return el })()}
      • ${(() => { let el = ''; if(d.length!=0){ for (let i = 0; i < d.length; i++) { el += `
      • ${(() => { let ele = ''; for (let j = 0; j < c.length; j++) { ele += `
      • ${(()=>{ let temp = o.changeVal[c[j].key]?o.changeVal[c[j].key](d[i][c[j].key]):d[i][c[j].key] return (temp==9999)?'-':(temp+(o.unit[c[j].key]?o.unit[c[j].key]:'')) })()}
        • `; } return ele } )()}
      • `; } }else{ el = `
    • ☁
      暂无数据
      • ` } return el })()}
    ` $(DOM).html(html) //添加排序元素 $(".listTableHead>li").append(`
    `) init() //添加样式 function addTableCss() { $(".listTableHead>li").css({ cursor: "pointer", userSelect: "none", transition: "all .2s linear", }) $("#listTableWrapper>li>ul").css({ display: "flex" }) $("#listTableWrapper>li>ul").eq(0).children('li').css({ backgroundColor: "#fafafa", fontWeight: "bold", height: "40px" }) $("#listTableWrapper>li>ul").css({ display: "flex" }) let allWidthPe=0,allWidthPx=0,allLength=0; c.forEach(item=>{ if(item.width){ ++allLength; if(item.width.indexOf('%')!=-1){ allWidthPe+=item.width.replace('%','')*1 }else{ allWidthPx+=item.width.replace('px','')*1 } } }) //console.log((100-allWidthPe)/(c.length-allLength) + '%', allWidthPx+'px',allWidthPe,allWidthPx,allLength) $("#listTableWrapper>li>ul>li").css({ width: `calc(${(100-allWidthPe)/(c.length-allLength) + '%'} - ${allWidthPx+'px'}`, width:100/c.length+ '%', //width:(100-allWidthPe)/(c.length-allLength) + '%' - allWidthPx+'px', width:'12.5%', //width:`calc(100% - ${allWidthPx+'px'}）/(c.length-allLength) + '%'`, height: "30px", display: "flex", justifyContent: "center", alignItems: "center", borderBottom: "1px solid #f0f0f0", whiteSpace: "nowrap", }) //$("#listTableWrapper>li>ul>li:nth-child(1)").css({ //width:'200px', //backgroundColor: "#bfa", //}) //自定义列宽 c.forEach((item,index)=>{ if(item.width){ $(`#listTableWrapper>li>ul>li:nth-child(${index+1})`).css({ width:'200px', }) } }) $("#listTableWrapper>li:gt(0)>ul").css({ transition: "all .2s linear" }) } //自定义列宽 function customColW(k,w){} // hover------------------- function hoverMove() { //列表头部移入移出 $(".listTableHead>li").hover(function () { // 鼠标移入时的处理逻辑 $(this).css("background-color", "#efefef") }, function () { // 鼠标移出时的处理逻辑 $(this).css("background-color", "#fafafa") }); //列表详情移入移出 //除第一个li其他选中 $("#listTableWrapper>li:gt(0)>ul").hover(function () { // 鼠标移入时的处理逻辑 if ($(this).children().last().text() !== "稳定") $(this).css("background-color", "#fafafa") }, function () { // 鼠标移出时的处理逻辑 if ($(this).children().last().text() !== "稳定") $(this).css("background-color", "#fff") }); //关闭hover并添加列表背景色 d.forEach((item,index)=>{ for(let key in o.status){ if (item.hasOwnProperty(key)) { $.each(o.status[key], function(k, vf) { switch(k){ case '1':if(vf(item[key])){ $(`#listTableWrapper>li:nth-child(${index+2})>ul`).off('mouseenter mouseleave'); $(`#listTableWrapper>li:nth-child(${index+2})>ul`).css({ backgroundColor: "#fff2e8", });};break; case '2':if(vf(item[key])){ $(`#listTableWrapper>li:nth-child(${index+2})>ul`).off('mouseenter mouseleave'); $(`#listTableWrapper>li:nth-child(${index+2})>ul`).css({ backgroundColor: "#ffc2c0", });};break; } }); } } //$(`#listTableWrapper>li:nth-child(${index+1})>ul`) }) } //排序点击事件 $('.listTableHead>li').off('click.sortEvent') $('.listTableHead>li').on('click', sortEvent); function sortEvent() { if (sort.type == this.dataset.type) { if (sort.state < 2) { sort.state += 1 } else { sort.state = 0 } } else { sort.state = 1; sort.type = this.dataset.type; } switch (sort.state) { case 1: d.sort(function (a, b) { return a[sort.type] - b[sort.type] }); break; case 2: d.sort(function (a, b) { return b[sort.type] - a[sort.type] }); break; } sessionStorage.setItem('sort', JSON.stringify({ state: sort.state, type: sort.type })) changeSortCSS(); table(DOM, d, c, true, o) } // 切换排序样式 function changeSortCSS() { $(".listTableHead>li>div").each(function () { $(this).children().eq(0).css("border-bottom-color", "#b1b1b1"); $(this).children().eq(1).css("border-top-color", "#b1b1b1"); }) if (sort.state != 0) { $(".listTableHead>li").each(function () { if ($(this).attr("data-type") == sort.type) { switch (sort.state) { case 1: $(this).children().children().eq(0).css("border-bottom-color", "#1677ff"); $(this).children().children().eq(1).css("border-top-color", "#b1b1b1"); break; case 2: $(this).children().children().eq(0).css("border-bottom-color", "#b1b1b1"); $(this).children().children().eq(1).css("border-top-color", "#1677ff"); break; } } }) } } // 初始化 function init() { addTableCss();//添加样式 hoverMove();//添加hover事件 changeSortCSS();//排序样式 } } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- })();