532 lines
13 KiB
Vue
532 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<GiPageLayout>
|
|||
|
|
<div class="data-preprocessing-container">
|
|||
|
|
<!-- 步骤指示器 -->
|
|||
|
|
<div class="steps-container">
|
|||
|
|
<a-steps :current="currentStep" size="small" class="preprocessing-steps">
|
|||
|
|
<a-step title="选择数据" />
|
|||
|
|
<a-step title="预处理设置" />
|
|||
|
|
<a-step title="执行预处理" />
|
|||
|
|
<a-step title="完成" />
|
|||
|
|
</a-steps>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 步骤内容 -->
|
|||
|
|
<div class="step-content">
|
|||
|
|
<!-- 第一步：选择数据 -->
|
|||
|
|
<div v-if="currentStep === 0" class="step-panel">
|
|||
|
|
<div class="step-header">
|
|||
|
|
<h3>选择要预处理的数据</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="data-selection">
|
|||
|
|
<!-- 项目选择 -->
|
|||
|
|
<div class="project-select">
|
|||
|
|
<a-select
|
|||
|
|
v-model="selectedProject"
|
|||
|
|
placeholder="请选择项目"
|
|||
|
|
allow-clear
|
|||
|
|
style="width: 300px"
|
|||
|
|
>
|
|||
|
|
<a-option
|
|||
|
|
v-for="project in projectList"
|
|||
|
|
:key="project.id"
|
|||
|
|
:value="project.id"
|
|||
|
|
>
|
|||
|
|
{{ project.name }}
|
|||
|
|
</a-option>
|
|||
|
|
</a-select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 文件列表 -->
|
|||
|
|
<div class="file-list">
|
|||
|
|
<a-table
|
|||
|
|
:data="fileList"
|
|||
|
|
:columns="fileColumns"
|
|||
|
|
:row-selection="{ type: 'checkbox' }"
|
|||
|
|
@select="handleFileSelect"
|
|||
|
|
@select-all="handleFileSelectAll"
|
|||
|
|
row-key="id"
|
|||
|
|
:pagination="false"
|
|||
|
|
:scroll="{ y: 400 }"
|
|||
|
|
>
|
|||
|
|
<template #fileName="{ record }">
|
|||
|
|
<div class="file-item">
|
|||
|
|
<a-checkbox :checked="selectedFiles.includes(record.id)" />
|
|||
|
|
<span class="file-name">{{ record.fileName }}</span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<template #fileType="{ record }">
|
|||
|
|
<a-tag :color="getFileTypeColor(record.fileType)">
|
|||
|
|
{{ record.fileType }}
|
|||
|
|
</a-tag>
|
|||
|
|
</template>
|
|||
|
|
<template #fileSize="{ record }">
|
|||
|
|
<span>{{ record.fileSize }}</span>
|
|||
|
|
</template>
|
|||
|
|
<template #uploadTime="{ record }">
|
|||
|
|
<span>{{ record.uploadTime }}</span>
|
|||
|
|
</template>
|
|||
|
|
</a-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="step-actions">
|
|||
|
|
<a-button
|
|||
|
|
type="primary"
|
|||
|
|
@click="nextStep"
|
|||
|
|
:disabled="selectedFiles.length === 0"
|
|||
|
|
>
|
|||
|
|
下一步
|
|||
|
|
</a-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第二步：预处理设置 -->
|
|||
|
|
<div v-if="currentStep === 1" class="step-panel">
|
|||
|
|
<div class="step-header">
|
|||
|
|
<h3>预处理设置</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="preprocessing-settings">
|
|||
|
|
<!-- 图像处理选项 -->
|
|||
|
|
<div class="setting-group">
|
|||
|
|
<h4>图像处理</h4>
|
|||
|
|
<div class="setting-options">
|
|||
|
|
<a-checkbox v-model="settings.image.denoise">去噪</a-checkbox>
|
|||
|
|
<a-checkbox v-model="settings.image.enhance">增强</a-checkbox>
|
|||
|
|
<a-checkbox v-model="settings.image.crop">裁剪</a-checkbox>
|
|||
|
|
<a-checkbox v-model="settings.image.rotate">旋转校正</a-checkbox>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 视频处理选项 -->
|
|||
|
|
<div class="setting-group">
|
|||
|
|
<h4>视频处理</h4>
|
|||
|
|
<div class="setting-options">
|
|||
|
|
<a-checkbox v-model="settings.video.keyFrameExtraction">关键帧提取</a-checkbox>
|
|||
|
|
<a-checkbox v-model="settings.video.stabilization">稳定化</a-checkbox>
|
|||
|
|
<a-checkbox v-model="settings.video.split">分辨率调整</a-checkbox>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 输出格式设置 -->
|
|||
|
|
<div class="setting-group">
|
|||
|
|
<h4>输出格式</h4>
|
|||
|
|
<a-form-item label="输出格式">
|
|||
|
|
<a-select v-model="settings.output.format" style="width: 200px">
|
|||
|
|
<a-option value="JPG">JPG</a-option>
|
|||
|
|
<a-option value="PNG">PNG</a-option>
|
|||
|
|
<a-option value="TIFF">TIFF</a-option>
|
|||
|
|
<a-option value="MP4">MP4</a-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item label="输出目录">
|
|||
|
|
<a-input v-model="settings.output.directory" style="width: 300px" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="step-actions">
|
|||
|
|
<a-button @click="prevStep">上一步</a-button>
|
|||
|
|
<a-button type="primary" @click="nextStep">下一步</a-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第三步：执行预处理 -->
|
|||
|
|
<div v-if="currentStep === 2" class="step-panel">
|
|||
|
|
<div class="step-header">
|
|||
|
|
<h3>执行预处理</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="processing-section">
|
|||
|
|
<div class="processing-status">
|
|||
|
|
<div class="status-text">
|
|||
|
|
<span v-if="!isProcessing">准备预处理...</span>
|
|||
|
|
<span v-else>正在处理中...</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-container">
|
|||
|
|
<a-progress
|
|||
|
|
:percent="processingProgress"
|
|||
|
|
:status="isProcessing ? 'normal' : 'warning'"
|
|||
|
|
/>
|
|||
|
|
<span class="progress-text">{{ processingProgress }}%</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="step-actions">
|
|||
|
|
<a-button @click="prevStep" :disabled="isProcessing">上一步</a-button>
|
|||
|
|
<a-button
|
|||
|
|
v-if="!isProcessing"
|
|||
|
|
type="primary"
|
|||
|
|
@click="startProcessing"
|
|||
|
|
>
|
|||
|
|
开始预处理
|
|||
|
|
</a-button>
|
|||
|
|
<a-button
|
|||
|
|
v-else
|
|||
|
|
type="primary"
|
|||
|
|
@click="nextStep"
|
|||
|
|
:disabled="processingProgress < 100"
|
|||
|
|
>
|
|||
|
|
下一步
|
|||
|
|
</a-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第四步：完成 -->
|
|||
|
|
<div v-if="currentStep === 3" class="step-panel">
|
|||
|
|
<div class="step-header">
|
|||
|
|
<h3>完成</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="completion-section">
|
|||
|
|
<div class="completion-icon">
|
|||
|
|
<div class="success-icon">
|
|||
|
|
<GiSvgIcon name="check-circle" size="48" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="completion-text">
|
|||
|
|
<h4>预处理完成</h4>
|
|||
|
|
<p>数据预处理已成功完成，共处理了 {{ selectedFiles.length }} 个文件</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="step-actions">
|
|||
|
|
<a-button @click="viewResults">查看结果</a-button>
|
|||
|
|
<a-button type="primary" @click="continueProcessing">继续处理</a-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</GiPageLayout>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, reactive, onMounted } from 'vue'
|
|||
|
|
import { Message } from '@arco-design/web-vue'
|
|||
|
|
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
|
|||
|
|
|
|||
|
|
defineOptions({ name: 'DataPreprocessing' })
|
|||
|
|
|
|||
|
|
// 当前步骤
|
|||
|
|
const currentStep = ref(0)
|
|||
|
|
const isProcessing = ref(false)
|
|||
|
|
const processingProgress = ref(0)
|
|||
|
|
|
|||
|
|
// 项目列表
|
|||
|
|
const projectList = ref([
|
|||
|
|
{ id: 1, name: 'A风场2023年检查' },
|
|||
|
|
{ id: 2, name: 'B风场维修项目' },
|
|||
|
|
{ id: 3, name: 'C风场建设项目' }
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const selectedProject = ref<number>()
|
|||
|
|
const selectedFiles = ref<number[]>([])
|
|||
|
|
|
|||
|
|
// 文件列表
|
|||
|
|
const fileList = ref([
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
fileName: 'IMG_20231105_1430.jpg',
|
|||
|
|
fileType: 'image',
|
|||
|
|
fileSize: '3.2MB',
|
|||
|
|
uploadTime: '2023-11-05 14:32'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
fileName: 'VID_20231106_0915.mp4',
|
|||
|
|
fileType: 'video',
|
|||
|
|
fileSize: '45.6MB',
|
|||
|
|
uploadTime: '2023-11-06 09:18'
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
// 文件表格列配置
|
|||
|
|
const fileColumns: TableColumnData[] = [
|
|||
|
|
{
|
|||
|
|
title: '文件名',
|
|||
|
|
dataIndex: 'fileName',
|
|||
|
|
width: 300,
|
|||
|
|
ellipsis: true,
|
|||
|
|
tooltip: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '类型',
|
|||
|
|
dataIndex: 'fileType',
|
|||
|
|
slotName: 'fileType',
|
|||
|
|
width: 100,
|
|||
|
|
align: 'center'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '大小',
|
|||
|
|
dataIndex: 'fileSize',
|
|||
|
|
slotName: 'fileSize',
|
|||
|
|
width: 100,
|
|||
|
|
align: 'center'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '上传时间',
|
|||
|
|
dataIndex: 'uploadTime',
|
|||
|
|
slotName: 'uploadTime',
|
|||
|
|
width: 150,
|
|||
|
|
align: 'center'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 预处理设置
|
|||
|
|
const settings = reactive({
|
|||
|
|
image: {
|
|||
|
|
denoise: false,
|
|||
|
|
enhance: false,
|
|||
|
|
crop: false,
|
|||
|
|
rotate: false
|
|||
|
|
},
|
|||
|
|
video: {
|
|||
|
|
keyFrameExtraction: false,
|
|||
|
|
stabilization: false,
|
|||
|
|
split: false
|
|||
|
|
},
|
|||
|
|
output: {
|
|||
|
|
format: 'JPG',
|
|||
|
|
directory: '/output/processed'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 获取文件类型颜色
|
|||
|
|
const getFileTypeColor = (type: string) => {
|
|||
|
|
switch (type) {
|
|||
|
|
case 'image':
|
|||
|
|
return 'blue'
|
|||
|
|
case 'video':
|
|||
|
|
return 'green'
|
|||
|
|
case 'audio':
|
|||
|
|
return 'orange'
|
|||
|
|
case 'document':
|
|||
|
|
return 'purple'
|
|||
|
|
default:
|
|||
|
|
return 'gray'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 文件选择处理
|
|||
|
|
const handleFileSelect = (selectedRowKeys: number[]) => {
|
|||
|
|
selectedFiles.value = selectedRowKeys
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleFileSelectAll = (checked: boolean) => {
|
|||
|
|
if (checked) {
|
|||
|
|
selectedFiles.value = fileList.value.map(file => file.id)
|
|||
|
|
} else {
|
|||
|
|
selectedFiles.value = []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 步骤导航
|
|||
|
|
const nextStep = () => {
|
|||
|
|
if (currentStep.value < 3) {
|
|||
|
|
currentStep.value++
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const prevStep = () => {
|
|||
|
|
if (currentStep.value > 0) {
|
|||
|
|
currentStep.value--
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开始处理
|
|||
|
|
const startProcessing = () => {
|
|||
|
|
isProcessing.value = true
|
|||
|
|
processingProgress.value = 0
|
|||
|
|
|
|||
|
|
// 模拟处理进度
|
|||
|
|
const timer = setInterval(() => {
|
|||
|
|
processingProgress.value += 10
|
|||
|
|
if (processingProgress.value >= 100) {
|
|||
|
|
clearInterval(timer)
|
|||
|
|
isProcessing.value = false
|
|||
|
|
Message.success('预处理完成!')
|
|||
|
|
}
|
|||
|
|
}, 500)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 查看结果
|
|||
|
|
const viewResults = () => {
|
|||
|
|
Message.info('跳转到结果页面')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 继续处理
|
|||
|
|
const continueProcessing = () => {
|
|||
|
|
currentStep.value = 0
|
|||
|
|
selectedFiles.value = []
|
|||
|
|
selectedProject.value = undefined
|
|||
|
|
processingProgress.value = 0
|
|||
|
|
isProcessing.value = false
|
|||
|
|
Message.info('开始新的预处理任务')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 初始化数据
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.data-preprocessing-container {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.steps-container {
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
|
|||
|
|
.preprocessing-steps {
|
|||
|
|
max-width: 600px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-content {
|
|||
|
|
min-height: 500px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-panel {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 24px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-header {
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
border-bottom: 1px solid #e8e8e8;
|
|||
|
|
padding-bottom: 16px;
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
margin: 0;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.data-selection {
|
|||
|
|
.project-select {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-list {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
|
|||
|
|
.file-name {
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preprocessing-settings {
|
|||
|
|
.setting-group {
|
|||
|
|
margin-bottom: 32px;
|
|||
|
|
|
|||
|
|
h4 {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setting-options {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.processing-section {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40px;
|
|||
|
|
|
|||
|
|
.processing-status {
|
|||
|
|
.status-text {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
max-width: 400px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
|
|||
|
|
.progress-text {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.completion-section {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40px;
|
|||
|
|
|
|||
|
|
.completion-icon {
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
|
|||
|
|
.success-icon {
|
|||
|
|
display: inline-block;
|
|||
|
|
color: #52c41a;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.completion-text {
|
|||
|
|
h4 {
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-actions {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin-top: 40px;
|
|||
|
|
padding-top: 24px;
|
|||
|
|
border-top: 1px solid #e8e8e8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.arco-steps-item-title) {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.arco-table-cell) {
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.arco-form-item) {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.arco-form-item-label) {
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
</style>
|