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