EST/EST-DSX
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

dev

Browse Source
This commit is contained in:
husky
2025-09-16 16:39:48 +08:00
commit c5808e85e2
336 changed files with 695951 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/components/scene/Industry.js Normal file
View File

@@ -0,0 +1,195 @@
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>
);
}