You've already forked DataMate
update data ratio detail page (#78)
* feat: Update site name to DataMate and refine text for AI data processing * feat: Refactor settings page and implement model access functionality - Created a new ModelAccess component for managing model configurations. - Removed the old Settings component and replaced it with a new SettingsPage component that integrates ModelAccess, SystemConfig, and WebhookConfig. - Added SystemConfig component for managing system settings. - Implemented WebhookConfig component for managing webhook configurations. - Updated API functions for model management in settings.apis.ts. - Adjusted routing to point to the new SettingsPage component. * feat: Implement Data Collection Page with Task Management and Execution Log - Created DataCollectionPage component to manage data collection tasks. - Added TaskManagement and ExecutionLog components for task handling and logging. - Integrated task operations including start, stop, edit, and delete functionalities. - Implemented filtering and searching capabilities in task management. - Introduced SimpleCronScheduler for scheduling tasks with cron expressions. - Updated CreateTask component to utilize new scheduling and template features. - Enhanced BasicInformation component to conditionally render fields based on visibility settings. - Refactored ImportConfiguration component to remove NAS import section. * feat: Update task creation API endpoint and enhance task creation form with new fields and validation * Refactor file upload and operator management components - Removed unnecessary console logs from file download and export functions. - Added size property to TaskItem interface for better task management. - Simplified TaskUpload component by utilizing useFileSliceUpload hook for file upload logic. - Enhanced OperatorPluginCreate component to handle file uploads and parsing more efficiently. - Updated ConfigureStep component to use Ant Design Form for better data handling and validation. - Improved PreviewStep component to navigate back to the operator market. - Added support for additional file types in UploadStep component. - Implemented delete operator functionality in OperatorMarketPage with confirmation prompts. - Cleaned up unused API functions in operator.api.ts to streamline the codebase. - Fixed number formatting utility to handle zero values correctly. * Refactor Knowledge Generation to Knowledge Base - Created new API service for Knowledge Base operations including querying, creating, updating, and deleting knowledge bases and files. - Added constants for Knowledge Base status and type mappings. - Defined models for Knowledge Base and related files. - Removed obsolete Knowledge Base creation and home components, replacing them with new implementations under the Knowledge Base structure. - Updated routing to reflect the new Knowledge Base paths. - Adjusted menu items to align with the new Knowledge Base terminology. - Modified ModelAccess interface to include modelName and type properties. * feat: Implement Knowledge Base Page with CRUD operations and data management - Added KnowledgeBasePage component for displaying and managing knowledge bases. - Integrated search and filter functionalities with SearchControls component. - Implemented CreateKnowledgeBase component for creating and editing knowledge bases. - Enhanced AddDataDialog for file uploads and dataset selections. - Introduced TableTransfer component for managing data transfers between tables. - Updated API functions for knowledge base operations, including file management. - Refactored knowledge base model to include file status and metadata. - Adjusted routing to point to the new KnowledgeBasePage. * feat: enhance OperatorPluginCreate and ConfigureStep for better upload handling and UI updates * refactor: remove unused components and clean up API logging in KnowledgeBase * feat: update icons in various components and improve styling for better UI consistency * fix: adjust upload step handling and improve error display in configuration step * feat: Add RatioTransfer component for dataset selection and configuration - Implemented RatioTransfer component to manage dataset selection and ratio configuration. - Integrated dataset fetching with search and filter capabilities. - Added RatioConfig component for displaying and updating selected datasets' configurations. - Enhanced SelectDataset component with improved UI and functionality for dataset selection. - Updated RatioTasksPage to utilize new ratio task status mapping and improved error handling for task deletion. - Refactored ratio model and constants for better type safety and clarity. - Changed Vite configuration to use local backend service for development. * feat: Add .editorconfig and enhance SystemConfig with table for settings display * feat: Enhance parameter configuration for range inputs and update default values * feat: Update site name to DataMate and refine text for AI data processing * Refactor file upload and operator management components - Removed unnecessary console logs from file download and export functions. - Added size property to TaskItem interface for better task management. - Simplified TaskUpload component by utilizing useFileSliceUpload hook for file upload logic. - Enhanced OperatorPluginCreate component to handle file uploads and parsing more efficiently. - Updated ConfigureStep component to use Ant Design Form for better data handling and validation. - Improved PreviewStep component to navigate back to the operator market. - Added support for additional file types in UploadStep component. - Implemented delete operator functionality in OperatorMarketPage with confirmation prompts. - Cleaned up unused API functions in operator.api.ts to streamline the codebase. - Fixed number formatting utility to handle zero values correctly. * Refactor Knowledge Generation to Knowledge Base - Created new API service for Knowledge Base operations including querying, creating, updating, and deleting knowledge bases and files. - Added constants for Knowledge Base status and type mappings. - Defined models for Knowledge Base and related files. - Removed obsolete Knowledge Base creation and home components, replacing them with new implementations under the Knowledge Base structure. - Updated routing to reflect the new Knowledge Base paths. - Adjusted menu items to align with the new Knowledge Base terminology. - Modified ModelAccess interface to include modelName and type properties. * feat: Implement Knowledge Base Page with CRUD operations and data management - Added KnowledgeBasePage component for displaying and managing knowledge bases. - Integrated search and filter functionalities with SearchControls component. - Implemented CreateKnowledgeBase component for creating and editing knowledge bases. - Enhanced AddDataDialog for file uploads and dataset selections. - Introduced TableTransfer component for managing data transfers between tables. - Updated API functions for knowledge base operations, including file management. - Refactored knowledge base model to include file status and metadata. - Adjusted routing to point to the new KnowledgeBasePage. * feat: enhance OperatorPluginCreate and ConfigureStep for better upload handling and UI updates * feat: update icons in various components and improve styling for better UI consistency * fix: adjust upload step handling and improve error display in configuration step * feat: Update site name to DataMate and refine text for AI data processing * Refactor file upload and operator management components - Removed unnecessary console logs from file download and export functions. - Added size property to TaskItem interface for better task management. - Simplified TaskUpload component by utilizing useFileSliceUpload hook for file upload logic. - Enhanced OperatorPluginCreate component to handle file uploads and parsing more efficiently. - Updated ConfigureStep component to use Ant Design Form for better data handling and validation. - Improved PreviewStep component to navigate back to the operator market. - Added support for additional file types in UploadStep component. - Implemented delete operator functionality in OperatorMarketPage with confirmation prompts. - Cleaned up unused API functions in operator.api.ts to streamline the codebase. - Fixed number formatting utility to handle zero values correctly. * Refactor Knowledge Generation to Knowledge Base - Created new API service for Knowledge Base operations including querying, creating, updating, and deleting knowledge bases and files. - Added constants for Knowledge Base status and type mappings. - Defined models for Knowledge Base and related files. - Removed obsolete Knowledge Base creation and home components, replacing them with new implementations under the Knowledge Base structure. - Updated routing to reflect the new Knowledge Base paths. - Adjusted menu items to align with the new Knowledge Base terminology. - Modified ModelAccess interface to include modelName and type properties. * feat: Implement Knowledge Base Page with CRUD operations and data management - Added KnowledgeBasePage component for displaying and managing knowledge bases. - Integrated search and filter functionalities with SearchControls component. - Implemented CreateKnowledgeBase component for creating and editing knowledge bases. - Enhanced AddDataDialog for file uploads and dataset selections. - Introduced TableTransfer component for managing data transfers between tables. - Updated API functions for knowledge base operations, including file management. - Refactored knowledge base model to include file status and metadata. - Adjusted routing to point to the new KnowledgeBasePage. * feat: enhance OperatorPluginCreate and ConfigureStep for better upload handling and UI updates * feat: update icons in various components and improve styling for better UI consistency * fix: adjust upload step handling and improve error display in configuration step * feat: add settings drawer and integrate SettingsPage component * feat: add ratio task management features including detail view and API integration * feat: enable destruction of hidden settings drawer to free up resources * feat: add data metrics and ratio display components with charts for enhanced data visualization
This commit is contained in:
chenghh-9609
GitHub
@@ -61,7 +61,7 @@ function DetailHeader<T>({
|
||||
{data?.status && (
|
||||
<Tag color={data.status?.color}>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span>{data.status?.icon}</span>
|
||||
{data.status?.icon && <span>{data.status?.icon}</span>}
|
||||
<span>{data.status?.label}</span>
|
||||
</div>
|
||||
</Tag>
|
||||
|
||||
@@ -183,6 +183,7 @@ const AsiderAndHeaderLayout = () => {
|
||||
open={settingVisible}
|
||||
onClose={() => setSettingVisible(false)}
|
||||
bodyStyle={{ padding: 0 }}
|
||||
destroyOnHidden={true}
|
||||
>
|
||||
<SettingsPage></SettingsPage>
|
||||
</Drawer>
|
||||
|
||||
58
frontend/src/pages/RatioTask/Detail/DataMetrics.tsx
Normal file
58
frontend/src/pages/RatioTask/Detail/DataMetrics.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { Card } from "antd"
|
||||
import { BarChart3, Database, Users, Zap } from "lucide-react"
|
||||
|
||||
const metrics = [
|
||||
{
|
||||
label: "总数据量",
|
||||
value: "2.5M",
|
||||
icon: Database,
|
||||
change: "+12.5%",
|
||||
color: "text-blue-400",
|
||||
},
|
||||
{
|
||||
label: "配比成功率",
|
||||
value: "94.2%",
|
||||
icon: BarChart3,
|
||||
change: "+2.1%",
|
||||
color: "text-emerald-400",
|
||||
},
|
||||
{
|
||||
label: "处理速度",
|
||||
value: "185K/s",
|
||||
icon: Zap,
|
||||
change: "+8.3%",
|
||||
color: "text-amber-400",
|
||||
},
|
||||
{
|
||||
label: "活跃用户",
|
||||
value: "156.8K",
|
||||
icon: Users,
|
||||
change: "+5.2%",
|
||||
color: "text-purple-400",
|
||||
},
|
||||
]
|
||||
|
||||
export default function DataMetrics() {
|
||||
return (
|
||||
<div className="border-card grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-8">
|
||||
{metrics.map((metric, idx) => {
|
||||
const Icon = metric.icon
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="border-border bg-card/50 backdrop-blur p-4 hover:bg-card/70 transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className={`p-2 rounded-lg bg-muted/50 ${metric.color}`}>
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="text-xs font-medium text-emerald-400">{metric.change}</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-1">{metric.label}</p>
|
||||
<p className="text-2xl font-bold text-foreground">{metric.value}</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
76
frontend/src/pages/RatioTask/Detail/DataRatioChart.tsx
Normal file
76
frontend/src/pages/RatioTask/Detail/DataRatioChart.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
LineChart,
|
||||
Line,
|
||||
} from "recharts"
|
||||
|
||||
const chartData = [
|
||||
{ name: "一月", 配比率: 65, 成功数: 2400, 失败数: 240 },
|
||||
{ name: "二月", 配比率: 72, 成功数: 2210, 失败数: 221 },
|
||||
{ name: "三月", 配比率: 78, 成功数: 2290, 失败数: 229 },
|
||||
{ name: "四月", 配比率: 84, 成功数: 2000, 失败数: 200 },
|
||||
{ name: "五月", 配比率: 90, 成功数: 2181, 失败数: 218 },
|
||||
{ name: "六月", 配比率: 94, 成功数: 2500, 失败数: 250 },
|
||||
]
|
||||
|
||||
export default function DataRatioChart() {
|
||||
return (
|
||||
<div className="lg:col-span-3 space-y-6">
|
||||
<div className="border-border bg-card/50 backdrop-blur p-6">
|
||||
<h3 className="text-base font-semibold text-foreground mb-4">配比趋势分析</h3>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="rgb(var(--border))" />
|
||||
<XAxis dataKey="name" stroke="rgb(var(--muted-foreground))" />
|
||||
<YAxis stroke="rgb(var(--muted-foreground))" />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "rgb(var(--card))",
|
||||
border: "1px solid rgb(var(--border))",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
cursor={{ fill: "rgba(59, 130, 246, 0.1)" }}
|
||||
/>
|
||||
<Legend />
|
||||
<Bar dataKey="成功数" stackId="a" fill="#3b82f6" radius={[8, 8, 0, 0]} />
|
||||
<Bar dataKey="失败数" stackId="a" fill="#ef4444" radius={[8, 8, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="border-border bg-card/50 backdrop-blur p-6">
|
||||
<h3 className="text-base font-semibold text-foreground mb-4">成功率曲线</h3>
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<LineChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="rgb(var(--border))" />
|
||||
<XAxis dataKey="name" stroke="rgb(var(--muted-foreground))" />
|
||||
<YAxis stroke="rgb(var(--muted-foreground))" />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "rgb(var(--card))",
|
||||
border: "1px solid rgb(var(--border))",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
cursor={{ stroke: "rgba(34, 197, 94, 0.2)" }}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="配比率"
|
||||
stroke="#22c55e"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: "#22c55e", r: 4 }}
|
||||
activeDot={{ r: 6 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
107
frontend/src/pages/RatioTask/Detail/RatioDisplay.tsx
Normal file
107
frontend/src/pages/RatioTask/Detail/RatioDisplay.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import { BarChart3, Layers } from "lucide-react";
|
||||
import {
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
} from "recharts";
|
||||
|
||||
interface DatasetRatio {
|
||||
name: string;
|
||||
ratio: number;
|
||||
count: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function RatioDisplay() {
|
||||
const datasets: DatasetRatio[] = [
|
||||
{ name: "用户行为数据集", ratio: 45, count: 450000, color: "#3b82f6" },
|
||||
{ name: "交易记录数据集", ratio: 30, count: 300000, color: "#8b5cf6" },
|
||||
{ name: "产品信息数据集", ratio: 15, count: 150000, color: "#ec4899" },
|
||||
{ name: "评价反馈数据集", ratio: 10, count: 100000, color: "#f59e0b" },
|
||||
];
|
||||
|
||||
const chartData = datasets.map((d) => ({
|
||||
name: d.name,
|
||||
value: d.ratio,
|
||||
count: d.count,
|
||||
fill: d.color,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="mt-8">
|
||||
<h3 className="text-lg font-semibold text-foreground mb-6 flex items-center gap-2">
|
||||
数据集配比信息
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{/* 饼图展示比例 */}
|
||||
<div className="flex items-center justify-center">
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={chartData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
labelLine={false}
|
||||
label={({ name, value }) => `${value}%`}
|
||||
outerRadius={80}
|
||||
fill="#8884d8"
|
||||
dataKey="value"
|
||||
>
|
||||
{chartData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.fill} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip formatter={(value) => `${value}%`} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* 数据集详情列表 */}
|
||||
<div className="space-y-4">
|
||||
{datasets.map((dataset, index) => (
|
||||
<div key={index} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: dataset.color }}
|
||||
></div>
|
||||
<span className="font-medium text-foreground text-sm">
|
||||
{dataset.name}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-foreground">
|
||||
{dataset.ratio}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 比例条形图 */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all"
|
||||
style={{
|
||||
width: `${dataset.ratio}%`,
|
||||
backgroundColor: dataset.color,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground min-w-fit">
|
||||
{dataset.count.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -21,20 +21,23 @@ import { post } from "@/utils/request";
|
||||
import type { RatioTaskItem } from "@/pages/RatioTask/ratio.model";
|
||||
import { mapRatioTask } from "../ratio.const";
|
||||
import { Copy, Pause, PlayIcon } from "lucide-react";
|
||||
import DataRatioChart from "./DataRatioChart";
|
||||
import RatioDisplay from "./RatioDisplay";
|
||||
import DataMetrics from "./DataMetrics";
|
||||
|
||||
const tabList = [
|
||||
{
|
||||
key: "overview",
|
||||
label: "概览",
|
||||
},
|
||||
{
|
||||
key: "analysis",
|
||||
label: "配比分析",
|
||||
},
|
||||
{
|
||||
key: "config",
|
||||
label: "配比配置",
|
||||
},
|
||||
// {
|
||||
// key: "analysis",
|
||||
// label: "配比分析",
|
||||
// },
|
||||
// {
|
||||
// key: "config",
|
||||
// label: "配比配置",
|
||||
// },
|
||||
];
|
||||
|
||||
export default function RatioTaskDetail() {
|
||||
@@ -105,20 +108,20 @@ export default function RatioTaskDetail() {
|
||||
|
||||
// 操作列表
|
||||
const operations = [
|
||||
{
|
||||
key: "execute",
|
||||
label: "启动",
|
||||
icon: <PlayIcon className="w-4 h-4 text-gray-500" />,
|
||||
onClick: handleExecute,
|
||||
disabled: ratioTask.status === "RUNNING",
|
||||
},
|
||||
{
|
||||
key: "stop",
|
||||
label: "停止",
|
||||
icon: <Pause className="w-4 h-4 text-gray-500" />,
|
||||
onClick: handleStop,
|
||||
disabled: ratioTask.status !== "RUNNING",
|
||||
},
|
||||
// {
|
||||
// key: "execute",
|
||||
// label: "启动",
|
||||
// icon: <PlayIcon className="w-4 h-4 text-gray-500" />,
|
||||
// onClick: handleExecute,
|
||||
// disabled: ratioTask.status === "RUNNING",
|
||||
// },
|
||||
// {
|
||||
// key: "stop",
|
||||
// label: "停止",
|
||||
// icon: <Pause className="w-4 h-4 text-gray-500" />,
|
||||
// onClick: handleStop,
|
||||
// disabled: ratioTask.status !== "RUNNING",
|
||||
// },
|
||||
{
|
||||
key: "refresh",
|
||||
label: "刷新",
|
||||
@@ -153,6 +156,11 @@ export default function RatioTaskDetail() {
|
||||
label: "名称",
|
||||
children: ratioTask.name,
|
||||
},
|
||||
{
|
||||
key: "totals",
|
||||
label: "目标数量",
|
||||
children: ratioTask.totals,
|
||||
},
|
||||
{
|
||||
key: "dataset",
|
||||
label: "目标数据集",
|
||||
@@ -164,31 +172,21 @@ export default function RatioTaskDetail() {
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "数据大小",
|
||||
label: "状态",
|
||||
children: (
|
||||
<Badge color={ratioTask.status?.color} text={ratioTask.status?.label} />
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
label: "类型",
|
||||
label: "配比方式",
|
||||
children: ratioTask.type || "未知",
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "状态",
|
||||
children: ratioTask?.status?.label || "未知",
|
||||
},
|
||||
{
|
||||
key: "createdBy",
|
||||
label: "创建者",
|
||||
children: ratioTask.createdBy || "未知",
|
||||
},
|
||||
{
|
||||
key: "targetLocation",
|
||||
label: "输出路径",
|
||||
children: ratioTask.targetLocation || "未知",
|
||||
},
|
||||
{
|
||||
key: "createdAt",
|
||||
label: "创建时间",
|
||||
@@ -215,6 +213,7 @@ export default function RatioTaskDetail() {
|
||||
statistics={ratioTask?.statistics || []}
|
||||
operations={operations}
|
||||
/>
|
||||
{/* <DataMetrics /> */}
|
||||
<div className="flex-overflow-auto p-6 pt-2 bg-white rounded-md shadow">
|
||||
<Tabs activeKey={activeTab} items={tabList} onChange={setActiveTab} />
|
||||
<div className="h-full overflow-auto">
|
||||
@@ -227,63 +226,10 @@ export default function RatioTaskDetail() {
|
||||
items={items}
|
||||
column={5}
|
||||
/>
|
||||
<h2 className="text-base font-semibold mt-8 mb-4">配比详情</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* 目标配比 */}
|
||||
<Card title="目标配比">
|
||||
<div className="space-y-4">
|
||||
{ratioTask.targetRatio &&
|
||||
Object.entries(ratioTask.targetRatio).map(
|
||||
([category, ratio]) => (
|
||||
<div key={category} className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
{category}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-blue-600">
|
||||
{ratioTask.ratio}%
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={ratio} className="h-2" />
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 当前配比 */}
|
||||
<Card title="当前配比">
|
||||
<div className="space-y-4">
|
||||
{ratioTask.currentRatio &&
|
||||
Object.entries(ratioTask.currentRatio).length > 0 ? (
|
||||
Object.entries(ratioTask.currentRatio)?.map(
|
||||
([category, ratio]) => (
|
||||
<div key={category} className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
{category}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-green-600">
|
||||
{ratioTask.ratio}%
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={ratio} className="h-2" />
|
||||
</div>
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<p className="text-sm text-gray-500">等待处理开始</p>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
{/* <RatioDisplay /> */}
|
||||
</>
|
||||
)}
|
||||
{activeTab === "analysis" && (
|
||||
<div className="text-center py-20 text-gray-500">
|
||||
配比分析功能正在开发中，敬请期待！
|
||||
</div>
|
||||
)}
|
||||
{activeTab === "analysis" && <DataRatioChart />}
|
||||
{activeTab === "config" && (
|
||||
<div className="bg-gray-50 rounded-lg p-4 font-mono text-xs overflow-x-auto">
|
||||
<pre className="text-gray-700 whitespace-pre-wrap break-words">
|
||||
|
||||
@@ -46,7 +46,8 @@ export function mapRatioTask(task: Partial<RatioTaskItem>): RatioTaskItem {
|
||||
createdAt: formatDate(task.created_at),
|
||||
updatedAt: formatDate(task.updated_at),
|
||||
description:
|
||||
task.ratio_method === "DATASET" ? "按数据集配比" : "按标签配比",
|
||||
task.description ||
|
||||
(task.ratio_method === "DATASET" ? "按数据集配比" : "按标签配比"),
|
||||
icon: <BarChart3 />,
|
||||
iconColor: task.ratio_method === "DATASET" ? "bg-blue-100" : "bg-green-100",
|
||||
statistics: [
|
||||
@@ -72,16 +73,16 @@ export function mapRatioTask(task: Partial<RatioTaskItem>): RatioTaskItem {
|
||||
value: task.created_at || "-",
|
||||
},
|
||||
],
|
||||
type: "balance",
|
||||
progress: 100,
|
||||
sourceDatasets: ["sentiment_dataset", "news_classification"],
|
||||
targetRatio: { 正面: 33, 负面: 33, 中性: 34 },
|
||||
currentRatio: { 正面: 33, 负面: 33, 中性: 34 },
|
||||
totalRecords: 15000,
|
||||
processedRecords: 15000,
|
||||
estimatedTime: "已完成",
|
||||
quality: 95,
|
||||
strategy: "随机下采样",
|
||||
outputPath: "/data/balanced/sentiment_balanced_20250120",
|
||||
type: task.ratio_method === "DATASET" ? "数据集配比" : "标签配比",
|
||||
// progress: 100,
|
||||
// sourceDatasets: ["sentiment_dataset", "news_classification"],
|
||||
// targetRatio: { 正面: 33, 负面: 33, 中性: 34 },
|
||||
// currentRatio: { 正面: 33, 负面: 33, 中性: 34 },
|
||||
// totalRecords: 15000,
|
||||
// processedRecords: 15000,
|
||||
// estimatedTime: "已完成",
|
||||
// quality: 95,
|
||||
// strategy: "随机下采样",
|
||||
// outputPath: "/data/balanced/sentiment_balanced_20250120",
|
||||
};
|
||||
}
|
||||
|
||||
@@ -22,21 +22,21 @@ export default function SettingsPage() {
|
||||
<Menu
|
||||
mode="inline"
|
||||
items={[
|
||||
{
|
||||
key: "system-config",
|
||||
icon: <SettingOutlined />,
|
||||
label: "系统设置",
|
||||
},
|
||||
{
|
||||
key: "model-access",
|
||||
icon: <Component className="w-4 h-4" />,
|
||||
label: "模型接入",
|
||||
},
|
||||
{
|
||||
key: "webhook-config",
|
||||
icon: <ApiOutlined />,
|
||||
label: "Webhook",
|
||||
},
|
||||
// {
|
||||
// key: "system-config",
|
||||
// icon: <SettingOutlined />,
|
||||
// label: "参数配置",
|
||||
// },
|
||||
// {
|
||||
// key: "webhook-config",
|
||||
// icon: <ApiOutlined />,
|
||||
// label: "Webhook",
|
||||
// },
|
||||
]}
|
||||
selectedKeys={[activeTab]}
|
||||
onClick={({ key }) => {
|
||||
|
||||
@@ -39,8 +39,8 @@ import OrchestrationPage from "@/pages/Orchestration/Orchestration";
|
||||
import WorkflowEditor from "@/pages/Orchestration/WorkflowEditor";
|
||||
import { withErrorBoundary } from "@/components/ErrorBoundary";
|
||||
import AgentPage from "@/pages/Agent/Agent.tsx";
|
||||
import CleansingTemplateDetail from "@/pages/DataCleansing/Detail/TemplateDetail.tsx";
|
||||
import RatioTaskDetail from "@/pages/RatioTask/Detail/RatioTaskDetail";
|
||||
import CleansingTemplateDetail from "@/pages/DataCleansing/Detail/TemplateDetail";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user