dev
This commit is contained in:
130
src/components/scene/IndustryTask.js
Normal file
130
src/components/scene/IndustryTask.js
Normal file
@@ -0,0 +1,130 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Image from 'next/image';
|
||||
import useDeviceStore from '@/store/deviceStore';
|
||||
import { API_URLS } from '@/config/api';
|
||||
|
||||
export default function IndustryTask() {
|
||||
const { faultScenarios } = useDeviceStore();
|
||||
const [connections, setConnections] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchConnectionMap = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const response = await fetch(API_URLS.CONNECTION.MAP_WITH_SCENE(faultScenarios));
|
||||
if (!response.ok) {
|
||||
throw new Error('获取连接配置失败');
|
||||
}
|
||||
const data = await response.json();
|
||||
const formattedConnections = Object.entries(data || {})
|
||||
.filter(([portId]) => (
|
||||
!portId.includes('main-permanent') &&
|
||||
!portId.includes('main-channel') &&
|
||||
!portId.includes('remote-channel') &&
|
||||
!portId.includes('main-cfp-sm-out') &&
|
||||
!portId.includes('main-cfp-mm-out') &&
|
||||
!portId.includes('main-cfp-in') &&
|
||||
!portId.includes('remote-cfp-sm-out') &&
|
||||
!portId.includes('remote-cfp-mm-out') &&
|
||||
!portId.includes('remote-cfp-in')
|
||||
))
|
||||
.map(([source, connection]) => ({
|
||||
room: source,
|
||||
rack: connection.connectedTo
|
||||
}));
|
||||
setConnections(formattedConnections);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
console.error('获取连接配置错误:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchConnectionMap();
|
||||
}, [faultScenarios?.currentScene]);
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-br from-[#1E293B] to-[#0F172A] p-6 rounded-lg w-[full] h-[80vh] overflow-y-auto flex flex-col gap-6 shadow-2xl border border-[#334155] animate-fadeIn scrollbar-thin scrollbar-thumb-slate-600 scrollbar-track-slate-800">
|
||||
|
||||
{/* 任务标题 */}
|
||||
<div className="border-b border-cyan-700 pb-3 mb-3">
|
||||
<p className="text-sm font-semibold text-cyan-400 uppercase tracking-wider">新任务单</p>
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-gray-100 mt-1">任务要求：工业网络链路认证</h1>
|
||||
<p className="text-xs text-gray-400">任务编号: SIM-IND-NTW-007 </p>
|
||||
<p className="text-xs text-gray-400">地点: 智能制造产业园 - 自动化生产线</p>
|
||||
</div>
|
||||
|
||||
{/* 情况说明 */}
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-xl font-semibold text-cyan-300">情况说明</h2>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
智能制造产业园正在进行<span className="font-medium text-yellow-300">自动化生产线网络升级</span>工程。新的工业以太网基础设施已完成安装，连接了<span className="font-medium text-yellow-300">4个关键控制设备（Device X）</span>与中央控制室的<span className="font-medium text-yellow-300">工业网络机柜（Cabinet）</span>。
|
||||
</p>
|
||||
<div className=" h-100 relative">
|
||||
<Image src="/Industry.png" alt="industry" fill className="object-contain"/>
|
||||
</div>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
为确保生产线的稳定运行，需要对所有工业网络链路进行<span className="font-semibold text-red-400">严格的物理层认证测试</span>。这些链路必须满足<span className="font-medium text-yellow-300">Cat 6 F/UTP</span>标准，以支持高速数据传输和抗干扰要求。任何链路故障都可能导致生产线停机。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 任务目标 */}
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-xl font-semibold text-cyan-300">任务目标</h2>
|
||||
<ul className="list-disc list-inside text-gray-300 space-y-2 pl-4">
|
||||
<li>
|
||||
<strong className="text-gray-100">环境评估：</strong> 识别<span className="font-medium text-yellow-300">4条工业网络链路</span>（连接 Device X-Y 与Cabinet 的配线架）。
|
||||
</li>
|
||||
<li>
|
||||
<strong className="text-gray-100">测试准备：</strong> 使用<span className="font-medium text-yellow-300">DSX 网络认证分析仪</span>，确保测试参数符合工业环境要求。
|
||||
</li>
|
||||
<li>
|
||||
<strong className="text-gray-100">认证测试：</strong> 执行<span className="font-medium text-yellow-300">TIA 1005 </span>标准测试，重点关注<span className="font-medium text-yellow-300">串扰(Crosstalk)</span>和<span className="font-medium text-yellow-300">电磁干扰(EMI)抗性，至少需要保证E2等级</span>。
|
||||
</li>
|
||||
<li>
|
||||
<strong className="text-gray-100">数据分析：</strong> 评估测试结果，确认链路状态为<span className="font-semibold text-green-400">合格(PASS)</span>或<span className="font-semibold text-red-400">不合格(FAIL*)</span>。
|
||||
</li>
|
||||
<li>
|
||||
<strong className="text-gray-100">故障诊断：</strong> 对于不合格链路，使用<span className="font-medium text-yellow-300">高级诊断工具</span>定位故障点，特别注意工业环境特有的干扰源。
|
||||
</li>
|
||||
<li>
|
||||
<strong className="text-gray-100">报告记录：</strong> 按指定格式保存测试结果：<code className="bg-gray-700 px-1.5 py-0.5 rounded text-xs text-yellow-300">[主机连接端口]-[远端连接端口]</code> (示例：<code className="bg-gray-700 px-1.5 py-0.5 rounded text-xs text-yellow-300">Device1-1-Cabinet-A1</code>)。
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* 链路概览 */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-semibold text-cyan-300">工业链路概览</h3>
|
||||
<p className="text-gray-300">需要测试的工业网络链路包括各控制区域与中央控制室之间的连接。每条链路都配备了工业级屏蔽接头。</p>
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-gray-400 pl-4">
|
||||
{loading ? (
|
||||
<p>加载中...</p>
|
||||
) : error ? (
|
||||
<p className="text-red-400">{error}</p>
|
||||
) : (
|
||||
connections.map(link => (
|
||||
<p key={link.rack}>
|
||||
<code className="text-yellow-400">{link.room}</code> <-->
|
||||
<code className="text-yellow-400">{link.rack}</code>
|
||||
</p>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 最终指示 */}
|
||||
<div className="mt-4 border-t border-cyan-700 pt-4">
|
||||
<p className="text-lg font-semibold text-gray-100">开始工业网络测试</p>
|
||||
<p className="text-gray-300">请严格按照工业标准进行测试。记住，这些网络链路的可靠性直接关系到生产线的正常运转。</p>
|
||||
<p className="mt-2 text-cyan-400 font-medium">确保安全，祝你测试顺利！</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user