| | |
|---|
| | | import React from 'react'; |
|---|
| | | import { useCaseData } from '../../contexts/CaseDataContext'; |
|---|
| | | import { translateMediationState } from '../../utils/stateTranslator'; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 底部悬浮控制面板 |
|---|
| | | */ |
|---|
| | | const FloatingControlPanel = ({ currentStep = 1, elapsedTime = '25分钟', onManualTakeover }) => { |
|---|
| | | const stepNames = ['阶段1：意愿调查', '阶段2：材料核实', '阶段3：事实认定', '阶段4：达成协议', '阶段5：履约回访']; |
|---|
| | | const FloatingControlPanel = ({ onManualTakeover }) => { |
|---|
| | | const { caseData } = useCaseData(); |
|---|
| | | const timeline = caseData || {}; |
|---|
| | | |
|---|
| | | const state = timeline.mediation?.state; |
|---|
| | | const nodeName = timeline.current_node?.node_name || ''; |
|---|
| | | const orderNo = timeline.current_node?.order_no || 1; |
|---|
| | | |
|---|
| | | // 根据状态生成状态文本 |
|---|
| | | let statusText = ''; |
|---|
| | | if (state === 1) { |
|---|
| | | // 调解中状态 |
|---|
| | | statusText = `调解进行中-阶段${orderNo}：${nodeName}`; |
|---|
| | | } else { |
|---|
| | | // 其他状态 |
|---|
| | | statusText = translateMediationState(state) || '调解进行中'; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 获取已进行时间（使用before_duration） |
|---|
| | | const elapsedTime = timeline.before_duration || '25分钟'; |
|---|
| | | |
|---|
| | | const handleTakeover = () => { |
|---|
| | | if (onManualTakeover) { |
|---|
| | |
|---|
| | | <div className="status-indicator"> |
|---|
| | | <span className="status-dot"></span> |
|---|
| | | <span className="status-text"> |
|---|
| | | 调解进行中-{stepNames[currentStep]}{' '} |
|---|
| | | {statusText}{' '} |
|---|
| | | <span style={{ color: 'gray' }}>（已进行：{elapsedTime}）</span> |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
