411 lines
16 KiB
TypeScript
411 lines
16 KiB
TypeScript
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
import { ArrowRight, Layers, Plus, Search, Users, X } from 'lucide-react';
|
|
import dayjs from 'dayjs';
|
|
import { DateRangePicker, DateRangePickerProps, DateRangeValue, Loading } from 'tdesign-react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useTheme } from '@/contexts/ThemeContext';
|
|
import { requestCrudService } from '@/service/request-axios-service';
|
|
import { KanbanColumn } from './KanbanColumn';
|
|
import { TaskListItem } from './TaskManagement';
|
|
import { sentimentAnalyzeMock } from './kanbanMock';
|
|
|
|
interface TaskListPageProps {
|
|
title: string;
|
|
category: string;
|
|
subCategory: string;
|
|
}
|
|
|
|
interface StateItem {
|
|
startTime: string;
|
|
endTime: string;
|
|
task: TaskListItem | null;
|
|
}
|
|
|
|
type ColumnType = 'unanalyzed' | 'running' | 'completed';
|
|
|
|
const service = requestCrudService;
|
|
const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
|
|
|
|
const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCategory }) => {
|
|
const { theme } = useTheme();
|
|
const navigate = useNavigate();
|
|
const isDark = theme === 'dark';
|
|
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [showAnalysisModal, setShowAnalysisModal] = useState(false);
|
|
const [selectedTask, setSelectedTask] = useState<TaskListItem | null>(null);
|
|
const [unanalyzedTotal, setUnanalyzedTotal] = useState(0);
|
|
const [runningTotal, setRunningTotal] = useState(0);
|
|
const [completedTotal, setCompletedTotal] = useState(0);
|
|
const [unanalyzedList, setUnanalyzedList] = useState<TaskListItem[]>([]);
|
|
const [runningList, setRunningList] = useState<TaskListItem[]>([]);
|
|
const [completedList, setCompletedList] = useState<TaskListItem[]>([]);
|
|
const [unanalyzedLoading, setUnanalyzedLoading] = useState(false);
|
|
const [runningLoading, setRunningLoading] = useState(false);
|
|
const [completedLoading, setCompletedLoading] = useState(false);
|
|
const [range, setRange] = useState<DateRangeValue>([]);
|
|
|
|
const stateRef = useRef<StateItem>({
|
|
startTime: '',
|
|
endTime: '',
|
|
task: null,
|
|
});
|
|
|
|
const presets = useMemo<DateRangePickerProps['presets']>(
|
|
() => ({
|
|
最近7天: [dayjs().subtract(6, 'day').toDate(), dayjs().toDate()],
|
|
最近3天: [dayjs().subtract(2, 'day').toDate(), dayjs().toDate()],
|
|
今天: [dayjs().toDate(), dayjs().toDate()],
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const taskStatusMap: Record<ColumnType, number[]> = {
|
|
unanalyzed: [0, 10],
|
|
running: [20],
|
|
completed: [25, 30, 40, 60, 70, 80, 90, 100, 110],
|
|
};
|
|
|
|
const setRangeChange = async (value: DateRangeValue) => {
|
|
setRange(value);
|
|
stateRef.current.startTime = '';
|
|
stateRef.current.endTime = '';
|
|
|
|
if (Array.isArray(value) && value.length > 1) {
|
|
stateRef.current.startTime = String(value[0] || '');
|
|
stateRef.current.endTime = String(value[1] || '');
|
|
}
|
|
|
|
await taskDataChange();
|
|
};
|
|
|
|
const applyColumnData = (taskType: ColumnType, list: TaskListItem[], total: number) => {
|
|
if (taskType === 'unanalyzed') {
|
|
setUnanalyzedTotal(total);
|
|
setUnanalyzedList(list);
|
|
} else if (taskType === 'running') {
|
|
setRunningTotal(total);
|
|
setRunningList(list);
|
|
} else {
|
|
setCompletedTotal(total);
|
|
setCompletedList(list);
|
|
}
|
|
};
|
|
|
|
const taskListSearch = async (
|
|
taskType: ColumnType,
|
|
pageNum = 1,
|
|
pageSize = 10,
|
|
) => {
|
|
if (taskType === 'unanalyzed') setUnanalyzedLoading(true);
|
|
if (taskType === 'running') setRunningLoading(true);
|
|
if (taskType === 'completed') setCompletedLoading(true);
|
|
|
|
try {
|
|
const response = await service.post(`${zncmUrl}/three/cop-three-tasks`, {
|
|
content: searchQuery,
|
|
pageNum,
|
|
pageSize,
|
|
taskStatus: taskStatusMap[taskType],
|
|
startTime: stateRef.current.startTime,
|
|
endTime: stateRef.current.endTime,
|
|
taskDirection: '',
|
|
});
|
|
|
|
const result = response?.data ?? {};
|
|
const records = Array.isArray(result.records) ? result.records : [];
|
|
const normalized = records.map((item: TaskListItem) => ({
|
|
...item,
|
|
column: taskType,
|
|
taskLevel: item.taskLevel || 1,
|
|
}));
|
|
|
|
if (normalized.length === 0) {
|
|
// 接口无数据时回落到本地预览数据，方便联调看效果
|
|
const mock = sentimentAnalyzeMock[taskType];
|
|
applyColumnData(taskType, mock, mock.length);
|
|
return;
|
|
}
|
|
|
|
applyColumnData(taskType, normalized, Number(result.total ?? normalized.length));
|
|
} catch (err) {
|
|
console.warn('三情任务查询失败，使用本地预览数据', err);
|
|
const mock = sentimentAnalyzeMock[taskType];
|
|
applyColumnData(taskType, mock, mock.length);
|
|
} finally {
|
|
if (taskType === 'unanalyzed') setUnanalyzedLoading(false);
|
|
if (taskType === 'running') setRunningLoading(false);
|
|
if (taskType === 'completed') setCompletedLoading(false);
|
|
}
|
|
};
|
|
|
|
const pageIndexChange = async (type: string, pageIndex: number) => {
|
|
await taskListSearch(type as ColumnType, pageIndex);
|
|
};
|
|
|
|
const taskDataChange = async (pageNum = 1, pageSize = 10) => {
|
|
await Promise.all([
|
|
taskListSearch('unanalyzed', pageNum, pageSize),
|
|
taskListSearch('running', pageNum, pageSize),
|
|
taskListSearch('completed', pageNum, pageSize),
|
|
]);
|
|
};
|
|
|
|
const handleStartAnalysis = (task: TaskListItem) => {
|
|
setSelectedTask(task);
|
|
stateRef.current.task = task;
|
|
setShowAnalysisModal(true);
|
|
};
|
|
|
|
const handleOpenTaskDetail = () => {
|
|
if (!stateRef.current.task) return;
|
|
window.open(`https://ch1.b.uat.4.cn/web/#/task/item-aicoh/step-info-search?id=${stateRef.current.task.id}`);
|
|
setShowAnalysisModal(false);
|
|
};
|
|
|
|
const handleOpenConsultation = () => {
|
|
const task = stateRef.current.task;
|
|
if (!task) return;
|
|
// 会商自动化串联（模块 C）：跳转圆桌规划页，带上任务名称/描述 + 本页业务码（3Q=三情分析）。
|
|
// 圆桌据此自动开跑 Step 1，并在「进入研讨」时自动选用 3Q 配置的业务链（跳过选链弹窗）。
|
|
navigate('/page/strategy/qa/multi-agent-roundtable', {
|
|
state: {
|
|
roundtablePrefill: {
|
|
taskTitle: task.taskName,
|
|
taskGoal: task.overview,
|
|
businessCode: '3Q',
|
|
autoStart: true,
|
|
},
|
|
},
|
|
});
|
|
setShowAnalysisModal(false);
|
|
};
|
|
|
|
const handleKeyDown = async (event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if ((event.metaKey || event.ctrlKey || event.shiftKey) && event.key === 'Enter') {
|
|
event.preventDefault();
|
|
} else if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
await taskDataChange();
|
|
} else if (event.key === '/') {
|
|
event.preventDefault();
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
taskDataChange();
|
|
}, []);
|
|
|
|
const shellClass = isDark
|
|
? 'strategy-data h-full overflow-y-auto bg-[linear-gradient(180deg,#081322_0%,#0d1d33_42%,#0a1628_100%)]'
|
|
: 'strategy-data h-full overflow-y-auto bg-[linear-gradient(180deg,#FFFDFD_0%,#FFF7F7_46%,#FAFAFA_100%)]';
|
|
|
|
const toolbarClass = isDark
|
|
? 'border border-[rgba(67,89,124,0.46)] bg-[rgba(10,23,42,0.94)] text-white shadow-[0_16px_36px_rgba(3,10,22,0.2)]'
|
|
: 'border border-[#E8E8E8] bg-white text-[#222222] shadow-[0_14px_30px_rgba(245,34,45,0.06)]';
|
|
|
|
const metricClass = isDark
|
|
? 'border border-[rgba(67,89,124,0.46)] bg-[rgba(12,29,54,0.94)]'
|
|
: 'border border-[#E8E8E8] bg-white';
|
|
|
|
const inputClass = isDark
|
|
? 'border-[rgba(67,89,124,0.46)] bg-[rgba(8,19,35,0.9)] text-white placeholder:text-slate-500'
|
|
: 'border-[#E8E8E8] bg-white text-[#222222] placeholder:text-[#A6A6A6]';
|
|
|
|
const metrics = [
|
|
{ label: '全部任务', value: unanalyzedTotal + runningTotal + completedTotal },
|
|
{ label: '未分析', value: unanalyzedTotal },
|
|
{ label: '分析中', value: runningTotal },
|
|
{ label: '已完成', value: completedTotal },
|
|
];
|
|
|
|
return (
|
|
<div className={shellClass}>
|
|
<div className="mx-auto flex min-h-full max-w-[1680px] flex-col gap-4 px-6 py-6 lg:px-8">
|
|
<section className={`rounded-[28px] p-5 ${toolbarClass}`}>
|
|
<div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<span className={`rounded-full px-3 py-1 ${isDark ? 'bg-[rgba(77,141,255,0.16)] text-[#9CCBFF]' : 'bg-[#FFF1F0] text-[#CF1322]'}`}>
|
|
{category}
|
|
</span>
|
|
<ArrowRight className={`h-3.5 w-3.5 ${isDark ? 'text-slate-500' : 'text-[#A6A6A6]'}`} />
|
|
<span className={`rounded-full px-3 py-1 ${isDark ? 'bg-[rgba(34,197,94,0.14)] text-[#89E8B8]' : 'bg-[#FFF6E8] text-[#D46B08]'}`}>
|
|
{subCategory}
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<h1 className={`text-[28px] font-semibold ${isDark ? 'text-white' : 'text-[#222222]'}`}>{title}</h1>
|
|
<p className={`mt-2 text-sm ${isDark ? 'text-slate-300' : 'text-[#575757]'}`}>
|
|
面向规划任务的情绪与倾向分析看板，支持快速检索、会商启动与结果回看。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 xl:items-end">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<label className={`flex h-11 min-w-[320px] items-center gap-3 rounded-xl border px-4 ${inputClass}`}>
|
|
<Search className={`h-4 w-4 ${isDark ? 'text-slate-400' : 'text-[#A6A6A6]'}`} />
|
|
<input
|
|
value={searchQuery}
|
|
onChange={(event) => setSearchQuery(event.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
className="w-full bg-transparent text-sm outline-none"
|
|
placeholder="搜索任务名称"
|
|
/>
|
|
</label>
|
|
<DateRangePicker
|
|
className="sentiment-date-range"
|
|
value={range}
|
|
presets={presets}
|
|
onChange={setRangeChange}
|
|
enableTimePicker
|
|
clearable
|
|
popupProps={{ overlayClassName: 'sentiment-date-range-popup' }}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
className={`inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm ${isDark ? 'bg-[rgba(77,141,255,0.16)] text-[#9CCBFF]' : 'bg-[#FFF1F0] text-[#CF1322]'}`}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
新建任务
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
{metrics.map((item, index) => (
|
|
<div key={item.label} className={`rounded-[24px] p-5 ${metricClass}`}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-[#8C8C8C]'}`}>{item.label}</p>
|
|
<p className={`mt-3 text-[36px] font-semibold ${isDark ? 'text-white' : index === 0 ? 'text-[#222222]' : 'text-[#F5222D]'}`}>
|
|
{item.value}
|
|
</p>
|
|
</div>
|
|
<div className={`flex h-12 w-12 items-center justify-center rounded-2xl ${isDark ? 'bg-[rgba(77,141,255,0.18)] text-[#9CCBFF]' : 'bg-[#FFF1F0] text-[#CF1322]'}`}>
|
|
<Layers className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
|
|
<section className="grid grid-cols-1 items-stretch gap-4 xl:grid-cols-3">
|
|
<div className="h-full">
|
|
<Loading className="block h-full" loading={unanalyzedLoading} showOverlay={false}>
|
|
<div className="h-full">
|
|
<KanbanColumn
|
|
title="未分析"
|
|
count={unanalyzedTotal}
|
|
color={isDark ? 'bg-[#7CC9FF]' : 'bg-[#F5222D]'}
|
|
tasks={unanalyzedList}
|
|
taskType="unanalyzed"
|
|
taskDataType="sentiment"
|
|
pageIndexSearch={pageIndexChange}
|
|
handleStartAnalysis={handleStartAnalysis}
|
|
/>
|
|
</div>
|
|
</Loading>
|
|
</div>
|
|
|
|
<div className="h-full">
|
|
<Loading className="block h-full" loading={runningLoading} showOverlay={false}>
|
|
<div className="h-full">
|
|
<KanbanColumn
|
|
title="分析中"
|
|
count={runningTotal}
|
|
color={isDark ? 'bg-[#5EEAD4]' : 'bg-[#1677FF]'}
|
|
tasks={runningList}
|
|
taskType="running"
|
|
taskDataType="sentiment"
|
|
pageIndexSearch={pageIndexChange}
|
|
handleStartAnalysis={handleStartAnalysis}
|
|
/>
|
|
</div>
|
|
</Loading>
|
|
</div>
|
|
|
|
<div className="h-full">
|
|
<Loading className="block h-full" loading={completedLoading} showOverlay={false}>
|
|
<div className="h-full">
|
|
<KanbanColumn
|
|
title="已完成"
|
|
count={completedTotal}
|
|
color={isDark ? 'bg-[#67E8A5]' : 'bg-[#52C41A]'}
|
|
tasks={completedList}
|
|
taskType="completed"
|
|
taskDataType="sentiment"
|
|
pageIndexSearch={pageIndexChange}
|
|
handleStartAnalysis={handleStartAnalysis}
|
|
/>
|
|
</div>
|
|
</Loading>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{showAnalysisModal && selectedTask ? (
|
|
<div className="fixed inset-0 z-[2000] flex items-center justify-center bg-black/45 px-4">
|
|
<div className={`w-full max-w-[560px] rounded-[28px] border p-6 ${isDark ? 'border-[rgba(67,89,124,0.46)] bg-[rgba(10,23,42,0.98)] text-white' : 'border-[#E8E8E8] bg-white text-[#222222] shadow-[0_18px_36px_rgba(0,0,0,0.12)]'}`}>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h3 className="text-xl font-semibold">选择分析模式</h3>
|
|
<p className={`mt-2 text-sm ${isDark ? 'text-slate-300' : 'text-[#575757]'}`}>
|
|
为任务“{selectedTask.taskName}”选择分析方式
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowAnalysisModal(false)}
|
|
className={`rounded-xl p-2 ${isDark ? 'hover:bg-[rgba(21,42,72,0.9)]' : 'hover:bg-[#FFF1F0]'}`}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-6 space-y-3">
|
|
<button
|
|
type="button"
|
|
onClick={handleOpenTaskDetail}
|
|
className={`flex w-full items-center justify-between rounded-[22px] border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(67,89,124,0.46)] bg-[rgba(15,33,60,0.92)] hover:border-[rgba(110,168,255,0.46)]' : 'border-[#E8E8E8] bg-[#FFF9F9] hover:border-[#F6B0B4]'}`}
|
|
>
|
|
<div>
|
|
<div className="font-medium">查看任务详情</div>
|
|
<div className={`mt-1 text-sm ${isDark ? 'text-slate-300' : 'text-[#575757]'}`}>
|
|
进入 B1 系统查看任务详情。
|
|
</div>
|
|
</div>
|
|
<ArrowRight className="h-4 w-4 opacity-70" />
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={handleOpenConsultation}
|
|
className={`flex w-full items-center justify-between rounded-[22px] border px-5 py-4 text-left transition ${isDark ? 'border-[rgba(67,89,124,0.46)] bg-[rgba(15,33,60,0.92)] hover:border-[rgba(103,232,165,0.42)]' : 'border-[#E8E8E8] bg-[#FFF9F9] hover:border-[#F6B0B4]'}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<Users className={`mt-0.5 h-5 w-5 ${isDark ? 'text-[#89E8B8]' : 'text-[#CF1322]'}`} />
|
|
<div>
|
|
<div className="font-medium">多智能体会商</div>
|
|
<div className={`mt-1 text-sm ${isDark ? 'text-slate-300' : 'text-[#575757]'}`}>
|
|
多个 AI 智能体从不同视角开展讨论并形成共识。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ArrowRight className="h-4 w-4 opacity-70" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SentimentAnalyzes;
|