diff --git a/web/css/app.css b/web/css/app.css index 0480d0b..73f54d2 100644 --- a/web/css/app.css +++ b/web/css/app.css @@ -152,7 +152,12 @@ body.light .gauge-half .needle{background:linear-gradient(var(--text),var(--text .bucket span{display:block;width:100%;background:var(--accent);border-radius:4px 4px 6px 6px;height:var(--h);align-self:flex-end;transition:height .8s cubic-bezier(.4,0,.2,1),background .3s} .bucket[data-lv=warn] span{background:var(--warn)} .bucket[data-lv=bad] span{background:var(--danger)} -.bucket label{position:absolute;left:0;right:0;bottom:2px;font-size:10px;text-align:center;color:var(--text-dim);pointer-events:none} +.bucket label{position:absolute;left:0;right:0;bottom:2px;text-align:center;pointer-events:none; + /* 统一为与仪表盘数值相同的风格 */ + font-family:ui-monospace,SFMono-Regular,Menlo,monospace; + font-size:12px;font-weight:600;letter-spacing:.25px; + font-variant-numeric:tabular-nums;color:var(--text); +} .bucket:hover label{color:var(--text)} /* 居中联通电信移动列 */ diff --git a/web/js/app.js b/web/js/app.js index 852e916..4b419f2 100644 --- a/web/js/app.js +++ b/web/js/app.js @@ -43,7 +43,7 @@ async function fetchData(){ if(typeof s.time_10010 === 'number') H.cu.push(s.time_10010); if(typeof s.time_189 === 'number') H.ct.push(s.time_189); if(typeof s.time_10086 === 'number') H.cm.push(s.time_10086); - const MAX=120; // 保留约 120*4s ≈ 8 分钟 + const MAX=256; // 保留最多 256 条 ['cu','ct','cm'].forEach(k=>{ if(H[k].length>MAX) H[k].splice(0,H[k].length-MAX); }); // 指标历史 (仅在线时记录) if(!S.metricHist[key]) S.metricHist[key] = {cpu:[],mem:[],hdd:[]}; @@ -59,7 +59,7 @@ async function fetchData(){ // 负载历史 (记录 load_1 / load_5 / load_15) if(!S.loadHist[key]) S.loadHist[key] = {l1:[],l5:[],l15:[]}; const LH = S.loadHist[key]; - const pushLoad = (arr,val)=>{ if(typeof val === 'number' && val >= 0){ arr.push(val); if(arr.length>120) arr.splice(0,arr.length-120); } }; + const pushLoad = (arr,val)=>{ if(typeof val === 'number' && val >= 0){ arr.push(val); if(arr.length>256) arr.splice(0,arr.length-256); } }; pushLoad(LH.l1, s.load_1); pushLoad(LH.l5, s.load_5); pushLoad(LH.l15, s.load_15); @@ -327,7 +327,7 @@ function openDetail(i){ ● 联通 (${num(s.time_10010)}ms) ● 电信 (${num(s.time_189)}ms) ● 移动 (${num(s.time_10086)}ms) - (~${S.hist[key]?S.hist[key].cu.length:0} 条) + (~${(S.hist[key]?Math.max(S.hist[key].cu.length, S.hist[key].ct.length, S.hist[key].cm.length):0)} 条) `; } else { @@ -369,10 +369,10 @@ function openDetail(i){
- ● load1 - ● load5 - ● load15 - (~${(S.loadHist[key]?S.loadHist[key].l1.length:0)} 条) + ● load1 (${s.load_1==-1?'–':Math.max(0,(s.load_1||0)).toFixed(2)}) + ● load5 (${s.load_5==-1?'–':Math.max(0,(s.load_5||0)).toFixed(2)}) + ● load15 (${s.load_15==-1?'–':Math.max(0,(s.load_15||0)).toFixed(2)}) + (~${(S.loadHist[key]?Math.max(S.loadHist[key].l1.length, S.loadHist[key].l5.length, S.loadHist[key].l15.length):0)} 条)
@@ -508,6 +508,13 @@ function updateDetailMetrics(key){ const cuE1=document.getElementById('lat-cu'); if(cuE1) cuE1.textContent = num(s.time_10010)+'ms'; const ctE1=document.getElementById('lat-ct'); if(ctE1) ctE1.textContent = num(s.time_189)+'ms'; const cmE1=document.getElementById('lat-cm'); if(cmE1) cmE1.textContent = num(s.time_10086)+'ms'; + // 刷新联通/电信/移动历史计数（取三者最大长度） + const latCntEl = document.getElementById('lat-count'); + if(latCntEl){ + const H = S.hist[key]; + const n = H ? Math.max(H.cu.length||0, H.ct.length||0, H.cm.length||0) : 0; + latCntEl.textContent = n; + } // 资源动态刷新 const memLineEl = document.getElementById('mem-line'); if(memLineEl){ @@ -532,6 +539,12 @@ function updateDetailMetrics(key){ } const ioReadEl = document.getElementById('io-read'); if(ioReadEl){ const v = (typeof s.io_read==='number')? s.io_read:0; ioReadEl.textContent = humanRateMinMBFromB(v); ioReadEl.style.color = v>100*1000*1000? 'var(--danger)':''; } const ioWriteEl = document.getElementById('io-write'); if(ioWriteEl){ const v = (typeof s.io_write==='number')? s.io_write:0; ioWriteEl.textContent = humanRateMinMBFromB(v); ioWriteEl.style.color = v>100*1000*1000? 'var(--danger)':''; } + // 动态刷新负载标签与条数 + const l1El = document.getElementById('load1-val'); if(l1El) l1El.textContent = s.load_1==-1?'–':Math.max(0,(s.load_1||0)).toFixed(2); + const l5El = document.getElementById('load5-val'); if(l5El) l5El.textContent = s.load_5==-1?'–':Math.max(0,(s.load_5||0)).toFixed(2); + const l15El = document.getElementById('load15-val'); if(l15El) l15El.textContent = s.load_15==-1?'–':Math.max(0,(s.load_15||0)).toFixed(2); + const cntEl = document.getElementById('load-count'); + if(cntEl){ const L=S.loadHist[key]; const n = L? Math.max(L.l1.length, L.l5.length, L.l15.length):0; cntEl.textContent = n; } } function startDetailAutoUpdate(){ stopDetailAutoUpdate(); S._detailTimer = setInterval(()=>{ if(S._openDetailKey) updateDetailMetrics(S._openDetailKey); }, 1000); } function stopDetailAutoUpdate(){ if(S._detailTimer){ clearInterval(S._detailTimer); S._detailTimer=null; } }