Industrial-image-management-system---web/src/components/ImageImport/index.vue

<template>
  <div class="image-import">
    <a-modal
      v-model:visible="visible"
      title="导入图像"
      width="600px"
      :confirm-loading="importing"
      @ok="handleImport"
      @cancel="handleCancel"
    >
      <div class="import-content">
        <!-- 选择项目和组件 -->
        <a-form :model="form" layout="vertical">
          <a-form-item label="图像来源" required>
            <a-select
              v-model="form.imageSource"
              :options="imageSourceOptions"
              placeholder="请选择图像来源"
              :loading="loadingImageSources"
            />
          </a-form-item>

          <a-form-item label="目标项目" required>
            <a-tree-select
              v-model="form.projectId"
              :data="projectTree"
              :field-names="{ key: 'id', title: 'name', children: 'children' }"
              placeholder="请选择项目"
              tree-checkable
              :tree-check-strictly="true"
              @change="onProjectChange"
            />
          </a-form-item>

          <a-form-item label="目标组件">
            <a-select
              v-model="form.componentId"
              :options="componentOptions"
              placeholder="请选择组件（可选）"
              allow-clear
            />
          </a-form-item>

          <a-form-item label="上传用户">
            <a-input v-model="form.uploadUser" placeholder="请输入上传用户" />
          </a-form-item>

          <a-form-item label="位置信息">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-input v-model="form.altitude" placeholder="海拔" />
              </a-col>
              <a-col :span="8">
                <a-input v-model="form.latitude" placeholder="纬度" />
              </a-col>
              <a-col :span="8">
                <a-input v-model="form.longitude" placeholder="经度" />
              </a-col>
            </a-row>
          </a-form-item>

          <a-form-item label="导入设置">
            <a-checkbox-group v-model="form.settings">
              <a-checkbox value="autoAnnotate">导入后自动标注</a-checkbox>
              <a-checkbox value="overwrite">覆盖同名文件</a-checkbox>
            </a-checkbox-group>
          </a-form-item>

          <a-form-item v-if="form.settings.includes('autoAnnotate')" label="标注类型">
            <a-select
              v-model="form.annotationTypes"
              :options="defectTypeOptions"
              placeholder="选择要自动标注的缺陷类型"
              multiple
            />
          </a-form-item>
        </a-form>

        <!-- 文件上传区域 -->
        <div class="upload-section">
          <a-upload
            ref="uploadRef"
            :custom-request="() => {}"
            :show-file-list="false"
            accept="image/*"
            multiple
            @change="handleFileChange"
          >
            <template #upload-button>
              <div class="upload-area">
                <div class="upload-drag-icon">
                  <IconUpload size="48" />
                </div>
                <div class="upload-text">
                  <p>点击或拖拽图像文件到此区域</p>
                  <p class="upload-hint">支持 JPG、PNG、JPEG 格式，可同时选择多个文件</p>
                </div>
              </div>
            </template>
          </a-upload>
        </div>

        <!-- 文件列表 -->
        <div v-if="fileList.length > 0" class="file-list">
          <div class="list-header">
            <h4>待导入文件 ({{ fileList.length }})</h4>
            <a-button type="text" @click="clearFiles">
              <template #icon>
                <IconDelete />
              </template>
              清空
            </a-button>
          </div>
          <div class="list-content">
            <div
              v-for="(file, index) in fileList"
              :key="index"
              class="file-item"
            >
              <div class="file-info">
                <div class="file-preview">
                  <img :src="file.preview" alt="preview" />
                </div>
                <div class="file-details">
                  <div class="file-name">{{ file.name }}</div>
                  <div class="file-size">{{ formatFileSize(file.size) }}</div>
                </div>
              </div>
              <div class="file-actions">
                <a-button
                  type="text"
                  size="small"
                  @click="removeFile(index)"
                >
                  <template #icon>
                    <IconClose />
                  </template>
                </a-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 导入进度 -->
        <div v-if="importing" class="import-progress">
          <a-progress
            :percent="importProgress"
            :status="importStatus"
            size="large"
          />
          <p class="progress-text">{{ progressText }}</p>
        </div>

        <!-- 导入结果 -->
        <div v-if="importResult" class="import-result">
          <a-alert
            :type="importResult.failed.length > 0 ? 'warning' : 'success'"
            :title="getResultTitle()"
            :description="getResultDescription()"
            show-icon
          />

          <div v-if="importResult.failed.length > 0" class="result-details">
            <h4>失败文件列表:</h4>
            <div class="failed-list">
              <div
                v-for="failed in importResult.failed"
                :key="failed.filename"
                class="failed-item"
              >
                <span class="filename">{{ failed.filename }}</span>
                <span class="error">{{ failed.error }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import {
  IconClose,
  IconDelete,
  IconUpload,
} from '@arco-design/web-vue/es/icon'
import {
  getImageSources,
  getProjectTree,
  importImages,
} from '@/apis/industrial-image'
import type {
  ImageImportParams,
  IndustrialImage,
  ProjectTreeNode,
} from '@/apis/industrial-image/type'

interface Props {
  visible: boolean
}

interface Emits {
  (e: 'update:visible', visible: boolean): void
  (e: 'importSuccess', result: { success: IndustrialImage[], failed: any[] }): void
}

interface FileItem {
  file: File
  name: string
  size: number
  preview: string
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 响应式数据
const importing = ref(false)
const importProgress = ref(0)
const importStatus = ref<'normal' | 'success' | 'warning' | 'danger'>('normal')
const progressText = ref('')
const importResult = ref<{ success: IndustrialImage[], failed: any[] } | null>(null)

const form = ref({
  imageSource: '',
  projectId: '',
  componentId: '',
  uploadUser: '',
  altitude: '',
  latitude: '',
  longitude: '',
  settings: [] as string[],
  annotationTypes: [] as string[],
})

const fileList = ref<FileItem[]>([])
const projectTree = ref<ProjectTreeNode[]>([])
const defectTypes = ref<Array<{ id: string, name: string, description?: string, color?: string }>>([])
const imageSources = ref<Array<{ id: string, name: string, code: string }>>([])
const loadingImageSources = ref(false)

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
})

const componentOptions = computed(() => {
  const findComponents = (nodes: ProjectTreeNode[]): Array<{ label: string, value: string }> => {
    const options: Array<{ label: string, value: string }> = []

    nodes.forEach((node) => {
      if (node.type === 'component' || node.type === 'blade' || node.type === 'tower') {
        options.push({
          label: node.name,
          value: node.id,
        })
      }
      if (node.children) {
        options.push(...findComponents(node.children))
      }
    })

    return options
  }

  return form.value.projectId ? findComponents(projectTree.value) : []
})

const defectTypeOptions = computed(() => {
  return defectTypes.value.map((type) => ({
    label: type.name,
    value: type.id,
  }))
})

const imageSourceOptions = computed(() => {
  return imageSources.value.map((source) => ({
    label: source.name,
    value: source.code,
  }))
})

// 方法
const loadProjectTree = async () => {
  try {
    const res = await getProjectTree()
    projectTree.value = res.data
  } catch (error) {
    console.error('加载项目树失败:', error)
  }
}

// const loadDefectTypes = async () => {
//   try {
//     const res = await getDefectTypes()
//     defectTypes.value = res.data
//   } catch (error) {
//     console.error('加载缺陷类型失败:', error)
//   }
// }

const loadImageSources = async () => {
  loadingImageSources.value = true
  try {
    const res = await getImageSources()
    if (res.data && res.data.length > 0 && res.data[0].data) {
      imageSources.value = res.data[0].data
      if (imageSources.value.length > 0) {
        form.value.imageSource = imageSources.value[0].code
      }
    }
  } catch (error) {
    console.error('加载图像来源失败:', error)
  } finally {
    loadingImageSources.value = false
  }
}

const onProjectChange = (value: string) => {
  form.value.componentId = ''
}

const handleFileChange = (fileList: any) => {
  const files = Array.from(fileList.target?.files || []) as File[]

  files.forEach((file) => {
    if (!file.type.startsWith('image/')) {
      Message.warning(`文件 ${file.name} 不是图像文件`)
      return
    }

    if (file.size > 10 * 1024 * 1024) { // 10MB
      Message.warning(`文件 ${file.name} 大小超过10MB`)
      return
    }

    const reader = new FileReader()
    reader.onload = (e) => {
      const fileItem: FileItem = {
        file,
        name: file.name,
        size: file.size,
        preview: e.target?.result as string,
      }
      fileList.value.push(fileItem)
    }
    reader.readAsDataURL(file)
  })
}

const removeFile = (index: number) => {
  fileList.value.splice(index, 1)
}

const clearFiles = () => {
  fileList.value = []
}

const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
}

const handleImport = async () => {
  if (!form.value.imageSource) {
    Message.warning('请选择图像来源')
    return
  }

  if (!form.value.projectId) {
    Message.warning('请选择目标项目')
    return
  }

  if (fileList.value.length === 0) {
    Message.warning('请选择要导入的图像文件')
    return
  }

  importing.value = true
  importProgress.value = 0
  importStatus.value = 'normal'
  progressText.value = '正在导入图像...'
  importResult.value = null

  try {
    const files = fileList.value.map((item) => item.file)
    const params: ImageImportParams = {
      imageSource: form.value.imageSource,
      projectId: form.value.projectId,
      componentId: form.value.componentId || undefined,
      uploadUser: form.value.uploadUser || undefined,
      altitude: form.value.altitude || undefined,
      latitude: form.value.latitude || undefined,
      longitude: form.value.longitude || undefined,
      autoAnnotate: form.value.settings.includes('autoAnnotate'),
      annotationTypes: form.value.settings.includes('autoAnnotate') ? form.value.annotationTypes : undefined,
    }

    // 模拟进度更新
    const progressInterval = setInterval(() => {
      if (importProgress.value < 90) {
        importProgress.value += 10
      }
    }, 200)

    const res = await importImages(files, params)

    clearInterval(progressInterval)
    importProgress.value = 100
    importStatus.value = 'success'
    progressText.value = '导入完成!'

    // 注意：真实API返回的数据结构可能不同，需要根据实际情况调整
    const mockResult = {
      success: files.map((file, index) => ({
        id: `img_${Date.now()}_${index}`,
        name: file.name,
        path: `uploaded/${file.name}`,
        size: file.size,
        type: file.type,
        projectId: form.value.projectId,
        componentId: form.value.componentId,
        createTime: new Date().toISOString(),
      })),
      failed: [],
    }

    importResult.value = mockResult
    emit('importSuccess', mockResult)

    Message.success(`成功导入 ${files.length} 个图像文件`)
  } catch (error) {
    console.error('导入失败:', error)
    importProgress.value = 100
    importStatus.value = 'danger'
    progressText.value = '导入失败!'
    Message.error('导入图像失败')
  } finally {
    importing.value = false
  }
}

const handleCancel = () => {
  if (importing.value) {
    Message.warning('正在导入中，请稍后再试')
    return
  }

  resetForm()
  visible.value = false
}

const resetForm = () => {
  form.value = {
    imageSource: '',
    projectId: '',
    componentId: '',
    uploadUser: '',
    altitude: '',
    latitude: '',
    longitude: '',
    settings: [],
    annotationTypes: [],
  }
  fileList.value = []
  importResult.value = null
  importProgress.value = 0
  importStatus.value = 'normal'
  progressText.value = ''
}

const getResultTitle = () => {
  if (!importResult.value) return ''

  const { success, failed } = importResult.value
  if (failed.length === 0) {
    return `导入成功！共导入 ${success.length} 个图像文件`
  } else {
    return `导入完成！成功 ${success.length} 个，失败 ${failed.length} 个`
  }
}

const getResultDescription = () => {
  if (!importResult.value) return ''

  const { success, failed } = importResult.value
  if (failed.length === 0) {
    return '所有图像文件都已成功导入到指定项目中'
  } else {
    return `部分文件导入失败，请检查失败原因并重新导入`
  }
}

// 监听器
watch(visible, (newValue) => {
  if (newValue) {
    loadProjectTree()
    // loadDefectTypes()
    loadImageSources()
  } else {
    resetForm()
  }
})
</script>

<style scoped lang="scss">
.image-import {
  .import-content {
    max-height: 70vh;
    overflow-y: auto;
  }

  .upload-section {
    margin: 20px 0;
  }

  .upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 2px dashed #d9d9d9;
    border-radius: 8px;
    background: #fafafa;
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      border-color: #1890ff;
      background: #f0f8ff;
    }
  }

  .upload-drag-icon {
    margin-bottom: 16px;
    color: #999;
  }

  .upload-text {
    text-align: center;

    p {
      margin: 0;

      &.upload-hint {
        margin-top: 8px;
        font-size: 12px;
        color: #999;
      }
    }
  }

  .file-list {
    margin-top: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
  }

  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;

    h4 {
      margin: 0;
      font-size: 14px;
      font-weight: 500;
    }
  }

  .list-content {
    max-height: 300px;
    overflow-y: auto;
  }

  .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }
  }

  .file-info {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .file-preview {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #e8e8e8;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .file-details {
    flex: 1;
  }

  .file-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
  }

  .file-size {
    font-size: 12px;
    color: #999;
  }

  .import-progress {
    margin-top: 20px;
    text-align: center;
  }

  .progress-text {
    margin-top: 8px;
    font-size: 14px;
    color: #666;
  }

  .import-result {
    margin-top: 20px;
  }

  .result-details {
    margin-top: 16px;

    h4 {
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 500;
    }
  }

  .failed-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
  }

  .failed-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }
  }

  .filename {
    font-size: 12px;
    color: #333;
  }

  .error {
    font-size: 12px;
    color: #ff4d4f;
  }
}
</style>