// ===== 锁定作业登记表单（核心：A/B循环、多级校验、实时着色）===== const { useState: useStateLF, useEffect: useEffectLF, useMemo: useMemoLF, } = React; function LockoutForm({ device, ods, onBack, onSubmit, currentUser }) { // 步骤：0=基本信息 1=A循环锁定 2=B循环锁定 3=拍照签字 4=完成 const [step, setStep] = useStateLF(0); const [workType, setWorkType] = useStateLF(''); const [otherWorkTypeDesc, setOtherWorkTypeDesc] = useStateLF(''); const [operators, setOperators] = useStateLF([]); // [{id, type, name}] const [guardians, setGuardians] = useStateLF([]); // [{id, type, name}] const [remark, setRemark] = useStateLF(''); // A循环：能源锁定状态 {lockPointId: { locked: bool, verified: bool }} const [energyState, setEnergyState] = useStateLF({}); // B循环：信号锁定状态 const [signalState, setSignalState] = useStateLF({}); // 当前选中的能量类型 const [activeEnergyType, setActiveEnergyType] = useStateLF(null); // B循环是否可用（A循环全部完成后） const [bUnlocked, setBUnlocked] = useStateLF(false); const [showOperatorPicker, setShowOperatorPicker] = useStateLF(false); const [showGuardianPicker, setShowGuardianPicker] = useStateLF(false); const [pickerSearch, setPickerSearch] = useStateLF(''); const MAX_OPERATORS = 10; const MAX_GUARDIANS = 5; const [submitting, setSubmitting] = useStateLF(false); const [submitError, setSubmitError] = useStateLF(null); // 照片 const [photos, setPhotos] = useStateLF([]); const [showCamera, setShowCamera] = useStateLF(false); // 签名 const [operatorSig, setOperatorSig] = useStateLF(null); const [guardianSig, setGuardianSig] = useStateLF(null); const energyPoints = ods?.['能量信息'] || []; const signalPoints = ods?.['信号信息'] || []; // 能量类型分组 const energyByType = useMemoLF(() => { const groups = {}; energyPoints.forEach(p => { if (!groups[p['类型']]) groups[p['类型']] = []; groups[p['类型']].push(p); }); return groups; }, [energyPoints]); // 初始化状态 useEffectLF(() => { const initState = {}; energyPoints.forEach(p => { initState[p['锁定点编号']] = { locked: false, verified: false }; }); setEnergyState(initState); const sigInitState = {}; signalPoints.forEach(p => { sigInitState[p['锁定点编号']] = { locked: false, verified: false }; }); setSignalState(sigInitState); // 默认选中第一个能量类型 const types = Object.keys(energyByType); if (types.length > 0) setActiveEnergyType(types[0]); }, [energyPoints, signalPoints]); // 计算A循环进度 const aCycleProgress = useMemoLF(() => { const total = energyPoints.length; if (total === 0) return { total: 0, locked: 0, verified: 0, allDone: true }; let locked = 0, verified = 0; Object.values(energyState).forEach(s => { if (s.locked) locked++; if (s.verified) verified++; }); return { total, locked, verified, allDone: verified === total }; }, [energyState, energyPoints]); // 计算B循环进度 const bCycleProgress = useMemoLF(() => { const total = signalPoints.length; if (total === 0) return { total: 0, locked: 0, verified: 0, allDone: true }; let locked = 0, verified = 0; Object.values(signalState).forEach(s => { if (s.locked) locked++; if (s.verified) verified++; }); return { total, locked, verified, allDone: verified === total }; }, [signalState, signalPoints]); // A循环完成后解锁B循环 useEffectLF(() => { if (aCycleProgress.allDone && aCycleProgress.total > 0) { setBUnlocked(true); } }, [aCycleProgress.allDone]); const toggleEnergyLock = (pointId) => { setEnergyState(prev => { const next = { ...prev }; const current = next[pointId]; if (!current.locked) { // 锁定（第一次点击为锁定） next[pointId] = { locked: true, verified: false }; } else if (!current.verified) { // 已锁定未验证 -> 验证通过 next[pointId] = { locked: true, verified: true }; } else { // 已验证 -> 重置 next[pointId] = { locked: false, verified: false }; } return next; }); }; const toggleSignalLock = (pointId) => { if (!bUnlocked) return; setSignalState(prev => { const next = { ...prev }; const current = next[pointId]; if (!current.locked) { next[pointId] = { locked: true, verified: false }; } else if (!current.verified) { next[pointId] = { locked: true, verified: true }; } else { next[pointId] = { locked: false, verified: false }; } return next; }); }; const handleAddPhoto = (dataUrl) => { setPhotos(prev => [...prev, dataUrl]); setShowCamera(false); }; const removePhoto = (index) => { setPhotos(prev => prev.filter((_, i) => i !== index)); }; // 校验：作业类型、至少1名作业人员且相关方/手动添加都填写了姓名 const allOperatorNamesFilled = operators.every(o => o.type === 'authorized' || (o.name && o.name.trim()) ); const allGuardianNamesFilled = guardians.every(g => g.type === 'authorized' || (g.name && g.name.trim()) ); const canGoToStep2 = workType && operators.length > 0 && (workType !== 'other' || otherWorkTypeDesc.trim()) && allOperatorNamesFilled; const canGoToStep3 = aCycleProgress.allDone && (bCycleProgress.allDone || !showBCycle); const canSubmit = photos.length > 0 && operatorSig && guardianSig && allGuardianNamesFilled; const handleSubmit = async () => { setSubmitting(true); setSubmitError(null); try { const formData = { workType, otherWorkTypeDesc, operators, guardians, remark, energyState, signalState, photos, operatorSig, guardianSig, aCycleCompleted: aCycleProgress.allDone, bCycleEnabled: showBCycle, bCycleCompleted: showBCycle ? bCycleProgress.allDone : false, }; const saved = await submitLockoutRecord(device, ods, formData); onSubmit(saved); } catch (err) { console.error('提交失败:', err); setSubmitError(err.message || '提交失败，请重试'); setSubmitting(false); } }; // 进度环组件 const ProgressRing = ({ size, progress, strokeWidth = 4, color = 'var(--safety-yellow)' }) => { const radius = (size - strokeWidth) / 2; const circumference = 2 * Math.PI * radius; const offset = circumference - (progress / 100) * circumference; return ( ); }; const renderLockPointStatus = (pointId, state) => { if (state.verified) return 'verified'; if (state.locked) return 'unverified'; return ''; }; return (

锁定作业登记

{step + 1}/4
{/* 步骤指示 */}
= 0 ? (step > 0 ? 'done' : 'active') : ''}`}>
{step > 0 ? '✓' : '1'}
基本信息
0 ? 'done' : ''}`} />
= 1 ? (step > 1 ? 'done' : 'active') : ''}`}>
{step > 1 ? '✓' : '2'}
A/B循环
1 ? 'done' : ''}`} />
= 2 ? (step > 2 ? 'done' : 'active') : ''}`}>
{step > 2 ? '✓' : '3'}
拍照签字
2 ? 'done' : ''}`} />
= 3 ? 'active' : ''}`}>
4
确认提交
{/* ===== 步骤0：基本信息 ===== */} {step === 0 && (
作业类型
{WORK_TYPES.map(t => ( ))}
{workType === 'other' && (