| | |
|---|
| | | import React from 'react'; |
|---|
| | | import { useCaseData } from '../../contexts/CaseDataContext'; |
|---|
| | | import { translateMediationState } from '../../utils/stateTranslator'; |
|---|
| | | import { useTaskTimer } from '../../hooks/useTaskTimer'; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 底部悬浮控制面板 |
|---|
| | | */ |
|---|
| | | const FloatingControlPanel = ({ onManualTakeover }) => { |
|---|
| | | const { caseData } = useCaseData(); |
|---|
| | | const { caseData, taskStartTime, isTaskTimeFallback } = useCaseData(); |
|---|
| | | const timeline = caseData || {}; |
|---|
| | | |
|---|
| | | const state = timeline.mediation?.state; |
|---|
| | | const nodeName = timeline.current_node?.node_name || ''; |
|---|
| | | const orderNo = timeline.current_node?.order_no || 1; |
|---|
| | | |
|---|
| | | // 使用任务计时Hook获取实时时间 |
|---|
| | | const { formattedTime } = useTaskTimer(taskStartTime, isTaskTimeFallback); |
|---|
| | | |
|---|
| | | // 根据状态生成状态文本 |
|---|
| | | let statusText = ''; |
|---|
| | |
|---|
| | | // 其他状态 |
|---|
| | | statusText = translateMediationState(state) || '调解进行中'; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 获取已进行时间（使用before_duration） |
|---|
| | | const elapsedTime = timeline.before_duration || '25分钟'; |
|---|
| | | |
|---|
| | | const handleTakeover = () => { |
|---|
| | | if (onManualTakeover) { |
|---|
| | |
|---|
| | | <span className="status-dot"></span> |
|---|
| | | <span className="status-text"> |
|---|
| | | {statusText}{' '} |
|---|
| | | <span style={{ color: 'gray' }}>（已进行：{elapsedTime}）</span> |
|---|
| | | <span style={{ color: 'gray' }}> |
|---|
| | | （已进行：{formattedTime} |
|---|
| | | {isTaskTimeFallback && <span style={{ color: '#faad14' }}> *</span>} |
|---|
| | | ） |
|---|
| | | </span> |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
