q792602257/DataMate
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: 数据配比增加通过更新时间来配置 (#95)

Browse Source 
* feature: 数据配比增加通过更新时间来配置

* fix: 修复配比时间参数传递的问题
This commit is contained in:
hefanli
2025-11-20 18:50:51 +08:00
committed by GitHub
parent 955ffff6cd
commit cddfe9b149
10 changed files with 458 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/pages/RatioTask/Create/components/BasicInformation.tsx
View File

@@ -27,7 +27,7 @@ const BasicInformation: React.FC<BasicInformationProps> = ({
<Input type="number" placeholder="目标总数量" min={1} />
</Form.Item>
<Form.Item label="任务描述" name="description" className="col-span-2">
<TextArea placeholder="描述配比任务的目的和要求（可选）" rows={2} />
<TextArea placeholder="描述配比任务的目的和要求" rows={2} />
</Form.Item>
</div>
);

375
frontend/src/pages/RatioTask/Create/components/RatioConfig.tsx
View File

@@ -1,7 +1,19 @@
import React, { useMemo, useState } from "react";
import { Badge, Card, Input, Progress, Button, Divider } from "antd";
import { BarChart3 } from "lucide-react";
import { Badge, Card, Input, Progress, Button, DatePicker, Select } from "antd";
import { BarChart3, Filter, Clock } from "lucide-react";
import type { Dataset } from "@/pages/DataManagement/dataset.model.ts";
import dayjs from 'dayjs';
const { RangePicker } = DatePicker;
const { Option } = Select;
const TIME_RANGE_OPTIONS = [
{ label: '最近1天', value: 1 },
{ label: '最近3天', value: 3 },
{ label: '最近7天', value: 7 },
{ label: '最近15天', value: 15 },
{ label: '最近30天', value: 30 },
];
interface RatioConfigItem {
id: string;
@@ -10,6 +22,8 @@ interface RatioConfigItem {
quantity: number;
percentage: number;
source: string;
labelFilter?: string;
dateRange?: string;
}
interface RatioConfigProps {
@@ -22,14 +36,18 @@ interface RatioConfigProps {
}
const RatioConfig: React.FC<RatioConfigProps> = ({
ratioType,
selectedDatasets,
datasets,
totalTargetCount,
distributions,
onChange,
}) => {
ratioType,
selectedDatasets,
datasets,
totalTargetCount,
distributions,
onChange,
}) => {
const [ratioConfigs, setRatioConfigs] = useState<RatioConfigItem[]>([]);
const [datasetFilters, setDatasetFilters] = useState<Record<string, {
labelFilter?: string;
dateRange?: string;
}>>({});
// 配比项总数
const totalConfigured = useMemo(
@@ -37,6 +55,36 @@ const RatioConfig: React.FC<RatioConfigProps> = ({
[ratioConfigs]
);
// 获取数据集的标签列表
const getDatasetLabels = (datasetId: string): string[] => {
const dist = distributions[String(datasetId)] || {};
return Object.keys(dist);
};
// 自动平均分配
const generateAutoRatio = () => {
const selectedCount = selectedDatasets.length;
if (selectedCount === 0) return;
const baseQuantity = Math.floor(totalTargetCount / selectedCount);
const remainder = totalTargetCount % selectedCount;
const newConfigs = selectedDatasets.map((datasetId, index) => {
const dataset = datasets.find((d) => String(d.id) === datasetId);
const quantity = baseQuantity + (index < remainder ? 1 : 0);
return {
id: datasetId,
name: dataset?.name || datasetId,
type: ratioType,
quantity,
percentage: Math.round((quantity / totalTargetCount) * 100),
source: datasetId,
labelFilter: datasetFilters[datasetId]?.labelFilter,
dateRange: datasetFilters[datasetId]?.dateRange,
};
});
setRatioConfigs(newConfigs);
onChange?.(newConfigs);
};
// 更新数据集配比项
const updateDatasetQuantity = (datasetId: string, quantity: number) => {
setRatioConfigs((prev) => {
@@ -55,6 +103,8 @@ const RatioConfig: React.FC<RatioConfigProps> = ({
quantity: Math.min(quantity, totalTargetCount - totalOtherQuantity),
percentage: Math.round((quantity / totalTargetCount) * 100),
source: datasetId,
labelFilter: datasetFilters[datasetId]?.labelFilter,
dateRange: datasetFilters[datasetId]?.dateRange,
};
let newConfigs;
@@ -69,78 +119,85 @@ const RatioConfig: React.FC<RatioConfigProps> = ({
});
};
// 自动平均分配
const generateAutoRatio = () => {
const selectedCount = selectedDatasets.length;
if (selectedCount === 0) return;
const baseQuantity = Math.floor(totalTargetCount / selectedCount);
const remainder = totalTargetCount % selectedCount;
const newConfigs = selectedDatasets.map((datasetId, index) => {
const dataset = datasets.find((d) => String(d.id) === datasetId);
const quantity = baseQuantity + (index < remainder ? 1 : 0);
return {
id: datasetId,
name: dataset?.name || datasetId,
type: ratioType,
quantity,
percentage: Math.round((quantity / totalTargetCount) * 100),
source: datasetId,
};
});
setRatioConfigs(newConfigs);
onChange?.(newConfigs);
};
// 标签模式下，更新某数据集的某个标签的数量
const updateLabelQuantity = (
datasetId: string,
label: string,
quantity: number
) => {
const sourceKey = `${datasetId}_${label}`;
setRatioConfigs((prev) => {
const existingIndex = prev.findIndex((c) => c.source === sourceKey);
const totalOtherQuantity = prev
.filter((c) => c.source !== sourceKey)
.reduce((sum, c) => sum + c.quantity, 0);
const dist = distributions[datasetId] || {};
const labelMax = dist[label] ?? Infinity;
const cappedQuantity = Math.max(
0,
Math.min(quantity, totalTargetCount - totalOtherQuantity, labelMax)
);
const newConfig: RatioConfigItem = {
id: sourceKey,
name: label,
type: "label",
quantity: cappedQuantity,
percentage: Math.round((cappedQuantity / totalTargetCount) * 100),
source: sourceKey,
};
let newConfigs;
if (existingIndex >= 0) {
newConfigs = [...prev];
newConfigs[existingIndex] = newConfig;
} else {
newConfigs = [...prev, newConfig];
// 更新筛选条件
const updateFilters = (datasetId: string, updates: {
labelFilter?: string;
dateRange?: [string, string];
}) => {
setDatasetFilters(prev => ({
...prev,
[datasetId]: {
...prev[datasetId],
...updates,
}
onChange?.(newConfigs);
return newConfigs;
});
}));
};
// 选中数据集变化时，移除未选中的配比项
// 渲染筛选器
const renderFilters = (datasetId: string) => {
const labels = getDatasetLabels(datasetId);
const config = ratioConfigs.find(c => c.source === datasetId);
const filters = datasetFilters[datasetId] || {};
return (
<div className="mb-3 p-2 bg-gray-50 rounded">
<div className="flex items-center gap-2 mb-2">
<Filter size={14} className="text-gray-400" />
<span className="text-xs font-medium">筛选条件</span>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<div className="text-xs text-gray-500 mb-1">标签筛选</div>
<Select
style={{ width: '100%' }}
placeholder="选择标签"
value={filters.labelFilter}
onChange={(value) => updateFilters(datasetId, { labelFilter: value })}
allowClear
onClear={() => updateFilters(datasetId, { labelFilter: undefined })}
>
{labels.map(label => (
<Option key={label} value={label}>{label}</Option>
))}
</Select>
</div>
<div>
<div className="text-xs text-gray-500 mb-1">标签更新时间</div>
<Select
style={{ width: '100%' }}
placeholder="选择标签更新时间"
value={filters.dateRange}
onChange={(dates) => updateFilters(datasetId, { dateRange: dates })}
allowClear
onClear={() => updateFilters(datasetId, { dateRange: undefined })}
>
{TIME_RANGE_OPTIONS.map(option => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
</div>
</div>
</div>
);
};
// 选中数据集变化时，初始化筛选条件
React.useEffect(() => {
setRatioConfigs((prev) => {
const next = prev.filter((c) => {
const id = String(c.source);
const dsId = id.includes("_") ? id.split("_")[0] : id;
return selectedDatasets.includes(dsId);
});
if (next !== prev) onChange?.(next);
return next;
const initialFilters: Record<string, any> = {};
selectedDatasets.forEach(datasetId => {
const config = ratioConfigs.find(c => c.source === datasetId);
if (config) {
initialFilters[datasetId] = {
labelFilter: config.labelFilter,
dateRange: config.dateRange,
};
}
});
// eslint-disable-next-line
setDatasetFilters(prev => ({ ...prev, ...initialFilters }));
}, [selectedDatasets]);
return (
@@ -148,7 +205,7 @@ const RatioConfig: React.FC<RatioConfigProps> = ({
<div className="flex items-center justify-between p-4 border-bottom">
<span className="text-sm font-bold">
配比配置
<span className="text-xs text-gray-500">
<span className="text-xs text-gray-500 ml-1">
(已配置:{totalConfigured}/{totalTargetCount}条)
</span>
</span>
@@ -170,41 +227,36 @@ const RatioConfig: React.FC<RatioConfigProps> = ({
<div className="flex-overflow-auto gap-4 p-4">
{/* 配比预览 */}
{ratioConfigs.length > 0 && (
<div>
<div className="p-3 bg-gray-50 rounded-lg">
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<span className="text-gray-500">总配比数量:</span>
<span className="ml-2 font-medium">
{ratioConfigs
.reduce((sum, config) => sum + config.quantity, 0)
.toLocaleString()}
</span>
</div>
<div>
<span className="text-gray-500">目标数量:</span>
<span className="ml-2 font-medium">
{totalTargetCount.toLocaleString()}
</span>
</div>
<div>
<span className="text-gray-500">配比项目:</span>
<span className="ml-2 font-medium">
{ratioConfigs.length}个
</span>
</div>
<div className="p-3 bg-gray-50 rounded-lg mb-4">
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<span className="text-gray-500">总配比数量:</span>
<span className="ml-2 font-medium">
{ratioConfigs
.reduce((sum, config) => sum + config.quantity, 0)
.toLocaleString()}
</span>
</div>
<div>
<span className="text-gray-500">目标数量:</span>
<span className="ml-2 font-medium">
{totalTargetCount.toLocaleString()}
</span>
</div>
</div>
</div>
)}
<div className="flex-1 overflow-auto">
<div className="flex-1 overflow-auto space-y-4">
{selectedDatasets.map((datasetId) => {
const dataset = datasets.find((d) => String(d.id) === datasetId);
const config = ratioConfigs.find((c) => c.source === datasetId);
const currentQuantity = config?.quantity || 0;
if (!dataset) return null;
return (
<Card key={datasetId} size="small" className="mb-2">
<Card key={datasetId} size="small" className="mb-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<span className="font-medium text-sm">
@@ -216,97 +268,36 @@ const RatioConfig: React.FC<RatioConfigProps> = ({
{config?.percentage || 0}%
</div>
</div>
{ratioType === "dataset" ? (
<div>
<div className="flex items-center gap-2 mb-2">
<span className="text-xs">数量:</span>
<Input
type="number"
value={currentQuantity}
onChange={(e) =>
updateDatasetQuantity(
datasetId,
Number(e.target.value)
)
}
style={{ width: 80 }}
min={0}
max={Math.min(
dataset.fileCount || 0,
totalTargetCount
)}
/>
<span className="text-xs text-gray-500">条</span>
</div>
<Progress
percent={Math.round(
(currentQuantity / totalTargetCount) * 100
)}
size="small"
/>
</div>
) : (
<div>
{!distributions[String(dataset.id)] ? (
<div className="text-xs text-gray-400">
加载标签分布...
</div>
) : Object.entries(distributions[String(dataset.id)])
.length === 0 ? (
<div className="text-xs text-gray-400">
该数据集暂无标签
</div>
) : (
<div className="flex flex-col gap-2">
{Object.entries(
distributions[String(dataset.id)]
).map(([label, count]) => {
const sourceKey = `${datasetId}_${label}`;
const labelConfig = ratioConfigs.find(
(c) => c.source === sourceKey
);
const labelQuantity = labelConfig?.quantity || 0;
return (
<div
key={label}
className="flex items-center justify-between gap-2"
>
<div className="flex items-center gap-2">
<Badge color="gray">{label}</Badge>
<span className="text-xs text-gray-500">
{count}条
</span>
</div>
<div className="flex items-center gap-2">
<span className="text-xs">数量:</span>
<Input
type="number"
value={labelQuantity}
onChange={(e) =>
updateLabelQuantity(
datasetId,
label,
Number(e.target.value)
)
}
style={{ width: 80 }}
min={0}
max={Math.min(
Number(count) || 0,
totalTargetCount
)}
/>
<span className="text-xs text-gray-500">
条
</span>
</div>
</div>
);
})}
</div>
{/* 筛选条件 */}
{renderFilters(datasetId)}
<div className="flex items-center gap-2 mb-2">
<span className="text-xs">数量:</span>
<Input
type="number"
value={currentQuantity}
onChange={(e) =>
updateDatasetQuantity(
datasetId,
Number(e.target.value)
)
}
style={{ width: 100 }}
min={0}
max={Math.min(
dataset.fileCount || 0,
totalTargetCount
)}
</div>
)}
/>
<span className="text-xs text-gray-500">条</span>
</div>
<Progress
percent={Math.round(
(currentQuantity / totalTargetCount) * 100
)}
size="small"
/>
</Card>
);
})}

169
frontend/src/pages/RatioTask/Create/components/RatioTransfer.tsx
View File

@@ -1,169 +0,0 @@
import React, { useMemo } from "react";
import { Table } from "antd";
import { TransferItem } from "antd/es/transfer";
import RatioConfig from "./RatioConfig";
import useFetchData from "@/hooks/useFetchData";
import { queryDatasetsUsingGet } from "@/pages/DataManagement/dataset.api";
import {
datasetTypeMap,
mapDataset,
} from "@/pages/DataManagement/dataset.const";
import { SearchControls } from "@/components/SearchControls";
const leftColumns = [
{
dataIndex: "name",
title: "名称",
ellipsis: true,
},
{
dataIndex: "datasetType",
title: "类型",
ellipsis: true,
width: 100,
render: (type: string) => datasetTypeMap[type].label,
},
{
dataIndex: "size",
title: "大小",
width: 100,
ellipsis: true,
},
];
export default function RatioTransfer(props: {
distributions: Record<string, Record<string, number>>;
ratioTaskForm: any;
updateRatioConfig: (datasetId: string, quantity: number) => void;
updateLabelRatioConfig: (
datasetId: string,
label: string,
quantity: number
) => void;
}) {
const {
updateLabelRatioConfig,
updateRatioConfig,
ratioTaskForm,
distributions,
} = props;
const {
tableData: datasets,
loading,
pagination,
searchParams,
setSearchParams,
handleFiltersChange,
} = useFetchData(queryDatasetsUsingGet, mapDataset);
const [selectedDatasets, setSelectedDatasets] = React.useState<
TransferItem[]
>([]);
const selectedRowKeys = useMemo(() => {
return selectedDatasets.map((item) => item.key);
}, [selectedDatasets]);
const [listDisabled, setListDisabled] = React.useState(false);
const generateAutoRatio = () => {
const selectedCount = ratioTaskForm.selectedDatasets.length;
if (selectedCount === 0) return;
const baseQuantity = Math.floor(
ratioTaskForm.totalTargetCount / selectedCount
);
const remainder = ratioTaskForm.totalTargetCount % selectedCount;
const newConfigs = ratioTaskForm.selectedDatasets.map(
(datasetId, index) => {
const quantity = baseQuantity + (index < remainder ? 1 : 0);
return {
id: datasetId,
name: datasetId,
type: ratioTaskForm.ratioType,
quantity,
percentage: Math.round(
(quantity / ratioTaskForm.totalTargetCount) * 100
),
source: datasetId,
};
}
);
setRatioTaskForm((prev) => ({ ...prev, ratioConfigs: newConfigs }));
};
return (
<div className="flex">
<div className="border-card flex-1 mr-4">
<h3 className="p-2 border-bottom">{`${selectedDatasets.length} / ${datasets.length} 项`}</h3>
<SearchControls
searchTerm={searchParams.keyword}
onSearchChange={(keyword) =>
setSearchParams({ ...searchParams, keyword })
}
searchPlaceholder="搜索数据集名称..."
filters={[
{
key: "type",
label: "数据集类型",
options: [
{ value: "dataset", label: "按数据集" },
{ value: "tag", label: "按标签" },
],
},
]}
onFiltersChange={handleFiltersChange}
onClearFilters={() =>
setSearchParams({ ...searchParams, filter: {} })
}
showViewToggle={false}
showReload={false}
className="m-4"
/>
<Table
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedDatasets(selectedRows);
},
selectedRowKeys,
selections: [
Table.SELECTION_ALL,
Table.SELECTION_INVERT,
Table.SELECTION_NONE,
],
}}
columns={leftColumns}
dataSource={datasets}
loading={loading}
pagination={pagination}
size="small"
rowKey="id"
style={{ pointerEvents: listDisabled ? "none" : undefined }}
onRow={(record) => ({
onClick: () => {
if (record.disabled || listDisabled) {
return;
}
setSelectedDatasets((prev) => {
if (prev.includes(record.key)) {
return prev.filter((k) => k !== record.key);
}
return [...prev, record.key];
});
},
})}
/>
</div>
<div className="border-card flex-1">
<RatioConfig
datasets={selectedDatasets}
ratioTaskForm={ratioTaskForm}
distributions={distributions}
onUpdateDatasetQuantity={updateRatioConfig}
onUpdateLabelQuantity={updateLabelRatioConfig}
/>
</div>
</div>
);
}

66
frontend/src/pages/RatioTask/Create/components/SelectDataset.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { Badge, Button, Card, Checkbox, Input, Pagination, Select } from "antd";
import { Badge, Button, Card, Checkbox, Input, Pagination } from "antd";
import { Search as SearchIcon } from "lucide-react";
import type { Dataset } from "@/pages/DataManagement/dataset.model.ts";
import {
@@ -10,8 +10,6 @@ import {
interface SelectDatasetProps {
selectedDatasets: string[];
ratioType: "dataset" | "label";
onRatioTypeChange: (val: "dataset" | "label") => void;
onSelectedDatasetsChange: (next: string[]) => void;
onDistributionsChange?: (
next: Record<string, Record<string, number>>
@@ -21,8 +19,6 @@ interface SelectDatasetProps {
const SelectDataset: React.FC<SelectDatasetProps> = ({
selectedDatasets,
ratioType,
onRatioTypeChange,
onSelectedDatasetsChange,
onDistributionsChange,
onDatasetsChange,
@@ -62,7 +58,7 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
// Fetch label distributions when in label mode
useEffect(() => {
const fetchDistributions = async () => {
if (ratioType !== "label" || !datasets?.length) return;
if (!datasets?.length) return;
const idsToFetch = datasets
.map((d) => String(d.id))
.filter((id) => !distributions[id]);
@@ -147,7 +143,7 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
};
fetchDistributions();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ratioType, datasets]);
}, [datasets]);
const onToggleDataset = (datasetId: string, checked: boolean) => {
if (checked) {
@@ -180,18 +176,6 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
</Button>
</div>
<div className="flex-overflow-auto gap-4 p-4">
<div className="flex items-center gap-4">
<span className="text-sm">配比方式:</span>
<Select
className="flex-1 min-w-[120px]"
value={ratioType}
onChange={(v) => onRatioTypeChange(v)}
options={[
{ label: "按数据集", value: "dataset" },
{ label: "按标签", value: "label" },
]}
/>
</div>
<Input
prefix={<SearchIcon className="text-gray-400" />}
placeholder="搜索数据集"
@@ -239,32 +223,30 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
<span>{dataset.fileCount}条</span>
<span>{dataset.size}</span>
</div>
{ratioType === "label" && (
<div className="mt-2">
{distributions[idStr] ? (
Object.entries(distributions[idStr]).length > 0 ? (
<div className="flex flex-wrap gap-2 text-xs">
{Object.entries(distributions[idStr])
.slice(0, 8)
.map(([tag, count]) => (
<Badge
key={tag}
color="gray"
>{`${tag}: ${count}`}</Badge>
))}
</div>
) : (
<div className="text-xs text-gray-400">
未检测到标签分布
</div>
)
<div className="mt-2">
{distributions[idStr] ? (
Object.entries(distributions[idStr]).length > 0 ? (
<div className="flex flex-wrap gap-2 text-xs">
{Object.entries(distributions[idStr])
.slice(0, 8)
.map(([tag, count]) => (
<Badge
key={tag}
color="gray"
>{`${tag}: ${count}`}</Badge>
))}
</div>
) : (
<div className="text-xs text-gray-400">
加载标签分布...
未检测到标签分布
</div>
)}
</div>
)}
)
) : (
<div className="text-xs text-gray-400">
加载标签分布...
</div>
)}
</div>
</div>
</div>
</Card>