From bab441979fd2a73c3474bf32d11d9e86a730043a Mon Sep 17 00:00:00 2001 From: liyuanhu Date: Thu, 24 Apr 2025 19:02:35 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A131=E7=9A=84=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/world-geo.tsx | 145 +++++++++++------- 1 file changed, 92 insertions(+), 53 deletions(-) diff --git a/src/pages/decentralized-lastic-network/components/world-geo.tsx b/src/pages/decentralized-lastic-network/components/world-geo.tsx index 7c3b812..ae1cc81 100644 --- a/src/pages/decentralized-lastic-network/components/world-geo.tsx +++ b/src/pages/decentralized-lastic-network/components/world-geo.tsx @@ -54,10 +54,44 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { // 添加状态来跟踪数据是否已经变化 const dataKeyRef = useRef(""); + // 添加状态来跟踪是否应该显示连线 + 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 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 = []; @@ -141,8 +175,8 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { animationTimerRef.current = null; } - // 启动连线动画 - if (connections.length > 0) { + // 只有当 shouldShowLines 为 true 且有连线数据时才启动动画 + if (shouldShowLines && connections.length > 0) { setTimeout(() => { startLineAnimation(connections); }, 500); // 短暂延迟，确保点已经显示 @@ -150,11 +184,11 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { } return data; - }, [screenData]); + }, [screenData, shouldShowLines]); // 启动连线动画的函数 const startLineAnimation = (connections: {from: string, to: string}[]) => { - if (connections.length === 0) return; + if (connections.length === 0 || !shouldShowLines) return; let index = 0; @@ -205,10 +239,13 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { // 实现数据处理 const solidData: LinesType[] = [["main", []]]; // 使用"main"替代startCountry.country_code - // 只显示到当前索引的连线 - for (let i = 0; i <= currentLineIndex && i < lineConnections.length; i++) { - const connection = lineConnections[i]; - solidData[0]?.[1].push(getLineItem(connection.from, connection.to)); + // 只有当 shouldShowLines 为 true 时才显示连线 + if (shouldShowLines) { + // 只显示到当前索引的连线 + for (let i = 0; i <= currentLineIndex && i < lineConnections.length; i++) { + const connection = lineConnections[i]; + solidData[0]?.[1].push(getLineItem(connection.from, connection.to)); + } } // 虚线数据处理（保持原有逻辑） @@ -406,50 +443,52 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { } as echarts.SeriesOption); } - // 添加连线 - solidData.forEach((item) => { - // 如果没有连线数据，则跳过 - if (item[1].length === 0) { - return; - } - - const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null; - // 添加飞行线 - series.push({ - name: item[0], - type: "lines", - zlevel: 1, - label: { - show: false, - }, - // 飞行线特效 - effect: { - show: true, // 是否显示 - period: 4, // 特效动画时间 - trailLength: 0.7, // 特效尾迹长度。取从 0 到 1 的值，数值越大尾迹越长 - // symbol: planePathImg, // 特效图形标记 - color:"#0ea5e9", - symbolSize: [10, 20], - }, - // 线条样式 - lineStyle: { - curveness: -0.4, // 飞线弧度 - type: "solid", // 飞线类型 - color: "#0ea5e9", // 飞线颜色 - width: 1.5, // 飞线宽度 - opacity: 0.1, - }, - data: convertData(item[1]) as echarts.LinesSeriesOption["data"], + // 只有当 shouldShowLines 为 true 时才添加连线 + if (shouldShowLines) { + solidData.forEach((item) => { + // 如果没有连线数据，则跳过 + if (item[1].length === 0) { + return; + } + + const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null; + // 添加飞行线 + series.push({ + name: item[0], + type: "lines", + zlevel: 1, + label: { + show: false, + }, + // 飞行线特效 + effect: { + show: true, // 是否显示 + period: 4, // 特效动画时间 + trailLength: 0.7, // 特效尾迹长度。取从 0 到 1 的值，数值越大尾迹越长 + // symbol: planePathImg, // 特效图形标记 + color:"#0ea5e9", + symbolSize: [10, 20], + }, + // 线条样式 + lineStyle: { + curveness: -0.4, // 飞线弧度 + type: "solid", // 飞线类型 + color: "#0ea5e9", // 飞线颜色 + width: 1.5, // 飞线宽度 + opacity: 0.1, + }, + data: convertData(item[1]) as echarts.LinesSeriesOption["data"], + }); + // 添加路径点的双层效果 + const pathPoints = createPathPoints(item[1], true); + series.push(...pathPoints); + // 添加出口节点的双层效果 + if (lastExit) { + const exitNodes = createDualLayerPoint(lastExit, true); + series.push(...exitNodes); + } }); - // 添加路径点的双层效果 - const pathPoints = createPathPoints(item[1], true); - series.push(...pathPoints); - // 添加出口节点的双层效果 - if (lastExit) { - const exitNodes = createDualLayerPoint(lastExit, true); - series.push(...exitNodes); - } - }); + } otherLineList.forEach((line: any) => { line.forEach((item: any) => { @@ -676,7 +715,7 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => { useEffect(() => { const option = getOption(); proxyGeoRef.current?.setOption(option); - }, [currentLineIndex]); // 当当前连线索引变化时更新图表 + }, [currentLineIndex, shouldShowLines]); // 当当前连线索引或shouldShowLines变化时更新图表 useEffect(() => { preMainToData.current?.some(