图像评估的功能
This commit is contained in:
parent
7e42679767
commit
e5f9814aeb
|
|
@ -0,0 +1,49 @@
|
|||
import request from '@/utils/request'
|
||||
import request_formdata from "@/utils/request_formdata";
|
||||
|
||||
// 查询标签列表
|
||||
export function getSelectedAPI(data) {
|
||||
return request({
|
||||
url: '/image/caption/getSelected',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 查询左侧历史记录
|
||||
export function getImageListAPI(data) {
|
||||
return request({
|
||||
url: '/image/caption/getImageList',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
//查询右侧的历史记录详情
|
||||
export function getImageListDetailsAPI(data) {
|
||||
return request({
|
||||
url: '/image/caption/getImageListDetails',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
//新增标注
|
||||
export function addImageEvaluateAPI(data) {
|
||||
return request_formdata({
|
||||
url: '/image/caption/addImageEvaluate',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
//修改图片
|
||||
export function updateImageSureAPI(data) {
|
||||
return request_formdata({
|
||||
url: '/image/caption/updateImageSure',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<!-- 可滚动区域 -->
|
||||
<div class="scrollable-content">
|
||||
<ImageResults
|
||||
:is-evaluate="1"
|
||||
:upload-info="uploadInfo"
|
||||
:image-results="imageResults"
|
||||
:selected-images="selectedImages"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="image-results-container">
|
||||
<!-- 上传信息提示 -->
|
||||
<div class="upload-info">
|
||||
<div class="upload-info" v-if ="isEvaluate ==0">
|
||||
<img src="@/assets/images/imageCaptioning/photography.png" alt="" class="icon-photography">
|
||||
<span>{{ uploadInfo }}</span>
|
||||
</div>
|
||||
|
|
@ -11,12 +11,12 @@
|
|||
<div
|
||||
v-for="(result, index) in imageResults"
|
||||
:key="index"
|
||||
class="image-item"
|
||||
:class="isEvaluate == '1' ? 'image-item-evaluate' : 'image-item'"
|
||||
>
|
||||
<img
|
||||
:src="result.url"
|
||||
alt=""
|
||||
class="result-image"
|
||||
:class="isEvaluate == '1' ? 'result-image-evaluate' : 'result-image-item'"
|
||||
>
|
||||
<!-- 右上角的hand图标 -->
|
||||
<img
|
||||
|
|
@ -33,6 +33,29 @@
|
|||
class="icon-hand"
|
||||
@click="$emit('hand-click', result, index)"
|
||||
>
|
||||
|
||||
|
||||
<div class="card-content" v-if="isEvaluate == '1'">
|
||||
<div class="card-footer">
|
||||
<div class="person-info">
|
||||
<span class="name">综合得分:80</span>
|
||||
<span class="date">2025-08-12</span>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<div class="tag-row">
|
||||
<span class="tag-item" style="padding-left: 16px;">清晰度: 20分</span>
|
||||
<span class="tag-item" style="padding-left: 16px;">干净度: 10分</span>
|
||||
<span class="tag-item">压缩痕迹: 10分</span>
|
||||
</div>
|
||||
<div class="tag-row">
|
||||
<span class="tag-item">明暗均衡: 10分</span>
|
||||
<span class="tag-item">整体观感: 15分</span>
|
||||
<span class="tag-item">细节体验: 15分</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -62,7 +85,11 @@ export default {
|
|||
isSure: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
isEvaluate: {
|
||||
type: String,
|
||||
default: '0'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isSure(newValue) {
|
||||
|
|
@ -109,11 +136,25 @@ export default {
|
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.image-item-evaluate {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.result-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.result-image-evaluate {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.icon-hand {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
|
|
@ -133,4 +174,68 @@ export default {
|
|||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.card-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.person-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px 18px 0 18px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px 18px 0 18px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
margin:3px 0 0 0;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
display: table-cell;
|
||||
width: 33.33%;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 10px 18px 10px 18px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<div class="add-content">
|
||||
<!-- 标题 -->
|
||||
<div class="welcome-message">
|
||||
嗨！我是你的图像标注助理
|
||||
嗨！我是你的图像评估助理
|
||||
</div>
|
||||
|
||||
<!-- 图片上传区域 -->
|
||||
|
|
@ -32,10 +32,10 @@
|
|||
<!-- 主内容区域-历史 -->
|
||||
<div class="main-content" v-if="showNewAnnotationAdd">
|
||||
<HistoryView
|
||||
:upload-info="uploadInfo"
|
||||
:image-results="imageResults"
|
||||
:selected-images="selectedImages"
|
||||
:file-list="fileList"
|
||||
:is-sure="isSure"
|
||||
@hand-click="handleHandClick"
|
||||
@confirm-results="confirmResults"
|
||||
@file-change="handleFileChange"
|
||||
|
|
@ -47,6 +47,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getImageListAPI,
|
||||
getImageListDetailsAPI,
|
||||
addImageEvaluateAPI,
|
||||
updateImageSureAPI
|
||||
} from "@/api/imageCaptioning/imageEvaluate";
|
||||
|
||||
import Sidebar from "../image-captioning/components/Sidebar";
|
||||
import FileUploader from "../image-captioning/components/FileUploaderUn";
|
||||
import HistoryView from "../image-captioning/components/HistoryViewUn";
|
||||
|
|
@ -63,29 +70,48 @@ export default {
|
|||
showNewAnnotationAdd: false, // 控制历史界面的显示状态
|
||||
|
||||
// 导航栏数据
|
||||
labelList: [
|
||||
{id: 1, date: '2025-09-13', name: '安全帽、绝缘子...'},
|
||||
{id: 2, date: '2025-09-10', name: '安全帽'}
|
||||
],
|
||||
labelList: [],
|
||||
selectedItem: null,
|
||||
|
||||
// 文件上传相关
|
||||
fileList: [],
|
||||
showImageResults: false,
|
||||
uploadInfo: '',
|
||||
|
||||
// 图片识别结果
|
||||
imageResults: [],
|
||||
selectedImages: {}, // 用于跟踪选中的图片
|
||||
isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
|
||||
isSure:'', //小图标，确定按钮 0-未确定 1-已确定
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
//查询左侧历史记录
|
||||
this.getImageListAPI()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
async getImageListAPI() {
|
||||
try {
|
||||
const res = await getImageListAPI({operaType: 1})
|
||||
// 判断返回码和数据
|
||||
if (res.code === 200 && res.data && Array.isArray(res.data)) {
|
||||
this.labelList = res.data.map(item => ({
|
||||
id: item.id,
|
||||
date: item.operaTime,
|
||||
name: item.operaName
|
||||
}))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取列表异常:', error)
|
||||
}
|
||||
},
|
||||
|
||||
createNewLabel() {
|
||||
this.selectedItem = null;
|
||||
this.fileList = [];
|
||||
this.showImageResults = false;
|
||||
this.uploadInfo = '';
|
||||
this.imageResults = [];
|
||||
this.selectedImages = {};
|
||||
this.showNewAnnotation = true;
|
||||
|
|
@ -117,32 +143,45 @@ export default {
|
|||
// 清空上传预览区域
|
||||
this.fileList = [];
|
||||
|
||||
// 模拟网络延迟
|
||||
setTimeout(() => {
|
||||
loading.close();
|
||||
// 模拟上传和识别过程
|
||||
const recognizedCount = Math.floor(originalFileList.length * 0.7);
|
||||
const unrecognizedCount = originalFileList.length - recognizedCount;
|
||||
// 创建 FormData 对象
|
||||
const formData = new FormData();
|
||||
// 添加文件
|
||||
originalFileList.forEach(file => {
|
||||
formData.append('files', file.raw); // 使用 raw 字段获取原始文件对象
|
||||
});
|
||||
|
||||
this.uploadInfo = `上传${originalFileList.length}张图片，可识别标注${recognizedCount}张，${unrecognizedCount}张无法识别标注。已识别标注图片如下，请确认。`;
|
||||
addImageEvaluateAPI(formData)
|
||||
.then(res => {
|
||||
loading.close();
|
||||
if (res.code === 200 && res.data && Array.isArray(res.data)) {
|
||||
// 处理成功响应
|
||||
const record = res.data[0]; // 获取第一条记录
|
||||
|
||||
// 模拟识别结果（返回与上传相同数量的图片，用status字段区分成功失败）
|
||||
this.imageResults = originalFileList.map((file, index) => ({
|
||||
url: file.url,
|
||||
id: index,
|
||||
// status: 1 表示识别成功，0 表示识别失败
|
||||
status: index < recognizedCount ? 1 : 0
|
||||
}));
|
||||
// 设置图片结果
|
||||
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
|
||||
}));
|
||||
|
||||
console.log(this.imageResults);
|
||||
this.showImageResults = true;
|
||||
this.isSure = record.isSure;
|
||||
|
||||
// 切换到结果显示界面
|
||||
this.showNewAnnotation = false;
|
||||
this.showNewAnnotationAdd = true;
|
||||
|
||||
this.$message.success('上传和识别完成');
|
||||
}, 1500); // 模拟1.5秒的处理时间
|
||||
this.showImageResults = true;
|
||||
this.showNewAnnotation = false;
|
||||
this.showNewAnnotationAdd = true;
|
||||
this.$message.success('上传和识别完成');
|
||||
} else {
|
||||
this.$message.error('上传失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
loading.close();
|
||||
console.error('上传异常:', error);
|
||||
this.$message.error('上传过程中出现错误');
|
||||
});
|
||||
},
|
||||
|
||||
selectItem(item) {
|
||||
|
|
@ -163,7 +202,7 @@ export default {
|
|||
this.fileList = []; // 清空文件列表
|
||||
this.showImageResults = true; // 显示识别结果
|
||||
this.selectedImages = {}; // 初始化选中状态
|
||||
// 生成测试数据
|
||||
// 生成数据
|
||||
this.generateTestData(recordId);
|
||||
}
|
||||
},
|
||||
|
|
@ -200,32 +239,68 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
generateTestData(recordId) {
|
||||
// 模拟从后端获取的测试数据
|
||||
const testData = {
|
||||
id: recordId,
|
||||
date: '2025-09-13',
|
||||
name: '安全帽、绝缘子...',
|
||||
uploadInfo: `上传10张图片，可识别标注6张，4张无法识别标注。已识别标注图片如下，请确认。`,
|
||||
imageResults: [
|
||||
{
|
||||
url: 'https://fastly.picsum.photos/id/830/200/200.jpg?hmac=3ce7zNUn5yg_XKy7dHgIHta7t_0vghPQnAGUSGJuBZE',
|
||||
name: 'image1.jpg',
|
||||
},
|
||||
{
|
||||
url: 'https://example.com/image2.jpg',
|
||||
name: 'image1.jpg',
|
||||
},
|
||||
]
|
||||
};
|
||||
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.uploadInfo = testData.uploadInfo;
|
||||
this.imageResults = testData.imageResults;
|
||||
this.isSure = res.data[0].isSure;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取列表异常:', error)
|
||||
}
|
||||
},
|
||||
|
||||
confirmResults(){
|
||||
console.log("确定")
|
||||
const selectedItems = [];
|
||||
for (let index in this.selectedImages) {
|
||||
const idx = parseInt(index);
|
||||
if (this.selectedImages[idx]) {
|
||||
selectedItems.push(this.imageResults[idx]); // 根据 index 取出 imageResults 中对应图片
|
||||
}
|
||||
}
|
||||
if (selectedItems.length === 0) {
|
||||
this.$message.warning('请至少选择一张图片');
|
||||
return;
|
||||
}
|
||||
// 提取 operId 和 imageId
|
||||
const imageIds = selectedItems.map(item => item.id);
|
||||
const operId = selectedItems[0].operId; // 所有图片的 operId 应该一致
|
||||
// 调用确认接口
|
||||
this.handleConfirm(operId,imageIds);
|
||||
},
|
||||
|
||||
async handleConfirm(operId,imageIds) {
|
||||
try {
|
||||
// 调用后端接口
|
||||
const res = await updateImageSureAPI({
|
||||
id: operId,
|
||||
imageId:imageIds
|
||||
});
|
||||
if (res.code === 200) {
|
||||
this.$message.success('确认成功');
|
||||
// 可以在这里处理成功后的逻辑
|
||||
await this.generateTestData(operId);
|
||||
} else {
|
||||
this.$message.error('确认失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('确认异常:', error);
|
||||
this.$message.error('确认过程中出现错误');
|
||||
}
|
||||
},
|
||||
|
||||
toggleSidebar() {
|
||||
this.isSidebarVisible = !this.isSidebarVisible;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue