|
@@ -37,18 +37,11 @@ const BasePoint: React.FC<{
|
|
|
}}
|
|
}}
|
|
|
onClick={() => onClick?.(point)}
|
|
onClick={() => onClick?.(point)}
|
|
|
>
|
|
>
|
|
|
- <div className="absolute inset-[12.5%_8.66%]">
|
|
|
|
|
|
|
+ <div className="absolute inset-0">
|
|
|
<img
|
|
<img
|
|
|
alt="基地定位点"
|
|
alt="基地定位点"
|
|
|
className="block max-w-none size-full"
|
|
className="block max-w-none size-full"
|
|
|
- src="/supply-chain/group1597881805.svg"
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div className="absolute inset-[27.5%_23%] overflow-clip">
|
|
|
|
|
- <img
|
|
|
|
|
- alt="粮食图标"
|
|
|
|
|
- className="block max-w-none size-full"
|
|
|
|
|
- src="/supply-chain/img2.svg"
|
|
|
|
|
|
|
+ src="/supply-chain/BasePointIcon.svg"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
{point.name && (
|
|
{point.name && (
|
|
@@ -76,18 +69,11 @@ const IndustryChainPoint: React.FC<{
|
|
|
}}
|
|
}}
|
|
|
onClick={() => onClick?.(point)}
|
|
onClick={() => onClick?.(point)}
|
|
|
>
|
|
>
|
|
|
- <div className="absolute inset-[10%_13.79%]">
|
|
|
|
|
|
|
+ <div className="absolute inset-0">
|
|
|
<img
|
|
<img
|
|
|
alt="产业链定位点"
|
|
alt="产业链定位点"
|
|
|
className="block max-w-none size-full"
|
|
className="block max-w-none size-full"
|
|
|
- src="/supply-chain/img.svg"
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div className="absolute bottom-[40.42%] left-1/4 overflow-clip right-1/4 shadow-[0px_0px_6px_0px_#4593ff] top-[17.92%]">
|
|
|
|
|
- <img
|
|
|
|
|
- alt="产业链图标"
|
|
|
|
|
- className="block max-w-none size-full"
|
|
|
|
|
- src="/supply-chain/img1.svg"
|
|
|
|
|
|
|
+ src="/supply-chain/SupplyChainIcons.svg"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
{point.name && (
|
|
{point.name && (
|
|
@@ -101,10 +87,9 @@ const IndustryChainPoint: React.FC<{
|
|
|
|
|
|
|
|
// 连接线组件
|
|
// 连接线组件
|
|
|
const ConnectionLine: React.FC<{
|
|
const ConnectionLine: React.FC<{
|
|
|
- line: ConnectionLine;
|
|
|
|
|
fromPoint: LocationPoint;
|
|
fromPoint: LocationPoint;
|
|
|
toPoint: LocationPoint;
|
|
toPoint: LocationPoint;
|
|
|
-}> = ({ line, fromPoint, toPoint }) => {
|
|
|
|
|
|
|
+}> = ({ fromPoint, toPoint }) => {
|
|
|
// 计算连接线的位置和角度
|
|
// 计算连接线的位置和角度
|
|
|
const dx = toPoint.position.x - fromPoint.position.x;
|
|
const dx = toPoint.position.x - fromPoint.position.x;
|
|
|
const dy = toPoint.position.y - fromPoint.position.y;
|
|
const dy = toPoint.position.y - fromPoint.position.y;
|
|
@@ -135,18 +120,11 @@ const MapLegend: React.FC = () => {
|
|
|
{/* 基地图例 */}
|
|
{/* 基地图例 */}
|
|
|
<div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]">
|
|
<div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]">
|
|
|
<div className="h-[50px] relative shrink-0 w-[41.667px]">
|
|
<div className="h-[50px] relative shrink-0 w-[41.667px]">
|
|
|
- <div className="absolute inset-[12.5%_8.66%]">
|
|
|
|
|
|
|
+ <div className="absolute inset-0">
|
|
|
<img
|
|
<img
|
|
|
alt="基地图例"
|
|
alt="基地图例"
|
|
|
className="block max-w-none size-full"
|
|
className="block max-w-none size-full"
|
|
|
- src="/supply-chain/group1597881805.svg"
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div className="absolute inset-[27.5%_23%] overflow-clip">
|
|
|
|
|
- <img
|
|
|
|
|
- alt="粮食图标"
|
|
|
|
|
- className="block max-w-none size-full"
|
|
|
|
|
- src="/supply-chain/img2.svg"
|
|
|
|
|
|
|
+ src="/supply-chain/BasePointIcon.svg"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -160,18 +138,11 @@ const MapLegend: React.FC = () => {
|
|
|
{/* 产业链图例 */}
|
|
{/* 产业链图例 */}
|
|
|
<div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]">
|
|
<div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]">
|
|
|
<div className="h-[50px] relative shrink-0 w-[41.667px]">
|
|
<div className="h-[50px] relative shrink-0 w-[41.667px]">
|
|
|
- <div className="absolute inset-[10%_13.79%]">
|
|
|
|
|
|
|
+ <div className="absolute inset-0">
|
|
|
<img
|
|
<img
|
|
|
alt="产业链图例"
|
|
alt="产业链图例"
|
|
|
className="block max-w-none size-full"
|
|
className="block max-w-none size-full"
|
|
|
- src="/supply-chain/img.svg"
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div className="absolute bottom-[40.42%] left-1/4 overflow-clip right-1/4 shadow-[0px_0px_6px_0px_#4593ff] top-[17.92%]">
|
|
|
|
|
- <img
|
|
|
|
|
- alt="产业链图标"
|
|
|
|
|
- className="block max-w-none size-full"
|
|
|
|
|
- src="/supply-chain/img1.svg"
|
|
|
|
|
|
|
+ src="/supply-chain/SupplyChainIcons.svg"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -187,7 +158,6 @@ const MapLegend: React.FC = () => {
|
|
|
|
|
|
|
|
const SupplyChainMap: React.FC<SupplyChainMapProps> = ({
|
|
const SupplyChainMap: React.FC<SupplyChainMapProps> = ({
|
|
|
points = [],
|
|
points = [],
|
|
|
- connections = [],
|
|
|
|
|
onPointClick
|
|
onPointClick
|
|
|
}) => {
|
|
}) => {
|
|
|
// 默认定位点数据
|
|
// 默认定位点数据
|