195 lines
8.6 KiB
JavaScript
195 lines
8.6 KiB
JavaScript
import React from 'react';
|
|
|
|
export default function Industry({
|
|
onPortClick = () => {},
|
|
onPortHover = () => {},
|
|
selectedPort = null,
|
|
targetPort = null,
|
|
connections = {}
|
|
}) {
|
|
// 获取端口的连接状态样式
|
|
const getPortStyle = (portId) => {
|
|
if (selectedPort === portId) {
|
|
return 'bg-blue-300';
|
|
}
|
|
if (targetPort === portId) {
|
|
return 'bg-green-300';
|
|
}
|
|
if (connections && connections[portId]) {
|
|
return 'bg-[#00ff7f]';
|
|
}
|
|
return 'bg-gray-300';
|
|
};
|
|
|
|
return (
|
|
<div className="h-full w-full bg-black text-white flex">
|
|
{/* 工业设备区域 - 左侧45% */}
|
|
<div className="w-[45%] p-2">
|
|
<div className="grid grid-cols-2 gap-4 h-full">
|
|
{/* 设备1 */}
|
|
<div className="bg-gray-900 rounded-lg p-2 flex flex-col">
|
|
<div className="text-center mb-2">Device1</div>
|
|
<div className="flex items-center justify-center flex-1">
|
|
<div className="bg-gray-800 p-4 rounded-lg">
|
|
<div className="flex space-x-4">
|
|
<div
|
|
className={` rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device1-1')}`}
|
|
jstype="testport-m12-d"
|
|
id="Device1-1"
|
|
onClick={() => onPortClick('Device1-1')}
|
|
onMouseEnter={() => onPortHover('Device1-1')}
|
|
>
|
|
<div className={`w-8 h-8 bg-[url('/m12-d.png')] bg-contain bg-no-repeat bg-center`}></div>
|
|
</div>
|
|
<div
|
|
className={` rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device1-2')}`}
|
|
jstype="testport-m12-d"
|
|
id="Device1-2"
|
|
onClick={() => onPortClick('Device1-2')}
|
|
onMouseEnter={() => onPortHover('Device1-2')}
|
|
>
|
|
<div className={`w-8 h-8 bg-[url('/m12-d.png')] bg-contain bg-no-repeat bg-center`}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 设备2 */}
|
|
<div className="bg-gray-900 rounded-lg p-2 flex flex-col">
|
|
<div className="text-center mb-2">Device2</div>
|
|
<div className="flex items-center justify-center flex-1">
|
|
<div className="bg-gray-800 p-4 rounded-lg">
|
|
<div className="flex space-x-4">
|
|
<div
|
|
className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device2-1')}`}
|
|
jstype="testport-m12-d"
|
|
id="Device2-1"
|
|
onClick={() => onPortClick('Device2-1')}
|
|
onMouseEnter={() => onPortHover('Device2-1')}
|
|
>
|
|
<div className={`w-8 h-8 bg-[url('/m12-d.png')] bg-contain bg-no-repeat bg-center`}></div>
|
|
</div>
|
|
<div
|
|
className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device2-2')}`}
|
|
jstype="testport-m12-d"
|
|
id="Device2-2"
|
|
onClick={() => onPortClick('Device2-2')}
|
|
onMouseEnter={() => onPortHover('Device2-2')}
|
|
>
|
|
<div className={`w-8 h-8 bg-[url('/m12-d.png')] bg-contain bg-no-repeat bg-center`}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 设备3 */}
|
|
<div className="bg-gray-900 rounded-lg p-2 flex flex-col">
|
|
<div className="text-center mb-2">Device3</div>
|
|
<div className="flex items-center justify-center flex-1">
|
|
<div className="bg-gray-800 p-4 rounded-lg">
|
|
<div className="flex space-x-4">
|
|
<div
|
|
className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device3-1')}`}
|
|
jstype="testport-copper"
|
|
id="Device3-1"
|
|
onClick={() => onPortClick('Device3-1')}
|
|
onMouseEnter={() => onPortHover('Device3-1')}
|
|
>
|
|
<div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
|
|
</div>
|
|
<div
|
|
className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device3-2')}`}
|
|
jstype="testport-copper"
|
|
id="Device3-2"
|
|
onClick={() => onPortClick('Device3-2')}
|
|
onMouseEnter={() => onPortHover('Device3-2')}
|
|
>
|
|
<div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 设备4 */}
|
|
<div className="bg-gray-900 rounded-lg p-2 flex flex-col">
|
|
<div className="text-center mb-2">Device4</div>
|
|
<div className="flex items-center justify-center flex-1">
|
|
<div className="bg-gray-800 p-4 rounded-lg">
|
|
<div className="flex space-x-4">
|
|
<div
|
|
className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device4-1')}`}
|
|
jstype="testport-copper"
|
|
id="Device4-1"
|
|
onClick={() => onPortClick('Device4-1')}
|
|
onMouseEnter={() => onPortHover('Device4-1')}
|
|
>
|
|
<div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
|
|
</div>
|
|
<div
|
|
className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device4-2')}`}
|
|
jstype="testport-copper"
|
|
id="Device4-2"
|
|
onClick={() => onPortClick('Device4-2')}
|
|
onMouseEnter={() => onPortHover('Device4-2')}
|
|
>
|
|
<div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 工业控制柜 - 右侧55% */}
|
|
<div className="w-[55%] p-2">
|
|
<div className="text-center mb-2">Cabinet</div>
|
|
<div className="bg-gray-800 rounded-lg p-4 h-[calc(100%-2rem)]">
|
|
<div className="h-full flex flex-col space-y-4">
|
|
{/* 上层端口组 */}
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="grid grid-cols-4 gap-8">
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} className="flex flex-col items-center">
|
|
<div
|
|
className={`w-12 h-12 mb-2 flex items-center justify-center transition-colors ${getPortStyle(`Cabinet-A${i + 1}`)}`}
|
|
jstype="testport-m12-d"
|
|
id={`Cabinet-A${i + 1}`}
|
|
onClick={() => onPortClick(`Cabinet-A${i + 1}`)}
|
|
onMouseEnter={() => onPortHover(`Cabinet-A${i + 1}`)}
|
|
>
|
|
<div className={`w-8 h-8 bg-[url('/m12-d.png')] bg-contain bg-no-repeat bg-center`}></div>
|
|
</div>
|
|
<span className="text-xs">A{i + 1}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 下层端口组 */}
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="grid grid-cols-4 gap-8">
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} className="flex flex-col items-center">
|
|
<div
|
|
className={`w-12 h-12 mb-2 flex items-center justify-center transition-colors ${getPortStyle(`Cabinet-R${i + 1}`)}`}
|
|
jstype="testport-copper"
|
|
id={`Cabinet-R${i + 1}`}
|
|
onClick={() => onPortClick(`Cabinet-R${i + 1}`)}
|
|
onMouseEnter={() => onPortHover(`Cabinet-R${i + 1}`)}>
|
|
<div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
|
|
</div>
|
|
<span className="text-xs">R{i + 1}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |