diff --git a/src/pages/new-home/components/world-geo.tsx b/src/pages/new-home/components/world-geo.tsx index d215a6a..64ac177 100644 --- a/src/pages/new-home/components/world-geo.tsx +++ b/src/pages/new-home/components/world-geo.tsx @@ -34,7 +34,7 @@ export const WorldGeo = memo( tooltipClosed, setTooltipClosed, }: { - dataInfo:any; + dataInfo: any; selectedApp: any; tooltipType: string; tooltipClosed: boolean; @@ -58,10 +58,15 @@ export const WorldGeo = memo( const labelContainerRef = useRef(null); const labelsRef = useRef([]); const mainToData = useMemo(() => { - const newList = [ ...dataInfo.passAuthentication.data,...dataInfo.trafficObfuscation,...dataInfo.nestedEncryption,...dataInfo.dynamicRouteGeneration]; + const newList = [ + ...dataInfo.passAuthentication.data, + ...dataInfo.trafficObfuscation, + ...dataInfo.nestedEncryption, + ...dataInfo.dynamicRouteGeneration, + ]; // 使用新的数据结构 const proxiesList = - selectedApp && selectedApp ? [...newList,selectedApp] : newList ?? []; + selectedApp && selectedApp ? [...newList, selectedApp] : newList ?? []; // 初始化数据数组 - 不再包含 startCountry const data: any = []; // 遍历代理列表 @@ -163,8 +168,9 @@ export const WorldGeo = memo( // 定位自定义提示框 - 优化版本 const positionCustomTooltip = () => { if (!customTooltipRef.current || !proxyGeoRef.current) return; + console.log(dataInfo.nestedEncryption?.[0]?.code, "sssss"); // 找到US点 - const coords = geoCoordMap["GL"]; + const coords = geoCoordMap[dataInfo.nestedEncryption?.[0]?.code ?? "GL"]; if (!coords) return; try { // 将地理坐标转换为屏幕坐标 @@ -234,7 +240,7 @@ export const WorldGeo = memo( const positionCustomTooltip2 = () => { if (!customTooltip2Ref.current || !proxyGeoRef.current) return; // 找到US点 - const coords = geoCoordMap["ZA"]; + const coords = geoCoordMap[dataInfo.trafficObfuscation?.[0]?.code ?? "ZA"]; if (!coords) return; try { // 将地理坐标转换为屏幕坐标 @@ -301,7 +307,7 @@ export const WorldGeo = memo( const ripplePoints: any[] = []; // 收集每个点的颜色信息 const pointColors: Record = {}; - + // 处理主路径数据 for (let i = 0; i < mainToData.length; i++) { // 如果是最后一个元素，则跳过（因为没有下一个元素作为终点） @@ -312,43 +318,43 @@ export const WorldGeo = memo( const countryCode = currentItem.country_code.toUpperCase(); // 获取颜色信息 const lineColor = currentItem.color || "#0ea5e9"; // 默认颜色 - + // 保存点的颜色信息 pointColors[countryCode] = lineColor; - + // 如果当前项是起点，下一项是终点 if (currentItem.type === "start" && nextItem.type === "end") { const startCode = countryCode; const endCode = nextItem.country_code.toUpperCase(); - + // 保存终点的颜色信息 pointColors[endCode] = lineColor; - + // 无论是否连线，都添加点的涟漪效果 const startPoint = createCountryRipple(startCode); const endPoint = createCountryRipple(endCode); - + if (startPoint) { ripplePoints.push({ ...startPoint, - color: lineColor // 添加颜色信息 + color: lineColor, // 添加颜色信息 }); } - + if (endPoint) { ripplePoints.push({ ...endPoint, - color: lineColor // 添加颜色信息 + color: lineColor, // 添加颜色信息 }); } - + // 检查是否应该绘制连线 if (currentItem.isLine !== false) { const lineItem = getLineItem(startCode, endCode); // 添加颜色信息到连线数据 solidData[0][1].push({ ...lineItem, - color: lineColor // 添加颜色信息 + color: lineColor, // 添加颜色信息 } as any); } // 跳过下一项，因为已经处理了 @@ -357,35 +363,35 @@ export const WorldGeo = memo( // 常规情况：当前项到下一项 else { const nextCountryCode = nextItem.country_code.toUpperCase(); - + // 保存下一个点的颜色信息 pointColors[nextCountryCode] = nextItem.color || lineColor; - + // 无论是否连线，都添加点的涟漪效果 const currentPoint = createCountryRipple(countryCode); const nextPoint = createCountryRipple(nextCountryCode); - + if (currentPoint) { ripplePoints.push({ ...currentPoint, - color: lineColor // 添加颜色信息 + color: lineColor, // 添加颜色信息 }); } - + if (nextPoint) { ripplePoints.push({ ...nextPoint, - color: nextItem.color || lineColor // 添加颜色信息 + color: nextItem.color || lineColor, // 添加颜色信息 }); } - + // 检查是否应该绘制连线 if (currentItem.isLine !== false) { const lineItem = getLineItem(countryCode, nextCountryCode); // 添加颜色信息到连线数据 solidData[0][1].push({ ...lineItem, - color: lineColor // 添加颜色信息 + color: lineColor, // 添加颜色信息 } as any); } } @@ -396,7 +402,7 @@ export const WorldGeo = memo( solidData, otherLineList, ripplePoints, - pointColors + pointColors, }; }; // 获取连线经纬度数据 @@ -410,13 +416,13 @@ export const WorldGeo = memo( const fromCountry = dataIndex?.[0]?.country_code ?? ""; const toCountry = dataIndex?.[1]?.country_code ?? ""; const lineColor = (dataIndex as any)?.color || "#0ea5e9"; // 获取线条颜色 - + if (fromCoord && toCoord) { res.push({ coords: [fromCoord, toCoord], lineStyle: { - color: lineColor // 使用自定义颜色 - } + color: lineColor, // 使用自定义颜色 + }, }); // 计算中点，考虑曲线的弧度 const curveness = -0.4; // 与飞线弧度相同 @@ -569,7 +575,7 @@ export const WorldGeo = memo( value: geoCoordMap[dataItem[0].country_code], datas: { country_code: dataItem[0].country_code, - color: color // 保存颜色信息 + color: color, // 保存颜色信息 }, }; }); @@ -585,9 +591,9 @@ export const WorldGeo = memo( zlevel: 3, // 使用回调函数根据数据项设置颜色 itemStyle: { - color: function(params: any) { + color: function (params: any) { return params.data.datas.color || "#0ea5e9"; - } + }, }, symbol: "circle", symbolSize: outerSize, @@ -644,9 +650,9 @@ export const WorldGeo = memo( zlevel: 3, // 使用回调函数根据数据项设置颜色 itemStyle: { - color: function(params: any) { + color: function (params: any) { return params.data.datas.color || "#0ea5e9"; - } + }, }, symbol: "circle", symbolSize: 8, @@ -687,7 +693,7 @@ export const WorldGeo = memo( value: point.value, datas: { country_code: point.country_code, - color: point.color || "#0ea5e9" // 保存颜色信息 + color: point.color || "#0ea5e9", // 保存颜色信息 }, })), } as echarts.SeriesOption; @@ -725,8 +731,9 @@ export const WorldGeo = memo( return; } const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null; - const lastExitColor = (item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9"; - + const lastExitColor = + (item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9"; + // 添加飞行线 series.push({ name: item[0], @@ -764,8 +771,9 @@ export const WorldGeo = memo( otherLineList.forEach((line: any) => { line.forEach((item: any) => { const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null; - const lastExitColor = (item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9"; - + const lastExitColor = + (item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9"; + // 添加虚线 series.push({ name: item[0], @@ -789,7 +797,11 @@ export const WorldGeo = memo( series.push(...pathPoints); // 添加出口节点的双层效果（次要路径） if (lastExit) { - const exitNodes = createDualLayerPoint(lastExit, false, lastExitColor); + const exitNodes = createDualLayerPoint( + lastExit, + false, + lastExitColor + ); series.push(...exitNodes); } }); @@ -868,8 +880,9 @@ export const WorldGeo = memo( // 创建A点和B点，并添加飞线和标签 const createSpecialPoints = (series: echarts.SeriesOption[]) => { // 定义点A和点B的坐标 - const pointA =geoCoordMap[dataInfo.passAuthentication.startPoint ?? "GL"]; - const pointB =geoCoordMap[dataInfo.passAuthentication.endPoint ??"CA"]; + const pointA = + geoCoordMap[dataInfo.passAuthentication.startPoint ?? "GL"]; + const pointB = geoCoordMap[dataInfo.passAuthentication.endPoint ?? "CA"]; const newPointB = [pointB[0] + 14, pointB[1] + 10]; // 添加A点 - 带涟漪效果的双层点 series.push( @@ -1214,7 +1227,7 @@ export const WorldGeo = memo( }; }, []); useEffect(() => { - console.log(tooltipClosed,'tooltipClosedtooltipClosed') + console.log(tooltipClosed, "tooltipClosedtooltipClosed"); if (tooltipClosed) { createCustomTooltip(); createCustomTooltip2(); @@ -1230,11 +1243,16 @@ export const WorldGeo = memo( customTooltipRef.current = null; customTooltip2Ref.current = null; }; - }, [tooltipClosed, tooltipType]); + }, [ + tooltipClosed, + tooltipType, + dataInfo.nestedEncryption, + dataInfo.trafficObfuscation, + ]); return (
); } -); \ No newline at end of file +); diff --git a/src/pages/new-home/index.tsx b/src/pages/new-home/index.tsx index e51f0ff..499504a 100644 --- a/src/pages/new-home/index.tsx +++ b/src/pages/new-home/index.tsx @@ -30,7 +30,6 @@ import { getDynamicRouteGeneration, getApplicationDiversion, } from "@/api/flying-line"; -import { APP_DIVERSION } from "../anti-forensics-forwarding/data/mockData"; export const DIALOGTYPE = { ADDNode: { @@ -59,7 +58,7 @@ export const NODEDIALOGTYPE = { }; const NewHome = () => { const dispatch = useDispatch(); - const { web3List, web3List2, newHomeProxies } = useSelector( + const { web3List, web3List2, } = useSelector( (state: RootState) => state.web3Reducer );