fix:嵌套加密和流量混淆 改为接口返回的点
This commit is contained in:
liyuanhu
parent
652aea1829
commit
41dba8cb7c
@ -58,7 +58,12 @@ export const WorldGeo = memo(
|
||||
const labelContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const labelsRef = useRef<HTMLDivElement[]>([]);
|
||||
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 ?? [];
|
||||
@ -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 {
|
||||
// 将地理坐标转换为屏幕坐标
|
||||
@ -331,14 +337,14 @@ export const WorldGeo = memo(
|
||||
if (startPoint) {
|
||||
ripplePoints.push({
|
||||
...startPoint,
|
||||
color: lineColor // 添加颜色信息
|
||||
color: lineColor, // 添加颜色信息
|
||||
});
|
||||
}
|
||||
|
||||
if (endPoint) {
|
||||
ripplePoints.push({
|
||||
...endPoint,
|
||||
color: lineColor // 添加颜色信息
|
||||
color: lineColor, // 添加颜色信息
|
||||
});
|
||||
}
|
||||
|
||||
@ -348,7 +354,7 @@ export const WorldGeo = memo(
|
||||
// 添加颜色信息到连线数据
|
||||
solidData[0][1].push({
|
||||
...lineItem,
|
||||
color: lineColor // 添加颜色信息
|
||||
color: lineColor, // 添加颜色信息
|
||||
} as any);
|
||||
}
|
||||
// 跳过下一项，因为已经处理了
|
||||
@ -368,14 +374,14 @@ export const WorldGeo = memo(
|
||||
if (currentPoint) {
|
||||
ripplePoints.push({
|
||||
...currentPoint,
|
||||
color: lineColor // 添加颜色信息
|
||||
color: lineColor, // 添加颜色信息
|
||||
});
|
||||
}
|
||||
|
||||
if (nextPoint) {
|
||||
ripplePoints.push({
|
||||
...nextPoint,
|
||||
color: nextItem.color || lineColor // 添加颜色信息
|
||||
color: nextItem.color || lineColor, // 添加颜色信息
|
||||
});
|
||||
}
|
||||
|
||||
@ -385,7 +391,7 @@ export const WorldGeo = memo(
|
||||
// 添加颜色信息到连线数据
|
||||
solidData[0][1].push({
|
||||
...lineItem,
|
||||
color: lineColor // 添加颜色信息
|
||||
color: lineColor, // 添加颜色信息
|
||||
} as any);
|
||||
}
|
||||
}
|
||||
@ -396,7 +402,7 @@ export const WorldGeo = memo(
|
||||
solidData,
|
||||
otherLineList,
|
||||
ripplePoints,
|
||||
pointColors
|
||||
pointColors,
|
||||
};
|
||||
};
|
||||
// 获取连线经纬度数据
|
||||
@ -415,8 +421,8 @@ export const WorldGeo = memo(
|
||||
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, // 保存颜色信息
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -587,7 +593,7 @@ export const WorldGeo = memo(
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return params.data.datas.color || "#0ea5e9";
|
||||
}
|
||||
},
|
||||
},
|
||||
symbol: "circle",
|
||||
symbolSize: outerSize,
|
||||
@ -646,7 +652,7 @@ export const WorldGeo = memo(
|
||||
itemStyle: {
|
||||
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,7 +731,8 @@ 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({
|
||||
@ -764,7 +771,8 @@ 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({
|
||||
@ -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,7 +880,8 @@ export const WorldGeo = memo(
|
||||
// 创建A点和B点，并添加飞线和标签
|
||||
const createSpecialPoints = (series: echarts.SeriesOption[]) => {
|
||||
// 定义点A和点B的坐标
|
||||
const pointA =geoCoordMap[dataInfo.passAuthentication.startPoint ?? "GL"];
|
||||
const pointA =
|
||||
geoCoordMap[dataInfo.passAuthentication.startPoint ?? "GL"];
|
||||
const pointB = geoCoordMap[dataInfo.passAuthentication.endPoint ?? "CA"];
|
||||
const newPointB = [pointB[0] + 14, pointB[1] + 10];
|
||||
// 添加A点 - 带涟漪效果的双层点
|
||||
@ -1214,7 +1227,7 @@ export const WorldGeo = memo(
|
||||
};
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
console.log(tooltipClosed,'tooltipClosedtooltipClosed')
|
||||
console.log(tooltipClosed, "tooltipClosedtooltipClosed");
|
||||
if (tooltipClosed) {
|
||||
createCustomTooltip();
|
||||
createCustomTooltip2();
|
||||
@ -1230,7 +1243,12 @@ export const WorldGeo = memo(
|
||||
customTooltipRef.current = null;
|
||||
customTooltip2Ref.current = null;
|
||||
};
|
||||
}, [tooltipClosed, tooltipType]);
|
||||
}, [
|
||||
tooltipClosed,
|
||||
tooltipType,
|
||||
dataInfo.nestedEncryption,
|
||||
dataInfo.trafficObfuscation,
|
||||
]);
|
||||
return (
|
||||
<div className="flex-1 h-full flex flex-col">
|
||||
<div id="screenGeo" className="flex-1"></div>
|
||||
|
||||
@ -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<AppDispatch>();
|
||||
const { web3List, web3List2, newHomeProxies } = useSelector(
|
||||
const { web3List, web3List2, } = useSelector(
|
||||
(state: RootState) => state.web3Reducer
|
||||
);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user