// src/components/UnifiedCsvMerger.tsx
import React, { useState, useRef } from "react";
import Papa from "papaparse";
import { processDataList, generateTotalStats, filterPlayIdWithSuccessPriority } from "./utils";
import "./index.css"; // 引入抽离的样式
interface CsvRow {
[key: string]: string;
}
const UnifiedCsvMerger: React.FC = () => {
const
fileInputRef = useRef<HTML
InputElement>(null);
const [selected
Files, setSelected
Files] = useState<
File[]>([]);
const [mergedPreview, setMergedPreview] = useState<CsvRow[]>([]);
// 缓存处理后的数据，用于切换展示
const [processedData, setProcessedData] = useState<CsvRow[]>([]);
const [statsSummary, setStatsSummary] = useState<CsvRow[]>([]);
const [statsSummaryUserImpact, setStatsSummaryUserImpact] = useState<CsvRow[]>([]);
const [totalRows, setTotalRows] = useState<number | null>(null);
const [isParsing, setIsParsing] = useState<boolean>(false);
const [error, setError] = useState<string | null>(null);
// 表单状态
const [formValues, setFormValues] = useState({
startTime: "",
endTime: "",
excludeErrorCodes: "-71114\n-71101\n-52208\n-1007\n-81607\n-80301\n-52405\n-1033\n-1029\n2\n-52407",
targetEid: "Liveview.Video.StartPlay",
});
// 单选选项
类型
type OptionValue = "res" | "err_summary" | "err_summary_user_impact";
const options: { value: OptionValue; label: string }[] = [
{ value: "res", label: "明细数据 (res)" },
{ value: "err_summary", label: "错误统计
汇总 (err_summary)" },
{ value: "err_summary_user_impact", label: "错误统计
汇总 (用户感知维度)" },
];
const [selectedOption, setSelectedOption] = useState<OptionValue>("res");
// 添加
文件
const handleAdd
Files = (): void => {
const
files =
fileInputRef.current?.
files;
if (!
files ||
files.length === 0) return;
const new
Files = Array.from(
files).filter((
file) => /\.(csv)$/i.test(
file.name));
if (new
Files.length === 0) {
alert("请选择有效的 CSV
文件");
return;
}
setSelected
Files((prev) => [...prev, ...new
Files]);
if (
fileInputRef.current)
fileInputRef.current.value = "";
};
// 删除
文件
const handleRemove
File = (index: number): void => {
setSelected
Files((prev) => prev.filter((_, i) => i !== index));
};
// 处理表单输入
const handle
InputChange = (e: React.ChangeEvent<HTML
InputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormValues((prev) => ({
...prev,
[name]: value,
}));
};
// 解析所有
文件
const handleParseAll = (): void => {
if (selected
Files.length === 0) {
setError("请先添加至少一个 CSV
文件");
return;
}
setIsParsing(true);
setError(null);
setMergedPreview([]);
setTotalRows(0);
const promises = selected
Files.map(
(
file) =>
new Promise<CsvRow[]>((resolve) => {
const rows: CsvRow[] = [];
Papa.parse(
file, {
worker: false,
header: true,
skipEmptyLines: true,
transform: (value) => value.trim(),
step: (result) => {
rows.push(result.data as CsvRow);
},
complete: () => resolve(rows),
error: () => resolve([]),
});
})
);
Promise.all(promises)
.then((allRows) => {
const mergedData = allRows.flat();
// 构造配置项
const config = {
start_time: formValues.startTime.trim() || undefined,
end_time: formValues.endTime.trim() || undefined,
exclude_error_codes: formValues.excludeErrorCodes
.split(/[\n,;,\s]+/)
.map((code) => code.trim())
.filter((code) => code !== ""),
target_eid: formValues.targetEid.trim() || "Liveview.Video.StartPlay",
};
// 核心处理
const res = processDataList(mergedData, config);
const err_summary = generateTotalStats(res);
const err_summary_user_impact = generateTotalStats(filterPlayIdWithSuccessPriority(res));
// 缓存结果供切换使用
setProcessedData(res);
setStatsSummary(err_summary);
setStatsSummaryUserImpact(err_summary_user_impact);
// 默认显示明细数据前100条
setMergedPreview(res.slice(0, 100));
setTotalRows(mergedData.length);
})
.catch((err: unknown) => {
const message = err instanceof Error ? err.message : "未知错误";
setError(`解析过程中发生错误: ${message}`);
})
.finally(() => {
setIsParsing(false);
});
};
// 处理单选按钮变化
const handleRadioChange = (e: React.ChangeEvent<HTML
InputElement>) => {
const value = e.target.value as OptionValue;
setSelectedOption(value);
if (value === "res") {
setMergedPreview(processedData.slice(0, 1000));
} else if (value === "err_summary") {
setMergedPreview(statsSummary);
} else if (value === "err_summary_user_impact") {
setMergedPreview(statsSummaryUserImpact);
}
};
return (
<div className="unified-csv-merger">
<h2>📁 解析多个 CSV
文件（统一格式）</h2>
{/* 添加
文件 */}
<div className="action-section">
<
input ref={
fileInputRef}
type="
file"
accept=".csv" multiple onChange={handleAdd
Files} disabled={isParsing} />
<button onClick={handleAdd
Files} disabled={isParsing} className="add-btn">
添加
文件
</button>
</div>
{/* 已选
文件列表 */}
{selected
Files.length > 0 && (
<div className="
file-list">
<h3>📎 已选
文件 ({selected
Files.length})：</h3>
<ul>
{selected
Files.map((
file, index) => (
<li key={index}>
<span title={
file.name}>
{
file.name} <small>({(
file.size / 1024).toFixed(1)} KB)</small>
</span>
<button onClick={() => handleRemove
File(index)} disabled={isParsing} className="remove-btn">
删除
</button>
</li>
))}
</ul>
</div>
)}
{/* 过滤条件表单 */}
<div className="filter-form">
<h3>⚙️ 数据处理配置</h3>
<div className="form-group">
<label>
开始时间（可选）
<
input type="datetime-local" name="startTime" value={formValues.startTime} onChange={handle
InputChange} className="form-control" />
</label>
</div>
<div className="form-group">
<label>
结束时间（可选）
<
input type="datetime-local" name="endTime" value={formValues.endTime} onChange={handle
InputChange} className="form-control" />
</label>
</div>
<div className="form-group">
<label>
排除的错误码（每行一个，支持逗号/空格分隔）
<textarea
name="excludeErrorCodes"
value={formValues.excludeErrorCodes}
onChange={handle
InputChange}
rows={6}
placeholder="例如：
-71114
-1007
..."
className="form-control"
/>
</label>
</div>
<div className="form-group">
<label>
目标事件
类型（target_eid）
<
input type="text" name="targetEid" value={formValues.targetEid} onChange={handle
InputChange} placeholder="如：Liveview.Video.StartPlay" className="form-control" />
</label>
</div>
</div>
{/* 解析按钮 */}
<button onClick={handleParseAll} disabled={isParsing || selected
Files.length === 0} className="parse-btn">
{isParsing ? "解析中..." : "🚀 解析并合并所有
文件"}
</button>
{/* 错误提示 */}
{error && <div className="error-message">{error}</div>}
{/* 合并结果展示 */}
{!isParsing && totalRows !== null && (
<div className="result-preview">
{/* 单选切换 */}
<div className="radio-options">
<h3>请选择预览内容：</h3>
{options.map((option) => (
<label key={option.value} style={{ display: "block", margin: "8px 0" }}>
<
input type="radio" value={option.value} checked={selectedOption === option.value} onChange={handleRadioChange} />
{option.label}
</label>
))}
<p>
当前显示: <strong>{options.find((o) => o.value === selectedOption)?.label}</strong>
</p>
</div>
<h3>📊 预览结果</h3>
<p>
<strong>原始共 {totalRows.toLocaleString()} 行数据</strong>，当前展示为 {selectedOption === "res" ? "过滤后明细数据前100条" : "错误统计
汇总"}
</p>
<div className="table-container">
<table>
<thead>
<tr>
{Object.keys(mergedPreview[0] || {}).map((header) => (
<th key={header}>{header}</th>
))}
</tr>
</thead>
<tbody>
{mergedPreview.length > 0 ? (
mergedPreview.map((row, idx) => (
<tr key={idx}>
{Object.values(row).map((cell, j) => (
<td key={j}>{cell}</td>
))}
</tr>
))
) : (
<tr>
<td colSpan={Object.keys(mergedPreview[0] || {}).length || 1} className="empty-row">
暂无数据
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
)}
</div>
);
};
export default UnifiedCsvMerger;
去掉所有的ts
本文介绍了HTML中的<input>元素及其type属性，重点讲解了accept属性在文件上传中的作用，强调服务器端验证的重要性，列举了各种文件类型支持的MIME类型。
扫一扫
2980
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
