import React, { useState, useEffect, useCallback, useRef } from 'react';
|
import { useCaseData } from '../../contexts/CaseDataContext';
|
import OutboundBotAPIService from '../../services/OutboundBotAPIService';
|
import { message } from 'antd';
|
|
const OUTBOUND_JOBS_KEY = 'outbound_call_jobs';
|
|
// 活跃状态列表
|
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);
|
|
/**
|
* 智能外呼通话显示组件
|
* 显示在页面右下角的气泡组件，支持多人通话
|
* @param {Object} props
|
* @param {Function} props.onSwitchTab - Tab切换回调
|
* @param {Function} props.onRefreshData - 数据刷新回调
|
*/
|
const OutboundCallWidget = ({ onSwitchTab, onRefreshData }) => {
|
const { caseData } = useCaseData();
|
const [isVisible, setIsVisible] = useState(false); // 默认不显示，有任务时自动显示
|
const [isMinimized, setIsMinimized] = useState(false); // 默认展开（非最小化）
|
const [calls, setCalls] = useState([]);
|
const isMountedRef = useRef(true);
|
const fetchCallStatusRef = useRef(null); // 用于存储最新的 fetchCallStatus 函数引用
|
|
// 轮询间隔（毫秒）
|
const POLL_INTERVAL = 10000; // 10秒
|
|
// 最大重试次数
|
const MAX_RETRY_COUNT = 10;
|
|
// 获取 caseIdg
|
const caseId = caseData?.caseId || caseData?.case_id;
|
|
// 格式化通话时长
|
const formatDuration = (seconds) => {
|
const mins = Math.floor(seconds / 60);
|
const secs = seconds % 60;
|
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
};
|
|
/**
|
* 从 localStorage 读取外呼任务（包括成功和失败的任务）
|
* @returns {Array} 任务数组
|
*/
|
const loadJobsFromStorage = () => {
|
try {
|
// 读取成功的任务
|
const storedSuccess = localStorage.getItem(OUTBOUND_JOBS_KEY);
|
const successJobs = storedSuccess ? JSON.parse(storedSuccess) : [];
|
console.log('读取成功任务:', successJobs.length, successJobs);
|
|
// 读取失败的任务
|
const storedFailed = localStorage.getItem(`${OUTBOUND_JOBS_KEY}_failed`);
|
const failedJobs = storedFailed ? JSON.parse(storedFailed) : [];
|
console.log('读取失败任务:', failedJobs.length, failedJobs);
|
|
// 清理失败任务 - 按 errorCode 不同策略
|
const now = Date.now();
|
const cleanedFailedJobs = failedJobs.filter(job => {
|
// errorCode: 1001 - 超过 startTime 就清理
|
if (job.errorCode === 1001) {
|
const jobStartTime = typeof job.startTime === 'string' ? new Date(job.startTime).getTime() : job.startTime;
|
return now < jobStartTime; // 当前时间小于 startTime 才保留
|
}
|
|
// errorCode: 1002 - 跨天清理 (比较日期是否不同)
|
if (job.errorCode === 1002) {
|
const startDate = new Date(job.startTime);
|
const nowDate = new Date(now);
|
|
// 格式化为 YYYY-MM-DD 进行比较
|
const startDateString = startDate.getFullYear() + '-' +
|
String(startDate.getMonth() + 1).padStart(2, '0') + '-' +
|
String(startDate.getDate()).padStart(2, '0');
|
|
const nowDateString = nowDate.getFullYear() + '-' +
|
String(nowDate.getMonth() + 1).padStart(2, '0') + '-' +
|
String(nowDate.getDate()).padStart(2, '0');
|
|
// 如果日期相同，保留；如果日期不同，清理
|
return startDateString === nowDateString;
|
}
|
|
// 其他 errorCode 使用默认 24 小时策略
|
return (now - job.startTime) < 24 * 60 * 60 * 1000;
|
});
|
|
// 如果清理后数量变化，更新 localStorage
|
if (cleanedFailedJobs.length !== failedJobs.length) {
|
localStorage.setItem(`${OUTBOUND_JOBS_KEY}_failed`, JSON.stringify(cleanedFailedJobs));
|
}
|
|
// 按 personId 去重失败任务
|
const uniqueFailedJobs = [];
|
const seenPersonIds = new Set();
|
cleanedFailedJobs.forEach(job => {
|
if (!seenPersonIds.has(job.personId)) {
|
seenPersonIds.add(job.personId);
|
uniqueFailedJobs.push(job);
|
}
|
});
|
|
// 合并所有任务
|
return [...successJobs, ...uniqueFailedJobs];
|
} catch (err) {
|
console.error('读取外呼任务失败:', err);
|
return [];
|
}
|
};
|
|
/**
|
* 保存任务到 localStorage
|
* @param {Array} jobs - 任务数组
|
*/
|
const saveJobsToStorage = (jobs) => {
|
try {
|
if (jobs.length === 0) {
|
localStorage.removeItem(OUTBOUND_JOBS_KEY);
|
} else {
|
localStorage.setItem(OUTBOUND_JOBS_KEY, JSON.stringify(jobs));
|
}
|
} catch (err) {
|
console.error('保存外呼任务失败:', err);
|
}
|
};
|
|
/**
|
* 批量更新通话状态到后端
|
* @param {Array} jobsToUpdate - 需要更新的任务列表
|
* @returns {Promise<boolean>} 是否有成功的更新
|
*/
|
const updateCallStatusToBackend = async (jobsToUpdate) => {
|
if (!jobsToUpdate || jobsToUpdate.length === 0) return false;
|
|
try {
|
// 并行调用所有任务的更新API
|
const results = await Promise.all(
|
jobsToUpdate.map(async (job) => {
|
try {
|
const statusToUpdate = job.backendStatus || job.newStatus;
|
if (!statusToUpdate) {
|
return { success: false, job };
|
}
|
await OutboundBotAPIService.updateCallStatus({
|
jobId: job.jobId,
|
callStatus: statusToUpdate
|
});
|
console.log(`状态更新成功: ${job.jobId} -> ${statusToUpdate}`);
|
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;
|
}
|
};
|
|
/**
|
* 触发页面更新（刷新数据 + 切换Tab）
|
*/
|
const triggerPageUpdate = useCallback(() => {
|
// 刷新案件数据
|
if (onRefreshData) {
|
onRefreshData();
|
}
|
// 切换到AI调解实时看板
|
if (onSwitchTab) {
|
onSwitchTab('mediation-board');
|
}
|
}, [onRefreshData, onSwitchTab]);
|
|
/**
|
* 移除终态或超时的任务
|
* @param {Array} jobs - 当前任务数组
|
* @returns {Array} 清理后的任务数组
|
*/
|
const cleanupJobs = (jobs) => {
|
const now = Date.now();
|
return jobs.filter(job => {
|
// 检查是否为活跃状态
|
if (isActiveStatus(job.callStatus)) {
|
// 检查是否超时（2小时）
|
const elapsed = now - (job.pollStartTime || job.startTime || now);
|
if (elapsed > 2 * 60 * 60 * 1000) {
|
console.warn('外呼轮询超时（2小时），自动停止，jobId:', job.jobId);
|
return false;
|
}
|
return true;
|
}
|
return false;
|
});
|
};
|
|
/**
|
* 查询通话状态
|
*/
|
const fetchCallStatus = useCallback(async () => {
|
console.log('fetchCallStatus 被调用');
|
|
// 从 localStorage 读取任务
|
const storedJobs = loadJobsFromStorage();
|
console.log('从 localStorage 读取的所有任务:', storedJobs);
|
|
// 分离成功任务和失败任务
|
const successJobs = storedJobs.filter(job => !job.errorCode && isActiveStatus(job.callStatus));
|
const failedJobs = storedJobs.filter(job => job.errorCode > 0);
|
|
console.log('成功任务数量:', successJobs.length, '失败任务数量:', failedJobs.length);
|
|
if (successJobs.length === 0) {
|
// 没有活跃任务，更新状态并返回
|
if (isMountedRef.current) {
|
setCalls([...failedJobs]);
|
if (failedJobs.length > 0) {
|
setIsVisible(true);
|
}
|
}
|
return;
|
}
|
|
// 立即显示气泡（不等待 API 返回）
|
console.log('isMountedRef.current:', isMountedRef.current);
|
if (isMountedRef.current) {
|
// 先合并当前的成功任务和失败任务，立即显示
|
const immediateJobs = [...successJobs, ...failedJobs.filter(f => !successJobs.some(s => s.personId === f.personId))];
|
console.log('准备设置 calls:', immediateJobs);
|
setCalls(immediateJobs);
|
setIsVisible(true);
|
console.log('立即显示气泡，任务数:', immediateJobs.length, 'isVisible 设置为 true');
|
} else {
|
console.log('组件未挂载，跳过显示气泡');
|
}
|
|
// 收集需要更新到后端的任务（状态变化且原状态不是Scheduling）
|
const jobsNeedBackendUpdate = [];
|
|
// 并行查询所有任务的状态
|
const updatedJobs = await Promise.all(
|
successJobs.map(async (job) => {
|
try {
|
const response = await OutboundBotAPIService.getCallStatus({
|
caseRef: job.caseId,
|
phoneNumber: job.phoneNumber,
|
jobId: job.jobId
|
});
|
|
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 (backendStatus !== SCHEDULING_STATUS && BACKEND_STATUSES.includes(backendStatus)) {
|
jobsNeedBackendUpdate.push({
|
...job,
|
newStatus,
|
backendStatus
|
});
|
}
|
|
// 如果是终态，可以从轮询中移除
|
if (!isActiveStatus(newStatus)) {
|
console.log(`任务 ${job.jobId} 达到终态: ${newStatus}`);
|
return null; // 标记为删除
|
}
|
|
return {
|
...job,
|
callStatus: newStatus,
|
pollStartTime: Date.now(), // 重置超时计时
|
retryCount: 0 // 重置重试计数
|
};
|
}
|
|
// 状态未变化，保留原任务
|
return job;
|
}
|
|
// API 返回空数据，保留原任务
|
return job;
|
} catch (err) {
|
console.error('获取通话状态失败:', err);
|
|
// 累加重试计数
|
const retryCount = job.retryCount + 1;
|
|
if (retryCount >= MAX_RETRY_COUNT) {
|
console.error('重试次数超限，jobId:', job.jobId);
|
message.error('外呼状态查询失败次数过多，已停止监控');
|
return null; // 标记为删除
|
}
|
|
return { ...job, retryCount };
|
}
|
})
|
);
|
|
// 过滤掉标记为删除的任务（null）
|
const filteredJobs = updatedJobs.filter(job => job !== null);
|
|
// 清理超时任务
|
const cleanedJobs = cleanupJobs(filteredJobs);
|
|
// 如果有需要更新到后端的任务，批量调用更新API
|
if (jobsNeedBackendUpdate.length > 0) {
|
const hasUpdateSuccess = await updateCallStatusToBackend(jobsNeedBackendUpdate);
|
|
// 如果有成功的更新，触发页面更新
|
if (hasUpdateSuccess) {
|
triggerPageUpdate();
|
}
|
}
|
|
// 保存到 localStorage
|
saveJobsToStorage(cleanedJobs);
|
|
// 合并成功任务和失败任务，按 personId 去重（成功任务优先）
|
const successPersonIds = new Set(cleanedJobs.map(job => job.personId));
|
// 过滤掉已有成功任务的 personId 对应的失败任务
|
const filteredFailedJobs = failedJobs.filter(job => !successPersonIds.has(job.personId));
|
const allJobs = [...cleanedJobs, ...filteredFailedJobs];
|
|
// 更新组件状态
|
if (isMountedRef.current) {
|
setCalls(allJobs);
|
// 如果有任务，显示气泡（使用函数式更新避免依赖 isVisible）
|
if (allJobs.length > 0) {
|
setIsVisible(true);
|
}
|
}
|
}, [triggerPageUpdate]);
|
|
// 将最新的 fetchCallStatus 存储到 ref 中
|
useEffect(() => {
|
fetchCallStatusRef.current = fetchCallStatus;
|
}, [fetchCallStatus]);
|
|
// 定时轮询通话状态
|
useEffect(() => {
|
// 组件挂载时设置为 true
|
isMountedRef.current = true;
|
|
// 初始加载
|
fetchCallStatus();
|
|
// 设置轮询定时器（10秒间隔）
|
const interval = setInterval(fetchCallStatus, POLL_INTERVAL);
|
|
// 清理函数
|
return () => {
|
clearInterval(interval);
|
isMountedRef.current = false;
|
};
|
}, [fetchCallStatus]);
|
|
// 监听 localStorage 变化，外呼成功后立即刷新
|
useEffect(() => {
|
const handleStorageChange = (e) => {
|
// 监听外呼任务存储的变化
|
if (e.key === OUTBOUND_JOBS_KEY || e.key === `${OUTBOUND_JOBS_KEY}_failed`) {
|
console.log('localStorage 变化，刷新外呼状态');
|
if (fetchCallStatusRef.current) {
|
fetchCallStatusRef.current();
|
}
|
}
|
};
|
|
// 监听 storage 事件（跨标签页同步）
|
window.addEventListener('storage', handleStorageChange);
|
|
// 同页面内的 localStorage 变化需要手动触发
|
// 创建自定义事件监听 - 使用 ref 避免依赖问题
|
const handleCustomStorageChange = () => {
|
console.log('同页面 localStorage 变化，刷新外呼状态');
|
if (fetchCallStatusRef.current) {
|
fetchCallStatusRef.current();
|
}
|
};
|
window.addEventListener('outbound-jobs-updated', handleCustomStorageChange);
|
|
console.log('事件监听器已设置: outbound-jobs-updated');
|
|
return () => {
|
window.removeEventListener('storage', handleStorageChange);
|
window.removeEventListener('outbound-jobs-updated', handleCustomStorageChange);
|
};
|
}, []); // 空依赖数组，只在组件挂载时设置一次
|
|
// 关闭气泡
|
const handleClose = (e) => {
|
e.stopPropagation();
|
setIsVisible(false);
|
setIsMinimized(true);
|
};
|
|
// 展开气泡
|
const handleExpand = () => {
|
setIsMinimized(false);
|
setIsVisible(true);
|
};
|
|
// 过滤掉已过期的任务（用于气泡显示）
|
const now = Date.now();
|
const activeCalls = calls.filter(call => {
|
// errorCode: 1001 - 超过 startTime 视为过期
|
if (call.errorCode === 1001) {
|
const callStartTime = typeof call.startTime === 'string' ? new Date(call.startTime).getTime() : call.startTime;
|
return now < callStartTime; // 当前时间小于 startTime 才显示
|
}
|
// errorCode: 1002 - 跨天视为过期
|
if (call.errorCode === 1002) {
|
const startDate = new Date(call.startTime);
|
const nowDate = new Date(now);
|
const startDateString = startDate.getFullYear() + '-' +
|
String(startDate.getMonth() + 1).padStart(2, '0') + '-' +
|
String(startDate.getDate()).padStart(2, '0');
|
const nowDateString = nowDate.getFullYear() + '-' +
|
String(nowDate.getMonth() + 1).padStart(2, '0') + '-' +
|
String(nowDate.getDate()).padStart(2, '0');
|
return startDateString === nowDateString; // 同一天才显示
|
}
|
// 其他状态的任务正常显示
|
return true;
|
});
|
|
// 添加调试日志
|
console.log('渲染检查 - calls:', calls.length, 'activeCalls:', activeCalls.length, 'isVisible:', isVisible, 'isMinimized:', isMinimized);
|
|
// 如果没有任务，不渲染任何内容
|
if (activeCalls.length === 0) {
|
console.log('无活跃任务，不渲染气泡');
|
return null;
|
}
|
|
// 如果最小化，显示AI客服图标
|
if (isMinimized) {
|
return (
|
<div
|
onClick={handleExpand}
|
style={{
|
position: 'fixed',
|
right: 20,
|
bottom: 80,
|
width: 56,
|
height: 56,
|
borderRadius: '50%',
|
background: 'linear-gradient(135deg, #1A6FB8 0%, #0d4a8a 100%)',
|
display: 'flex',
|
alignItems: 'center',
|
justifyContent: 'center',
|
cursor: 'pointer',
|
boxShadow: '0 4px 12px rgba(26, 111, 184, 0.4)',
|
zIndex: 1000,
|
transition: 'all 0.3s ease',
|
}}
|
onMouseEnter={(e) => {
|
e.currentTarget.style.transform = 'scale(1.1)';
|
}}
|
onMouseLeave={(e) => {
|
e.currentTarget.style.transform = 'scale(1)';
|
}}
|
>
|
<i
|
className="fas fa-headset"
|
style={{
|
fontSize: 24,
|
color: 'white',
|
}}
|
/>
|
{/* 红点提示有通话 */}
|
{activeCalls.length > 0 && (
|
<div
|
style={{
|
position: 'absolute',
|
top: -2,
|
right: -2,
|
width: 16,
|
height: 16,
|
borderRadius: '50%',
|
background: '#ff4d4f',
|
display: 'flex',
|
alignItems: 'center',
|
justifyContent: 'center',
|
fontSize: 10,
|
color: 'white',
|
fontWeight: 'bold',
|
}}
|
>
|
{activeCalls.length}
|
</div>
|
)}
|
</div>
|
);
|
}
|
|
// 展开状态 - 显示通话气泡
|
return (
|
<div
|
style={{
|
position: 'fixed',
|
right: 20,
|
bottom: 80,
|
zIndex: 1000,
|
display: 'flex',
|
flexDirection: 'column',
|
gap: 10,
|
maxWidth: 320,
|
}}
|
>
|
{activeCalls.map((call, index) => (
|
<div
|
key={call.jobId || call.phoneNumber || index}
|
style={{
|
background: 'linear-gradient(135deg, #1A6FB8 0%, #0d4a8a 100%)',
|
borderRadius: 12,
|
padding: '16px 20px',
|
color: 'white',
|
boxShadow: '0 4px 16px rgba(26, 111, 184, 0.3)',
|
position: 'relative',
|
minWidth: 280,
|
}}
|
>
|
{/* 关闭按钮 */}
|
<button
|
onClick={handleClose}
|
style={{
|
position: 'absolute',
|
top: 8,
|
right: 8,
|
width: 24,
|
height: 24,
|
borderRadius: '50%',
|
border: 'none',
|
background: 'rgba(255,255,255,0.2)',
|
color: 'white',
|
cursor: 'pointer',
|
display: 'flex',
|
alignItems: 'center',
|
justifyContent: 'center',
|
fontSize: 14,
|
transition: 'all 0.2s ease',
|
}}
|
onMouseEnter={(e) => {
|
e.currentTarget.style.background = 'rgba(255,255,255,0.3)';
|
}}
|
onMouseLeave={(e) => {
|
e.currentTarget.style.background = 'rgba(255,255,255,0.2)';
|
}}
|
>
|
<i className="fas fa-times" />
|
</button>
|
|
{/* 头部 - 智能体工作中 */}
|
<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-robot" style={{ fontSize: 18 }} />
|
</div>
|
<div style={{ flex: 1 }}>
|
<div
|
style={{
|
fontSize: 16,
|
fontWeight: 600,
|
display: 'flex',
|
alignItems: 'center',
|
gap: 8,
|
}}
|
>
|
智能体工作中
|
<span
|
style={{
|
width: 8,
|
height: 8,
|
borderRadius: '50%',
|
background: call.errorCode > 0 ? '#ff4d4f' : '#52c41a',
|
animation: 'pulse 2s infinite',
|
}}
|
/>
|
</div>
|
</div>
|
</div>
|
|
{/* 通话信息 */}
|
<div style={{ marginBottom: 10 }}>
|
<div style={{ fontSize: 14, opacity: 0.9, lineHeight: 1.5 }}>
|
{call.errorCode > 0 ? (
|
// 失败任务显示
|
<span>
|
{call.perTypeName || '联系人'}
|
{call.trueName && `（${call.trueName}）`}：
|
{call.message}
|
</span>
|
) : (
|
// 成功任务显示 - 使用 perTypeName 字段（申请方当事人/被申请方当事人）
|
<span>
|
正在与{call.perTypeName || '申请方当事人'}（{call.trueName || call.personId}）电话沟通中...
|
</span>
|
)}
|
</div>
|
</div>
|
|
{/* 通话时长（仅对成功任务显示）*/}
|
{!call.errorCode && call.pollStartTime && (
|
<div
|
style={{
|
display: 'flex',
|
alignItems: 'center',
|
gap: 6,
|
fontSize: 13,
|
opacity: 0.85,
|
}}
|
>
|
<i className="far fa-clock" />
|
<span>已持续: {formatDuration(Math.floor((Date.now() - call.pollStartTime) / 1000))}</span>
|
</div>
|
)}
|
</div>
|
))}
|
|
{/* CSS 动画 */}
|
<style>{`
|
@keyframes pulse {
|
0%, 100% { opacity: 1; }
|
50% { opacity: 0.5; }
|
}
|
`}</style>
|
</div>
|
);
|
};
|
|
export default OutboundCallWidget;
|
