bonus
/
js_image_annotation_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加备注

This commit is contained in:
BianLzhaoMin 2025-11-25 17:16:35 +08:00
parent 5ed6e787bc
commit c7ac05a8ac
3 changed files with 947 additions and 871 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/imageCaptioning/image-captioning/components/FileUploader.vue
View File

@ -20,19 +20,18 @@
:src="file.url" :src="file.url"
alt="" alt=""
class="preview-image" class="preview-image"
> />
<!-- 压缩包文件预览 --> <!-- 压缩包文件预览 -->
<div <div v-else class="zip-preview" :title="file.name">
v-else
class="zip-preview"
:title="file.name"
>
<i class="el-icon-document"></i> <i class="el-icon-document"></i>
<div class="file-name">{{ file.name }}</div> <div class="file-name">{{ file.name }}</div>
</div> </div>
<i class="el-icon-close delete-icon" @click="$emit('remove-image', index)"></i> <i
class="el-icon-close delete-icon"
@click="$emit('remove-image', index)"
></i>
</div> </div>
</div> </div>
</div> </div>
@ -57,7 +56,9 @@
<el-button <el-button
type="primary" type="primary"
@click="$emit('start-upload')" @click="$emit('start-upload')"
:disabled="fileList.length === 0 || selectedTag.length === 0" :disabled="
fileList.length === 0 || selectedTag.length === 0
"
> >
开始标注 开始标注
</el-button> </el-button>
@ -68,76 +69,78 @@
<script> <script>
export default { export default {
name: "FileUploader", name: 'FileUploader',
props: { props: {
fileList: { fileList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
selectedTag: { selectedTag: {
type: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
computed: { computed: {
uploadLimit() { uploadLimit() {
const hasZip = this.fileList.some(file => this.isCompressedFile(file.name)); const hasZip = this.fileList.some((file) =>
return hasZip ? 1 : 50; this.isCompressedFile(file.name),
} )
return hasZip ? 1 : 50
},
}, },
methods: { methods: {
isImageFile(filename) { isImageFile(filename) {
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']; const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
const extension = filename.split('.').pop().toLowerCase(); const extension = filename.split('.').pop().toLowerCase()
return imageExtensions.includes(extension); return imageExtensions.includes(extension)
}, },
handleFileChange(file, fileList) { handleFileChange(file, fileList) {
const isZip = this.isCompressedFile(file.name); const isZip = this.isCompressedFile(file.name)
const hasImage = fileList.some(f => this.isImageFile(f.name)); const hasImage = fileList.some((f) => this.isImageFile(f.name))
const hasZip = fileList.some(f => this.isCompressedFile(f.name)); const hasZip = fileList.some((f) => this.isCompressedFile(f.name))
// 修改后的判断逻辑 // 修改后的判断逻辑
if (isZip && hasImage) { if (isZip && hasImage) {
this.$message.warning('不能同时上传压缩包'); this.$message.warning('不能同时上传压缩包')
return false; return false
} }
if (this.isImageFile(file.name) && hasZip) { if (this.isImageFile(file.name) && hasZip) {
this.$message.warning('不能同时上传图片'); this.$message.warning('不能同时上传图片')
return false; return false
} }
if (file.raw) { if (file.raw) {
const reader = new FileReader(); const reader = new FileReader()
reader.onload = (e) => { reader.onload = (e) => {
file.url = e.target.result; file.url = e.target.result
}; }
reader.readAsDataURL(file.raw); reader.readAsDataURL(file.raw)
} }
// 延迟设置fileList，确保file.url已正确设置 // 延迟设置fileList，确保file.url已正确设置
setTimeout(() => { setTimeout(() => {
this.$emit('file-change', file, fileList); this.$emit('file-change', file, fileList)
}, 100); }, 100)
}, },
isCompressedFile(filename) { isCompressedFile(filename) {
const compressedExtensions = ['zip', 'rar', '7z']; const compressedExtensions = ['zip', 'rar', '7z']
const extension = filename.split('.').pop().toLowerCase(); const extension = filename.split('.').pop().toLowerCase()
return compressedExtensions.includes(extension); return compressedExtensions.includes(extension)
}, },
handleExceed(files, fileList) { handleExceed(files, fileList) {
const hasZip = fileList.some(f => this.isCompressedFile(f.name)); const hasZip = fileList.some((f) => this.isCompressedFile(f.name))
if (hasZip) { if (hasZip) {
this.$message.warning('压缩包最多只能上传1个'); this.$message.warning('压缩包最多只能上传1个')
} else { } else {
this.$message.warning(`最多只能上传50张图片`); this.$message.warning(`最多只能上传50张图片`)
}
}
} }
},
},
} }
</script> </script>

53
src/views/imageCaptioning/image-captioning/components/HistoryView.vue
View File

@ -24,11 +24,21 @@
@toggle-all-tags="$emit('toggle-all-tags')" @toggle-all-tags="$emit('toggle-all-tags')"
/> />
<!-- 输入备注 -->
<el-input
:rows="1"
placeholder="请输入备注"
type="textarea"
v-model="remarkInfo"
/>
<!-- 图片上传区域 --> <!-- 图片上传区域 -->
<FileUploader <FileUploader
:file-list="fileList" :file-list="fileList"
:selected-tag="selectedTag" :selected-tag="selectedTag"
@file-change="(file, fileList) => $emit('file-change', file, fileList)" @file-change="
(file, fileList) => $emit('file-change', file, fileList)
"
@remove-image="(index) => $emit('remove-image', index)" @remove-image="(index) => $emit('remove-image', index)"
@start-upload="$emit('start-upload')" @start-upload="$emit('start-upload')"
/> />
@ -37,62 +47,67 @@
</template> </template>
<script> <script>
import ImageResults from './ImageResults.vue'; import ImageResults from './ImageResults.vue'
import TagSelector from './TagSelector.vue'; import TagSelector from './TagSelector.vue'
import FileUploader from './FileUploader.vue'; import FileUploader from './FileUploader.vue'
import axios from 'axios' import axios from 'axios'
import { getToken } from '@/utils/auth' import { getToken } from '@/utils/auth'
export default { export default {
name: "HistoryView", name: 'HistoryView',
components: { components: {
ImageResults, ImageResults,
TagSelector, TagSelector,
FileUploader FileUploader,
},
data() {
return {
remarkInfo: '', // 备注信息
}
}, },
props: { props: {
uploadInfo: { uploadInfo: {
type: String, type: String,
default: '' default: '',
}, },
imageResults: { imageResults: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
groupedImageResults: { groupedImageResults: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
selectedImages: { selectedImages: {
type: Object, type: Object,
default: () => ({}) default: () => ({}),
}, },
tags: { tags: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
visibleTags: { visibleTags: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
selectedTag: { selectedTag: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
fileList: { fileList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
isSure: { isSure: {
type: String, type: String,
default: '' default: '',
} },
}, },
methods: { methods: {
handleHandClickFromChild(result, index) { handleHandClickFromChild(result, index) {
this.$emit('hand-click', result, index); this.$emit('hand-click', result, index)
} },
} },
} }
</script> </script>

394
src/views/imageCaptioning/image-captioning/index.vue
View File

@ -16,9 +16,7 @@
<!-- 主内容区域-新增的 --> <!-- 主内容区域-新增的 -->
<div class="add-content"> <div class="add-content">
<!-- 标题 --> <!-- 标题 -->
<div class="welcome-message"> <div class="welcome-message"> 嗨！我是你的图像标注助理 </div>
嗨！我是你的图像标注助理
</div>
<!-- 标签选择区域 --> <!-- 标签选择区域 -->
<TagSelector <TagSelector
@ -29,6 +27,14 @@
@toggle-all-tags="toggleAllTags" @toggle-all-tags="toggleAllTags"
/> />
<!-- 输入备注 -->
<el-input
:rows="1"
placeholder="请输入备注"
type="textarea"
v-model="remarkInfo"
/>
<!-- 图片上传区域 --> <!-- 图片上传区域 -->
<FileUploader <FileUploader
:file-list="fileList" :file-list="fileList"
@ -70,20 +76,20 @@ import {
getImageListAPI, getImageListAPI,
getImageListDetailsAPI, getImageListDetailsAPI,
addImageInfoAPI, addImageInfoAPI,
updateImageSureAPI updateImageSureAPI,
} from "@/api/imageCaptioning/imageCaptioning"; } from '@/api/imageCaptioning/imageCaptioning'
import Sidebar from "./components/Sidebar"; import Sidebar from './components/Sidebar'
import TagSelector from "./components/TagSelector"; import TagSelector from './components/TagSelector'
import FileUploader from "./components/FileUploader"; import FileUploader from './components/FileUploader'
import HistoryView from "./components/HistoryView"; import HistoryView from './components/HistoryView'
export default { export default {
name: "imageCaptioning", name: 'imageCaptioning',
components: { components: {
Sidebar, Sidebar,
TagSelector, TagSelector,
FileUploader, FileUploader,
HistoryView HistoryView,
}, },
data() { data() {
return { return {
@ -110,6 +116,8 @@ export default {
addId: '', //新增id addId: '', //新增id
groupedImageResults: [], // 新增分组数据 groupedImageResults: [], // 新增分组数据
remarkInfo: '', // 备注信息
} }
}, },
@ -127,12 +135,11 @@ export default {
// 判断返回码和数据 // 判断返回码和数据
if (res.code === 200 && res.data && Array.isArray(res.data)) { if (res.code === 200 && res.data && Array.isArray(res.data)) {
// 将返回的数据转换为包含 id 和 name 的对象数组 // 将返回的数据转换为包含 id 和 name 的对象数组
this.tags = res.data.map(item => ({ this.tags = res.data.map((item) => ({
id: item.id, id: item.id,
name: item.name name: item.name,
})) }))
this.visibleTags = this.tags.slice(0, 3); this.visibleTags = this.tags.slice(0, 3)
} else { } else {
console.error('获取标签列表失败:', res) console.error('获取标签列表失败:', res)
this.tags = [] this.tags = []
@ -148,12 +155,11 @@ export default {
const res = await getImageListAPI({ operaType: 1 }) const res = await getImageListAPI({ operaType: 1 })
// 判断返回码和数据 // 判断返回码和数据
if (res.code === 200 && res.data && Array.isArray(res.data)) { if (res.code === 200 && res.data && Array.isArray(res.data)) {
this.labelList = res.data.map(item => ({ this.labelList = res.data.map((item) => ({
id: item.id, id: item.id,
date: item.operaTime, date: item.operaTime,
name: item.operaName name: item.operaName,
})) }))
} }
} catch (error) { } catch (error) {
console.error('获取列表异常:', error) console.error('获取列表异常:', error)
@ -161,16 +167,16 @@ export default {
}, },
createNewLabel() { createNewLabel() {
this.selectedItem = null; this.selectedItem = null
this.fileList = []; this.fileList = []
this.selectedTag = []; this.selectedTag = []
this.showImageResults = false; this.showImageResults = false
this.uploadInfo = ''; this.uploadInfo = ''
this.imageResults = []; this.imageResults = []
this.selectedImages = {}; this.selectedImages = {}
this.showNewAnnotation = true; this.showNewAnnotation = true
this.showNewAnnotationAdd = false; this.showNewAnnotationAdd = false
this.addId =''; this.addId = ''
}, },
startUpload() { startUpload() {
@ -180,134 +186,153 @@ export default {
return return
} }
// 标签处理 // 标签处理
const selectedTagIds = this.selectedTag.map(tag => tag.id).join(','); const selectedTagIds = this.selectedTag
const selectedTagNames = this.selectedTag.map(tag => tag.name).join(','); .map((tag) => tag.id)
console.log('选中的标签IDs:', selectedTagIds); .join(',')
console.log('选中的标签名称:', selectedTagNames); const selectedTagNames = this.selectedTag
.map((tag) => tag.name)
.join(',')
console.log('选中的标签IDs:', selectedTagIds)
console.log('选中的标签名称:', selectedTagNames)
if (this.fileList.length === 0) { if (this.fileList.length === 0) {
this.$message.warning('请上传图片') this.$message.warning('请上传图片')
return return
} }
// 初始化 selectedImages // 初始化 selectedImages
this.selectedImages = {}; this.selectedImages = {}
// 显示加载状态 // 显示加载状态
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: '正在上传和识别图片...', text: '正在上传和识别图片...',
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)' background: 'rgba(0, 0, 0, 0.7)',
}); })
// 保存原始文件列表用于显示结果 // 保存原始文件列表用于显示结果
const originalFileList = [...this.fileList]; const originalFileList = [...this.fileList]
// 清空上传预览区域 // 清空上传预览区域
this.fileList = []; this.fileList = []
// 创建 FormData 对象 // 创建 FormData 对象
const formData = new FormData(); const formData = new FormData()
// 添加文件 // 添加文件
originalFileList.forEach(file => { originalFileList.forEach((file) => {
formData.append('files', file.raw); // 使用 raw 字段获取原始文件对象 formData.append('files', file.raw) // 使用 raw 字段获取原始文件对象
}); })
// formData.append('param', selectedTagNames); // formData.append('param', selectedTagNames);
// formData.append('id', this.addId); // formData.append('id', this.addId);
// 修改参数处理方式，与之前的params 保持一致 // 修改参数处理方式，与之前的params 保持一致
const params = { const params = {
param: selectedTagNames, param: selectedTagNames,
id: this.addId remark: '备注996',
}; id: this.addId,
formData.append('params', JSON.stringify(params)); }
formData.append('params', JSON.stringify(params))
//调用上传的接口，传递文件列表和标签IDs，name //调用上传的接口，传递文件列表和标签IDs，name
addImageInfoAPI(formData) addImageInfoAPI(formData)
.then(res => { .then((res) => {
loading.close(); loading.close()
if (res.code === 200 && res.data && Array.isArray(res.data)) { if (
res.code === 200 &&
res.data &&
Array.isArray(res.data)
) {
// 处理成功响应 - 获取全部记录 // 处理成功响应 - 获取全部记录
const records = res.data; const records = res.data
this.addId = records[0]?.operaId || ''; this.addId = records[0]?.operaId || ''
console.log('this.addId:', this.addId) console.log('this.addId:', this.addId)
// 按下标分组存储数据 // 按下标分组存储数据
this.groupedImageResults = records.map((record, index) => ({ this.groupedImageResults = records.map(
(record, index) => ({
index: index, // 下标 index: index, // 下标
operaName: record.operaName, operaName: record.operaName,
images: record.fileVoList.map(item => ({ images: record.fileVoList.map((item) => ({
url: item.bjUrl || "未找到图片地址", url: item.bjUrl || '未找到图片地址',
id: item.imageId || item.id, id: item.imageId || item.id,
name: item.originalName, name: item.originalName,
contentImage: item.contentImage, contentImage: item.contentImage,
fileSize: item.fileSize, fileSize: item.fileSize,
operId: record.id, operId: record.id,
})), })),
totalCount: record.imageNum || originalFileList.length, totalCount:
record.imageNum || originalFileList.length,
recognizedCount: record.bzNum || 0, recognizedCount: record.bzNum || 0,
unrecognizedCount: record.wbzNum || 0, unrecognizedCount: record.wbzNum || 0,
isSure: record.isSure, isSure: record.isSure,
operId: record.operaId, operId: record.operaId,
id: record.id, id: record.id,
})); }),
)
// 初始化选中状态 - 根据 isActive 字段 // 初始化选中状态 - 根据 isActive 字段
this.initializeSelectedImages(records); this.initializeSelectedImages(records)
// this.isSure = record.isSure; // this.isSure = record.isSure;
// 刷新左侧标签文本并选中对应标签 // 刷新左侧标签文本并选中对应标签
if (records.length > 0) { if (records.length > 0) {
this.refreshSidebarLabel(records[0].operaName, records[0].id); this.refreshSidebarLabel(
records[0].operaName,
records[0].id,
)
} }
this.showImageResults = true; this.showImageResults = true
this.showNewAnnotation = false; this.showNewAnnotation = false
this.showNewAnnotationAdd = true; this.showNewAnnotationAdd = true
this.$message.success('上传和识别完成'); this.$message.success('上传和识别完成')
} else { } else {
this.$message.error('上传失败'); this.$message.error('上传失败')
} }
}) })
.catch(error => { .catch((error) => {
loading.close(); loading.close()
console.error('上传异常:', error); console.error('上传异常:', error)
this.$message.error('上传过程中出现错误'); this.$message.error('上传过程中出现错误')
}); })
}, },
refreshSidebarLabel(operaName, recordId) { refreshSidebarLabel(operaName, recordId) {
this.getImageListAPI() this.getImageListAPI()
setTimeout(() => { setTimeout(() => {
const index = this.labelList.findIndex(item => item.id === recordId); const index = this.labelList.findIndex(
(item) => item.id === recordId,
)
if (index !== -1) { if (index !== -1) {
this.labelList[index].name = operaName; this.labelList[index].name = operaName
} }
// 选中对应的标签 // 选中对应的标签
this.selectedItem = recordId; this.selectedItem = recordId
}, 500); // 延迟确保数据加载完成 }, 500) // 延迟确保数据加载完成
}, },
selectItem(item) { selectItem(item) {
this.selectedItem = item.id; this.selectedItem = item.id
// 这里可以添加加载历史记录数据的逻辑 // 这里可以添加加载历史记录数据的逻辑
this.loadRecordData(item.id); this.loadRecordData(item.id)
}, },
loadRecordData(recordId) { loadRecordData(recordId) {
// 模拟加载历史记录数据 // 模拟加载历史记录数据
const record = this.labelList.find(r => r.id === recordId); const record = this.labelList.find((r) => r.id === recordId)
if (record) { if (record) {
this.showNewAnnotation = false; this.showNewAnnotation = false
this.showNewAnnotationAdd = true; this.showNewAnnotationAdd = true
// 这里可以添加实际的数据加载逻辑 // 这里可以添加实际的数据加载逻辑
this.fileList = []; // 清空文件列表 this.fileList = [] // 清空文件列表
this.selectedTag = []; // 清空标签选择 this.selectedTag = [] // 清空标签选择
this.showImageResults = true; // 显示识别结果 this.showImageResults = true // 显示识别结果
this.selectedImages = {}; // 初始化选中状态 this.selectedImages = {} // 初始化选中状态
// 生成数据 // 生成数据
this.generateTestData(recordId); this.generateTestData(recordId)
} }
}, },
toggleTag(tag) { toggleTag(tag) {
const index = this.selectedTag.findIndex(item => item.id === tag.id) const index = this.selectedTag.findIndex(
(item) => item.id === tag.id,
)
if (index === -1) { if (index === -1) {
this.selectedTag.push(tag) this.selectedTag.push(tag)
} else { } else {
@ -315,7 +340,7 @@ export default {
} }
if (!this.showAllTags) { if (!this.showAllTags) {
this.updateVisibleTagsInCollapsedState(); this.updateVisibleTagsInCollapsedState()
} }
}, },
@ -327,8 +352,13 @@ export default {
if (selectedTags.length >= 3) { if (selectedTags.length >= 3) {
this.visibleTags = selectedTags.slice(0, 3) this.visibleTags = selectedTags.slice(0, 3)
} else { } else {
const tags = defaultTags.filter(tag => const tags = defaultTags
!selectedTags.some(selected => selected.id === tag.id)) .filter(
(tag) =>
!selectedTags.some(
(selected) => selected.id === tag.id,
),
)
.slice(0, 3 - selectedTags.length) .slice(0, 3 - selectedTags.length)
this.visibleTags = [...selectedTags, ...tags] this.visibleTags = [...selectedTags, ...tags]
} }
@ -348,8 +378,11 @@ export default {
if (selectedTags.length > 0) { if (selectedTags.length > 0) {
if (selectedTags.length <= 3) { if (selectedTags.length <= 3) {
const allTags = [...selectedTags, ...defaultTags] const allTags = [...selectedTags, ...defaultTags]
const uniqueTags = allTags.filter((tag, index, self) => const uniqueTags = allTags.filter(
index === self.findIndex(t => t.id === tag.id)) (tag, index, self) =>
index ===
self.findIndex((t) => t.id === tag.id),
)
this.visibleTags = uniqueTags.slice(0, 3) this.visibleTags = uniqueTags.slice(0, 3)
} else { } else {
this.visibleTags = selectedTags this.visibleTags = selectedTags
@ -362,104 +395,128 @@ export default {
handleFileChange(file, fileList) { handleFileChange(file, fileList) {
if (file.raw) { if (file.raw) {
const reader = new FileReader(); const reader = new FileReader()
reader.onload = (e) => { reader.onload = (e) => {
file.url = e.target.result; file.url = e.target.result
}; }
reader.readAsDataURL(file.raw); reader.readAsDataURL(file.raw)
} }
// 延迟设置fileList，确保file.url已正确设置 // 延迟设置fileList，确保file.url已正确设置
setTimeout(() => { setTimeout(() => {
this.fileList = fileList; this.fileList = fileList
}, 100); }, 100)
}, },
removeImage(index) { removeImage(index) {
this.fileList.splice(index, 1); this.fileList.splice(index, 1)
this.$message.success('已删除文件'); this.$message.success('已删除文件')
}, },
// 处理手图标点击事件 // 处理手图标点击事件
// 处理手图标点击事件 // 处理手图标点击事件
handleHandClick(result, index) { handleHandClick(result, index) {
// 判断是分组模式还是普通模式 // 判断是分组模式还是普通模式
if (typeof result === 'object' && result.hasOwnProperty('groupIndex') && result.hasOwnProperty('imageIndex')) { if (
typeof result === 'object' &&
result.hasOwnProperty('groupIndex') &&
result.hasOwnProperty('imageIndex')
) {
// 分组模式 // 分组模式
const { groupIndex, imageIndex, key } = result; const { groupIndex, imageIndex, key } = result
console.log("点击了分组图片:", groupIndex, imageIndex); console.log('点击了分组图片:', groupIndex, imageIndex)
// 检查是否已有其他未确认分组的选中项 // 检查是否已有其他未确认分组的选中项
const hasOtherUnconfirmedGroupSelection = Object.keys(this.selectedImages).some(k => { const hasOtherUnconfirmedGroupSelection = Object.keys(
this.selectedImages,
).some((k) => {
if (k.includes('-')) { if (k.includes('-')) {
const [otherGroupIndex, otherImageIndex] = k.split('-').map(Number); const [otherGroupIndex, otherImageIndex] = k
.split('-')
.map(Number)
// 获取其他分组的信息 // 获取其他分组的信息
const otherGroup = this.groupedImageResults[otherGroupIndex]; const otherGroup =
this.groupedImageResults[otherGroupIndex]
// 只有当其他分组未确认且与当前分组不同时，才限制选择 // 只有当其他分组未确认且与当前分组不同时，才限制选择
if (otherGroup && otherGroup.isSure !== '1' && otherGroupIndex !== groupIndex && this.selectedImages[k]) { if (
return true; otherGroup &&
otherGroup.isSure !== '1' &&
otherGroupIndex !== groupIndex &&
this.selectedImages[k]
) {
return true
} }
} }
return false; return false
}); })
// 如果已有其他未确认分组的选中项，提示用户 // 如果已有其他未确认分组的选中项，提示用户
if (hasOtherUnconfirmedGroupSelection) { if (hasOtherUnconfirmedGroupSelection) {
this.$message.warning('当前版本不支持跨组选择，请先取消其他组的选择'); this.$message.warning(
return; '当前版本不支持跨组选择，请先取消其他组的选择',
)
return
} }
if (this.selectedImages[key]) { if (this.selectedImages[key]) {
console.log("取消选中分组图片:", groupIndex, imageIndex); console.log('取消选中分组图片:', groupIndex, imageIndex)
this.$set(this.selectedImages, key, false); this.$set(this.selectedImages, key, false)
} else { } else {
console.log("选中分组图片:", groupIndex, imageIndex); console.log('选中分组图片:', groupIndex, imageIndex)
this.$set(this.selectedImages, key, true); this.$set(this.selectedImages, key, true)
} }
} else if (typeof result === 'object' && result.hasOwnProperty('index') && result.isSingle) { } else if (
typeof result === 'object' &&
result.hasOwnProperty('index') &&
result.isSingle
) {
// 普通模式 // 普通模式
const { index } = result; const { index } = result
console.log("点击了图片:", index); console.log('点击了图片:', index)
if (this.selectedImages[index]) { if (this.selectedImages[index]) {
console.log("取消选中:", index); console.log('取消选中:', index)
this.$set(this.selectedImages, index, false); this.$set(this.selectedImages, index, false)
} else { } else {
console.log("选中:", index); console.log('选中:', index)
this.$set(this.selectedImages, index, true); this.$set(this.selectedImages, index, true)
} }
} else { } else {
// 兼容旧的处理方式 // 兼容旧的处理方式
console.log(result); console.log(result)
console.log("点击了图片:", index); console.log('点击了图片:', index)
if (this.selectedImages[index]) { if (this.selectedImages[index]) {
console.log("取消选中:", index); console.log('取消选中:', index)
this.$set(this.selectedImages, index, false); this.$set(this.selectedImages, index, false)
} else { } else {
console.log("选中:", index); console.log('选中:', index)
this.$set(this.selectedImages, index, true); this.$set(this.selectedImages, index, true)
} }
} }
}, },
async generateTestData(recordId) { async generateTestData(recordId) {
try { try {
const res = await getImageListDetailsAPI({id: recordId, operaType: 1}) const res = await getImageListDetailsAPI({
id: recordId,
operaType: 1,
})
if (res.code === 200 && res.data && Array.isArray(res.data)) { if (res.code === 200 && res.data && Array.isArray(res.data)) {
this.addId = res.data[0].operaId; this.addId = res.data[0].operaId
console.log('addId:', this.addId); console.log('addId:', this.addId)
// 按下标分组存储数据 // 按下标分组存储数据
this.groupedImageResults = res.data.map((record, index) => ({ this.groupedImageResults = res.data.map(
(record, index) => ({
index: index, // 下标 index: index, // 下标
operaName: record.operaName, operaName: record.operaName,
images: record.fileVoList.map(item => ({ images: record.fileVoList.map((item) => ({
url: item.bjUrl || item.url, url: item.bjUrl || item.url,
id: item.imageId || item.id, id: item.imageId || item.id,
name: item.originalName, name: item.originalName,
contentImage: item.contentImage, contentImage: item.contentImage,
fileSize: item.fileSize, fileSize: item.fileSize,
operId: record.id operId: record.id,
})), })),
totalCount: record.imageNum || 0, totalCount: record.imageNum || 0,
recognizedCount: record.bzNum || 0, recognizedCount: record.bzNum || 0,
@ -467,12 +524,13 @@ export default {
isSure: record.isSure, isSure: record.isSure,
operId: record.operaId, operId: record.operaId,
id: record.id, id: record.id,
})); }),
)
// 初始化选中状态 - 根据 isActive 字段 // 初始化选中状态 - 根据 isActive 字段
this.initializeSelectedImages(res.data); this.initializeSelectedImages(res.data)
// 设置第一条记录的状态用于界面显示 // 设置第一条记录的状态用于界面显示
this.isSure = res.data[0]?.isSure || ''; this.isSure = res.data[0]?.isSure || ''
} }
} catch (error) { } catch (error) {
console.error('获取列表异常:', error) console.error('获取列表异常:', error)
@ -481,7 +539,7 @@ export default {
// 获取选中图片的ID和operId // 获取选中图片的ID和operId
getSelectedImageInfo() { getSelectedImageInfo() {
const selectedImageInfo = []; const selectedImageInfo = []
// 遍历选中的图片 // 遍历选中的图片
for (let key in this.selectedImages) { for (let key in this.selectedImages) {
@ -489,52 +547,54 @@ export default {
// 判断是分组模式还是普通模式 // 判断是分组模式还是普通模式
if (key.includes('-')) { if (key.includes('-')) {
// 分组模式: key格式为 "groupIndex-imageIndex" // 分组模式: key格式为 "groupIndex-imageIndex"
const [groupIndex, imageIndex] = key.split('-').map(Number); const [groupIndex, imageIndex] = key
const group = this.groupedImageResults[groupIndex]; .split('-')
.map(Number)
const group = this.groupedImageResults[groupIndex]
if (group && group.images[imageIndex]) { if (group && group.images[imageIndex]) {
selectedImageInfo.push({ selectedImageInfo.push({
imageId: group.images[imageIndex].id, imageId: group.images[imageIndex].id,
operId: group.operId, operId: group.operId,
imageName: group.images[imageIndex].name imageName: group.images[imageIndex].name,
}); })
} }
} else { } else {
// 普通模式: key是数字索引 // 普通模式: key是数字索引
const index = parseInt(key); const index = parseInt(key)
if (this.imageResults[index]) { if (this.imageResults[index]) {
selectedImageInfo.push({ selectedImageInfo.push({
imageId: this.imageResults[index].id, imageId: this.imageResults[index].id,
operId: this.imageResults[index].operId, operId: this.imageResults[index].operId,
imageName: this.imageResults[index].name imageName: this.imageResults[index].name,
}); })
} }
} }
} }
} }
return selectedImageInfo; return selectedImageInfo
}, },
confirmResults(id) { confirmResults(id) {
console.log('确认结果', id) console.log('确认结果', id)
const selectedInfo = this.getSelectedImageInfo(); const selectedInfo = this.getSelectedImageInfo()
if (selectedInfo.length === 0) { if (selectedInfo.length === 0) {
// this.$message.warning('请至少选择一张图片'); // this.$message.warning('请至少选择一张图片');
// return; // return;
this.handleConfirm(this.addId,null,id ); this.handleConfirm(this.addId, null, id)
} else { } else {
// 获取图片ID数组 // 获取图片ID数组
const imageIds = selectedInfo.map(item => item.imageId); const imageIds = selectedInfo.map((item) => item.imageId)
// 获取operId（假设所有选中图片属于同一组，使用第一个） // 获取operId（假设所有选中图片属于同一组，使用第一个）
const operId = selectedInfo[0].operId; const operId = selectedInfo[0].operId
console.log('选中的图片IDs:', imageIds); console.log('选中的图片IDs:', imageIds)
console.log('操作ID:', operId); console.log('操作ID:', operId)
// 调用确认接口 // 调用确认接口
this.handleConfirm(operId, imageIds,id); this.handleConfirm(operId, imageIds, id)
} }
}, },
@ -544,48 +604,45 @@ export default {
const res = await updateImageSureAPI({ const res = await updateImageSureAPI({
operaId: operId, operaId: operId,
imageId: imageIds, imageId: imageIds,
id:id id: id,
}); })
if (res.code === 200) { if (res.code === 200) {
this.$message.success('确认成功'); this.$message.success('确认成功')
// 使用 nextTick 确保 DOM 更新后再延迟 // 使用 nextTick 确保 DOM 更新后再延迟
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(async () => { setTimeout(async () => {
await this.generateTestData(this.addId); await this.generateTestData(this.addId)
}, 8000); // 延迟0.8秒 }, 8000) // 延迟0.8秒
}); })
} else { } else {
this.$message.error('确认失败'); this.$message.error('确认失败')
} }
} catch (error) { } catch (error) {
console.error('确认异常:', error); console.error('确认异常:', error)
this.$message.error('确认过程中出现错误'); this.$message.error('确认过程中出现错误')
} }
}, },
toggleSidebar() { toggleSidebar() {
this.isSidebarVisible = !this.isSidebarVisible; this.isSidebarVisible = !this.isSidebarVisible
}, },
initializeSelectedImages(records) { initializeSelectedImages(records) {
// 清空当前选中状态 // 清空当前选中状态
this.selectedImages = {}; this.selectedImages = {}
// 遍历所有分组和图片 // 遍历所有分组和图片
records.forEach((record, groupIndex) => { records.forEach((record, groupIndex) => {
if (record.fileVoList && Array.isArray(record.fileVoList)) { if (record.fileVoList && Array.isArray(record.fileVoList)) {
record.fileVoList.forEach((fileItem, imageIndex) => { record.fileVoList.forEach((fileItem, imageIndex) => {
// 如果 isActive 为 "1"，则默认选中 // 如果 isActive 为 "1"，则默认选中
if (fileItem.isActive === "1") { if (fileItem.isActive === '1') {
const key = `${groupIndex}-${imageIndex}`; const key = `${groupIndex}-${imageIndex}`
this.$set(this.selectedImages, key, true); this.$set(this.selectedImages, key, true)
} }
}); })
} }
}); })
}, },
}, },
} }
</script> </script>
@ -596,7 +653,8 @@ export default {
overflow: hidden; overflow: hidden;
height: calc(100vh - 84px); height: calc(100vh - 84px);
width: 100%; width: 100%;
background: url('../../../assets/images/imageCaptioning/login-bg-background.png') no-repeat center center; background: url('../../../assets/images/imageCaptioning/login-bg-background.png')
no-repeat center center;
background-size: 100% 100%; background-size: 100% 100%;
} }