From 6f45735adfdcd973a19f638f9ced9629f79cd6de Mon Sep 17 00:00:00 2001
From: shimai <shimai@example.com>
Date: Wed, 15 Apr 2026 16:12:01 +0800
Subject: [PATCH] v2.0: 提交当前所有变更，准备创建v2.0标签
---
web-app/src/components/common/OutboundCallWidget.jsx | 360 ++++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 292 insertions(+), 68 deletions(-)
diff --git a/web-app/src/components/common/OutboundCallWidget.jsx b/web-app/src/components/common/OutboundCallWidget.jsx
index 33ed299..7e18d32 100644
--- a/web-app/src/components/common/OutboundCallWidget.jsx
+++ b/web-app/src/components/common/OutboundCallWidget.jsx
@@ -1,15 +1,24 @@
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { useCaseData } from '../../contexts/CaseDataContext';
import OutboundBotAPIService from '../../services/OutboundBotAPIService';
+import ProcessAPIService from '../../services/ProcessAPIService';
import { message } from 'antd';
const OUTBOUND_JOBS_KEY = 'outbound_call_jobs';
// 活跃状态列表
-const ACTIVE_STATUSES = ['Scheduling', 'InProgress', 'Calling', 'Ringing', 'Answered'];
+const ACTIVE_STATUSES = ['Scheduling', 'Executing', 'Paused', 'Drafted', 'InProgress', 'Calling', 'Ringing', 'Answered'];
// Scheduling 状态 - 此状态变化不需要调用更新API
const SCHEDULING_STATUS = 'Scheduling';
+const BACKEND_STATUSES = ['Scheduling', 'Executing', 'Succeeded', 'Paused', 'Failed', 'Cancelled', 'Drafted'];
+const STATUS_TO_BACKEND = {
+ InProgress: 'Executing',
+ Calling: 'Executing',
+ Ringing: 'Executing',
+ Answered: 'Executing'
+};
+const isActiveStatus = (status) => !status || ACTIVE_STATUSES.includes(status);
/**
* 智能外呼通话显示组件
@@ -19,20 +28,47 @@
* @param {Function} props.onRefreshData - 数据刷新回调
*/
const OutboundCallWidget = ({ onSwitchTab, onRefreshData }) => {
- const { caseData } = useCaseData();
+ const { caseData, refreshNodeData } = useCaseData();
const [isVisible, setIsVisible] = useState(false); // 默认隐藏
- const [isMinimized, setIsMinimized] = useState(true);
+ const [isMinimized, setIsMinimized] = useState(false); // 默认展开（非最小化）
const [calls, setCalls] = useState([]);
+ const [mediationRecords, setMediationRecords] = useState([]); // AI调解记录
+ const [aiProcessingTasks, setAiProcessingTasks] = useState([]); // AI处理中任务
const isMountedRef = useRef(true);
// 轮询间隔（毫秒）
- const POLL_INTERVAL = 10000; // 10秒
+ const POLL_INTERVAL = 2000; // 2秒
+
+ // 节点数据轻量刷新间隔（毫秒）—— 与主轮询对齐，避免节点进度延迟
+ const NODE_REFRESH_INTERVAL = 2000; // 2秒
// 最大重试次数
const MAX_RETRY_COUNT = 10;
// 获取 caseId
const caseId = caseData?.caseId || caseData?.case_id;
+
+ // 获取 mediationId
+ const mediationId = caseData?.mediation?.id;
+
+ // 加载AI调解记录（无Loading效果）
+ const loadMediationRecords = useCallback(async () => {
+ if (!mediationId) return;
+
+ try {
+ const response = await ProcessAPIService.getProcessRecords({
+ mediation_id: mediationId
+ });
+
+ if (isMountedRef.current) {
+ setMediationRecords(response.data || []);
+ console.log('AI调解记录加载成功:', response.data?.length || 0, '条');
+ }
+ } catch (err) {
+ console.error('加载AI调解记录失败:', err);
+ // 不显示错误提示，不设置loading状态
+ }
+ }, [mediationId]);
// 格式化通话时长
const formatDuration = (seconds) => {
@@ -102,8 +138,14 @@
}
});
+ // 获取成功任务的 personId 集合
+ const successPersonIds = new Set(successJobs.map(job => job.personId));
+
+ // 过滤掉已有成功任务的 personId 对应的失败任务（成功任务优先）
+ const filteredFailedJobs = uniqueFailedJobs.filter(job => !successPersonIds.has(job.personId));
+
// 合并所有任务
- return [...successJobs, ...uniqueFailedJobs];
+ return [...successJobs, ...filteredFailedJobs];
} catch (err) {
console.error('读取外呼任务失败:', err);
return [];
@@ -127,53 +169,26 @@
};
/**
- * 批量更新通话状态到后端
- * @param {Array} jobsToUpdate - 需要更新的任务列表
- * @returns {Promise<boolean>} 是否有成功的更新
+ * [已废弃] 批量更新通话状态到后端
+ * 改造后状态更新由后端回调驱动，前端不再调用 update-status API
*/
- const updateCallStatusToBackend = async (jobsToUpdate) => {
- if (!jobsToUpdate || jobsToUpdate.length === 0) return false;
-
- try {
- // 并行调用所有任务的更新API
- const results = await Promise.all(
- jobsToUpdate.map(async (job) => {
- try {
- await OutboundBotAPIService.updateCallStatus({
- jobId: job.jobId,
- callStatus: job.newStatus
- });
- console.log(`状态更新成功: ${job.jobId} -> ${job.newStatus}`);
- return { success: true, job };
- } catch (err) {
- console.error(`状态更新失败: ${job.jobId}`, err);
- return { success: false, job };
- }
- })
- );
-
- // 检查是否有成功的更新
- const hasSuccess = results.some(r => r.success);
- return hasSuccess;
- } catch (err) {
- console.error('批量更新状态失败:', err);
- return false;
- }
- };
+ // const updateCallStatusToBackend = async (jobsToUpdate) => { ... 已移除 };
/**
- * 触发页面更新（刷新数据 + 切换Tab）
+ * 触发页面更新（轻量刷新节点数据 + 切换Tab）
+ * 不调用 onRefreshData（全量刷新会重复触发外呼/OCR），改用轻量级 refreshNodeData
*/
const triggerPageUpdate = useCallback(() => {
- // 刷新案件数据
- if (onRefreshData) {
- onRefreshData();
+ // 轻量刷新节点数据（仅 timeline + processNodes，不触发外呼等副作用）
+ if (refreshNodeData) {
+ console.log('[Widget] 终态检测 → 立即轻量刷新节点数据');
+ refreshNodeData();
}
// 切换到AI调解实时看板
if (onSwitchTab) {
onSwitchTab('mediation-board');
}
- }, [onRefreshData, onSwitchTab]);
+ }, [refreshNodeData, onSwitchTab]);
/**
* 移除终态或超时的任务
@@ -184,7 +199,7 @@
const now = Date.now();
return jobs.filter(job => {
// 检查是否为活跃状态
- if (ACTIVE_STATUSES.includes(job.callStatus)) {
+ if (isActiveStatus(job.callStatus)) {
// 检查是否超时（2小时）
const elapsed = now - (job.pollStartTime || job.startTime || now);
if (elapsed > 2 * 60 * 60 * 1000) {
@@ -201,11 +216,43 @@
* 查询通话状态
*/
const fetchCallStatus = useCallback(async () => {
- // 从 localStorage 读取任务
+ // ── Step 1: 从后端补充活跃记录（解决后端创建任务前端不知情的问题）──
+ if (mediationId) {
+ try {
+ const backendResp = await OutboundBotAPIService.getActiveRecords({ mediation_id: mediationId });
+ const backendJobs = backendResp?.data || [];
+ if (backendJobs.length > 0) {
+ const storedRaw = localStorage.getItem(OUTBOUND_JOBS_KEY);
+ const storedJobs = storedRaw ? JSON.parse(storedRaw) : [];
+ const storedJobIds = new Set(storedJobs.map(j => j.jobId));
+ let changed = false;
+ backendJobs.forEach(bj => {
+ if (!storedJobIds.has(bj.jobId)) {
+ const createTs = bj.createTime ? new Date(bj.createTime).getTime() : Date.now();
+ storedJobs.push({
+ ...bj,
+ startTime: createTs,
+ pollStartTime: Date.now(),
+ retryCount: 0,
+ });
+ changed = true;
+ console.log('[Widget] 从后端补充活跃外呼任务:', bj.jobId, bj.perTypeName, bj.callStatus);
+ }
+ });
+ if (changed) {
+ localStorage.setItem(OUTBOUND_JOBS_KEY, JSON.stringify(storedJobs));
+ }
+ }
+ } catch (e) {
+ console.warn('[Widget] 从后端获取活跃记录失败:', e);
+ }
+ }
+
+ // ── Step 2: 从 localStorage 读取任务（与原逻辑一致）──
const storedJobs = loadJobsFromStorage();
// 分离成功任务和失败任务
- const successJobs = storedJobs.filter(job => !job.errorCode && ACTIVE_STATUSES.includes(job.callStatus));
+ const successJobs = storedJobs.filter(job => !job.errorCode && isActiveStatus(job.callStatus));
const failedJobs = storedJobs.filter(job => job.errorCode > 0);
if (successJobs.length === 0) {
@@ -234,21 +281,26 @@
if (response?.data) {
const newStatus = response.data.callStatus;
+ if (!newStatus) {
+ return job;
+ }
+ const backendStatus = STATUS_TO_BACKEND[newStatus] || newStatus;
// 如果状态发生变化，更新任务
if (newStatus !== job.callStatus) {
console.log(`任务 ${job.jobId} 状态更新: ${job.callStatus} -> ${newStatus}`);
// 检查是否需要调用后端更新API（排除Scheduling状态）
- if (job.callStatus !== SCHEDULING_STATUS) {
+ if (backendStatus !== SCHEDULING_STATUS && BACKEND_STATUSES.includes(backendStatus)) {
jobsNeedBackendUpdate.push({
...job,
- newStatus
+ newStatus,
+ backendStatus
});
}
// 如果是终态，可以从轮询中移除
- if (!ACTIVE_STATUSES.includes(newStatus)) {
+ if (!isActiveStatus(newStatus)) {
console.log(`任务 ${job.jobId} 达到终态: ${newStatus}`);
return null; // 标记为删除
}
@@ -290,14 +342,13 @@
// 清理超时任务
const cleanedJobs = cleanupJobs(filteredJobs);
- // 如果有需要更新到后端的任务，批量调用更新API
- if (jobsNeedBackendUpdate.length > 0) {
- const hasUpdateSuccess = await updateCallStatusToBackend(jobsNeedBackendUpdate);
-
- // 如果有成功的更新，触发页面更新
- if (hasUpdateSuccess) {
- triggerPageUpdate();
- }
+ // 轮询仅用于 UI 展示，不再调用后端 update-status API
+ // 状态更新已由后端回调驱动，前端不再触发推进
+
+ // 如果有终态任务，触发页面更新
+ const hasTerminalJobs = jobsNeedBackendUpdate.length > 0;
+ if (hasTerminalJobs) {
+ triggerPageUpdate();
}
// 保存到 localStorage
@@ -314,22 +365,101 @@
setIsVisible(true);
}
}
- }, [isVisible, triggerPageUpdate]);
+ }, [isVisible, triggerPageUpdate, mediationId]);
+
+ // 记录上一次 AI 处理任务数，用于检测 "处理中→完成" 变化
+ const prevAiTaskCountRef = useRef(0);
+
+ // 轮询 AI 处理状态
+ const fetchAiProcessingStatus = useCallback(async () => {
+ if (!mediationId) return;
+ try {
+ const resp = await OutboundBotAPIService.getAiProcessingStatus({ mediation_id: mediationId });
+ const tasks = resp?.data || [];
+ if (isMountedRef.current) {
+ const prevCount = prevAiTaskCountRef.current;
+ prevAiTaskCountRef.current = tasks.length;
+ setAiProcessingTasks(tasks);
+
+ // AI 任务从 "有" → "无"（处理完成），立即刷新节点数据以感知新节点推进
+ if (prevCount > 0 && tasks.length === 0) {
+ console.log('[Widget] AI处理全部完成 → 立即刷新节点数据');
+ if (refreshNodeData) refreshNodeData();
+ }
+
+ // 如果有 AI 处理中任务，确保悬浮窗可见
+ if (tasks.length > 0 && !isVisible) {
+ setIsVisible(true);
+ }
+ }
+ } catch (e) {
+ // 不影响主流程，静默失败
+ console.warn('[Widget] 查询AI处理状态失败:', e);
+ }
+ }, [mediationId, isVisible, refreshNodeData]);
// 定时轮询通话状态
useEffect(() => {
+ // 组件挂载时设置为 true
+ isMountedRef.current = true;
+
// 初始加载
fetchCallStatus();
+ loadMediationRecords(); // 初始加载调解记录
+ // AI 处理状态初始加载
+ fetchAiProcessingStatus();
+
// 设置轮询定时器（10秒间隔）
- const interval = setInterval(fetchCallStatus, POLL_INTERVAL);
+ const interval = setInterval(() => {
+ fetchCallStatus();
+ loadMediationRecords(); // 每10秒加载一次AI调解记录
+ fetchAiProcessingStatus(); // 每10秒查询AI处理状态
+ }, POLL_INTERVAL);
+
+ // 监听外呼任务更新事件（立即刷新）
+ const handleOutboundJobsUpdated = () => {
+ console.log('收到外呼任务更新事件，立即刷新');
+ fetchCallStatus();
+ };
+ window.addEventListener('outbound-jobs-updated', handleOutboundJobsUpdated);
+
+ // 监听调解终止事件（关闭外呼气泡）
+ const handleMediationTerminated = () => {
+ console.log('收到调解终止事件，关闭外呼气泡');
+ setIsVisible(false);
+ setIsMinimized(true);
+ // 清空localStorage中的外呼任务
+ localStorage.removeItem(OUTBOUND_JOBS_KEY);
+ setCalls([]);
+ };
+ window.addEventListener('mediation-terminated', handleMediationTerminated);
// 清理函数
return () => {
clearInterval(interval);
+ window.removeEventListener('outbound-jobs-updated', handleOutboundJobsUpdated);
+ window.removeEventListener('mediation-terminated', handleMediationTerminated);
isMountedRef.current = false;
};
- }, [fetchCallStatus]);
+ }, [fetchCallStatus, loadMediationRecords, fetchAiProcessingStatus]);
+
+ // 独立定时器：周期性轻量刷新 timeline + processNodes（不依赖闭包变量，避免过期状态问题）
+ useEffect(() => {
+ const mediationState = caseData?.mediation?.state;
+ // 仅在调解进行中时启动周期性刷新
+ if (mediationState !== 1) return;
+
+ console.log('[Widget] 启动节点数据周期性轻量刷新，间隔:', NODE_REFRESH_INTERVAL, 'ms');
+ const nodeRefreshTimer = setInterval(() => {
+ if (isMountedRef.current && refreshNodeData) {
+ console.log('[Widget] 执行节点数据轻量刷新');
+ refreshNodeData();
+ }
+ }, NODE_REFRESH_INTERVAL);
+
+ return () => clearInterval(nodeRefreshTimer);
+ }, [caseData?.mediation?.state, refreshNodeData]);
// 关闭气泡
const handleClose = (e) => {
@@ -368,6 +498,11 @@
return true;
});
+ // 如果没有活跃任务且没有AI处理中任务且不可见，不渲染任何内容
+ if (activeCalls.length === 0 && aiProcessingTasks.length === 0 && !isVisible) {
+ return null;
+ }
+
// 如果最小化，显示AI客服图标
if (isMinimized) {
return (
@@ -403,8 +538,8 @@
color: 'white',
}}
/>
- {/* 红点提示有通话 */}
- {activeCalls.length > 0 && (
+ {/* 红点提示有通话或AI处理中 */}
+ {(activeCalls.length + aiProcessingTasks.length) > 0 && (
<div
style={{
position: 'absolute',
@@ -413,7 +548,7 @@
width: 16,
height: 16,
borderRadius: '50%',
- background: '#ff4d4f',
+ background: aiProcessingTasks.length > 0 ? '#722ED1' : '#ff4d4f',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -422,7 +557,7 @@
fontWeight: 'bold',
}}
>
- {activeCalls.length}
+ {activeCalls.length + aiProcessingTasks.length}
</div>
)}
</div>
@@ -538,14 +673,14 @@
{call.errorCode > 0 ? (
// 失败任务显示
<span>
- {call.perClassName || '联系人'}
+ {call.perTypeName || '联系人'}
{call.trueName && `（${call.trueName}）`}：
{call.message}
</span>
) : (
- // 成功任务显示
+ // 成功任务显示 - 使用 perTypeName 字段（申请方当事人/被申请方当事人）
<span>
- 正在与{call.perClassName || '申请方'}（{call.trueName || call.personId}）电话沟通中...
+ 正在与{call.perTypeName || '申请方当事人'}（{call.trueName || call.personId}）电话沟通中...
</span>
)}
</div>
@@ -569,8 +704,97 @@
</div>
))}
+ {/* AI 处理中加载态卡片 */}
+ {aiProcessingTasks.map((task, index) => (
+ <div
+ key={`ai-${task.jobId || index}`}
+ style={{
+ background: 'linear-gradient(135deg, #722ED1 0%, #531DAB 100%)',
+ borderRadius: 12,
+ padding: '16px 20px',
+ color: 'white',
+ boxShadow: '0 4px 16px rgba(114, 46, 209, 0.3)',
+ position: 'relative',
+ minWidth: 280,
+ }}
+ >
+ {/* 头部 - AI 分析中 */}
+ <div
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: 10,
+ marginBottom: 12,
+ }}
+ >
+ <div
+ style={{
+ width: 36,
+ height: 36,
+ borderRadius: '50%',
+ background: 'rgba(255,255,255,0.2)',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }}
+ >
+ <i className="fas fa-brain" style={{ fontSize: 18, animation: 'pulse 1.5s infinite' }} />
+ </div>
+ <div style={{ flex: 1 }}>
+ <div
+ style={{
+ fontSize: 16,
+ fontWeight: 600,
+ display: 'flex',
+ alignItems: 'center',
+ gap: 8,
+ }}
+ >
+ AI 分析中
+ <span
+ style={{
+ width: 8,
+ height: 8,
+ borderRadius: '50%',
+ background: '#B37FEB',
+ animation: 'pulse 1.5s infinite',
+ }}
+ />
+ </div>
+ </div>
+ </div>
+
+ {/* 分析信息 */}
+ <div style={{ marginBottom: 10 }}>
+ <div style={{ fontSize: 14, opacity: 0.95, lineHeight: 1.6 }}>
+ <span>{task.personName || '当事人'} 通话分析</span>
+ </div>
+ <div style={{ fontSize: 12, opacity: 0.75, marginTop: 6, display: 'flex', flexDirection: 'column', gap: 4 }}>
+ {(task.steps || []).includes('summary') && (
+ <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+ <i className="fas fa-file-alt" style={{ fontSize: 11 }} />
+ <span>对话总结生成中...</span>
+ </div>
+ )}
+ {(task.steps || []).includes('emotion') && (
+ <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+ <i className="fas fa-heart" style={{ fontSize: 11 }} />
+ <span>情绪识别中...</span>
+ </div>
+ )}
+ {(task.steps || []).includes('success_rate') && (
+ <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+ <i className="fas fa-chart-line" style={{ fontSize: 11 }} />
+ <span>成功率评估中...</span>
+ </div>
+ )}
+ </div>
+ </div>
+ </div>
+ ))}
+
{/* 无通话时的占位提示 */}
- {activeCalls.length === 0 && isVisible && (
+ {activeCalls.length === 0 && aiProcessingTasks.length === 0 && isVisible && (
<div
style={{
background: 'linear-gradient(135deg, #1A6FB8 0%, #0d4a8a 100%)',
@@ -638,4 +862,4 @@
);
};
-export default OutboundCallWidget;
\ No newline at end of file
+export default OutboundCallWidget;
--
Gitblit v1.8.0