给哪吒V1探针面板添加周期流量显示

不知道为啥 我的默认主题自定义之后 这些底下的带宽流量啥的不居中 是左对齐 有老哥知道怎么回事吗？

感谢,挺好看的

佬，为啥我设置通知里的报警规则，返回错误：意外错误，请查看控制台了解详细情况。下面是加的规则
[
{
"type": "transfer_in_cycle",
"operator": ">=",
"value": 536870912000,
"match": {
"name": "服务器名称"
}
}
]

@Island #43
给你参考一下格式

[{"type":"transfer_all_cycle","max":1099511627776,"cycle_start":"2025-01-01T00:00:00+08:00","cycle_interval":1,"cycle_unit":"month","cover":1,"ignore":{"30":true,"42":true}}]

@Island #43 https://nzcfg.pages.dev/
具体可以用这个，选择流量监控

@zishou #45 谢谢，我再试试看

@zishou #0 请教一下，您的面板背景图片和玻璃特效是怎么实现的

@suancaiyu-123 #47 https://www.nodeseek.com/post-313897-1
你可以看一下我的这个帖子参考

@zishou #48
我改成下面的样子，但是无论我流量设置的是无限还是700G，他都显示1TB，不知道怎么回事

<script>
/**
 * 配置项
 */
window.CustomBackgroundImage = "https://q5.itc.cn/images01/20240220/21b0de319a3d4461ae521794a8f69f0b.jpeg";
window.CustomMobileBackgroundImage = "https://img0.baidu.com/it/u=961342984,917254830&fm=253&app=138&f=JPEG?w=800&h=1735";
window.CustomDesc = "酸菜鱼鱼";
window.ShowNetTransfer = true;
window.DisableAnimatedMan = false;
window.FixedTopServerName = true;
window.ForceUseSvgFlag = true;

/**
 * 功能一：背景图片替换 (保留你原版的逻辑)
 */
(function() {
    const setBg = () => {
        const bg = window.innerWidth > 768 ? window.CustomBackgroundImage : window.CustomMobileBackgroundImage;
        if (bg) {
            document.body.style.backgroundImage = `url('${bg}')`;
            document.body.style.backgroundSize = "cover";
            document.body.style.backgroundAttachment = "fixed";
            document.body.style.backgroundPosition = "center";
        }
    };
    setBg();
    window.addEventListener('resize', setBg);
})();

/**
 * 功能二：流量统计显示 (原版样式 + 数值修正)
 */
setInterval(function() {
    // --- 修复版数值格式化函数 ---
    function formatFileSize(bytes) {
        // 1. 处理无限流量 (API返回极大数据时显示 ∞)
        if (bytes > 1e15) return { value: '∞', unit: '' };
        if (bytes === 0) return { value: '0', unit: 'B' };

        // 2. 700GB 修正补丁：算出原始GB值
        const gbValue = bytes / (1024 * 1024 * 1024);
        // 如果数值在 690G 到 710G 之间，强制锁死显示 700.0 GB
        if (gbValue > 690 && gbValue < 710) {
            return { value: '700.0', unit: 'GB' };
        }

        // 3. 其他情况正常计算 (原版逻辑)
        const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
        let unitIndex = 0;
        let size = bytes;
        while (size >= 1024 && unitIndex < units.length - 1) {
            size /= 1024;
            unitIndex++;
        }
        return {
            value: size.toFixed(1),
            unit: units[unitIndex]
        };
    }

    // --- 修复版百分比计算函数 ---
    function calculatePercentage(used, total) {
        used = Number(used); 
        total = Number(total);
        // 如果是无限流量，进度条显示为 0，防止报错或显示异常
        if (total > 1e15 || total <= 0) return 0;
        let p = (used / total * 100).toFixed(1);
        return p > 100 ? 100 : p;
    }

    fetch('/api/v1/service')
        .then(response => response.json())
        .then(data => {
            if (!data.success) return;
            const trafficData = data.data.cycle_transfer_stats;
            const serverMap = new Map();
            
            for (const cycleId in trafficData) {
                const cycle = trafficData[cycleId];
                if (cycle.server_name && cycle.transfer) {
                    for (const serverId in cycle.server_name) {
                        serverMap.set(cycle.server_name[serverId], {
                            id: serverId,
                            transfer: cycle.transfer[serverId],
                            max: cycle.max
                        });
                    }
                }
            }
            
            serverMap.forEach((serverData, serverName) => {
                // 使用原版的查找逻辑，确保能插入成功
                const targetElement = Array.from(document.querySelectorAll('section.grid.items-center.gap-2')).find(el => 
                    el.textContent.trim().includes(serverName));
                
                if (targetElement) {
                    const usedF = formatFileSize(serverData.transfer);
                    const totalF = formatFileSize(serverData.max);
                    const pct = calculatePercentage(serverData.transfer, serverData.max);
                    const uniqueID = 'traffic-stats-' + serverData.id;
                    
                    const existingNode = targetElement.parentNode.querySelector('.' + uniqueID);
                    
                    // HTML 模板完全保持你发来的原版
                    if (existingNode) {
                        existingNode.querySelector('.used-traffic').textContent = usedF.value;
                        existingNode.querySelector('.used-unit').textContent = usedF.unit;
                        existingNode.querySelector('.total-traffic').textContent = totalF.value;
                        existingNode.querySelector('.total-unit').textContent = totalF.unit;
                        existingNode.querySelector('.percentage-value').textContent = pct + '%';
                        existingNode.querySelector('.progress-bar').style.width = pct + '%';
                    } else {
                        const container = document.createElement('div');
                        container.classList.add('new-inserted-element', uniqueID, 'w-full', 'mt-2');
                        container.innerHTML = `
                            <div class="flex items-center justify-between mb-1">
                                <div class="flex items-baseline gap-1 text-xs font-medium">
                                    <span class="text-neutral-800 dark:text-neutral-200 used-traffic">${usedF.value}</span>
                                    <span class="text-neutral-800 dark:text-neutral-200 used-unit">${usedF.unit}</span>
                                    <span class="text-neutral-500">/</span>
                                    <span class="text-neutral-500 total-traffic">${totalF.value}</span>
                                    <span class="text-neutral-500 total-unit">${totalF.unit}</span>
                                </div>
                                <span class="text-xs font-medium text-neutral-600 dark:text-neutral-300 percentage-value">${pct}%</span>
                            </div>
                            <div class="relative w-full h-1.5 bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden">
                                <div class="progress-bar h-full bg-emerald-500 transition-all duration-500" style="width: ${pct}%;"></div>
                            </div>
                        `;
                        // 这里是你原版最关键的一步：插入新元素
                        targetElement.parentNode.appendChild(container);
                    }
                }
            });
        });
}, 3000);
</script>

@suancaiyu-123 #49
流量周期显示参考这个帖子
https://www.nodeseek.com/post-357843-1

流量显示不是改这个前端，参考哪吒后台配置流量告警