fix: 仪表盘动画改为模块方法 _animateNumber (避免全局作用域问题)
This commit is contained in:
@@ -1,25 +1,25 @@
|
||||
/* ── 数字跳动动画 ── */
|
||||
function animateNumber(el, newVal, decimals, suffix) {
|
||||
var oldVal = parseFloat(el.getAttribute('data-val') || newVal);
|
||||
if (oldVal === newVal) { el.textContent = newVal.toFixed(decimals) + suffix; return; }
|
||||
el.setAttribute('data-val', newVal);
|
||||
var start = performance.now();
|
||||
var duration = 900;
|
||||
function step(ts) {
|
||||
var p = Math.min((ts - start) / duration, 1);
|
||||
var eased = 1 - Math.pow(1 - p, 3); // ease-out
|
||||
el.textContent = (oldVal + (newVal - oldVal) * eased).toFixed(decimals) + suffix;
|
||||
if (p < 1) requestAnimationFrame(step);
|
||||
}
|
||||
requestAnimationFrame(step);
|
||||
}
|
||||
|
||||
window.DashboardModule = {
|
||||
ws: null,
|
||||
reconnectTimer: null,
|
||||
reconnectDelay: 1000,
|
||||
charts: {},
|
||||
|
||||
_animateNumber: function(el, newVal, decimals, suffix) {
|
||||
var self = this;
|
||||
var oldVal = parseFloat(el.getAttribute('data-val') || newVal);
|
||||
if (Math.abs(oldVal - newVal) < 0.05) { el.textContent = newVal.toFixed(decimals) + suffix; return; }
|
||||
el.setAttribute('data-val', newVal);
|
||||
var start = performance.now();
|
||||
var duration = 900;
|
||||
function step(ts) {
|
||||
var p = Math.min((ts - start) / duration, 1);
|
||||
var eased = 1 - Math.pow(1 - p, 3);
|
||||
el.textContent = (oldVal + (newVal - oldVal) * eased).toFixed(decimals) + suffix;
|
||||
if (p < 1) requestAnimationFrame(step);
|
||||
}
|
||||
requestAnimationFrame(step);
|
||||
},
|
||||
|
||||
init: function() {
|
||||
var self = this;
|
||||
|
||||
@@ -89,7 +89,7 @@ window.DashboardModule = {
|
||||
// ── 内存 ──
|
||||
if (sys.memory) {
|
||||
var m = sys.memory.percent || 0;
|
||||
var el = document.getElementById('d-mem'); if (el) animateNumber(el, m, 1, '%');
|
||||
var el = document.getElementById('d-mem'); if (el) self._animateNumber(el, m, 1, '%');
|
||||
el = document.getElementById('d-mem-detail');
|
||||
if (el) el.textContent = (sys.memory.used_gb || 0).toFixed(1) + ' / ' + (sys.memory.total_gb || 0).toFixed(1) + ' GB';
|
||||
self.charts.mem.update(m);
|
||||
@@ -102,7 +102,7 @@ window.DashboardModule = {
|
||||
var load = (sys.cpu.load_avg && sys.cpu.load_avg[0]) ? sys.cpu.load_avg[0] : 0;
|
||||
cpuVal = Math.min(100, (load / (sys.cpu.cores || 1)) * 100);
|
||||
}
|
||||
var el = document.getElementById('d-cpu'); if (el) animateNumber(el, cpuVal, 0, '%');
|
||||
var el = document.getElementById('d-cpu'); if (el) self._animateNumber(el, cpuVal, 0, '%');
|
||||
self.charts.cpu.update(cpuVal);
|
||||
|
||||
if (sys.cpu.load_avg) {
|
||||
@@ -133,7 +133,7 @@ window.DashboardModule = {
|
||||
// ── 进程内存 ──
|
||||
if (sys.process && sys.process.memory_mb !== undefined) {
|
||||
var pm = sys.process.memory_mb || 0;
|
||||
var el = document.getElementById('d-proc-mem'); if (el) animateNumber(el, pm, 1, ' MB');
|
||||
var el = document.getElementById('d-proc-mem'); if (el) self._animateNumber(el, pm, 1, ' MB');
|
||||
self.charts.proc_mem.update(pm);
|
||||
}
|
||||
if (sys.process && sys.process.pid !== undefined) {
|
||||
|
||||
Reference in New Issue
Block a user