admin/paw-gui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：131的一些修改

Browse Source
This commit is contained in:
liyuanhu 2025-04-24 19:02:35 +08:00
parent 1928b112fb
commit bab441979f
1 changed files with 92 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
src/pages/decentralized-lastic-network/components/world-geo.tsx
View File

@ -54,10 +54,44 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
// 添加状态来跟踪数据是否已经变化 // 添加状态来跟踪数据是否已经变化
const dataKeyRef = useRef<string>(""); const dataKeyRef = useRef<string>("");
// 添加状态来跟踪是否应该显示连线
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 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 = []; const data: any = [];
@ -141,8 +175,8 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
animationTimerRef.current = null; animationTimerRef.current = null;
} }
// 启动连线动画 // 只有当 shouldShowLines 为 true 且有连线数据时才启动动画
if (connections.length > 0) { if (shouldShowLines && connections.length > 0) {
setTimeout(() => { setTimeout(() => {
startLineAnimation(connections); startLineAnimation(connections);
}, 500); // 短暂延迟，确保点已经显示 }, 500); // 短暂延迟，确保点已经显示
@ -150,11 +184,11 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
} }
return data; return data;
}, [screenData]); }, [screenData, shouldShowLines]);
// 启动连线动画的函数 // 启动连线动画的函数
const startLineAnimation = (connections: {from: string, to: string}[]) => { const startLineAnimation = (connections: {from: string, to: string}[]) => {
if (connections.length === 0) return; if (connections.length === 0 || !shouldShowLines) return;
let index = 0; let index = 0;
@ -205,10 +239,13 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
// 实现数据处理 // 实现数据处理
const solidData: LinesType[] = [["main", []]]; // 使用"main"替代startCountry.country_code const solidData: LinesType[] = [["main", []]]; // 使用"main"替代startCountry.country_code
// 只显示到当前索引的连线 // 只有当 shouldShowLines 为 true 时才显示连线
for (let i = 0; i <= currentLineIndex && i < lineConnections.length; i++) { if (shouldShowLines) {
const connection = lineConnections[i]; // 只显示到当前索引的连线
solidData[0]?.[1].push(getLineItem(connection.from, connection.to)); 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); } as echarts.SeriesOption);
} }
// 添加连线 // 只有当 shouldShowLines 为 true 时才添加连线
solidData.forEach((item) => { if (shouldShowLines) {
// 如果没有连线数据，则跳过 solidData.forEach((item) => {
if (item[1].length === 0) { // 如果没有连线数据，则跳过
return; if (item[1].length === 0) {
} return;
}
const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
// 添加飞行线 const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
series.push({ // 添加飞行线
name: item[0], series.push({
type: "lines", name: item[0],
zlevel: 1, type: "lines",
label: { zlevel: 1,
show: false, label: {
}, show: false,
// 飞行线特效 },
effect: { // 飞行线特效
show: true, // 是否显示 effect: {
period: 4, // 特效动画时间 show: true, // 是否显示
trailLength: 0.7, // 特效尾迹长度。取从 0 到 1 的值，数值越大尾迹越长 period: 4, // 特效动画时间
// symbol: planePathImg, // 特效图形标记 trailLength: 0.7, // 特效尾迹长度。取从 0 到 1 的值，数值越大尾迹越长
color:"#0ea5e9", // symbol: planePathImg, // 特效图形标记
symbolSize: [10, 20], color:"#0ea5e9",
}, symbolSize: [10, 20],
// 线条样式 },
lineStyle: { // 线条样式
curveness: -0.4, // 飞线弧度 lineStyle: {
type: "solid", // 飞线类型 curveness: -0.4, // 飞线弧度
color: "#0ea5e9", // 飞线颜色 type: "solid", // 飞线类型
width: 1.5, // 飞线宽度 color: "#0ea5e9", // 飞线颜色
opacity: 0.1, width: 1.5, // 飞线宽度
}, opacity: 0.1,
data: convertData(item[1]) as echarts.LinesSeriesOption["data"], },
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) => { otherLineList.forEach((line: any) => {
line.forEach((item: any) => { line.forEach((item: any) => {
@ -676,7 +715,7 @@ export const WorldGeo = memo(({ screenData }: { screenData: any }) => {
useEffect(() => { useEffect(() => {
const option = getOption(); const option = getOption();
proxyGeoRef.current?.setOption(option); proxyGeoRef.current?.setOption(option);
}, [currentLineIndex]); // 当当前连线索引变化时更新图表 }, [currentLineIndex, shouldShowLines]); // 当当前连线索引或shouldShowLines变化时更新图表
useEffect(() => { useEffect(() => {
preMainToData.current?.some( preMainToData.current?.some(