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
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user