feat: 实现智能外呼自动触发与状态监控功能

tony.cheng

2026-02-09 d31819515e4aac228f26e7cbb92c89e0f520e8ac

 web-app/src/components/dashboard/FloatingControlPanel.jsx

@@ -1,10 +1,31 @@
import React from 'react';
import { useCaseData } from '../../contexts/CaseDataContext';
import { translateMediationState } from '../../utils/stateTranslator';
import { useTaskTimer } from '../../hooks/useTaskTimer';

/**
 * 底部悬浮控制面板
 */
const FloatingControlPanel = ({ currentStep = 1, elapsedTime = '25分钟', onManualTakeover }) => {
  const stepNames = ['阶段1：意愿调查', '阶段2：材料核实', '阶段3：事实认定', '阶段4：达成协议', '阶段5：履约回访'];
const FloatingControlPanel = ({ onManualTakeover }) => {
  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 = '';
  if (state === 1) {
    // 调解中状态
    statusText = `调解进行中-阶段${orderNo}：${nodeName}`;
  } else {
    // 其他状态
    statusText = translateMediationState(state) || '调解进行中';
  }
  
  const handleTakeover = () => {
    if (onManualTakeover) {
@@ -22,8 +43,12 @@
        <div className="status-indicator">
          <span className="status-dot"></span>
          <span className="status-text">
            调解进行中-{stepNames[currentStep]}{' '}
            <span style={{ color: 'gray' }}>（已进行：{elapsedTime}）</span>
            {statusText}{' '}
            <span style={{ color: 'gray' }}>
              （已进行：{formattedTime}
              {isTaskTimeFallback && <span style={{ color: '#faad14' }}> *</span>}
              ）
            </span>
          </span>
        </div>
      </div>