310 lines
16 KiB
JavaScript
310 lines
16 KiB
JavaScript
import React,{useState} from 'react';
|
|
import useDeviceStore from '@/store/deviceStore';
|
|
import Image from 'next/image';
|
|
|
|
export default function WorldSkillWORKSHOP({
|
|
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';
|
|
};
|
|
|
|
const {faultScenarios,seatUUID,seatNumber,updateWorldSkillScenarios} = useDeviceStore();
|
|
|
|
|
|
return (
|
|
<div>
|
|
{/* 办公区域 */}
|
|
<div className="h-full w-full bg-black text-white flex z-index-100">
|
|
|
|
{/* 车间Button */}
|
|
<div className="w-[2%] p-1 flex flex-col">
|
|
<button
|
|
className="bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white font-bold py-3 px-2 rounded-lg shadow-lg transform hover:scale-105 transition-all duration-200 text-sm flex flex-col items-center justify-center h-full min-h-[120px] border border-blue-400 hover:border-blue-300"
|
|
onClick={() => updateWorldSkillScenarios('OFFICE')}
|
|
>
|
|
<div className="text-xs leading-tight text-center">
|
|
前往<br/>办公楼
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
{/* R-M-A */}
|
|
<div className="w-[12%] p-1 flex flex-col">
|
|
<div className="flex-1 flex flex-col">
|
|
|
|
<div className="text-center mb-1">R-M-A-1</div>
|
|
<div className="relative flex-1 bg-gray-900 flex items-center justify-center">
|
|
<div
|
|
className={`absolute top-[55%] left-[66%] w-6 h-6 z-100`}
|
|
jstype="testport-arm"
|
|
id="RMA-1"
|
|
onClick={() => onPortClick('RMA-1')}
|
|
onMouseEnter={() => onPortHover('RMA-1')}
|
|
>
|
|
|
|
</div>
|
|
<div className={`w-full h-full bg-[url('/MechanicalArm.png')] bg-contain bg-no-repeat bg-center`}></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* R-M-A */}
|
|
<div className="w-[12%] p-1 flex flex-col">
|
|
{/* R-M-A */}
|
|
<div className="flex-1 flex flex-col">
|
|
|
|
<div className="text-center mb-1">R-M-A-2</div>
|
|
<div className="relative flex-1 bg-gray-900 flex items-center justify-center">
|
|
<div
|
|
className={`absolute top-[55%] left-[66%] w-6 h-6 z-100`}
|
|
jstype="testport-arm"
|
|
id="RMA-2"
|
|
onClick={() => onPortClick('RMA-2')}
|
|
onMouseEnter={() => onPortHover('RMA-2')}
|
|
>
|
|
|
|
</div>
|
|
<div className={`w-full h-full bg-[url('/MechanicalArm.png')] bg-contain bg-no-repeat bg-center`}></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* 2F配线架 */}
|
|
<div className="w-[30%] p-1 flex flex-col">
|
|
<div className="text-center mb-1">PLC-Rack</div>
|
|
<div className="h-[calc(100%-1.5rem)] rounded-md p-2 flex flex-col space-y-2">
|
|
{/* Row 1A - taking 1/2 of rack height */}
|
|
<div className="flex flex-col h-1/2 bg-gray-800 rounded-md p-2 relative">
|
|
<div className="absolute top-0 left-0 bg-white w-3 h-3 rounded-full"></div>
|
|
<div className="absolute top-0 right-0 bg-white w-3 h-3 rounded-full"></div>
|
|
<div className="absolute bottom-0 left-0 bg-white w-3 h-3 rounded-full"></div>
|
|
<div className="absolute bottom-0 right-0 bg-white w-3 h-3 rounded-full"></div>
|
|
<div className="flex-1 flex items-center">
|
|
<span className="text-xs mr-4">1A</span>
|
|
<div className="flex-1 flex items-center justify-center space-x-8">
|
|
{[...Array(2)].map((_, i) => (
|
|
<div key={i} className="flex flex-col items-center">
|
|
<div
|
|
className={`w-10 h-10 transition-colors flex items-center justify-center`}
|
|
jstype="testport-m12-d"
|
|
id={`PLC-Rack-1A-${i + 1}`}
|
|
onClick={() => onPortClick(`PLC-Rack-1A-${i + 1}`)}
|
|
onMouseEnter={() => onPortHover(`PLC-Rack-1A-${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">{i + 1}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Row 1B - taking 1/2 of rack height */}
|
|
<div className="flex flex-col h-1/2 bg-gray-800 rounded-md p-2 relative">
|
|
<div className="absolute top-0 left-0 bg-white w-3 h-3 rounded-full"></div>
|
|
<div className="absolute top-0 right-0 bg-white w-3 h-3 rounded-full"></div>
|
|
<div className="absolute bottom-0 left-0 bg-white w-3 h-3 rounded-full"></div>
|
|
<div className="absolute bottom-0 right-0 bg-white w-3 h-3 rounded-full"></div>
|
|
<div className="flex-1 flex items-center">
|
|
<span className="text-xs mr-4">1B</span>
|
|
<div className="flex-1 flex items-center justify-center space-x-8">
|
|
{[...Array(2)].map((_, i) => (
|
|
<div key={i} className="flex flex-col items-center">
|
|
<div
|
|
className={`w-10 h-10 transition-colors flex items-center justify-center ${getPortStyle(`PLC-Rack-1B-${i + 1}`)}`}
|
|
jstype="testport-copper"
|
|
id={`PLC-Rack-1B-${i + 1}`}
|
|
onClick={() => onPortClick(`PLC-Rack-1B-${i + 1}`)}
|
|
onMouseEnter={() => onPortHover(`PLC-Rack-1B-${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">{i + 1}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Data-Rack */}
|
|
<div className="w-[48%] p-1 flex flex-col">
|
|
<div className="text-center mb-1">Data-Rack</div>
|
|
<div className="h-[calc(100%-1.5rem)] rounded-md p-2 flex flex-col space-y-2">
|
|
{/* Row 1A - taking 1/2 of rack height */}
|
|
<div className="flex flex-col h-1/2 bg-gray-800 rounded-md p-2 relative">
|
|
<div className="absolute top-0 left-0 bg-white w-3 h-3 rounded-full"></div>
|
|
<div className="absolute top-0 right-0 bg-white w-3 h-3 rounded-full"></div>
|
|
<div className="absolute bottom-0 left-0 bg-white w-3 h-3 rounded-full"></div>
|
|
<div className="absolute bottom-0 right-0 bg-white w-3 h-3 rounded-full"></div>
|
|
<div className="flex-1 flex items-center">
|
|
<span className="text-xs mr-4">1A</span>
|
|
<div className="flex-1 flex items-center justify-center space-x-4">
|
|
{[...Array(8)].map((_, i) => (
|
|
<div key={i} className="flex flex-col items-center">
|
|
<div
|
|
className={`w-10 h-10 transition-colors flex items-center justify-center ${getPortStyle(`1F-RackA-1A-${i + 1}`)}`}
|
|
jstype="testport-copper"
|
|
id={`1F-RackA-1A-${i + 1}`}
|
|
onClick={() => onPortClick(`1F-RackA-1A-${i + 1}`)}
|
|
onMouseEnter={() => onPortHover(`1F-RackA-1A-${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">{i + 1}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Network Switch */}
|
|
<div className="flex flex-col h-1/2 bg-gray-900 rounded-md p-2 relative border border-gray-700">
|
|
{/* Switch Top Area - Brand and Status LEDs */}
|
|
<div className="h-8 flex items-center justify-between px-2 border-b border-gray-700">
|
|
<div className="text-blue-500 font-bold text-sm">SWITCH</div>
|
|
<div className="flex space-x-2">
|
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
|
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse"></div>
|
|
<div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
|
|
<div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Switch Port Area */}
|
|
<div className="flex-1 flex flex-row">
|
|
{/* Left Side - RJ45 Ports (80%) */}
|
|
<div className="w-4/6 flex flex-col">
|
|
{/* Port Labels */}
|
|
<div className="flex justify-between px-4 text-xs text-gray-400">
|
|
<span>10/100/1000 Base-T</span>
|
|
<span>1-20</span>
|
|
</div>
|
|
|
|
{/* Top Row Ports (1-10) - RJ45 */}
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="grid grid-cols-10 gap-0.5 w-full">
|
|
{[...Array(10)].map((_, i) => (
|
|
<div key={i} className="flex flex-col items-center">
|
|
<div
|
|
className="w-5 h-5 border border-gray-600 rounded-sm flex items-center justify-center transition-colors"
|
|
jstype=""
|
|
id={`SW-TOP-${i + 1}`}
|
|
>
|
|
<div className="w-4 h-4 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center"></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Row Ports (11-20) - RJ45 */}
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="grid grid-cols-10 gap-0.5 w-full">
|
|
{[...Array(10)].map((_, i) => (
|
|
<div key={i} className="flex flex-col items-center">
|
|
<div
|
|
className="w-5 h-5 border border-gray-600 rounded-sm flex items-center justify-center transition-colors"
|
|
jstype=""
|
|
id={`SW-BOT-${i + 1}`}
|
|
>
|
|
<div className="w-4 h-4 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center"></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Side - Fiber Ports (20%) */}
|
|
<div className="w-2/6 flex flex-col">
|
|
{/* Fiber Port Labels */}
|
|
<div className="flex justify-between px-1 text-xs text-gray-400">
|
|
<span>SFP+</span>
|
|
<span>21-24</span>
|
|
</div>
|
|
|
|
{/* Top Row Fiber Ports (21-22) */}
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="flex space-x-4"> {/* 使用 space-x-4 添加水平间距 */}
|
|
{[...Array(2)].map((_, i) => (
|
|
<div key={i} className="flex justify-center">
|
|
<div
|
|
className="w-10 h-5 border border-gray-600 rounded-sm flex items-center justify-center transition-colors"
|
|
>
|
|
<div className="flex">
|
|
<div className="w-4 h-4 bg-[url('/lc.png')] bg-contain bg-no-repeat bg-center"></div>
|
|
<div className="w-4 h-4 bg-[url('/lc.png')] bg-contain bg-no-repeat bg-center"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Row Fiber Ports (23-24) */}
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="flex space-x-4"> {/* 使用 space-x-4 添加水平间距 */}
|
|
{[...Array(2)].map((_, i) => (
|
|
<div key={i} className="flex justify-center">
|
|
<div
|
|
className="w-10 h-5 border border-gray-600 rounded-sm flex items-center justify-center transition-colors"
|
|
>
|
|
<div className="flex">
|
|
<div className="w-4 h-4 bg-[url('/lc.png')] bg-contain bg-no-repeat bg-center"
|
|
></div>
|
|
<div className="w-4 h-4 bg-[url('/lc.png')] bg-contain bg-no-repeat bg-center"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Switch Bottom Area - Console and Power */}
|
|
<div className="h-6 flex items-center justify-between px-2 border-t border-gray-700">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="text-xs text-gray-400">Console</div>
|
|
<div className="w-4 h-2 bg-gray-600 rounded-sm"></div>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="text-xs text-gray-400">Power</div>
|
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
} |