357 lines
9.6 KiB
Vue
357 lines
9.6 KiB
Vue
<template>
|
|
<div class="image-results-container">
|
|
<!-- 按下标分组显示 -->
|
|
<template v-if="groupedImageResults && groupedImageResults.length > 0">
|
|
<div v-for="(group, groupIndex) in groupedImageResults" :key="group.index" class="group-section">
|
|
<!-- 每组的上传信息提示 -->
|
|
<div class="upload-info" v-if="isEvaluate == '0'">
|
|
<img src="@/assets/images/imageCaptioning/photography.png" alt="" class="icon-photography">
|
|
<span>
|
|
第{{ group.index + 1 }}组 - {{ group.operaName }}:
|
|
上传{{ group.totalCount }}张图片，可识别标注{{ group.recognizedCount }}张，
|
|
{{ group.unrecognizedCount }}张无法识别标注。已识别标注图片如下，请确认。
|
|
</span>
|
|
</div>
|
|
|
|
<!-- 每组的图片展示 -->
|
|
<div class="image-results-grid">
|
|
<div
|
|
v-for="(result, imageIndex) in group.images"
|
|
:key="imageIndex"
|
|
:class="isEvaluate == '1' ? 'image-item-evaluate' : 'image-item'"
|
|
>
|
|
|
|
<ImagePreview
|
|
:class="isEvaluate == '1' ? 'result-image-evaluate' : 'result-image'"
|
|
:src="result.url"
|
|
/>
|
|
<!-- 右上角的hand图标 -->
|
|
<img
|
|
v-if="isGroupImageSelected(groupIndex, imageIndex) && isEvaluate == '0'"
|
|
src="@/assets/images/imageCaptioning/hand-yellow.png"
|
|
alt="selected"
|
|
class="icon-hand"
|
|
@click="handleGroupImageClick(groupIndex, imageIndex, group.isSure)"
|
|
>
|
|
<img
|
|
v-else-if="!isGroupImageSelected(groupIndex, imageIndex) && isEvaluate == '0'"
|
|
src="@/assets/images/imageCaptioning/hand.png"
|
|
alt="hand"
|
|
class="icon-hand"
|
|
@click="handleGroupImageClick(groupIndex, imageIndex, group.isSure)"
|
|
>
|
|
|
|
<div class="card-content" v-if="isEvaluate == '1'">
|
|
<div class="card-footer">
|
|
<div class="person-info">
|
|
<span class="name">综合得分:{{ overallScore }}</span>
|
|
<span class="name">{{ dictValue }}</span>
|
|
<span class="date">{{ contentImage }}</span>
|
|
</div>
|
|
<div class="tags">
|
|
<div class="tag-row">
|
|
<span class="tag-item" style="padding-left: 16px;">清晰度: {{ clarity }}分</span>
|
|
<span class="tag-item" style="padding-left: 16px;">干净度: {{ cleanliness }}分</span>
|
|
<span class="tag-item">压缩痕迹: {{ compressMarks }}分</span>
|
|
</div>
|
|
<div class="tag-row">
|
|
<span class="tag-item">明暗均衡: {{ balance }}分</span>
|
|
<span class="tag-item">整体观感: {{ impression }}分</span>
|
|
<span class="tag-item">细节体验: {{ detail }}分</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 每组的操作按钮 -->
|
|
<div class="action-buttons" v-if="isEvaluate == '0'">
|
|
<el-button
|
|
type="primary"
|
|
@click="confirmGroup(groupIndex, group.id)"
|
|
:disabled="group.isSure === '1'"
|
|
>
|
|
{{ group.isSure === '1' ? '已确认' : '确认' }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 保持原有的单一展示方式 -->
|
|
<template v-else>
|
|
<!-- 上传信息提示 -->
|
|
<div class="upload-info" v-if ="isEvaluate == '0'">
|
|
<img src="@/assets/images/imageCaptioning/photography.png" alt="" class="icon-photography">
|
|
<span>{{ uploadInfo }}</span>
|
|
</div>
|
|
|
|
<!-- 图片识别结果展示 -->
|
|
<div class="image-results-grid">
|
|
<div
|
|
v-for="(result, index) in imageResults"
|
|
:key="index"
|
|
:class="isEvaluate == '1' ? 'image-item-evaluate' : 'image-item'"
|
|
>
|
|
|
|
<ImagePreview
|
|
:class="isEvaluate == '1' ? 'result-image-evaluate' : 'result-image'"
|
|
:src="result.url"
|
|
/>
|
|
|
|
<!-- 右上角的hand图标 -->
|
|
<img
|
|
v-if="selectedImages[index] && isEvaluate == '0'"
|
|
src="@/assets/images/imageCaptioning/hand-yellow.png"
|
|
alt="selected"
|
|
class="icon-hand"
|
|
@click="handleImageClick(index, isSure)"
|
|
>
|
|
<img
|
|
v-else-if="!selectedImages[index] && isEvaluate == '0'"
|
|
src="@/assets/images/imageCaptioning/hand.png"
|
|
alt="hand"
|
|
class="icon-hand"
|
|
@click="handleImageClick(index, isSure)"
|
|
>
|
|
|
|
<div class="card-content" v-if="isEvaluate == '1'">
|
|
<div class="card-footer">
|
|
<div class="person-info">
|
|
<span class="name">综合得分:{{ overallScore }}</span>
|
|
<span class="name">{{ dictValue }}</span>
|
|
<span class="date">{{ contentImage }}</span>
|
|
</div>
|
|
<div class="tags">
|
|
<div class="tag-row">
|
|
<span class="tag-item" style="padding-left: 16px;">清晰度: {{ clarity }}分</span>
|
|
<span class="tag-item" style="padding-left: 16px;">干净度: {{ cleanliness }}分</span>
|
|
<span class="tag-item">压缩痕迹: {{ compressMarks }}分</span>
|
|
</div>
|
|
<div class="tag-row">
|
|
<span class="tag-item">明暗均衡: {{ balance }}分</span>
|
|
<span class="tag-item">整体观感: {{ impression }}分</span>
|
|
<span class="tag-item">细节体验: {{ detail }}分</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="action-buttons" v-if="isEvaluate == '0'">
|
|
<el-button type="primary" @click="$emit('confirm-results')" :disabled="isSure === '1'">
|
|
{{ isSure === '1' ? '已确认' : '确认' }}
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ImageResults",
|
|
props: {
|
|
uploadInfo: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
imageResults: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
groupedImageResults: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
selectedImages: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
isEvaluate: {
|
|
type: String,
|
|
default: '0'
|
|
},
|
|
isSure: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
methods: {
|
|
isGroupImageSelected(groupIndex, imageIndex) {
|
|
// 根据分组索引和图片索引判断是否选中
|
|
const key = `${groupIndex}-${imageIndex}`;
|
|
return !!this.selectedImages[key];
|
|
},
|
|
|
|
handleGroupImageClick(groupIndex, imageIndex, groupIsSure) {
|
|
// 如果该组已确认，则不允许更改选择
|
|
if (groupIsSure === '1') {
|
|
this.$message.warning('该组已确认，无法更改选择');
|
|
return;
|
|
}
|
|
|
|
const key = `${groupIndex}-${imageIndex}`;
|
|
this.$emit('hand-click', {groupIndex, imageIndex, key});
|
|
},
|
|
|
|
handleImageClick(index, isSure) {
|
|
// 如果已确认，则不允许更改选择
|
|
if (isSure === '1') {
|
|
this.$message.warning('已确认，无法更改选择');
|
|
return;
|
|
}
|
|
|
|
this.$emit('hand-click', {index, isSingle: true});
|
|
},
|
|
|
|
confirmGroup(groupIndex,id) {
|
|
console.log('confirmGroup', id)
|
|
// 可以在这里处理特定组的确认逻辑
|
|
this.$emit('confirm-results', id);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.upload-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
font-size: 16px;
|
|
color: #54646C;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.icon-photography {
|
|
width: 47px;
|
|
height: 47px;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.image-results-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 15px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.image-item {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 260px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
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%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.result-image-evaluate {
|
|
width: 100%;
|
|
height: 260px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.icon-hand {
|
|
position: absolute;
|
|
top: 25px;
|
|
right: 25px;
|
|
width: 30px;
|
|
height: 30px;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.icon-hand:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.action-buttons {
|
|
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;
|
|
align-items: center;
|
|
}
|
|
|
|
.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>
|