feat:131的一些修改
This commit is contained in:
parent
1928b112fb
commit
bab441979f
@ -54,10 +54,44 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
|
|||||||
// 添加状态来跟踪数据是否已经变化
|
// 添加状态来跟踪数据是否已经变化
|
||||||
const dataKeyRef = useRef<string>("");
|
const dataKeyRef = useRef<string>("");
|
||||||
|
|
||||||
|
// 添加状态来跟踪是否应该显示连线
|
||||||
|
const [shouldShowLines, setShouldShowLines] = useState(false);
|
||||||
|
|
||||||
|
// 监听 screenData.proxy_info.proxies[0].isLine 的变化
|
||||||
|
useEffect(() => {
|
||||||
|
const isLine = screenData?.proxy_info?.proxies?.[0]?.isLine;
|
||||||
|
setShouldShowLines(!!isLine);
|
||||||
|
|
||||||
|
// 如果 isLine 从 false 变为 true,重置连线索引并启动动画
|
||||||
|
if (isLine && currentLineIndex === -1 && lineConnections.length > 0) {
|
||||||
|
// 清除任何现有的动画定时器
|
||||||
|
if (animationTimerRef.current) {
|
||||||
|
clearTimeout(animationTimerRef.current);
|
||||||
|
animationTimerRef.current = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 启动连线动画
|
||||||
|
setTimeout(() => {
|
||||||
|
startLineAnimation(lineConnections);
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果 isLine 从 true 变为 false,重置连线索引
|
||||||
|
if (!isLine && currentLineIndex !== -1) {
|
||||||
|
setCurrentLineIndex(-1);
|
||||||
|
|
||||||
|
// 清除任何现有的动画定时器
|
||||||
|
if (animationTimerRef.current) {
|
||||||
|
clearTimeout(animationTimerRef.current);
|
||||||
|
animationTimerRef.current = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [screenData?.proxy_info?.proxies]);
|
||||||
|
|
||||||
// 处理代理数据
|
// 处理代理数据
|
||||||
const mainToData = useMemo(() => {
|
const mainToData = useMemo(() => {
|
||||||
// 使用新的数据结构
|
// 使用新的数据结构
|
||||||
const proxiesList = screenData?.proxy_info?.proxies ?? [{data:[{country_code: 'AI', ingress_country_code: 'AE'}], isLine: true}];
|
const proxiesList = screenData?.proxy_info?.proxies ?? [{data:[{country_code: 'AI', ingress_country_code: 'AE'}], isLine: false}];
|
||||||
// 初始化数据数组
|
// 初始化数据数组
|
||||||
const data: any = [];
|
const data: any = [];
|
||||||
|
|
||||||
@ -141,8 +175,8 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
|
|||||||
animationTimerRef.current = null;
|
animationTimerRef.current = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 启动连线动画
|
// 只有当 shouldShowLines 为 true 且有连线数据时才启动动画
|
||||||
if (connections.length > 0) {
|
if (shouldShowLines && connections.length > 0) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
startLineAnimation(connections);
|
startLineAnimation(connections);
|
||||||
}, 500); // 短暂延迟,确保点已经显示
|
}, 500); // 短暂延迟,确保点已经显示
|
||||||
@ -150,11 +184,11 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return data;
|
return data;
|
||||||
}, [screenData]);
|
}, [screenData, shouldShowLines]);
|
||||||
|
|
||||||
// 启动连线动画的函数
|
// 启动连线动画的函数
|
||||||
const startLineAnimation = (connections: {from: string, to: string}[]) => {
|
const startLineAnimation = (connections: {from: string, to: string}[]) => {
|
||||||
if (connections.length === 0) return;
|
if (connections.length === 0 || !shouldShowLines) return;
|
||||||
|
|
||||||
let index = 0;
|
let index = 0;
|
||||||
|
|
||||||
@ -205,11 +239,14 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
|
|||||||
// 实现数据处理
|
// 实现数据处理
|
||||||
const solidData: LinesType[] = [["main", []]]; // 使用"main"替代startCountry.country_code
|
const solidData: LinesType[] = [["main", []]]; // 使用"main"替代startCountry.country_code
|
||||||
|
|
||||||
|
// 只有当 shouldShowLines 为 true 时才显示连线
|
||||||
|
if (shouldShowLines) {
|
||||||
// 只显示到当前索引的连线
|
// 只显示到当前索引的连线
|
||||||
for (let i = 0; i <= currentLineIndex && i < lineConnections.length; i++) {
|
for (let i = 0; i <= currentLineIndex && i < lineConnections.length; i++) {
|
||||||
const connection = lineConnections[i];
|
const connection = lineConnections[i];
|
||||||
solidData[0]?.[1].push(getLineItem(connection.from, connection.to));
|
solidData[0]?.[1].push(getLineItem(connection.from, connection.to));
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 虚线数据处理(保持原有逻辑)
|
// 虚线数据处理(保持原有逻辑)
|
||||||
const pathList =
|
const pathList =
|
||||||
@ -406,7 +443,8 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
|
|||||||
} as echarts.SeriesOption);
|
} as echarts.SeriesOption);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 添加连线
|
// 只有当 shouldShowLines 为 true 时才添加连线
|
||||||
|
if (shouldShowLines) {
|
||||||
solidData.forEach((item) => {
|
solidData.forEach((item) => {
|
||||||
// 如果没有连线数据,则跳过
|
// 如果没有连线数据,则跳过
|
||||||
if (item[1].length === 0) {
|
if (item[1].length === 0) {
|
||||||
@ -450,6 +488,7 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
|
|||||||
series.push(...exitNodes);
|
series.push(...exitNodes);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
otherLineList.forEach((line: any) => {
|
otherLineList.forEach((line: any) => {
|
||||||
line.forEach((item: any) => {
|
line.forEach((item: any) => {
|
||||||
@ -676,7 +715,7 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const option = getOption();
|
const option = getOption();
|
||||||
proxyGeoRef.current?.setOption(option);
|
proxyGeoRef.current?.setOption(option);
|
||||||
}, [currentLineIndex]); // 当当前连线索引变化时更新图表
|
}, [currentLineIndex, shouldShowLines]); // 当当前连线索引或shouldShowLines变化时更新图表
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
preMainToData.current?.some(
|
preMainToData.current?.some(
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user