mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 01:21:56 +08:00
更新 ServerCard 组件,增强流量周期数据匹配逻辑,添加调试日志以便于排查问题,确保服务器ID匹配的准确性,提升数据展示的可靠性和可读性。
This commit is contained in:
parent
dfb648a32b
commit
31ff14b6f6
@ -66,9 +66,18 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
|
||||
|
||||
// 获取匹配当前服务器的流量计费周期
|
||||
const getServerCycleData = () => {
|
||||
if (!cycleStats) return null
|
||||
if (!cycleStats) {
|
||||
console.log('cycleStats is null or undefined');
|
||||
return null;
|
||||
}
|
||||
|
||||
// 确保服务器ID的所有可能形式
|
||||
const serverId = String(serverInfo.id);
|
||||
const serverIdNum = Number(serverInfo.id);
|
||||
|
||||
console.log(`ServerCard: Looking for server "${serverInfo.name}" with ID:`, serverId, 'type:', typeof serverInfo.id);
|
||||
console.log('All cycleStats:', cycleStats);
|
||||
|
||||
const serverId = serverInfo.id.toString()
|
||||
const matchedCycles: Array<{
|
||||
name: string;
|
||||
from: string;
|
||||
@ -80,15 +89,60 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
|
||||
}> = []
|
||||
|
||||
// 遍历所有流量周期,查找匹配当前服务器ID的数据
|
||||
Object.values(cycleStats).forEach(cycleData => {
|
||||
if (
|
||||
cycleData.server_name &&
|
||||
cycleData.server_name[serverId] &&
|
||||
cycleData.transfer &&
|
||||
cycleData.transfer[serverId] !== undefined
|
||||
) {
|
||||
const transfer = cycleData.transfer[serverId]
|
||||
const progress = (transfer / cycleData.max) * 100
|
||||
Object.entries(cycleStats).forEach(([cycleId, cycleData]) => {
|
||||
console.log(`\nChecking cycle ${cycleId}:`, cycleData.name);
|
||||
|
||||
if (!cycleData.server_name) {
|
||||
console.log(` No server_name in this cycle`);
|
||||
return;
|
||||
}
|
||||
|
||||
const serverIdsInCycle = Object.keys(cycleData.server_name);
|
||||
console.log(` Server IDs in this cycle:`, serverIdsInCycle);
|
||||
|
||||
// 检查各种可能的ID形式
|
||||
let matchedId = null;
|
||||
|
||||
// 1. 直接匹配字符串ID
|
||||
if (serverIdsInCycle.includes(serverId)) {
|
||||
matchedId = serverId;
|
||||
console.log(` ✓ Direct string match: ${serverId}`);
|
||||
}
|
||||
// 2. 尝试匹配数字ID (如果API返回的是数字ID)
|
||||
else if (serverIdsInCycle.includes(String(serverIdNum))) {
|
||||
matchedId = String(serverIdNum);
|
||||
console.log(` ✓ Numeric match: ${serverIdNum}`);
|
||||
}
|
||||
// 3. 通过名称匹配
|
||||
else {
|
||||
// 检查名称是否匹配
|
||||
const serverNames = Object.entries(cycleData.server_name);
|
||||
for (const [id, name] of serverNames) {
|
||||
if (name === serverInfo.name) {
|
||||
matchedId = id;
|
||||
console.log(` ✓ Name match: ${serverInfo.name} -> ID: ${id}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果还没匹配,尝试循环比较所有ID
|
||||
if (!matchedId) {
|
||||
for (const id of serverIdsInCycle) {
|
||||
console.log(` Comparing IDs: ${id} vs ${serverId}`);
|
||||
if (Number(id) === serverIdNum) {
|
||||
matchedId = id;
|
||||
console.log(` ✓ Found match after conversion: ${id}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 如果找到匹配的ID,且有对应的传输数据
|
||||
if (matchedId && cycleData.transfer && cycleData.transfer[matchedId] !== undefined) {
|
||||
console.log(` ✓ Found valid transfer data for server ${serverInfo.name} (ID: ${matchedId}) in cycle ${cycleId}`);
|
||||
const transfer = cycleData.transfer[matchedId];
|
||||
const progress = (transfer / cycleData.max) * 100;
|
||||
|
||||
matchedCycles.push({
|
||||
name: cycleData.name,
|
||||
@ -96,13 +150,16 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
|
||||
to: cycleData.to,
|
||||
max: cycleData.max,
|
||||
transfer: transfer,
|
||||
nextUpdate: cycleData.next_update?.[serverId] || "",
|
||||
nextUpdate: cycleData.next_update?.[matchedId] || "",
|
||||
progress: progress
|
||||
})
|
||||
});
|
||||
} else {
|
||||
console.log(` ✗ No valid transfer data found for this server in this cycle`);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return matchedCycles.length > 0 ? matchedCycles : null
|
||||
console.log('Matched cycles result:', matchedCycles);
|
||||
return matchedCycles.length > 0 ? matchedCycles : null;
|
||||
}
|
||||
|
||||
const serverCycleData = getServerCycleData()
|
||||
@ -171,7 +228,7 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
|
||||
</div>
|
||||
|
||||
{/* 添加流量使用统计 */}
|
||||
{serverCycleData && (
|
||||
{serverCycleData && serverCycleData.length > 0 && (
|
||||
<div className="mt-3">
|
||||
{serverCycleData.map((cycle, index) => (
|
||||
<div key={index} className="mt-3 bg-muted/30 rounded-md p-2">
|
||||
@ -198,6 +255,11 @@ export default function ServerCard({ now, serverInfo, cycleStats }: ServerCardPr
|
||||
style={{ width: `${Math.min(cycle.progress, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
{cycle.nextUpdate && (
|
||||
<div className="mt-1 text-[10px] text-muted-foreground">
|
||||
{t("cycleTransfer.nextUpdate")}: {new Date(cycle.nextUpdate).toLocaleTimeString()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
@ -57,6 +57,9 @@ export function ServiceTracker({ serverList }: { serverList: NezhaServer[] }) {
|
||||
)
|
||||
}
|
||||
|
||||
// 调试日志
|
||||
console.log('cycle_transfer_stats data:', serviceData?.data?.cycle_transfer_stats);
|
||||
|
||||
return (
|
||||
<div className="mt-4 w-full mx-auto ">
|
||||
{serviceData.data.cycle_transfer_stats && (
|
||||
|
@ -12,7 +12,7 @@ import { SORT_ORDERS, SORT_TYPES } from "@/context/sort-context"
|
||||
import { useSort } from "@/hooks/use-sort"
|
||||
import { useStatus } from "@/hooks/use-status"
|
||||
import { useWebSocketContext } from "@/hooks/use-websocket-context"
|
||||
import { fetchServerGroup } from "@/lib/nezha-api"
|
||||
import { fetchServerGroup, fetchService } from "@/lib/nezha-api"
|
||||
import { cn, formatNezhaInfo } from "@/lib/utils"
|
||||
import { NezhaWebsocketResponse } from "@/types/nezha-api"
|
||||
import { ServerGroup } from "@/types/nezha-api"
|
||||
@ -111,6 +111,33 @@ export default function Servers() {
|
||||
?.map((item: ServerGroup) => item.group.name) || []),
|
||||
]
|
||||
|
||||
// 获取cycle_transfer_stats数据
|
||||
const { data: serviceData } = useQuery({
|
||||
queryKey: ["service"],
|
||||
queryFn: () => fetchService(),
|
||||
refetchOnMount: true,
|
||||
refetchOnWindowFocus: true,
|
||||
refetchInterval: 10000,
|
||||
})
|
||||
|
||||
const cycleTransferStats = serviceData?.data?.cycle_transfer_stats
|
||||
console.log('Server.tsx - cycleTransferStats:', cycleTransferStats);
|
||||
|
||||
// 检查服务器ID是否匹配
|
||||
if (cycleTransferStats && nezhaWsData?.servers) {
|
||||
console.log('Server IDs in cycleTransferStats:');
|
||||
Object.entries(cycleTransferStats).forEach(([cycleId, cycleData]) => {
|
||||
if (cycleData.server_name) {
|
||||
console.log(`Cycle ${cycleId} server IDs:`, Object.keys(cycleData.server_name));
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Server IDs from websocket:');
|
||||
nezhaWsData.servers.forEach(server => {
|
||||
console.log(`Server ${server.name} ID:`, server.id, typeof server.id);
|
||||
});
|
||||
}
|
||||
|
||||
if (!connected && !lastMessage) {
|
||||
return (
|
||||
<div className="flex flex-col items-center min-h-96 justify-center ">
|
||||
@ -376,7 +403,12 @@ export default function Servers() {
|
||||
{inline === "0" && (
|
||||
<section ref={containerRef} className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6 server-card-list">
|
||||
{filteredServers.map((serverInfo) => (
|
||||
<ServerCard now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
|
||||
<ServerCard
|
||||
now={nezhaWsData.now}
|
||||
key={serverInfo.id}
|
||||
serverInfo={serverInfo}
|
||||
cycleStats={cycleTransferStats}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
|
Loading…
x
Reference in New Issue
Block a user