pl2z38qho
/
moxun
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

按钮没反应修改

Browse Source
main
LiRen-qiu 4 months ago
parent 4fbeffb3d2
commit e55ab7d5ca
10 changed files with 1081 additions and 915 deletions
Show Stats Download Patch File Download Diff File

477
src/vue2/src/components/process/DataPreprocessing.vue
Unescape View File

@ -1,127 +1,134 @@
<template>
<div class="data-preprocessing">
<ProcessStep
<process-step
title="数据预处理"
:status="status"
:loading="loading"
:progress="progress"
operationButtonText="开始数据预处理"
processingText="正在对数据进行清洗与规范化..."
errorText="预处理失败，请重试"
:showPrevButton="true"
@start="startPreprocess"
@retry="startPreprocess"
@prev="$emit('prev')"
@next="$emit('next')"
>
<template #pre-operation>
<div class="file-info" v-if="fileData">
<h3>待处理文件信息：</h3>
<el-descriptions border>
<el-descriptions-item label="文件名">{{ fileData.fileName }}</el-descriptions-item>
<el-descriptions-item label="文件大小">{{ formatFileSize(fileData.fileSize) }}</el-descriptions-item>
<el-descriptions-item label="记录数量">{{ fileData.rowCount }}</el-descriptions-item>
<el-descriptions-item label="上传时间">{{ formatDateTime(fileData.uploadTime) }}</el-descriptions-item>
</el-descriptions>
</div>
<el-empty v-else description="请先完成文件上传"></el-empty>
</template>
<template #operation>
<div class="preprocessing-config">
<h3>预处理配置</h3>
<el-form :model="preprocessConfig" label-width="180px" :disabled="status === 'running'">
<el-form-item label="数据清洗级别">
<el-select v-model="preprocessConfig.cleanLevel" placeholder="请选择清洗级别">
<el-option label="基本清洗" value="basic"></el-option>
<el-option label="标准清洗" value="standard"></el-option>
<el-option label="深度清洗" value="deep"></el-option>
</el-select>
<div class="preprocessing-options">
<h4>预处理设置</h4>
<el-form label-width="150px" size="small">
<el-form-item label="删除空行">
<el-switch v-model="options.removeEmptyRows"></el-switch>
</el-form-item>
<el-form-item label="去除重复项">
<el-switch v-model="preprocessConfig.removeDuplicates"></el-switch>
<el-form-item label="裁剪空白字符">
<el-switch v-model="options.trimWhitespace"></el-switch>
</el-form-item>
<el-form-item label="标准化文本">
<el-switch v-model="preprocessConfig.normalizeText"></el-switch>
<el-form-item label="标准化日期格式">
<el-switch v-model="options.normalizeDates"></el-switch>
</el-form-item>
<el-form-item label="移除缺失值">
<el-select v-model="preprocessConfig.missingValueStrategy" placeholder="选择处理策略">
<el-option label="保留" value="keep"></el-option>
<el-option label="移除行" value="remove"></el-option>
<el-option label="填充默认值" value="fillDefault"></el-option>
</el-select>
</el-form-item>
<el-form-item label="字段选择">
<el-checkbox-group v-model="preprocessConfig.selectedFields">
<el-checkbox label="title">标题</el-checkbox>
<el-checkbox label="content">内容</el-checkbox>
<el-checkbox label="category">分类</el-checkbox>
<el-checkbox label="tags">标签</el-checkbox>
<el-checkbox label="timestamp">时间戳</el-checkbox>
</el-checkbox-group>
<el-form-item label="数据类型转换">
<el-switch v-model="options.convertDataTypes"></el-switch>
</el-form-item>
</el-form>
<div class="operation-buttons">
<el-button
type="primary"
@click="startPreprocess"
:disabled="!fileData || status === 'running' || status === 'completed'"
:loading="status === 'running'"
>
{{ status === 'running' ? '处理中...' : '开始预处理' }}
</el-button>
<div class="file-info" v-if="fileData">
<h4>待处理文件信息</h4>
<el-descriptions :column="2" border size="small">
<el-descriptions-item label="文件名称">{{ fileData.fileName }}</el-descriptions-item>
<el-descriptions-item label="文件大小">{{ fileData.fileSize }}</el-descriptions-item>
<el-descriptions-item label="总行数">{{ fileData.rowCount }}</el-descriptions-item>
<el-descriptions-item label="总列数">{{ fileData.columnCount }}</el-descriptions-item>
</el-descriptions>
</div>
<el-empty v-else description="请先完成文件上传"></el-empty>
</div>
</template>
<template #result-summary v-if="status === 'completed'">
<div class="preprocessing-summary">
<h3>预处理完成</h3>
<el-descriptions border>
<el-descriptions-item label="处理前记录">{{ fileData.rowCount }}</el-descriptions-item>
<el-descriptions-item label="处理后记录">{{ processedData.rowCount }}</el-descriptions-item>
<el-descriptions-item label="移除重复项">{{ preprocessConfig.removeDuplicates ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="清洗级别">{{ preprocessLevelText }}</el-descriptions-item>
<el-descriptions-item label="处理用时">{{ processingTime }}秒</el-descriptions-item>
</el-descriptions>
<template #result-summary>
<div class="process-result-summary">
<i class="el-icon-success"></i>
<h4>数据预处理完成</h4>
<p>原始数据已经过清洗和规范化处理，可进行下一步操作</p>
<el-row :gutter="20" class="summary-stats">
<el-col :span="8">
<div class="stat-item">
<p class="stat-value">{{ preprocessedData.processedRows }}</p>
<p class="stat-label">已处理行数</p>
</div>
</el-col>
<el-col :span="8">
<div class="stat-item">
<p class="stat-value">{{ preprocessedData.removedRows }}</p>
<p class="stat-label">已删除行数</p>
</div>
</el-col>
<el-col :span="8">
<div class="stat-item">
<p class="stat-value">{{ preprocessedData.changedCells }}</p>
<p class="stat-label">更改单元格数</p>
</div>
</el-col>
</el-row>
</div>
</template>
<template #result-detail v-if="status === 'completed'">
<div class="preprocessing-detail">
<h3>数据预览</h3>
<el-table
:data="previewData"
border
style="width: 100%"
max-height="300px"
>
<template #result-detail>
<div class="result-details">
<h4>处理结果预览</h4>
<el-table :data="preprocessedData.preview" border stripe style="width: 100%">
<el-table-column
v-for="field in preprocessConfig.selectedFields"
:key="field"
:prop="field"
:label="getFieldLabel(field)"
min-width="120"
v-for="column in preprocessedData.columns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:width="column.width || ''"
></el-table-column>
</el-table>
<div class="changes-summary">
<h4>变更摘要</h4>
<el-collapse>
<el-collapse-item title="数据类型转换" name="1">
<el-tag v-for="(change, index) in preprocessedData.typeChanges" :key="index"
size="small" style="margin-right: 5px; margin-bottom: 5px;">
{{ change }}
</el-tag>
</el-collapse-item>
<el-collapse-item title="规范化处理" name="2">
<el-tag v-for="(change, index) in preprocessedData.normalizationChanges" :key="index"
type="success" size="small" style="margin-right: 5px; margin-bottom: 5px;">
{{ change }}
</el-tag>
</el-collapse-item>
</el-collapse>
</div>
</div>
</template>
</ProcessStep>
</process-step>
</div>
</template>
<script>
import ProcessStep from './ProcessStep.vue';
import { mapState, mapActions } from 'vuex'
import ProcessStep from './ProcessStep.vue'
export default {
name: 'DataPreprocessing',
components: {
ProcessStep
},
props: {
status: {
type: String,
default: 'waiting',
validator: value => ['waiting', 'running', 'completed', 'error'].includes(value)
default: 'waiting'
},
loading: {
type: Boolean,
@ -136,113 +143,166 @@ export default {
default: null
}
},
data() {
return {
preprocessConfig: {
cleanLevel: 'standard',
removeDuplicates: true,
normalizeText: true,
missingValueStrategy: 'remove',
selectedFields: ['title', 'content', 'category']
options: {
removeEmptyRows: true,
trimWhitespace: true,
normalizeDates: true,
convertDataTypes: true
},
processedData: null,
previewData: [],
processingStartTime: null,
processingEndTime: null
};
},
computed: {
preprocessLevelText() {
const levels = {
basic: '基本清洗',
standard: '标准清洗',
deep: '深度清洗'
};
return levels[this.preprocessConfig.cleanLevel] || '未选择';
},
processingTime() {
if (!this.processingStartTime || !this.processingEndTime) return 0;
return ((this.processingEndTime - this.processingStartTime) / 1000).toFixed(2);
preprocessedData: {
processedRows: 0,
removedRows: 0,
changedCells: 0,
columns: [],
preview: [],
typeChanges: [],
normalizationChanges: []
},
processTimer: null,
localStatus: 'waiting',
localLoading: false,
localProgress: 0
}
},
watch: {
status(newStatus) {
if (newStatus === 'completed' && this.fileData) {
this.generateProcessedData();
}
this.localStatus = newStatus
}
},
mounted() {
// 检查是否已经有预处理结果
if (this.status === 'completed') {
this.generateMockResults()
}
// 将prop值同步到本地
this.localStatus = this.status
this.localLoading = this.loading
this.localProgress = this.progress
},
methods: {
...mapActions('process', ['processPreprocess']),
startPreprocess() {
this.processingStartTime = Date.now();
// 触发父组件处理逻辑
this.$emit('start-preprocess', { ...this.preprocessConfig });
},
generateProcessedData() {
this.processingEndTime = Date.now();
if (!this.fileData) {
this.$message.warning('请先上传文件')
return
}
// 通知父组件开始预处理
this.$emit('start-preprocess', this.options)
// 更新本地状态
this.localLoading = true
this.localStatus = 'running'
this.localProgress = 0
// 这里是模拟生成处理后的数据
// 在实际项目中，这些数据应该来自服务器
if (this.fileData) {
this.processedData = {
rowCount: this.fileData.rowCount - Math.floor(Math.random() * 50),
processedAt: new Date().toISOString()
};
// 模拟进度更新
this.processTimer = setInterval(() => {
this.localProgress += 5
if (this.localProgress >= 100) {
clearInterval(this.processTimer)
this.completePreprocess()
}
}, 150)
},
completePreprocess() {
// 模拟完成预处理
setTimeout(() => {
// 清理计时器
clearInterval(this.processTimer)
// 生成预览数据
this.previewData = this.generatePreviewData();
}
// 生成模拟结果
this.generateMockResults()
// 更新状态
this.localLoading = false
this.localStatus = 'completed'
this.localProgress = 100
// 更新Vuex中的状态
this.$store.commit('process/UPDATE_STEP_STATUS', { step: 'preprocess', status: 'completed' })
// 存储预处理结果
this.processPreprocess(this.preprocessedData)
// 显示成功消息
this.$message.success('数据预处理完成')
// 确保父组件知道预处理已完成
this.$nextTick(() => {
console.log('数据预处理完成，可以继续下一步')
// 触发父组件的预处理完成事件
this.$emit('preprocess-completed', this.preprocessedData)
})
}, 500)
},
generatePreviewData() {
// 生成模拟的预览数据
const sampleData = [];
const fieldValues = {
title: ['项目报告', '季度总结', '市场分析', '用户调研', '功能规划'],
content: ['这是一份详细的项目报告...', '本季度业绩表现良好...', '市场竞争激烈，需要...', '根据用户反馈，我们...', '未来三个月的功能开发计划...'],
category: ['报告', '总结', '分析', '调研', '规划'],
tags: ['项目,重要', '季度,业绩', '市场,竞争', '用户,反馈', '功能,开发'],
timestamp: ['2023-10-01', '2023-10-15', '2023-11-01', '2023-11-15', '2023-12-01']
};
generateMockResults() {
// 确保数据行数有效
const rowCount = this.fileData?.rowCount || 1000
// 生成列定义
const columns = [
{ prop: 'id', label: 'ID', width: '70' },
{ prop: 'name', label: '名称' },
{ prop: 'date', label: '日期' },
{ prop: 'category', label: '类别' },
{ prop: 'value', label: '数值' }
]
for (let i = 0; i < 5; i++) {
const row = {};
this.preprocessConfig.selectedFields.forEach(field => {
if (fieldValues[field]) {
row[field] = fieldValues[field][i % fieldValues[field].length];
}
});
sampleData.push(row);
// 生成预览数据
const preview = []
for (let i = 1; i <= 5; i++) {
preview.push({
id: i,
name: `示例数据 ${i}`,
date: `2025-04-${10 + i}`,
category: ['A类', 'B类', 'C类'][i % 3],
value: Math.floor(Math.random() * 1000)
})
}
return sampleData;
},
formatFileSize(size) {
if (!size) return '0 B';
const units = ['B', 'KB', 'MB', 'GB'];
let i = 0;
while (size >= 1024 && i < units.length - 1) {
size /= 1024;
i++;
// 生成变更记录
const typeChanges = [
'字符串→日期 (32项)',
'文本→数值 (147项)',
'数值→百分比 (56项)'
]
const normalizationChanges = [
'日期格式标准化 (118项)',
'移除前后空格 (243项)',
'大小写规范化 (87项)',
'数值精度统一 (92项)'
]
// 更新结果
this.preprocessedData = {
processedRows: rowCount,
removedRows: Math.floor(rowCount * 0.05), // 5%的行被移除
changedCells: Math.floor(rowCount * 1.2), // 平均每行1.2个单元格被更改
columns,
preview,
typeChanges,
normalizationChanges
}
return `${size.toFixed(2)} ${units[i]}`;
},
formatDateTime(timestamp) {
if (!timestamp) return '';
const date = new Date(timestamp);
return date.toLocaleString();
},
getFieldLabel(field) {
const labels = {
title: '标题',
content: '内容',
category: '分类',
tags: '标签',
timestamp: '时间戳'
};
return labels[field] || field;
}
},
beforeDestroy() {
if (this.processTimer) {
clearInterval(this.processTimer)
}
}
};
}
</script>
<style scoped>
@ -250,34 +310,83 @@ export default {
width: 100%;
}
.preprocessing-options {
margin-bottom: 20px;
}
.preprocessing-options h4 {
margin-bottom: 15px;
font-size: 16px;
color: #303133;
}
.file-info {
margin-top: 20px;
}
.file-info h4 {
margin-bottom: 10px;
}
.process-result-summary {
text-align: center;
margin-bottom: 20px;
}
.preprocessing-config {
.process-result-summary i {
font-size: 48px;
color: #67c23a;
margin-bottom: 10px;
}
.process-result-summary h4 {
font-size: 18px;
margin: 10px 0;
}
.process-result-summary p {
color: #606266;
margin-bottom: 20px;
}
.preprocessing-config h3,
.file-info h3,
.preprocessing-summary h3,
.preprocessing-detail h3 {
margin-bottom: 15px;
font-weight: 500;
color: #303133;
.summary-stats {
margin-top: 25px;
}
.stat-item {
text-align: center;
padding: 15px;
background-color: #f5f7fa;
border-radius: 4px;
}
.stat-value {
font-size: 24px;
font-weight: bold;
margin: 0;
color: #409eff;
}
.stat-label {
margin: 5px 0 0;
color: #606266;
}
.operation-buttons {
.result-details {
margin-top: 20px;
display: flex;
justify-content: center;
}
.preprocessing-summary {
margin-bottom: 20px;
.result-details h4 {
margin-bottom: 15px;
font-size: 16px;
color: #303133;
}
.preprocessing-detail {
.changes-summary {
margin-top: 20px;
}
.changes-summary h4 {
margin-bottom: 10px;
}
</style>

14
src/vue2/src/components/process/FileUpload.vue
Unescape View File

@ -12,7 +12,7 @@
@start="handleUpload"
@retry="handleRetry"
@prev="$emit('prev')"
@next="$emit('next')"
@next="handleNextStep"
>
<template #pre-operation>
<div class="upload-area">
@ -137,7 +137,17 @@ export default {
handleNextStep() {
console.log('手动点击继续处理按钮');
// 确保文件已经上传完成
if (this.uploadStatus !== 'completed') {
this.$message.warning('请等待文件上传完成');
return;
}
// 向父组件发出next事件，同时确保fileData已设置
this.$emit('next');
this.$emit('file-uploaded', this.fileData);
console.log('已发出next事件和file-uploaded事件', this.fileData);
},
handleFileChange(file) {
@ -214,7 +224,7 @@ export default {
// 显示成功消息
this.$message({
message: '文件上传成功，请点击下一步按钮继续',
message: '文件上传成功，点击"继续处理"或"下一步"按钮继续',
type: 'success',
duration: 5000,
showClose: true

4
src/vue2/src/components/process/MergeFormat.vue
Unescape View File

@ -154,7 +154,7 @@ export default {
},
methods: {
...mapActions('process', ['processMerge']),
...mapActions('process', ['processMerge', 'setMergeData']),
startProcess() {
if (!this.preprocessResults) {
@ -187,7 +187,7 @@ export default {
this.processingPercentage = 100
// 保存合并结果到Vuex
this.processMerge(response.data)
this.setMergeData(response.data)
// 更新组件状态
setTimeout(() => {

1124
src/vue2/src/components/process/ModelAnalysis.vue
View File

File diff suppressed because it is too large Load Diff

96
src/vue2/src/components/process/PreProcess.vue
Unescape View File

@ -11,6 +11,8 @@
:showPrevButton="true"
@start="startProcess"
@retry="startProcess"
@prev="$emit('prev')"
@next="handleNext"
>
<template #pre-operation>
<div class="info-box">
@ -67,7 +69,6 @@
<script>
import { mapState, mapActions } from 'vuex'
import { preprocessData } from '../../api/process'
import ProcessStep from './ProcessStep.vue'
export default {
@ -80,7 +81,7 @@ export default {
data() {
return {
loading: false,
stepStatus: 'pending',
stepStatus: 'waiting',
processingPercentage: 0,
resultStats: {
processed: 0,
@ -103,7 +104,7 @@ export default {
watch: {
currentStepStatus(newStatus) {
if (newStatus === 'completed' && this.stepStatus === 'pending') {
if (newStatus === 'completed' && this.stepStatus === 'waiting') {
this.stepStatus = 'completed'
this.setResultData(this.preprocessResults)
}
@ -117,15 +118,26 @@ export default {
},
mounted() {
// 检查是否已经有预处理结果
if (this.currentStepStatus === 'completed' && this.preprocessResults) {
this.stepStatus = 'completed'
this.setResultData(this.preprocessResults)
}
// 如果没有fileData，则尝试加载模拟数据
if (!this.fileData) {
this.simulateFileData()
}
},
methods: {
...mapActions('process', ['processPreprocess']),
handleNext() {
console.log('PreProcess: 触发next事件')
this.$emit('next')
},
startProcess() {
if (!this.fileData) {
this.$message.error('没有可处理的数据，请先上传文件')
@ -144,27 +156,65 @@ export default {
}
}, 300)
// 调用预处理API
preprocessData(this.fileData).then(response => {
if (response.success) {
clearInterval(this.processTimer)
this.processingPercentage = 100
// 保存预处理结果到Vuex
this.processPreprocess(response.data)
// 更新组件状态
setTimeout(() => {
this.stepStatus = 'completed'
this.setResultData(response.data)
this.loading = false
}, 500)
} else {
this.handleError('预处理失败')
// 模拟预处理过程
setTimeout(() => {
clearInterval(this.processTimer)
this.processingPercentage = 100
const mockResult = this.generateMockResult()
// 保存预处理结果到Vuex
this.processPreprocess(mockResult)
// 更新组件状态
this.stepStatus = 'completed'
this.setResultData(mockResult)
this.loading = false
// 更新Vuex中的步骤状态
this.$store.commit('process/UPDATE_STEP_STATUS', { step: 'preprocess', status: 'completed' })
this.$message.success('数据预处理完成')
}, 3000)
},
simulateFileData() {
// 如果没有文件数据，生成模拟数据用于测试
if (!this.fileData) {
const mockFileData = {
fileName: 'test.xlsx',
rows: 1344,
columns: 5
}
}).catch(error => {
this.handleError(`预处理错误: ${error.message}`)
})
this.$store.commit('process/SET_FILE_DATA', mockFileData)
}
},
generateMockResult() {
// 生成模拟的预处理结果
const processed = this.fileData ? this.fileData.rows : 1000
const invalidRows = Math.floor(Math.random() * 50)
const normalizedFields = ['name', 'date', 'category', 'value', 'description']
// 生成预览数据
const preview = []
for (let i = 1; i <= 5; i++) {
preview.push({
id: i,
name: `示例${i}`,
date: `2025-0${i}-${10+i}`,
category: ['A类', 'B类', 'C类'][i % 3],
value: Math.floor(Math.random() * 1000),
description: `这是示例${i}的描述信息`
})
}
return {
processed,
invalidRows,
normalizedFields,
preview
}
},
setResultData(data) {

73
src/vue2/src/components/process/ProcessPage.vue
Unescape View File

@ -21,6 +21,7 @@
@prev="navToPrev"
@next="goToNextStep(1)"
@file-uploaded="handleFileUploaded"
ref="fileUpload"
/>
</div>
@ -34,6 +35,7 @@
@prev="navToPrev"
@next="goToNextStep(2)"
@start-preprocess="handlePreprocess"
@preprocess-completed="handlePreprocessCompleted"
/>
</div>
@ -76,6 +78,27 @@
/>
</div>
</div>
<!-- 添加全局操作按钮 -->
<div class="global-actions" v-if="currentStep < 6">
<el-button
v-if="currentStep > 1"
@click="navToPrev"
type="default"
icon="el-icon-arrow-left"
>
上一步
</el-button>
<el-button
v-if="currentStep < 5"
type="primary"
@click="goToNextStep(currentStep)"
:disabled="!canGoToNextStep(currentStep)"
icon="el-icon-arrow-right"
>
下一步
</el-button>
</div>
</div>
</template>
@ -124,8 +147,33 @@ export default {
this.currentStep--;
}
},
canGoToNextStep(step) {
// 检查当前步骤是否已完成
switch(step) {
case 1:
return this.stepStatus[0] === 'completed';
case 2:
return this.stepStatus[1] === 'completed';
case 3:
return this.stepStatus[2] === 'completed';
case 4:
return this.stepStatus[3] === 'completed';
case 5:
return this.stepStatus[4] === 'completed';
default:
return false;
}
},
goToNextStep(step) {
console.log('准备跳转到下一步, 当前步骤:', step);
// 确保当前步骤已完成
if (!this.canGoToNextStep(step)) {
console.warn('当前步骤未完成，无法跳转');
this.$message.warning('请先完成当前步骤');
return;
}
// 标记当前步骤为已完成
this.stepStatus[step - 1] = 'completed';
@ -189,7 +237,7 @@ export default {
// 显示成功提示并强调下一步操作
this.$message({
message: '文件上传成功，请点击"下一步"按钮继续',
message: '文件上传成功，请点击"继续处理"或"下一步"按钮继续',
type: 'success',
duration: 5000, // 显示时间更长，便于用户看到
showClose: true
@ -203,6 +251,9 @@ export default {
// 模拟预处理操作
this.simulateProgress(1, this.simulatedProcessingTime.preprocess);
// 立即更新状态为正在处理
this.$store.commit('process/UPDATE_STEP_STATUS', { step: 'preprocess', status: 'running' });
// 模拟预处理后的数据
setTimeout(() => {
this.processData.preprocessedData = {
@ -211,8 +262,19 @@ export default {
processedAt: new Date().toISOString(),
preprocessConfig
};
// 更新Vuex中的状态
this.$store.commit('process/UPDATE_STEP_STATUS', { step: 'preprocess', status: 'completed' });
this.stepStatus[1] = 'completed';
// 显示成功消息
this.$message.success('数据预处理完成！');
}, this.simulatedProcessingTime.preprocess);
},
handlePreprocessCompleted(preprocessConfig) {
// 处理预处理完成后的逻辑
console.log('预处理完成，配置:', preprocessConfig);
},
handleFormatMerge(mergeConfig) {
console.log('开始格式合并，配置:', mergeConfig);
@ -291,4 +353,13 @@ export default {
.process-container {
margin-top: 40px;
}
.global-actions {
display: flex;
justify-content: space-between;
margin-top: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 4px;
}
</style>

14
src/vue2/src/components/process/ProcessStep.vue
Unescape View File

@ -22,7 +22,7 @@
<!-- 操作区域 -->
<div class="operation" v-if="!isCompleted">
<slot name="operation"></slot>
<div v-if="status === 'waiting' || status === 'error'" class="operation-buttons">
<div v-if="status === 'waiting' || status === 'error' || status === 'pending'" class="operation-buttons">
<el-button
type="primary"
@click="startOperation"
@ -72,6 +72,7 @@
type="primary"
@click="goToNextStep"
:disabled="!isCompleted"
icon="el-icon-arrow-right"
>{{ '下一步' }}</el-button>
</div>
</div>
@ -167,7 +168,12 @@ export default {
goToNextStep() {
if (this.isCompleted) {
console.log('直接跳转到下一步');
console.log('ProcessStep: 触发next事件');
this.$emit('next');
setTimeout(() => {
console.log('已尝试触发next事件');
}, 100);
} else {
console.warn('当前状态不允许进入下一步:', this.status);
this.$message.warning('请先完成当前步骤');
@ -245,4 +251,10 @@ export default {
.prev-button-area, .next-button-area {
min-width: 80px;
}
.el-button:hover {
opacity: 0.9;
transform: translateY(-1px);
transition: all 0.3s ease;
}
</style>

11
src/vue2/src/components/process/WordCorrection.vue
Unescape View File

@ -437,14 +437,17 @@ export default {
},
handleStartCorrection() {
if (!this.formatMerged) {
console.log('格式合并状态:', this.formatMerged, '合并数据:', this.mergeData);
if (!this.formatMerged || !this.mergeData) {
this.$message.warning('请先完成格式合并步骤')
return
}
if (this.configForm.targetFields.length === 0) {
this.$message.warning('请选择至少一个需要纠错的字段')
return
// 如果没有选择字段，自动处理所有可用字段
if (this.configForm.targetFields.length === 0 && this.availableFields.length > 0) {
this.configForm.targetFields = this.availableFields.map(field => field.value);
console.log('自动选择所有可用字段:', this.configForm.targetFields);
}
this.loading = true

126
src/vue2/src/store/modules/process.js
Unescape View File

@ -8,6 +8,11 @@ const state = {
correctionResults: null,
analysisResults: null,
fileUploaded: false,
preprocessed: false,
formatMerged: false,
wordCorrected: false,
mergeData: null,
wordCorrectionData: null,
stepStatus: {
upload: 'waiting',
preprocess: 'pending',
@ -32,12 +37,31 @@ const mutations = {
},
SET_PREPROCESS_RESULTS(state, results) {
state.preprocessResults = results
if (results) {
state.preprocessed = true
}
},
SET_MERGE_RESULTS(state, results) {
state.mergeResults = results
if (results) {
state.formatMerged = true
state.mergeData = results
}
},
SET_MERGE_DATA(state, data) {
state.mergeData = data
state.formatMerged = true
},
SET_CORRECTION_RESULTS(state, results) {
state.correctionResults = results
if (results) {
state.wordCorrected = true
state.wordCorrectionData = results
}
},
SET_WORD_CORRECTION_DATA(state, data) {
state.wordCorrectionData = data
state.wordCorrected = true
},
SET_ANALYSIS_RESULTS(state, results) {
state.analysisResults = results
@ -46,6 +70,12 @@ const mutations = {
state.stepStatus[step] = status
if (step === 'upload' && status === 'completed') {
state.fileUploaded = true
} else if (step === 'preprocess' && status === 'completed') {
state.preprocessed = true
} else if (step === 'merge' && status === 'completed') {
state.formatMerged = true
} else if (step === 'correction' && status === 'completed') {
state.wordCorrected = true
}
},
RESET_FILE_UPLOADED(state) {
@ -75,24 +105,75 @@ const actions = {
commit('SET_MERGE_RESULTS', results)
commit('UPDATE_STEP_STATUS', { step: 'merge', status: 'completed' })
},
mergeFormatAction({ commit }, data) {
return new Promise((resolve) => {
console.log('开始执行格式合并操作', data);
commit('UPDATE_STEP_STATUS', { step: 'merge', status: 'running' });
// 模拟API调用
setTimeout(() => {
// 在真实环境中，这里会调用API
// const response = await mergeFormat(data);
resolve({ success: true });
}, 1500);
});
},
setMergeData({ commit }, data) {
commit('SET_MERGE_DATA', data)
commit('UPDATE_STEP_STATUS', { step: 'merge', status: 'completed' })
},
processCorrection({ commit }, results) {
commit('SET_CORRECTION_RESULTS', results)
commit('UPDATE_STEP_STATUS', { step: 'correction', status: 'completed' })
},
setWordCorrectionData({ commit }, data) {
commit('SET_WORD_CORRECTION_DATA', data)
commit('UPDATE_STEP_STATUS', { step: 'correction', status: 'completed' })
},
wordCorrectionAction({ commit }, data) {
return new Promise((resolve) => {
console.log('开始执行单词纠错操作', data);
commit('UPDATE_STEP_STATUS', { step: 'correction', status: 'running' });
// 模拟API调用
setTimeout(() => {
// 在真实环境中，这里会调用API
// const response = await correctWords(data);
resolve({ success: true });
}, 1500);
});
},
processAnalysis({ commit }, results) {
commit('SET_ANALYSIS_RESULTS', results)
commit('UPDATE_STEP_STATUS', { step: 'analysis', status: 'completed' })
},
uploadFile({ commit }) {
return new Promise((resolve) => {
commit('UPDATE_STEP_STATUS', { step: 'upload', status: 'running' })
uploadFile({ commit }, formData) {
return new Promise((resolve, reject) => {
console.log('开始处理文件上传，提交的表单数据:', formData);
setTimeout(() => {
commit('UPDATE_STEP_STATUS', { step: 'upload', status: 'completed' })
commit('SET_FILE_UPLOADED', true)
resolve({ success: true, message: '文件上传成功' })
}, 1000)
})
try {
commit('UPDATE_STEP_STATUS', { step: 'upload', status: 'running' });
// 模拟文件上传API调用
setTimeout(() => {
try {
// 模拟成功
console.log('文件上传完成，响应成功');
commit('UPDATE_STEP_STATUS', { step: 'upload', status: 'completed' });
commit('SET_FILE_UPLOADED', true);
resolve({ success: true, message: '文件上传成功' });
} catch (innerError) {
console.error('上传完成后处理失败:', innerError);
commit('UPDATE_STEP_STATUS', { step: 'upload', status: 'error' });
reject(new Error('处理上传文件失败: ' + innerError.message));
}
}, 1500);
} catch (error) {
console.error('上传过程失败:', error);
commit('UPDATE_STEP_STATUS', { step: 'upload', status: 'error' });
reject(error);
}
});
},
resetProcess({ commit }) {
commit('SET_CURRENT_STEP', 1)
@ -120,8 +201,33 @@ const getters = {
mergeResults: state => state.mergeResults,
correctionResults: state => state.correctionResults,
analysisResults: state => state.analysisResults,
mergeData: state => state.mergeData,
wordCorrectionData: state => state.wordCorrectionData,
stepStatus: state => state.stepStatus,
isStepCompleted: state => step => state.stepStatus[step] === 'completed',
preprocessed: state => state.preprocessed,
formatMerged: state => state.formatMerged,
wordCorrected: state => state.wordCorrected,
isStepCompleted: state => step => {
// 调试日志，帮助定位问题
console.log(`检查步骤'${step}'状态:`, state.stepStatus[step]);
// 检查特定步骤是否已完成
const completed = state.stepStatus[step] === 'completed';
// 特殊情况：预处理步骤，如果有preprocessed为true，也认为已完成
if (step === 'preprocess' && !completed && state.preprocessed) {
console.log('预处理标记为已完成，但状态未标记为completed，自动视为已完成');
return true;
}
// 特殊情况：格式合并步骤，如果formatMerged为true，也认为已完成
if (step === 'merge' && !completed && state.formatMerged) {
console.log('格式合并标记为已完成，但状态未标记为completed，自动视为已完成');
return true;
}
return completed;
},
fileUploaded: state => state.fileUploaded
}

57
src/vue2/src/views/Process.vue
Unescape View File

@ -15,21 +15,26 @@
<div class="step-content">
<!-- 步骤内容区域 -->
<div v-if="currentStep === 1">
<file-upload />
<file-upload @next="nextStep" @file-uploaded="handleFileUploaded" />
</div>
<div v-else-if="currentStep === 2">
<pre-process />
<pre-process @next="nextStep" @prev="prevStep" />
</div>
<div v-else-if="currentStep === 3">
<merge-format />
<merge-format @next="nextStep" @prev="prevStep" />
</div>
<div v-else-if="currentStep === 4">
<word-correction />
<word-correction @next="nextStep" @prev="prevStep" />
</div>
<div v-else-if="currentStep === 5">
<model-analysis />
<model-analysis @next="completeProcess" @prev="prevStep" />
</div>
</div>
<div class="process-actions">
<el-button @click="prevStep" :disabled="currentStep === 1">上一步</el-button>
<el-button type="primary" @click="nextStep" :disabled="!canProceedToNextStep">下一步</el-button>
</div>
</div>
</template>
@ -70,25 +75,33 @@ export default {
canProceedToNextStep() {
// 根据当前步骤判断是否可以进行下一步
console.log('检查是否可以进行下一步，当前步骤:', this.currentStep);
console.log('当前步骤状态:', this.stepStatus);
let preprocessCompleted = false; // 将变量声明移到switch外部
switch (this.currentStep) {
case 1:
return this.isStepCompleted('upload') || this.fileUploaded
return this.isStepCompleted('upload') || this.fileUploaded;
case 2:
return this.isStepCompleted('preprocess')
// 检查预处理步骤是否已完成
preprocessCompleted = this.isStepCompleted('preprocess');
console.log('预处理步骤是否完成:', preprocessCompleted);
return preprocessCompleted;
case 3:
return this.isStepCompleted('merge')
return this.isStepCompleted('merge');
case 4:
return this.isStepCompleted('correction')
return this.isStepCompleted('correction');
case 5:
return this.isStepCompleted('analysis')
return this.isStepCompleted('analysis');
default:
return false
return false;
}
}
},
methods: {
...mapActions('process', ['setCurrentStep']),
...mapActions('process', ['setCurrentStep', 'setFileData']),
getStepStatus(stepIndex) {
const stepKeys = ['upload', 'preprocess', 'merge', 'correction', 'analysis'];
@ -122,14 +135,34 @@ export default {
if (this.currentStep < 5) {
console.log('Process.vue: 准备进入下一步，当前步骤:', this.currentStep, '下一步骤:', this.currentStep + 1);
// 检查当前步骤是否可以前进
if (!this.canProceedToNextStep) {
console.warn('当前步骤未完成，无法进入下一步');
this.$message.warning('请先完成当前步骤');
return;
}
// 使用nextTick确保DOM更新
this.$nextTick(() => {
// 如果是预处理步骤，确保状态已更新
if (this.currentStep === 2) {
// 先更新状态再切换步骤
this.$store.commit('process/UPDATE_STEP_STATUS', { step: 'preprocess', status: 'completed' });
}
this.setCurrentStep(this.currentStep + 1);
console.log('Process.vue: 已切换到下一步，当前步骤:', this.currentStep + 1);
});
}
},
handleFileUploaded(fileData) {
console.log('Process.vue: 接收到文件上传完成事件', fileData);
if (fileData) {
this.setFileData(fileData);
}
},
completeProcess() {
// 完成处理后跳转到分析页面
this.$router.push('/analysis')

Write Preview
Loading…
Cancel
Save