|
@@ -22,7 +22,7 @@ interface PopupInfoBoxProps {
|
|
|
onClose?: () => void;
|
|
onClose?: () => void;
|
|
|
pointId?: string;
|
|
pointId?: string;
|
|
|
variant?: 'first' | 'second'; // 款式选择:first-第一款,second-第二款
|
|
variant?: 'first' | 'second'; // 款式选择:first-第一款,second-第二款
|
|
|
- pointIndex?: number; // 定位点索引,用于自动选择款式
|
|
|
|
|
|
|
+ industry?: string; // 产业类型,用于确定款式
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
|
|
const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
|
|
@@ -30,7 +30,7 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
|
|
|
onClose,
|
|
onClose,
|
|
|
pointId,
|
|
pointId,
|
|
|
variant,
|
|
variant,
|
|
|
- pointIndex = 0
|
|
|
|
|
|
|
+ industry
|
|
|
}) => {
|
|
}) => {
|
|
|
const { themeColor, currentData, currentIndustry } = useSupplyChain();
|
|
const { themeColor, currentData, currentIndustry } = useSupplyChain();
|
|
|
|
|
|
|
@@ -60,8 +60,9 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
|
|
|
return null;
|
|
return null;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 确定款式:优先使用传入的variant,否则根据pointIndex自动选择
|
|
|
|
|
- const determinedVariant = variant || (pointIndex % 2 === 0 ? 'first' : 'second');
|
|
|
|
|
|
|
+ // 确定款式:优先使用传入的variant,否则根据产业类型自动选择
|
|
|
|
|
+ // 规则:每组大屏的第一个产业使用第一款,第二个产业使用第二款
|
|
|
|
|
+ const determinedVariant = variant || (getIndustryVariant(currentIndustry, currentData?.industries || []) || 'first');
|
|
|
|
|
|
|
|
// 根据款式计算最终显示位置
|
|
// 根据款式计算最终显示位置
|
|
|
const calculateFinalPosition = (position: { x: number; y: number }, variant: 'first' | 'second') => {
|
|
const calculateFinalPosition = (position: { x: number; y: number }, variant: 'first' | 'second') => {
|
|
@@ -77,14 +78,22 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
|
|
|
} else {
|
|
} else {
|
|
|
// 第二款:右上角定位
|
|
// 第二款:右上角定位
|
|
|
return {
|
|
return {
|
|
|
- x: position.x - popupWidth + 20, // 向右偏移20px
|
|
|
|
|
- y: position.y - 20 // 向上偏移20px
|
|
|
|
|
|
|
+ x: position.x - popupWidth + -10, // 向右偏移20px
|
|
|
|
|
+ y: position.y - -20 // 向上偏移20px
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const finalPosition = calculateFinalPosition(displayPosition, determinedVariant);
|
|
const finalPosition = calculateFinalPosition(displayPosition, determinedVariant);
|
|
|
|
|
|
|
|
|
|
+ // 辅助函数:根据产业类型确定款式
|
|
|
|
|
+ function getIndustryVariant(industry: string, industries: string[]): 'first' | 'second' | null {
|
|
|
|
|
+ const index = industries.indexOf(industry);
|
|
|
|
|
+ if (index === 0) return 'first'; // 第一个产业使用第一款
|
|
|
|
|
+ if (index === 1) return 'second'; // 第二个产业使用第二款
|
|
|
|
|
+ return null; // 其他情况返回null,使用默认值
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
return (
|
|
return (
|
|
|
<div
|
|
<div
|
|
|
className="absolute overflow-clip"
|
|
className="absolute overflow-clip"
|