接入统计进度
This commit is contained in:
@@ -16,20 +16,38 @@ export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
|
||||
|
||||
const parseMin = (t: string) => parseInt(t?.match(/(\d+)/)?.[1] || "0");
|
||||
|
||||
const [minutes, setMinutes] = React.useState(parseMin(match.event_time));
|
||||
const [seconds, setSeconds] = React.useState(0);
|
||||
const lastServerMinRef = React.useRef(parseMin(match.event_time));
|
||||
// 解析初始时间逻辑:(event_status 分钟 - event_time 分钟) : event_time 秒
|
||||
const getInitialTime = () => {
|
||||
const statusIdx = parseInt(match.event_status) || 0;
|
||||
const timeParts = match.event_time?.split(":") || [];
|
||||
const tMin = parseInt(timeParts[0]) || 0;
|
||||
const tSec = parseInt(timeParts[1]) || 0;
|
||||
|
||||
// 如果 event_status 是纯数字分钟数
|
||||
if (!isNaN(statusIdx) && /^\d+$/.test(match.event_status)) {
|
||||
return { min: Math.max(0, statusIdx - tMin), sec: tSec };
|
||||
}
|
||||
// 回退到解析 event_time 中的数字
|
||||
return { min: tMin || parseMin(match.event_time), sec: tSec };
|
||||
};
|
||||
|
||||
const initial = getInitialTime();
|
||||
const [minutes, setMinutes] = React.useState(initial.min);
|
||||
const [seconds, setSeconds] = React.useState(initial.sec);
|
||||
const lastServerMatchRef = React.useRef(
|
||||
`${match.event_status}-${match.event_time}`
|
||||
);
|
||||
|
||||
// 服务器时间同步
|
||||
React.useEffect(() => {
|
||||
const serverMin = parseMin(match.event_time);
|
||||
// 只有当服务器分钟数变化时,才同步并重置秒数
|
||||
if (serverMin !== lastServerMinRef.current) {
|
||||
setMinutes(serverMin);
|
||||
setSeconds(0);
|
||||
lastServerMinRef.current = serverMin;
|
||||
const currentKey = `${match.event_status}-${match.event_time}`;
|
||||
if (currentKey !== lastServerMatchRef.current) {
|
||||
const updated = getInitialTime();
|
||||
setMinutes(updated.min);
|
||||
setSeconds(updated.sec);
|
||||
lastServerMatchRef.current = currentKey;
|
||||
}
|
||||
}, [match.event_time]);
|
||||
}, [match.event_time, match.event_status]);
|
||||
|
||||
// 本地秒级自增计时器
|
||||
React.useEffect(() => {
|
||||
@@ -114,13 +132,11 @@ export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
|
||||
</View>
|
||||
|
||||
<View style={styles.timeInfoRow}>
|
||||
{match.event_status &&
|
||||
match.event_status.toLowerCase() !==
|
||||
displayTime?.toLowerCase().replace("'", "") && (
|
||||
<ThemedText style={styles.statusLabel}>
|
||||
{match.event_status}
|
||||
</ThemedText>
|
||||
)}
|
||||
{match.event_status && (
|
||||
<ThemedText style={styles.statusLabel}>
|
||||
{match.event_status}
|
||||
</ThemedText>
|
||||
)}
|
||||
<ThemedText style={styles.timeText}>{displayTime}</ThemedText>
|
||||
</View>
|
||||
|
||||
|
||||
@@ -26,6 +26,54 @@ export function StatsCard({ match, isDark }: StatsCardProps) {
|
||||
const [cardSwitch, setCardSwitch] = useState(true);
|
||||
const [showInfo, setShowInfo] = useState(false);
|
||||
|
||||
// 实时时间与进度计算
|
||||
const getInitialMinutes = () => {
|
||||
const statusIdx = parseInt(match.event_status) || 0;
|
||||
const timeParts = match.event_time?.split(":") || [];
|
||||
const tMin = parseInt(timeParts[0]) || 0;
|
||||
const tSec = parseInt(timeParts[1]) || 0;
|
||||
|
||||
if (!isNaN(statusIdx) && /^\d+$/.test(match.event_status)) {
|
||||
return { min: Math.max(0, statusIdx - tMin), sec: tSec };
|
||||
}
|
||||
return { min: tMin, sec: tSec };
|
||||
};
|
||||
|
||||
const initial = getInitialMinutes();
|
||||
const [minutes, setMinutes] = useState(initial.min);
|
||||
const [seconds, setSeconds] = useState(initial.sec);
|
||||
|
||||
React.useEffect(() => {
|
||||
const updated = getInitialMinutes();
|
||||
setMinutes(updated.min);
|
||||
setSeconds(updated.sec);
|
||||
}, [match.event_time, match.event_status]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const statusStr = match.event_status?.toLowerCase() || "";
|
||||
const isLive =
|
||||
String(match.event_live) === "1" ||
|
||||
statusStr.includes("live") ||
|
||||
(parseInt(statusStr) > 0 && parseInt(statusStr) < 120);
|
||||
|
||||
if (!isLive || statusStr.includes("ht")) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setSeconds((s) => {
|
||||
if (s >= 59) {
|
||||
setMinutes((m) => m + 1);
|
||||
return 0;
|
||||
}
|
||||
return s + 1;
|
||||
});
|
||||
}, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, [match.event_key, match.event_live, match.event_status]);
|
||||
|
||||
const displayTime = `${minutes}:${seconds.toString().padStart(2, "0")}`;
|
||||
const totalSeconds = minutes * 60 + seconds;
|
||||
const progressPercent = Math.min(100, (totalSeconds / (90 * 60)) * 100);
|
||||
|
||||
// 从 statistics 中提取数据
|
||||
const stats = match.statistics || [];
|
||||
const getStatValue = (type: string) => {
|
||||
@@ -194,12 +242,23 @@ export function StatsCard({ match, isDark }: StatsCardProps) {
|
||||
|
||||
{/* Time Progress Slider */}
|
||||
<View style={styles.sliderContainer}>
|
||||
<ThemedText style={styles.currentTime}>46:53</ThemedText>
|
||||
<ThemedText style={styles.currentTime}>{displayTime}</ThemedText>
|
||||
<View style={styles.trackContainer}>
|
||||
<View style={[styles.track, isDark && { backgroundColor: "#333" }]} />
|
||||
<View style={[styles.filledTrack, { width: "55%" }]} />
|
||||
<View
|
||||
style={[styles.filledTrack, { width: `${progressPercent}%` }]}
|
||||
/>
|
||||
<View style={[styles.thumb, { left: "0%" }]} />
|
||||
<View style={[styles.thumb, { left: "55%" }]} />
|
||||
<View
|
||||
style={[
|
||||
styles.thumb,
|
||||
{
|
||||
left: `${progressPercent}%`,
|
||||
backgroundColor: "#FFAB00",
|
||||
borderColor: "#FFF",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
styles.thumb,
|
||||
|
||||
Reference in New Issue
Block a user