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