增加标注
This commit is contained in:
BianLzhaoMin
parent
c7ac05a8ac
commit
53b8a63b38
|
|
@ -2,14 +2,26 @@
|
|||
<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
|
||||
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">
|
||||
<img
|
||||
src="@/assets/images/imageCaptioning/photography.png"
|
||||
alt=""
|
||||
class="icon-photography"
|
||||
/>
|
||||
<span>
|
||||
第{{ group.index + 1 }}组 - {{ group.operaName }}:
|
||||
上传{{ group.totalCount }}张图片，可识别标注{{ group.recognizedCount }}张，
|
||||
{{ group.unrecognizedCount }}张无法识别标注。已识别标注图片如下，请确认。
|
||||
上传{{ group.totalCount }}张图片，可识别标注{{
|
||||
group.recognizedCount
|
||||
}}张，
|
||||
{{
|
||||
group.unrecognizedCount
|
||||
}}张无法识别标注。已识别标注图片如下，请确认。
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -18,46 +30,96 @@
|
|||
<div
|
||||
v-for="(result, imageIndex) in group.images"
|
||||
:key="imageIndex"
|
||||
:class="isEvaluate == '1' ? 'image-item-evaluate' : 'image-item'"
|
||||
:class="
|
||||
isEvaluate == '1'
|
||||
? 'image-item-evaluate'
|
||||
: 'image-item'
|
||||
"
|
||||
>
|
||||
|
||||
<ImagePreview
|
||||
:class="isEvaluate == '1' ? 'result-image-evaluate' : 'result-image'"
|
||||
<el-image
|
||||
:class="
|
||||
isEvaluate == '1'
|
||||
? 'result-image-evaluate'
|
||||
: 'result-image'
|
||||
"
|
||||
:src="result.url"
|
||||
/>
|
||||
fit="contain"
|
||||
@click="onClickImage(result)"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<!-- 右上角的hand图标 -->
|
||||
<img
|
||||
v-if="isGroupImageSelected(groupIndex, imageIndex) && isEvaluate == '0'"
|
||||
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)"
|
||||
>
|
||||
@click="
|
||||
handleGroupImageClick(
|
||||
groupIndex,
|
||||
imageIndex,
|
||||
group.isSure,
|
||||
)
|
||||
"
|
||||
/>
|
||||
<img
|
||||
v-else-if="!isGroupImageSelected(groupIndex, imageIndex) && isEvaluate == '0'"
|
||||
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)"
|
||||
>
|
||||
@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"
|
||||
>综合得分:{{ 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>
|
||||
<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>
|
||||
<span class="tag-item"
|
||||
>明暗均衡: {{ balance }}分</span
|
||||
>
|
||||
<span class="tag-item"
|
||||
>整体观感: {{ impression }}分</span
|
||||
>
|
||||
<span class="tag-item"
|
||||
>细节体验: {{ detail }}分</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -81,8 +143,12 @@
|
|||
<!-- 保持原有的单一展示方式 -->
|
||||
<template v-else>
|
||||
<!-- 上传信息提示 -->
|
||||
<div class="upload-info" v-if ="isEvaluate == '0'">
|
||||
<img src="@/assets/images/imageCaptioning/photography.png" alt="" class="icon-photography">
|
||||
<div class="upload-info" v-if="isEvaluate == '0'">
|
||||
<img
|
||||
src="@/assets/images/imageCaptioning/photography.png"
|
||||
alt=""
|
||||
class="icon-photography"
|
||||
/>
|
||||
<span>{{ uploadInfo }}</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -91,12 +157,18 @@
|
|||
<div
|
||||
v-for="(result, index) in imageResults"
|
||||
:key="index"
|
||||
:class="isEvaluate == '1' ? 'image-item-evaluate' : 'image-item'"
|
||||
:class="
|
||||
isEvaluate == '1' ? 'image-item-evaluate' : 'image-item'
|
||||
"
|
||||
>
|
||||
|
||||
<ImagePreview
|
||||
:class="isEvaluate == '1' ? 'result-image-evaluate' : 'result-image'"
|
||||
:class="
|
||||
isEvaluate == '1'
|
||||
? 'result-image-evaluate'
|
||||
: 'result-image'
|
||||
"
|
||||
:src="result.url"
|
||||
@click.native="onClickImage(result)"
|
||||
/>
|
||||
|
||||
<!-- 右上角的hand图标 -->
|
||||
|
|
@ -106,32 +178,50 @@
|
|||
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"
|
||||
>综合得分:{{ 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>
|
||||
<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>
|
||||
<span class="tag-item"
|
||||
>明暗均衡: {{ balance }}分</span
|
||||
>
|
||||
<span class="tag-item"
|
||||
>整体观感: {{ impression }}分</span
|
||||
>
|
||||
<span class="tag-item"
|
||||
>细节体验: {{ detail }}分</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -141,87 +231,433 @@
|
|||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons" v-if="isEvaluate == '0'">
|
||||
<el-button type="primary" @click="$emit('confirm-results')" :disabled="isSure === '1'">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="$emit('confirm-results')"
|
||||
:disabled="isSure === '1'"
|
||||
>
|
||||
{{ isSure === '1' ? '已确认' : '确认' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 图片显示弹框 -->
|
||||
<el-dialog
|
||||
width="70%"
|
||||
:visible.sync="imageDialogVisible"
|
||||
:before-close="handleCloseImageDialog"
|
||||
>
|
||||
<template #title>
|
||||
<span>图片标注</span>
|
||||
</template>
|
||||
<div v-if="currentImage" class="annotation-dialog">
|
||||
<div class="annotation-preview">
|
||||
<div
|
||||
v-if="isReAnnotating"
|
||||
class="annotation-canvas-wrapper"
|
||||
:style="{
|
||||
width: canvasWidth + 'px',
|
||||
height: canvasHeight + 'px',
|
||||
}"
|
||||
>
|
||||
<canvas ref="imageCanvas" class="image-canvas"></canvas>
|
||||
<canvas
|
||||
ref="drawCanvas"
|
||||
class="draw-canvas"
|
||||
@mousedown="handleMouseDown"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseup="handleMouseUp"
|
||||
@mouseleave="handleMouseLeave"
|
||||
></canvas>
|
||||
</div>
|
||||
<img
|
||||
v-else
|
||||
:src="currentImage.url"
|
||||
alt="preview"
|
||||
class="annotation-preview-image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="isReAnnotating" class="annotation-type">
|
||||
<span class="label">标注类型：</span>
|
||||
<el-select
|
||||
v-model="annotationType"
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
class="annotation-type-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in annotationTypeOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="annotation-info">
|
||||
<div class="annotation-meta">
|
||||
<p v-if="isReAnnotating">
|
||||
图片尺寸：{{ originalSize.width }} x
|
||||
{{ originalSize.height }}
|
||||
</p>
|
||||
<p v-if="annotationCoords">
|
||||
左上：({{ annotationCoords.x1 }},
|
||||
{{ annotationCoords.y1 }}) ，右下：({{
|
||||
annotationCoords.x2
|
||||
}}, {{ annotationCoords.y2 }})
|
||||
</p>
|
||||
<!-- <p v-else
|
||||
>请{{
|
||||
isReAnnotating
|
||||
? '拖拽绘制标注框'
|
||||
: '点击重新标注'
|
||||
}}</p
|
||||
> -->
|
||||
</div>
|
||||
<div class="annotation-buttons">
|
||||
<el-button
|
||||
v-if="!isReAnnotating"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="startReAnnotation"
|
||||
>
|
||||
重新标注
|
||||
</el-button>
|
||||
<template v-else>
|
||||
<el-button size="small" @click="cancelReAnnotation">
|
||||
取消标注
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:disabled="!annotationCoords || !annotationType"
|
||||
@click="emitAnnotation"
|
||||
>
|
||||
提交
|
||||
</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="annotation-empty">请先选择图片</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ImageResults",
|
||||
name: 'ImageResults',
|
||||
props: {
|
||||
uploadInfo: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: '',
|
||||
},
|
||||
imageResults: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
groupedImageResults: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
selectedImages: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
default: () => ({}),
|
||||
},
|
||||
isEvaluate: {
|
||||
type: String,
|
||||
default: '0'
|
||||
default: '0',
|
||||
},
|
||||
isSure: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
imageDialogVisible: false,
|
||||
currentImage: null,
|
||||
canvasWidth: 720,
|
||||
canvasHeight: 480,
|
||||
isReAnnotating: false,
|
||||
originalSize: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
},
|
||||
scaleInfo: {
|
||||
scale: 1,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
},
|
||||
isDrawing: false,
|
||||
startPoint: null,
|
||||
currentRect: null,
|
||||
annotationCoords: null,
|
||||
annotationType: '',
|
||||
annotationTypeOptions: [
|
||||
{ label: '人物', value: 'person' },
|
||||
{ label: '物体', value: 'object' },
|
||||
{ label: '场景', value: 'scene' },
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isGroupImageSelected(groupIndex, imageIndex) {
|
||||
// 根据分组索引和图片索引判断是否选中
|
||||
const key = `${groupIndex}-${imageIndex}`;
|
||||
return !!this.selectedImages[key];
|
||||
const key = `${groupIndex}-${imageIndex}`
|
||||
return !!this.selectedImages[key]
|
||||
},
|
||||
|
||||
handleGroupImageClick(groupIndex, imageIndex, groupIsSure) {
|
||||
// 如果该组已确认，则不允许更改选择
|
||||
if (groupIsSure === '1') {
|
||||
this.$message.warning('该组已确认，无法更改选择');
|
||||
return;
|
||||
this.$message.warning('该组已确认，无法更改选择')
|
||||
return
|
||||
}
|
||||
|
||||
const key = `${groupIndex}-${imageIndex}`;
|
||||
this.$emit('hand-click', {groupIndex, imageIndex, key});
|
||||
const key = `${groupIndex}-${imageIndex}`
|
||||
this.$emit('hand-click', { groupIndex, imageIndex, key })
|
||||
},
|
||||
|
||||
handleImageClick(index, isSure) {
|
||||
// 如果已确认，则不允许更改选择
|
||||
if (isSure === '1') {
|
||||
this.$message.warning('已确认，无法更改选择');
|
||||
return;
|
||||
this.$message.warning('已确认，无法更改选择')
|
||||
return
|
||||
}
|
||||
|
||||
this.$emit('hand-click', {index, isSingle: true});
|
||||
this.$emit('hand-click', { index, isSingle: true })
|
||||
},
|
||||
|
||||
confirmGroup(groupIndex,id) {
|
||||
confirmGroup(groupIndex, id) {
|
||||
console.log('confirmGroup', id)
|
||||
// 可以在这里处理特定组的确认逻辑
|
||||
this.$emit('confirm-results', id);
|
||||
this.$emit('confirm-results', id)
|
||||
},
|
||||
|
||||
// 点击图片显示弹框
|
||||
onClickImage(image) {
|
||||
if (!image || !image.url) {
|
||||
return
|
||||
}
|
||||
this.currentImage = image
|
||||
this.imageDialogVisible = true
|
||||
this.annotationCoords = null
|
||||
this.annotationType = ''
|
||||
this.isReAnnotating = false
|
||||
this.$nextTick(() => {
|
||||
this.renderBaseImage()
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭图片显示弹框
|
||||
handleCloseImageDialog() {
|
||||
this.imageDialogVisible = false
|
||||
this.resetAnnotation()
|
||||
},
|
||||
|
||||
startReAnnotation() {
|
||||
this.isReAnnotating = true
|
||||
this.annotationCoords = null
|
||||
this.annotationType = ''
|
||||
this.$nextTick(() => {
|
||||
this.renderBaseImage()
|
||||
})
|
||||
},
|
||||
|
||||
cancelReAnnotation() {
|
||||
this.isReAnnotating = false
|
||||
this.clearDrawing()
|
||||
this.annotationCoords = null
|
||||
this.annotationType = ''
|
||||
},
|
||||
|
||||
renderBaseImage() {
|
||||
const imageCanvas = this.$refs.imageCanvas
|
||||
const drawCanvas = this.$refs.drawCanvas
|
||||
if (
|
||||
!this.isReAnnotating ||
|
||||
!imageCanvas ||
|
||||
!drawCanvas ||
|
||||
!this.currentImage
|
||||
) {
|
||||
return
|
||||
}
|
||||
imageCanvas.width = this.canvasWidth
|
||||
imageCanvas.height = this.canvasHeight
|
||||
drawCanvas.width = this.canvasWidth
|
||||
drawCanvas.height = this.canvasHeight
|
||||
|
||||
const ctx = imageCanvas.getContext('2d')
|
||||
ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||||
|
||||
const img = new Image()
|
||||
img.crossOrigin = 'Anonymous'
|
||||
img.onload = () => {
|
||||
const { naturalWidth, naturalHeight } = img
|
||||
this.originalSize = {
|
||||
width: naturalWidth,
|
||||
height: naturalHeight,
|
||||
}
|
||||
const scale = Math.min(
|
||||
this.canvasWidth / naturalWidth,
|
||||
this.canvasHeight / naturalHeight,
|
||||
)
|
||||
const drawWidth = naturalWidth * scale
|
||||
const drawHeight = naturalHeight * scale
|
||||
const offsetX = (this.canvasWidth - drawWidth) / 2
|
||||
const offsetY = (this.canvasHeight - drawHeight) / 2
|
||||
ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight)
|
||||
this.scaleInfo = { scale, offsetX, offsetY }
|
||||
this.clearDrawing()
|
||||
}
|
||||
img.src = this.currentImage.url
|
||||
},
|
||||
|
||||
clearDrawing() {
|
||||
const drawCanvas = this.$refs.drawCanvas
|
||||
if (!drawCanvas) return
|
||||
const drawCtx = drawCanvas.getContext('2d')
|
||||
drawCtx.clearRect(0, 0, drawCanvas.width, drawCanvas.height)
|
||||
},
|
||||
|
||||
handleMouseDown(event) {
|
||||
if (!this.currentImage) return
|
||||
const position = this.getCanvasPosition(event)
|
||||
this.isDrawing = true
|
||||
this.startPoint = position
|
||||
this.currentRect = { ...position, width: 0, height: 0 }
|
||||
},
|
||||
|
||||
handleMouseMove(event) {
|
||||
if (!this.isDrawing || !this.currentRect) return
|
||||
const position = this.getCanvasPosition(event)
|
||||
this.currentRect.width = position.x - this.startPoint.x
|
||||
this.currentRect.height = position.y - this.startPoint.y
|
||||
this.drawCurrentRect()
|
||||
},
|
||||
|
||||
handleMouseUp() {
|
||||
if (!this.isDrawing || !this.currentRect) return
|
||||
this.isDrawing = false
|
||||
this.annotationCoords = this.calculateOriginalCoords(
|
||||
this.currentRect,
|
||||
)
|
||||
},
|
||||
|
||||
handleMouseLeave() {
|
||||
if (!this.isDrawing) return
|
||||
this.isDrawing = false
|
||||
this.drawCurrentRect()
|
||||
},
|
||||
|
||||
getCanvasPosition(event) {
|
||||
const canvas = this.$refs.drawCanvas
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
const x = event.clientX - rect.left
|
||||
const y = event.clientY - rect.top
|
||||
return { x, y }
|
||||
},
|
||||
|
||||
drawCurrentRect() {
|
||||
const drawCanvas = this.$refs.drawCanvas
|
||||
if (!drawCanvas || !this.currentRect) return
|
||||
const ctx = drawCanvas.getContext('2d')
|
||||
ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height)
|
||||
ctx.strokeStyle = '#ff8800'
|
||||
ctx.lineWidth = 2
|
||||
ctx.setLineDash([6, 4])
|
||||
ctx.strokeRect(
|
||||
this.currentRect.x,
|
||||
this.currentRect.y,
|
||||
this.currentRect.width,
|
||||
this.currentRect.height,
|
||||
)
|
||||
ctx.setLineDash([])
|
||||
},
|
||||
|
||||
calculateOriginalCoords(rect) {
|
||||
const { scale, offsetX, offsetY } = this.scaleInfo
|
||||
if (!scale || !this.originalSize.width) return null
|
||||
const normalize = (value, offset) => (value - offset) / scale
|
||||
let x1 = Math.min(rect.x, rect.x + rect.width)
|
||||
let y1 = Math.min(rect.y, rect.y + rect.height)
|
||||
let x2 = Math.max(rect.x, rect.x + rect.width)
|
||||
let y2 = Math.max(rect.y, rect.y + rect.height)
|
||||
|
||||
x1 = this.clampCoordinate(
|
||||
normalize(x1, offsetX),
|
||||
0,
|
||||
this.originalSize.width,
|
||||
)
|
||||
y1 = this.clampCoordinate(
|
||||
normalize(y1, offsetY),
|
||||
0,
|
||||
this.originalSize.height,
|
||||
)
|
||||
x2 = this.clampCoordinate(
|
||||
normalize(x2, offsetX),
|
||||
0,
|
||||
this.originalSize.width,
|
||||
)
|
||||
y2 = this.clampCoordinate(
|
||||
normalize(y2, offsetY),
|
||||
0,
|
||||
this.originalSize.height,
|
||||
)
|
||||
|
||||
return {
|
||||
x1: Math.round(x1),
|
||||
y1: Math.round(y1),
|
||||
x2: Math.round(x2),
|
||||
y2: Math.round(y2),
|
||||
}
|
||||
},
|
||||
|
||||
clampCoordinate(value, min, max) {
|
||||
if (Number.isNaN(value)) return min
|
||||
return Math.max(min, Math.min(max, value))
|
||||
},
|
||||
|
||||
emitAnnotation() {
|
||||
if (
|
||||
!this.annotationCoords ||
|
||||
!this.currentImage ||
|
||||
!this.annotationType
|
||||
)
|
||||
return
|
||||
this.$emit('manual-annotation', {
|
||||
image: this.currentImage,
|
||||
coords: this.annotationCoords,
|
||||
type: this.annotationType,
|
||||
})
|
||||
this.$message.success('坐标已生成')
|
||||
},
|
||||
|
||||
resetAnnotation() {
|
||||
this.currentImage = null
|
||||
this.annotationCoords = null
|
||||
this.annotationType = ''
|
||||
this.isReAnnotating = false
|
||||
this.originalSize = { width: 0, height: 0 }
|
||||
this.scaleInfo = { scale: 1, offsetX: 0, offsetY: 0 }
|
||||
this.isDrawing = false
|
||||
this.startPoint = null
|
||||
this.currentRect = null
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.upload-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
color: #54646C;
|
||||
color: #54646c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -269,6 +705,83 @@ export default {
|
|||
object-fit: contain;
|
||||
}
|
||||
|
||||
.annotation-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.annotation-preview {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.annotation-canvas-wrapper {
|
||||
position: relative;
|
||||
border: 1px dashed #dcdfe6;
|
||||
border-radius: 8px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.image-canvas,
|
||||
.draw-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.image-canvas {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.draw-canvas {
|
||||
z-index: 2;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.annotation-preview-image {
|
||||
max-width: 100%;
|
||||
max-height: 520px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.annotation-type {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.annotation-type-select {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.annotation-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
color: #333;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.annotation-meta p {
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.annotation-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.annotation-empty {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.icon-hand {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
|
|
@ -289,7 +802,6 @@ export default {
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.card-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -335,7 +847,7 @@ export default {
|
|||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
margin:3px 0 0 0;
|
||||
margin: 3px 0 0 0;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
|
|
@ -353,4 +865,24 @@ export default {
|
|||
justify-content: flex-end;
|
||||
margin: 10px 18px 10px 18px;
|
||||
}
|
||||
|
||||
el-image {
|
||||
::v-deep .el-image__inner {
|
||||
object-fit: contain;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
::v-deep .image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,356 @@
|
|||
<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>
|
||||
Loading…
Reference in New Issue