Compare commits
2 Commits
652aea1829
...
064973aaf0
| Author | SHA1 | Date | |
|---|---|---|---|
|
064973aaf0 | ||
|
|
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 {
|
||||
// 将地理坐标转换为屏幕坐标
|
||||
@ -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, // 保存颜色信息
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -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,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,87 +797,24 @@ export const WorldGeo = memo(
|
||||
series.push(...pathPoints);
|
||||
// 添加出口节点的双层效果（次要路径）
|
||||
if (lastExit) {
|
||||
const exitNodes = createDualLayerPoint(lastExit, false, lastExitColor);
|
||||
const exitNodes = createDualLayerPoint(
|
||||
lastExit,
|
||||
false,
|
||||
lastExitColor
|
||||
);
|
||||
series.push(...exitNodes);
|
||||
}
|
||||
});
|
||||
});
|
||||
return true;
|
||||
};
|
||||
// 主线tip series
|
||||
const getMianLineTipData = (series: echarts.SeriesOption[] = []) => {
|
||||
series.push(
|
||||
// 柱状体的主干
|
||||
{
|
||||
name: "solidTip",
|
||||
type: "lines",
|
||||
zlevel: 5,
|
||||
effect: {
|
||||
show: false,
|
||||
symbolSize: 5, // 图标大小
|
||||
},
|
||||
lineStyle: {
|
||||
width: 0, // 尾迹线条宽度
|
||||
color: "#F0FFA2",
|
||||
opacity: 1, // 尾迹线条透明度
|
||||
curveness: 0, // 尾迹线条曲直度
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "end",
|
||||
color: "#fff",
|
||||
formatter: (parameters) => {
|
||||
const isFr = parameters.value === "FR";
|
||||
console.log(parameters, "parameters");
|
||||
const name = isFr ? "权威节点团" : "待认证节点";
|
||||
return `{left|}{gap2|}{name${
|
||||
isFr ? "2" : "1"
|
||||
}|${name}}{gap3|}{right|}`;
|
||||
},
|
||||
rich: {
|
||||
gap1: {
|
||||
height: 35,
|
||||
width: 8,
|
||||
},
|
||||
gap2: {
|
||||
height: 35,
|
||||
width: 6,
|
||||
},
|
||||
name1: {
|
||||
color: "#FF6B01",
|
||||
align: "center",
|
||||
lineHeight: 35,
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
padding: [11, 16.52, 11, 16.52],
|
||||
backgroundColor: "rgba(63, 6, 3, 0.5)",
|
||||
},
|
||||
name2: {
|
||||
color: "#37FF00",
|
||||
align: "center",
|
||||
lineHeight: 35,
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
padding: [11, 16.52, 11, 16.52],
|
||||
backgroundColor: "rgba(4, 59, 27, 0.5)",
|
||||
},
|
||||
gap3: {
|
||||
height: 35,
|
||||
width: 8,
|
||||
},
|
||||
},
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
silent: true,
|
||||
data: mianLineData(mainToData),
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// 创建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 +1159,7 @@ export const WorldGeo = memo(
|
||||
};
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
console.log(tooltipClosed,'tooltipClosedtooltipClosed')
|
||||
console.log(tooltipClosed, "tooltipClosedtooltipClosed");
|
||||
if (tooltipClosed) {
|
||||
createCustomTooltip();
|
||||
createCustomTooltip2();
|
||||
@ -1230,7 +1175,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