From d100657dacb25df91013ef25432620e6ae10d1f8 Mon Sep 17 00:00:00 2001
From: shimai <shimai@example.com>
Date: Thu, 09 Apr 2026 16:56:44 +0800
Subject: [PATCH] feat:增加白云案件类案数据
---
web-app/src/components/common/OutboundCallWidget.jsx | 205 +++++++++++++++++++++++++++++++-------------------
1 files changed, 126 insertions(+), 79 deletions(-)
diff --git a/web-app/src/components/common/OutboundCallWidget.jsx b/web-app/src/components/common/OutboundCallWidget.jsx
index 5eb7fab..b540357 100644
--- a/web-app/src/components/common/OutboundCallWidget.jsx
+++ b/web-app/src/components/common/OutboundCallWidget.jsx
@@ -1,6 +1,7 @@
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';
@@ -28,11 +29,11 @@
*/
const OutboundCallWidget = ({ onSwitchTab, onRefreshData }) => {
const { caseData } = useCaseData();
- const [isVisible, setIsVisible] = useState(false); // 默认不显示，有任务时自动显示
+ const [isVisible, setIsVisible] = useState(false); // 默认隐藏
const [isMinimized, setIsMinimized] = useState(false); // 默认展开（非最小化）
const [calls, setCalls] = useState([]);
+ const [mediationRecords, setMediationRecords] = useState([]); // AI调解记录
const isMountedRef = useRef(true);
- const fetchCallStatusRef = useRef(null); // 用于存储最新的 fetchCallStatus 函数引用
// 轮询间隔（毫秒）
const POLL_INTERVAL = 10000; // 10秒
@@ -40,8 +41,30 @@
// 最大重试次数
const MAX_RETRY_COUNT = 10;
- // 获取 caseIdg
+ // 获取 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) => {
@@ -59,12 +82,11 @@
// 读取成功的任务
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);
+ console.log('读取失败任务:', failedJobs);
// 清理失败任务 - 按 errorCode 不同策略
const now = Date.now();
@@ -112,8 +134,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 [];
@@ -215,40 +243,22 @@
* 查询通话状态
*/
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) {
+ if (failedJobs.length > 0 && !isVisible) {
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）
@@ -340,26 +350,18 @@
// 保存到 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];
+ // 合并成功任务和失败任务
+ const allJobs = [...cleanedJobs, ...failedJobs];
// 更新组件状态
if (isMountedRef.current) {
setCalls(allJobs);
- // 如果有任务，显示气泡（使用函数式更新避免依赖 isVisible）
- if (allJobs.length > 0) {
+ // 如果有任务，显示气泡
+ if (allJobs.length > 0 && !isVisible) {
setIsVisible(true);
}
}
- }, [triggerPageUpdate]);
-
- // 将最新的 fetchCallStatus 存储到 ref 中
- useEffect(() => {
- fetchCallStatusRef.current = fetchCallStatus;
- }, [fetchCallStatus]);
+ }, [isVisible, triggerPageUpdate]);
// 定时轮询通话状态
useEffect(() => {
@@ -368,49 +370,40 @@
// 初始加载
fetchCallStatus();
+ loadMediationRecords(); // 初始加载调解记录
// 设置轮询定时器（10秒间隔）
- const interval = setInterval(fetchCallStatus, POLL_INTERVAL);
+ const interval = setInterval(() => {
+ fetchCallStatus();
+ loadMediationRecords(); // 每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]);
-
- // 监听 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);
- };
- }, []); // 空依赖数组，只在组件挂载时设置一次
+ }, [fetchCallStatus, loadMediationRecords]);
// 关闭气泡
const handleClose = (e) => {
@@ -449,12 +442,8 @@
return true;
});
- // 添加调试日志
- console.log('渲染检查 - calls:', calls.length, 'activeCalls:', activeCalls.length, 'isVisible:', isVisible, 'isMinimized:', isMinimized);
-
- // 如果没有任务，不渲染任何内容
- if (activeCalls.length === 0) {
- console.log('无活跃任务，不渲染气泡');
+ // 如果没有活跃任务且不可见，不渲染任何内容
+ if (activeCalls.length === 0 && !isVisible) {
return null;
}
@@ -659,6 +648,64 @@
</div>
))}
+ {/* 无通话时的占位提示 */}
+ {activeCalls.length === 0 && isVisible && (
+ <div
+ 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,
+ }}
+ >
+ <i className="fas fa-times" />
+ </button>
+
+ <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+ <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>
+ <div style={{ fontSize: 16, fontWeight: 600 }}>智能外呼系统</div>
+ <div style={{ fontSize: 13, opacity: 0.85 }}>暂无进行中的通话</div>
+ </div>
+ </div>
+ </div>
+ )}
+
{/* CSS 动画 */}
<style>{`
@keyframes pulse {
--
Gitblit v1.8.0