fix:嵌套加密和流量混淆 改为接口返回的点
This commit is contained in:
liyuanhu
parent
652aea1829
commit
41dba8cb7c
@ -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<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 ?? [];
|
||||
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<string, string> = {};
|
||||
|
||||
|
||||
// 处理主路径数据
|
||||
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 (
|
||||
<div className="flex-1 h-full flex flex-col">
|
||||
<div id="screenGeo" className="flex-1"></div>
|
||||
</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