fix: show elapsed time in execution result dialog
- Remove setStartTime(null) from finally block to preserve start time for result display - Add resetStartTime function to useCleaner hook - Call resetStartTime when execution report dialog closes - Add useEffect to update timer when execution completes Now the total elapsed time (总耗时) will be shown in the result dialog after execution completes.
This commit is contained in:
@@ -61,6 +61,7 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
|
|||||||
const showProgress = isExecuting && progress
|
const showProgress = isExecuting && progress
|
||||||
const isProgressing = !!showProgress
|
const isProgressing = !!showProgress
|
||||||
|
|
||||||
|
// Update timer during progress
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (!showProgress || !startTime) return
|
if (!showProgress || !startTime) return
|
||||||
|
|
||||||
@@ -71,6 +72,27 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
|
|||||||
return () => clearInterval(interval)
|
return () => clearInterval(interval)
|
||||||
}, [showProgress, startTime])
|
}, [showProgress, startTime])
|
||||||
|
|
||||||
|
// Update time when execution completes
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (showProgress === false && startTime && isExecuting === false) {
|
||||||
|
setNow(Date.now())
|
||||||
|
}
|
||||||
|
}, [showProgress, isExecuting, startTime])
|
||||||
|
|
||||||
|
const elapsedTime = React.useMemo(() => {
|
||||||
|
if (!startTime) return null
|
||||||
|
|
||||||
|
const elapsedMs = now - startTime
|
||||||
|
const elapsedSeconds = Math.floor(elapsedMs / 1000)
|
||||||
|
const minutes = Math.floor(elapsedSeconds / 60)
|
||||||
|
const seconds = elapsedSeconds % 60
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalSeconds: elapsedSeconds,
|
||||||
|
formatted: minutes > 0 ? `${minutes}分${seconds}秒` : `${seconds}秒`
|
||||||
|
}
|
||||||
|
}, [startTime, now])
|
||||||
|
|
||||||
const estimatedTime = React.useMemo(() => {
|
const estimatedTime = React.useMemo(() => {
|
||||||
if (!showProgress || !startTime || !progress) return null
|
if (!showProgress || !startTime || !progress) return null
|
||||||
|
|
||||||
@@ -204,6 +226,15 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{elapsedTime && (
|
||||||
|
<div className="flex flex-col items-center gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200 mb-2">
|
||||||
|
<div className="flex items-center gap-2 text-sm">
|
||||||
|
<span className="text-gray-600">已运行</span>
|
||||||
|
<span className="font-semibold text-blue-600">{elapsedTime.formatted}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{estimatedTime && (
|
{estimatedTime && (
|
||||||
<div className="flex flex-col items-center gap-2 p-3 bg-green-50 rounded-lg border border-green-200">
|
<div className="flex flex-col items-center gap-2 p-3 bg-green-50 rounded-lg border border-green-200">
|
||||||
<div className="flex items-center gap-2 text-sm">
|
<div className="flex items-center gap-2 text-sm">
|
||||||
@@ -307,6 +338,29 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{elapsedTime && (
|
||||||
|
<div className="flex items-center justify-center gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200 text-blue-700 text-sm mb-3">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className="flex-shrink-0"
|
||||||
|
>
|
||||||
|
<circle cx="12" cy="12" r="10" />
|
||||||
|
<polyline points="12 6 12 12 16 14" />
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
总耗时:<span className="font-semibold">{elapsedTime.formatted}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{hasErrors && (
|
{hasErrors && (
|
||||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||||
<div className="text-sm font-semibold text-red-600 mb-2">错误详情</div>
|
<div className="text-sm font-semibold text-red-600 mb-2">错误详情</div>
|
||||||
|
|||||||
@@ -471,10 +471,15 @@ export function useCleaner() {
|
|||||||
setIsRunning(false)
|
setIsRunning(false)
|
||||||
setIsExecuting(false)
|
setIsExecuting(false)
|
||||||
setProgress(null)
|
setProgress(null)
|
||||||
setStartTime(null)
|
// Note: Don't clear startTime here - it's needed for the execution report dialog
|
||||||
|
// startTime will be reset when the dialog closes and a new execution starts
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const resetStartTime = useCallback(() => {
|
||||||
|
setStartTime(null)
|
||||||
|
}, [])
|
||||||
|
|
||||||
const handleExportResults = async () => {
|
const handleExportResults = async () => {
|
||||||
if (filteredResults.length === 0) {
|
if (filteredResults.length === 0) {
|
||||||
showWarning('没有数据可导出')
|
showWarning('没有数据可导出')
|
||||||
@@ -554,6 +559,7 @@ export function useCleaner() {
|
|||||||
handleAssignManagerOnSelect,
|
handleAssignManagerOnSelect,
|
||||||
progress,
|
progress,
|
||||||
startTime,
|
startTime,
|
||||||
|
resetStartTime,
|
||||||
handleValidation,
|
handleValidation,
|
||||||
handleCheckboxToggle,
|
handleCheckboxToggle,
|
||||||
handleConfirmDeletion,
|
handleConfirmDeletion,
|
||||||
|
|||||||
@@ -64,6 +64,7 @@ const CleanerPage: React.FC = () => {
|
|||||||
handleAssignManagerOnSelect,
|
handleAssignManagerOnSelect,
|
||||||
progress,
|
progress,
|
||||||
startTime,
|
startTime,
|
||||||
|
resetStartTime,
|
||||||
handleValidation,
|
handleValidation,
|
||||||
handleCheckboxToggle,
|
handleCheckboxToggle,
|
||||||
handleConfirmDeletion,
|
handleConfirmDeletion,
|
||||||
@@ -509,7 +510,10 @@ const CleanerPage: React.FC = () => {
|
|||||||
{/* Execution Report Dialog */}
|
{/* Execution Report Dialog */}
|
||||||
<ExecutionReportDialog
|
<ExecutionReportDialog
|
||||||
isOpen={isReportDialogOpen}
|
isOpen={isReportDialogOpen}
|
||||||
onClose={() => setIsReportDialogOpen(false)}
|
onClose={() => {
|
||||||
|
setIsReportDialogOpen(false)
|
||||||
|
resetStartTime()
|
||||||
|
}}
|
||||||
ordersProcessed={reportData?.ordersProcessed}
|
ordersProcessed={reportData?.ordersProcessed}
|
||||||
materialsDeleted={reportData?.materialsDeleted}
|
materialsDeleted={reportData?.materialsDeleted}
|
||||||
materialsSkipped={reportData?.materialsSkipped}
|
materialsSkipped={reportData?.materialsSkipped}
|
||||||
|
|||||||
Reference in New Issue
Block a user