From 4d09b1e0089c8185e4438b2e835fd24d9f210194 Mon Sep 17 00:00:00 2001 From: lSun <15893999301@qq.com> Date: Thu, 9 Oct 2025 16:37:25 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E5=83=8F=E8=AF=84=E4=BC=B0=E7=9A=84?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/imageCaptioning/imageLibrary.js | 10 + src/components/ImagePreview/index.vue | 2 - .../image-captioning-library/index.vue | 33 +-- .../components/FileUploaderUn.vue | 2 +- .../components/HistoryView.vue | 5 + .../components/HistoryViewUn.vue | 2 +- .../components/ImageResults.vue | 238 ++++++++++++----- .../components/ImageResultsUn.vue | 196 ++++++++++++++ .../image-captioning/index.vue | 247 ++++++++++++++---- .../image-evaluate-library/index.vue | 17 +- .../imageCaptioning/image-evaluate/index.vue | 94 +++++-- 11 files changed, 656 insertions(+), 190 deletions(-) create mode 100644 src/api/imageCaptioning/imageLibrary.js create mode 100644 src/views/imageCaptioning/image-captioning/components/ImageResultsUn.vue diff --git a/src/api/imageCaptioning/imageLibrary.js b/src/api/imageCaptioning/imageLibrary.js new file mode 100644 index 0000000..99c5dc4 --- /dev/null +++ b/src/api/imageCaptioning/imageLibrary.js @@ -0,0 +1,10 @@ +import request from '@/utils/request' + +// 查询参数列表 +export function getAllImagelist(query) { + return request({ + url: '/image/caption/list', + method: 'get', + params: query + }) +} diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue index e220db3..656db51 100644 --- a/src/components/ImagePreview/index.vue +++ b/src/components/ImagePreview/index.vue @@ -2,7 +2,6 @@
@@ -14,7 +13,6 @@ diff --git a/src/views/imageCaptioning/image-captioning-library/index.vue b/src/views/imageCaptioning/image-captioning-library/index.vue index 907376d..1436ade 100644 --- a/src/views/imageCaptioning/image-captioning-library/index.vue +++ b/src/views/imageCaptioning/image-captioning-library/index.vue @@ -46,11 +46,11 @@
@@ -58,12 +58,12 @@
- {{ item.name }} + {{ item.userName }} {{ item.date }}
- - {{ item.description }} + + {{ item.contentImage }}
@@ -96,17 +96,7 @@ diff --git a/src/views/imageCaptioning/image-captioning/components/ImageResultsUn.vue b/src/views/imageCaptioning/image-captioning/components/ImageResultsUn.vue new file mode 100644 index 0000000..c26c314 --- /dev/null +++ b/src/views/imageCaptioning/image-captioning/components/ImageResultsUn.vue @@ -0,0 +1,196 @@ + + + + + diff --git a/src/views/imageCaptioning/image-captioning/index.vue b/src/views/imageCaptioning/image-captioning/index.vue index 1d857ea..d3b2dcc 100644 --- a/src/views/imageCaptioning/image-captioning/index.vue +++ b/src/views/imageCaptioning/image-captioning/index.vue @@ -45,6 +45,7 @@ { loading.close(); if (res.code === 200 && res.data && Array.isArray(res.data)) { - // 处理成功响应 - const record = res.data[0]; // 获取第一条记录 - const totalCount = record.imageNum || originalFileList.length; - const recognizedCount = record.bzNum || 0; - const unrecognizedCount = record.wbzNum || (totalCount - recognizedCount); + // 处理成功响应 - 获取全部记录 + const records = res.data; + this.addId = records[0]?.operaId || ''; + console.log('this.addId:', this.addId) - this.uploadInfo = `上传${totalCount}张图片，可识别标注${recognizedCount}张，${unrecognizedCount}张无法识别标注。已识别标注图片如下，请确认。`; - - // 设置图片结果 - this.imageResults = record.fileVoList.map(item => ({ - url: item.bjUrl || "未找到图片地址", - id: item.imageId || item.id, - name: item.originalName, - contentImage: item.contentImage, - fileSize: item.fileSize, - operId: res.data[0].id , // 操作ID + // 按下标分组存储数据 + this.groupedImageResults = records.map((record, index) => ({ + index: index, // 下标 + operaName: record.operaName, + images: record.fileVoList.map(item => ({ + url: item.bjUrl || "未找到图片地址", + id: item.imageId || item.id, + name: item.originalName, + contentImage: item.contentImage, + fileSize: item.fileSize, + operId: record.id, + })), + totalCount: record.imageNum || originalFileList.length, + recognizedCount: record.bzNum || 0, + unrecognizedCount: record.wbzNum || 0, + isSure: record.isSure, + operId: record.id })); + // 初始化选中状态 - 根据 isActive 字段 + this.initializeSelectedImages(records); - this.isSure = record.isSure; + // this.isSure = record.isSure; // 刷新左侧标签文本并选中对应标签 - this.refreshSidebarLabel(record.operaName, record.id); + if (records.length > 0) { + this.refreshSidebarLabel(records[0].operaName, records[0].id); + } this.showImageResults = true; this.showNewAnnotation = false; @@ -354,67 +370,163 @@ export default { this.$message.success('已删除文件'); }, + // 处理手图标点击事件 // 处理手图标点击事件 handleHandClick(result, index) { - console.log(result) - console.log("点击了图片:", index) - // 使用对象属性的方式跟踪选中状态 - if (this.selectedImages[index]) { - console.log("取消选中:", index) - this.$set(this.selectedImages, index, false) + // 判断是分组模式还是普通模式 + if (typeof result === 'object' && result.hasOwnProperty('groupIndex') && result.hasOwnProperty('imageIndex')) { + // 分组模式 + const { groupIndex, imageIndex, key } = result; + + console.log("点击了分组图片:", groupIndex, imageIndex); + + // 检查是否已有其他未确认分组的选中项 + const hasOtherUnconfirmedGroupSelection = Object.keys(this.selectedImages).some(k => { + if (k.includes('-')) { + const [otherGroupIndex, otherImageIndex] = k.split('-').map(Number); + // 获取其他分组的信息 + const otherGroup = this.groupedImageResults[otherGroupIndex]; + // 只有当其他分组未确认且与当前分组不同时，才限制选择 + if (otherGroup && otherGroup.isSure !== '1' && otherGroupIndex !== groupIndex && this.selectedImages[k]) { + return true; + } + } + return false; + }); + + // 如果已有其他未确认分组的选中项，提示用户 + if (hasOtherUnconfirmedGroupSelection) { + this.$message.warning('当前版本不支持跨组选择，请先取消其他组的选择'); + return; + } + + if (this.selectedImages[key]) { + console.log("取消选中分组图片:", groupIndex, imageIndex); + this.$set(this.selectedImages, key, false); + } else { + console.log("选中分组图片:", groupIndex, imageIndex); + this.$set(this.selectedImages, key, true); + } + } else if (typeof result === 'object' && result.hasOwnProperty('index') && result.isSingle) { + // 普通模式 + const { index } = result; + console.log("点击了图片:", index); + + if (this.selectedImages[index]) { + console.log("取消选中:", index); + this.$set(this.selectedImages, index, false); + } else { + console.log("选中:", index); + this.$set(this.selectedImages, index, true); + } } else { - console.log("选中:", index) - this.$set(this.selectedImages, index, true) + // 兼容旧的处理方式 + console.log(result); + console.log("点击了图片:", index); + + if (this.selectedImages[index]) { + console.log("取消选中:", index); + this.$set(this.selectedImages, index, false); + } else { + console.log("选中:", index); + this.$set(this.selectedImages, index, true); + } } }, async generateTestData(recordId) { - // 后端获取的数据 try { const res = await getImageListDetailsAPI({id: recordId, operaType: 1}) - // 判断返回码和数据 if (res.code === 200 && res.data && Array.isArray(res.data)) { - // 处理图片结果数据 - this.imageResults = res.data[0].fileVoList.map((item, index) => ({ - url: item.bjUrl || item.url, // 使用 bjUrl 作为图片URL - id: item.imageId || index, // 使用 imageId 作为ID - name: item.originalName, // 原始文件名 - contentImage: item.contentImage, // 图片内容标签 - fileSize: item.fileSize, // 文件大小 - operId: res.data[0].id , // 操作ID + this.addId = res.data[0].operaId; + console.log('addId:', this.addId); + // 按下标分组存储数据 + this.groupedImageResults = res.data.map((record, index) => ({ + index: index, // 下标 + operaName: record.operaName, + images: record.fileVoList.map(item => ({ + url: item.bjUrl || item.url, + id: item.imageId || item.id, + name: item.originalName, + contentImage: item.contentImage, + fileSize: item.fileSize, + operId: record.id + })), + totalCount: record.imageNum || 0, + recognizedCount: record.bzNum || 0, + unrecognizedCount: record.wbzNum || 0, + isSure: record.isSure, + operId: record.operaId })); - this.isSure = res.data[0].isSure; - - const totalCount = res.data[0].imageNum || 0; - const recognizedCount = res.data[0].bzNum || 0; - const unrecognizedCount = res.data[0].wbzNum ; - this.uploadInfo = `上传${totalCount}张图片，可识别标注${recognizedCount}张，${unrecognizedCount}张无法识别标注。已识别标注图片如下，请确认。`; + // 初始化选中状态 - 根据 isActive 字段 + this.initializeSelectedImages(res.data); + // 设置第一条记录的状态用于界面显示 + this.isSure = res.data[0]?.isSure || ''; } } catch (error) { console.error('获取列表异常:', error) } }, - confirmResults() { - console.log('当前 selectedImages 状态:', this.selectedImages); - // 获取所有被选中的图片（基于 index 判断） - const selectedItems = []; - for (let index in this.selectedImages) { - const idx = parseInt(index); - if (this.selectedImages[idx]) { - selectedItems.push(this.imageResults[idx]); // 根据 index 取出 imageResults 中对应图片 + // 获取选中图片的ID和operId + getSelectedImageInfo() { + const selectedImageInfo = []; + + // 遍历选中的图片 + for (let key in this.selectedImages) { + if (this.selectedImages[key]) { + // 判断是分组模式还是普通模式 + if (key.includes('-')) { + // 分组模式: key格式为 "groupIndex-imageIndex" + const [groupIndex, imageIndex] = key.split('-').map(Number); + const group = this.groupedImageResults[groupIndex]; + if (group && group.images[imageIndex]) { + selectedImageInfo.push({ + imageId: group.images[imageIndex].id, + operId: group.operId, + imageName: group.images[imageIndex].name + }); + } + } else { + // 普通模式: key是数字索引 + const index = parseInt(key); + if (this.imageResults[index]) { + selectedImageInfo.push({ + imageId: this.imageResults[index].id, + operId: this.imageResults[index].operId, + imageName: this.imageResults[index].name + }); + } + } } } - if (selectedItems.length === 0) { - this.$message.warning('请至少选择一张图片'); - return; + + return selectedImageInfo; + }, + + confirmResults() { + const selectedInfo = this.getSelectedImageInfo(); + + if (selectedInfo.length === 0) { + // this.$message.warning('请至少选择一张图片'); + // return; + this.handleConfirm(this.addId, ); + }else{ + // 获取图片ID数组 + const imageIds = selectedInfo.map(item => item.imageId); + + // 获取operId（假设所有选中图片属于同一组，使用第一个） + const operId = selectedInfo[0].operId; + + console.log('选中的图片IDs:', imageIds); + console.log('操作ID:', operId); + + // 调用确认接口 + this.handleConfirm(operId, imageIds); } - // 提取 operId 和 imageId - const imageIds = selectedItems.map(item => item.id); - const operId = selectedItems[0].operId; // 所有图片的 operId 应该一致 - // 调用确认接口 - this.handleConfirm(operId,imageIds); + + }, async handleConfirm(operId,imageIds) { @@ -439,7 +551,26 @@ export default { toggleSidebar() { this.isSidebarVisible = !this.isSidebarVisible; - } + }, + + + initializeSelectedImages(records) { + // 清空当前选中状态 + this.selectedImages = {}; + // 遍历所有分组和图片 + records.forEach((record, groupIndex) => { + if (record.fileVoList && Array.isArray(record.fileVoList)) { + record.fileVoList.forEach((fileItem, imageIndex) => { + // 如果 isActive 为 "1"，则默认选中 + if (fileItem.isActive === "1") { + const key = `${groupIndex}-${imageIndex}`; + this.$set(this.selectedImages, key, true); + } + }); + } + }); + }, + }, } diff --git a/src/views/imageCaptioning/image-evaluate-library/index.vue b/src/views/imageCaptioning/image-evaluate-library/index.vue index 4fa89a9..15545d7 100644 --- a/src/views/imageCaptioning/image-evaluate-library/index.vue +++ b/src/views/imageCaptioning/image-evaluate-library/index.vue @@ -83,17 +83,7 @@