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-26 16:11:54 +08:00
parent 651342597b
commit 88c29b9dae
5 changed files with 487 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
src/views/imageCaptioning/image-captioning/components/HistoryViewUn.vue
View File

@ -1,109 +1,135 @@
<template> <template>
<div class="history-content"> <div class="history-content">
<!-- 可滚动区域 --> <!-- 可滚动区域 -->
<div class="scrollable-content"> <div class="scrollable-content">
<ImageResults <ImageResults
:is-evaluate="1" :is-evaluate="1"
:upload-info="uploadInfo" :upload-info="uploadInfo"
:image-results="imageResults" :image-results="imageResults"
:selected-images="selectedImages" :selected-images="selectedImages"
@hand-click="handleHandClickFromChild" @hand-click="handleHandClickFromChild"
@confirm-results="$emit('confirm-results')" @confirm-results="$emit('confirm-results')"
/> />
</div> </div>
<!-- 固定在底部的区域 --> <!-- 固定在底部的区域 -->
<div class="fixed-bottom-area"> <div class="fixed-bottom-area">
<!-- 标签选择区域 --> <!-- 标签选择区域 -->
<TagSelector <TagSelector
:tags="tags" :tags="tags"
:visible-tags="visibleTags" :visible-tags="visibleTags"
:selected-tag="selectedTag" :selected-tag="selectedTag"
@toggle-tag="$emit('toggle-tag', $event)" @toggle-tag="$emit('toggle-tag', $event)"
@toggle-all-tags="$emit('toggle-all-tags')" @toggle-all-tags="$emit('toggle-all-tags')"
/> />
<!-- 图片上传区域 --> <!-- 输入备注 -->
<FileUploader <el-input
:file-list="fileList" :rows="1"
:selected-tag="selectedTag" placeholder="请输入备注"
@file-change="(file, fileList) => $emit('file-change', file, fileList)" type="textarea"
@remove-image="(index) => $emit('remove-image', index)" v-model="remarkInfo"
@start-upload="$emit('start-upload')" />
/>
<!-- 图片上传区域 -->
<FileUploader
:file-list="fileList"
:selected-tag="selectedTag"
@file-change="
(file, fileList) => $emit('file-change', file, fileList)
"
@remove-image="(index) => $emit('remove-image', index)"
@start-upload="$emit('start-upload', remarkInfo)"
/>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import ImageResults from './ImageResultsUn.vue'; import ImageResults from './ImageResultsUn.vue'
import TagSelector from './TagSelector.vue'; import TagSelector from './TagSelector.vue'
import FileUploader from './FileUploaderUn.vue'; import FileUploader from './FileUploaderUn.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,
},
props: {
uploadInfo: {
type: String,
default: ''
}, },
imageResults: { data() {
type: Array, return {
default: () => [] remarkInfo: '',
}
}, },
selectedImages: { props: {
type: Object, uploadInfo: {
default: () => ({}) type: String,
default: '',
},
imageResults: {
type: Array,
default: () => [],
},
selectedImages: {
type: Object,
default: () => ({}),
},
tags: {
type: Array,
default: () => [],
},
visibleTags: {
type: Array,
default: () => [],
},
selectedTag: {
type: Array,
default: () => [],
},
fileList: {
type: Array,
default: () => [],
},
}, },
tags: { methods: {
type: Array, handleHandClickFromChild(result, index) {
default: () => [] this.$emit('hand-click', result, index)
},
}, },
visibleTags: {
type: Array, watch: {
default: () => [] imageResults: {
handler(newVal) {
if (newVal.length > 0) {
this.remarkInfo = newVal[0].remark
}
},
immediate: true,
},
}, },
selectedTag: {
type: Array,
default: () => []
},
fileList: {
type: Array,
default: () => []
}
},
methods: {
handleHandClickFromChild(result, index) {
this.$emit('hand-click', result, index);
}
}
} }
</script> </script>
<style scoped> <style scoped>
.history-content { .history-content {
height: 100%; height: 100%;
width: 60%; width: 60%;
margin-left: 22%; margin-left: 22%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.scrollable-content { .scrollable-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
} }
.fixed-bottom-area { .fixed-bottom-area {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
padding-top: 20px; padding-top: 20px;
} }
</style> </style>

77
src/views/imageCaptioning/image-captioning/components/ImageResults.vue
View File

@ -44,7 +44,7 @@
" "
:src="result.url" :src="result.url"
fit="contain" fit="contain"
@click="onClickImage(result)" @click="onClickImage(result, group.isSure)"
> >
<div slot="error" class="image-slot"> <div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i> <i class="el-icon-picture-outline"></i>
@ -248,7 +248,7 @@
:before-close="handleCloseImageDialog" :before-close="handleCloseImageDialog"
> >
<template #title> <template #title>
<span>图片标注</span> <span>{{ isSure == 1 ? '图片查看' : '图片标注' }}</span>
</template> </template>
<div v-if="currentImage" class="annotation-dialog"> <div v-if="currentImage" class="annotation-dialog">
<div class="annotation-preview"> <div class="annotation-preview">
@ -309,14 +309,14 @@
</div> </div>
<div class="annotation-buttons"> <div class="annotation-buttons">
<el-button <el-button
v-if="!isReAnnotating" v-if="!isReAnnotating && isSure != 1"
type="primary" type="primary"
size="small" size="small"
@click="startReAnnotation" @click="startReAnnotation"
> >
重新标注 重新标注
</el-button> </el-button>
<template v-else> <template v-if="isReAnnotating && isSure != 1">
<el-button size="small" @click="cancelReAnnotation"> <el-button size="small" @click="cancelReAnnotation">
取消标注 取消标注
</el-button> </el-button>
@ -445,6 +445,7 @@ export default {
], ],
imgSrc: '', imgSrc: '',
isSure: null,
} }
}, },
created() { created() {
@ -485,11 +486,12 @@ export default {
}, },
// 点击图片显示弹框 // 点击图片显示弹框
onClickImage(image) { onClickImage(image, isSure = null) {
console.log('image', image) console.log('image', image)
if (!image || !image.url) { if (!image || !image.url) {
return return
} }
this.isSure = isSure
this.currentImage = image this.currentImage = image
this.imgSrc = image.url this.imgSrc = image.url
this.imageDialogVisible = true this.imageDialogVisible = true
@ -506,6 +508,10 @@ export default {
}, },
startReAnnotation() { startReAnnotation() {
if (this.isSure == 1) {
this.$message.warning('该图片已确认，无法重新标注')
return
}
this.isReAnnotating = true this.isReAnnotating = true
this.annotationCoords = null this.annotationCoords = null
this.annotationType = '' this.annotationType = ''
@ -779,6 +785,28 @@ export default {
finalCanvas.height = this.originalSize.height finalCanvas.height = this.originalSize.height
const finalCtx = finalCanvas.getContext('2d') const finalCtx = finalCanvas.getContext('2d')
// 根据图片尺寸计算缩放比例，确保在不同分辨率下都能清晰显示
// 使用图片的平均尺寸作为基准，计算缩放因子
const avgSize =
(this.originalSize.width + this.originalSize.height) / 2
const baseSize = 1000 // 基准尺寸（1000px）
// 使用对数缩放，避免过大图片时缩放因子过大
// 缩放因子范围：0.8 - 3.0
const scaleFactor = Math.max(
0.8,
Math.min(3.0, Math.sqrt(avgSize / baseSize)),
)
// 根据缩放因子动态计算线条宽度和字体大小
const baseLineWidth = 1.5
const lineWidth = baseLineWidth * scaleFactor
const baseFontSize = 12
const fontSize = baseFontSize * scaleFactor
const baseMargin = 2
const margin = baseMargin * scaleFactor
const basePadding = 2
const padding = basePadding * scaleFactor
// 加载原始图片 // 加载原始图片
const img = new Image() const img = new Image()
img.crossOrigin = 'Anonymous' img.crossOrigin = 'Anonymous'
@ -795,15 +823,50 @@ export default {
// 绘制所有标注框 // 绘制所有标注框
this.annotations.forEach((annotation) => { this.annotations.forEach((annotation) => {
const { coords } = annotation const { coords, typeName } = annotation
// 绘制标注框
finalCtx.strokeStyle = '#03FB02' finalCtx.strokeStyle = '#03FB02'
finalCtx.lineWidth = 1.5 finalCtx.lineWidth = lineWidth
finalCtx.strokeRect( finalCtx.strokeRect(
coords.x1, coords.x1,
coords.y1, coords.y1,
coords.x2 - coords.x1, coords.x2 - coords.x1,
coords.y2 - coords.y1, coords.y2 - coords.y1,
) )
// 绘制类型名称标签
if (typeName) {
// 设置字体
finalCtx.font = `${fontSize}px Arial`
finalCtx.textBaseline = 'top'
// 测量文字宽度
const textMetrics =
finalCtx.measureText(typeName)
const textWidth = textMetrics.width
const textHeight = fontSize
// 标签位置（标注框左上角 + margin）
const labelX = coords.x1 + margin
const labelY = coords.y1 + margin
// 绘制背景矩形
finalCtx.fillStyle = '#01CB04'
finalCtx.fillRect(
labelX,
labelY,
textWidth + padding * 2,
textHeight + padding * 2,
)
// 绘制文字
finalCtx.fillStyle = '#ffffff'
finalCtx.fillText(
typeName,
labelX + padding,
labelY + padding,
)
}
}) })
resolve() resolve()

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

@ -265,6 +265,8 @@ export default {
isSure: record.isSure, isSure: record.isSure,
operId: record.operaId, operId: record.operaId,
id: record.id, id: record.id,
isSure: record.isSure,
remark: record.remark,
}), }),
) )
// 初始化选中状态 - 根据 isActive 字段 // 初始化选中状态 - 根据 isActive 字段
@ -528,6 +530,7 @@ export default {
operId: record.operaId, operId: record.operaId,
id: record.id, id: record.id,
remark: record.remark, remark: record.remark,
isSure: record.isSure,
}), }),
) )

553
src/views/imageCaptioning/image-evaluate-library/index.vue
View File

@ -1,48 +1,86 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" > <el-form
<el-form-item prop="date"> :model="queryParams"
<el-date-picker ref="queryForm"
v-model="queryParams.operaTime" size="small"
type="date" :inline="true"
placeholder="选择日期"
> >
</el-date-picker> <el-form-item prop="date">
</el-form-item> <el-date-picker
v-model="queryParams.operaTime"
type="date"
placeholder="选择日期"
>
</el-date-picker>
</el-form-item>
<el-form-item> <el-form-item prop="remark">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-input
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery" style="background:transparent;border-color: #B1C0CB;">重置</el-button> v-model="queryParams.remark"
<el-button icon="el-icon-download" size="mini" @click="handleExport" style="background:transparent;border-color: #B1C0CB;">下载</el-button> placeholder="请输入备注"
</el-form-item> clearable
</el-form> style="width: 240px"
/>
</el-form-item>
<div class="content-area" ref="servicesGrid"> <el-form-item>
<div <el-button
:key="item.id" type="primary"
class="services-grid" icon="el-icon-search"
v-for="item in showProMaterialsDuctList" size="mini"
> @click="handleQuery"
<!-- 图片区域 --> >搜索</el-button
<div class="card-image"> >
<ImagePreview <el-button
style="margin-top: 10px" icon="el-icon-refresh"
:height="200" size="mini"
:borderRadius="10" @click="resetQuery"
:width="itemWidth" style="background: transparent; border-color: #b1c0cb"
:src="item.bjUrl" >重置</el-button
/> >
</div> <el-button
icon="el-icon-download"
size="mini"
@click="handleExport"
style="background: transparent; border-color: #b1c0cb"
>下载</el-button
>
</el-form-item>
</el-form>
<!-- 卡片内容 --> <div class="content-area" ref="servicesGrid">
<div class="card-content"> <div
<div class="card-footer"> :key="item.id"
<div class="person-info"> class="services-grid"
<span class="name">综合得分:{{ item.overallScore }}</span> v-for="item in showProMaterialsDuctList"
<span class="name">{{ item.dictValue }}</span> >
<span class="date">{{ item.operaName }}</span> <!-- 图片区域 -->
</div> <div class="card-image">
<!-- <div class="tags"> <ImagePreview
style="margin-top: 10px"
:height="200"
:borderRadius="10"
:width="itemWidth"
:src="item.bjUrl"
/>
</div>
<!-- 卡片内容 -->
<div class="card-content">
<div class="card-footer">
<div class="person-info">
<span class="name"
>综合得分:{{ item.overallScore }}</span
>
<span class="name">{{ item.dictValue }}</span>
<span class="date">{{ item.operaName }}</span>
</div>
<div class="person-info">
<span class="name">备注:{{ item.remark }}</span>
</div>
<!-- <div class="tags">
<div class="tag-row"> <div class="tag-row">
<span class="tag-item" style="padding-left: 16px;">清晰度: {{ item.clarity }}分</span> <span class="tag-item" style="padding-left: 16px;">清晰度: {{ item.clarity }}分</span>
<span class="tag-item" style="padding-left: 16px;">干净度: {{ item.cleanliness }}分</span> <span class="tag-item" style="padding-left: 16px;">干净度: {{ item.cleanliness }}分</span>
@ -54,277 +92,290 @@
<span class="tag-item">细节体验: {{ item.detail }}分</span> <span class="tag-item">细节体验: {{ item.detail }}分</span>
</div> </div>
</div>--> </div>-->
<div style="border-top: 1px solid #CFD4D7;margin-top: 10px"></div> <div
<div class="action-buttons"> style="
<el-button border-top: 1px solid #cfd4d7;
type="danger" margin-top: 10px;
size="mini" "
@click="handleDelete(item)" ></div>
plain <div class="action-buttons">
icon="el-icon-delete" <el-button
> type="danger"
删除 size="mini"
</el-button> @click="handleDelete(item)"
plain
icon="el-icon-delete"
>
删除
</el-button>
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
:page-sizes="[8, 16, 32, 64]"
@pagination="getList"
/>
</div> </div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
:page-sizes="[8, 16, 32, 64]"
@pagination="getList"
/>
</div>
</template> </template>
<script> <script>
import {deleteFile, exportImages, getAllImagelist} from "@/api/imageCaptioning/imageLibrary"; import {
deleteFile,
exportImages,
getAllImagelist,
} from '@/api/imageCaptioning/imageLibrary'
export default { export default {
name: "imageCaptioningLibrary", name: 'imageCaptioningLibrary',
data() { data() {
return { return {
// 总条数 // 总条数
total: 0, total: 0,
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 8, pageSize: 8,
date: '', date: '',
operaType: 2, operaType: 2,
operaTime:'' operaTime: '',
}, remark: '',
// 表单参数 },
form: {}, // 表单参数
proMaterialsListAll: [], // 所有材料列表 form: {},
showProMaterialsDuctList: [], // 需要显示的材料列表 proMaterialsListAll: [], // 所有材料列表
itemWidth: 0, // 材料卡片宽度 showProMaterialsDuctList: [], // 需要显示的材料列表
} itemWidth: 0, // 材料卡片宽度
}, }
created() {
this.getList();
},
mounted() {
this.getItemWidth()
},
methods: {
// 获取产品卡片宽度
getItemWidth() {
this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 320) / 4
}, },
/** 查询角色列表 */ created() {
getList() { this.getList()
getAllImagelist(this.queryParams).then(response => {
this.proMaterialsListAll = response.rows;
this.total = response.total || 0;
console.log(this.proMaterialsListAll)
this.showProMaterialsDuctList = this.proMaterialsListAll;
})
}, },
/** 搜索按钮操作 */ mounted() {
handleQuery() { this.getItemWidth()
this.queryParams.pageNum = 1
// 格式化日期
if (this.queryParams.operaTime) {
const date = new Date(this.queryParams.operaTime)
// 使用getFullYear、getMonth、getDate获取本地日期
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
this.queryParams.operaTime = `${year}-${month}-${day}`
}
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm")
// 重置日期为null而不是空字符串
this.queryParams.operaTime = null
this.handleQuery()
}, },
/** 导出按钮操作 */ methods: {
handleExport() { // 获取产品卡片宽度
const imageIds = this.showProMaterialsDuctList.map(item => item.imageId); getItemWidth() {
exportImages({ this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 320) / 4
imageId: imageIds },
}).then(response => { /** 查询角色列表 */
// 创建下载链接 getList() {
const blob = new Blob([response]); getAllImagelist(this.queryParams).then((response) => {
const link = document.createElement('a'); this.proMaterialsListAll = response.rows
const fileName = `图片压缩包_${new Date().getTime()}.zip`; this.total = response.total || 0
link.href = URL.createObjectURL(blob); console.log(this.proMaterialsListAll)
link.download = fileName; this.showProMaterialsDuctList = this.proMaterialsListAll
link.click(); })
URL.revokeObjectURL(link.href); },
}).catch(error => { /** 搜索按钮操作 */
console.error('下载失败:', error); handleQuery() {
this.$message.error('下载失败'); this.queryParams.pageNum = 1
}); // 格式化日期
}, if (this.queryParams.operaTime) {
const date = new Date(this.queryParams.operaTime)
// 删除处理方法 // 使用getFullYear、getMonth、getDate获取本地日期
handleDelete(item) { const year = date.getFullYear()
this.$confirm('确认要删除该记录吗？', '提示', { const month = String(date.getMonth() + 1).padStart(2, '0')
confirmButtonText: '确定', const day = String(date.getDate()).padStart(2, '0')
cancelButtonText: '取消', this.queryParams.operaTime = `${year}-${month}-${day}`
type: 'warning' }
}).then(() => {
//调用删除的方法
deleteFile({"imageId":item.imageId}).then(response => {
if (response.code === 200) {
this.$message.success('删除成功')
this.getList() this.getList()
} else { },
this.$message.error('删除失败') /** 重置按钮操作 */
} resetQuery() {
}) this.resetForm('queryForm')
}).catch(() => { // 重置日期为null而不是空字符串
this.$message.info('已取消删除') this.queryParams.operaTime = null
}) this.handleQuery()
} },
}
/** 导出按钮操作 */
handleExport() {
const imageIds = this.showProMaterialsDuctList.map(
(item) => item.imageId,
)
exportImages({
imageId: imageIds,
})
.then((response) => {
// 创建下载链接
const blob = new Blob([response])
const link = document.createElement('a')
const fileName = `图片压缩包_${new Date().getTime()}.zip`
link.href = URL.createObjectURL(blob)
link.download = fileName
link.click()
URL.revokeObjectURL(link.href)
})
.catch((error) => {
console.error('下载失败:', error)
this.$message.error('下载失败')
})
},
// 删除处理方法
handleDelete(item) {
this.$confirm('确认要删除该记录吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
//调用删除的方法
deleteFile({ imageId: item.imageId }).then((response) => {
if (response.code === 200) {
this.$message.success('删除成功')
this.getList()
} else {
this.$message.error('删除失败')
}
})
})
.catch(() => {
this.$message.info('已取消删除')
})
},
},
} }
</script> </script>
<style scoped> <style scoped>
.app-container { .app-container {
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')
background-size: 100% 100%; no-repeat center center;
background-size: 100% 100%;
} }
.content-area { .content-area {
flex: 1; flex: 1;
height: calc(100vh - 218px); height: calc(100vh - 218px);
/*padding-bottom: 20px;*/ /*padding-bottom: 20px;*/
padding-right: 12px; padding-right: 12px;
padding-top: 2px; padding-top: 2px;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
row-gap: 20px; row-gap: 20px;
} }
.services-grid { .services-grid {
width: 22%; width: 22%;
margin-left: 2.5%; margin-left: 2.5%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
border: 1px solid #d6d1d1; border: 1px solid #d6d1d1;
border-radius: 10px; border-radius: 10px;
align-content: flex-start; align-content: flex-start;
justify-items: center; justify-items: center;
height: 43%; height: 43%;
} }
.card-image { .card-image {
height: 191px; height: 191px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
} }
.card-content { .card-content {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 14px; font-size: 14px;
} }
.card-footer { .card-footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 100%;
min-height: 24px; min-height: 24px;
} }
.person-info { .person-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 10px 18px 0 18px; margin: 10px 18px 0 18px;
align-items: center; align-items: center;
} }
.name { .name {
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.date { .date {
color: #666; color: #666;
/*font-size: 12px;*/ /*font-size: 12px;*/
} }
.tags { .tags {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 10px 18px 0 18px; margin: 10px 18px 0 18px;
gap: 6px; gap: 6px;
} }
.tag-row { .tag-row {
display: table; display: table;
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
margin:3px 0 0 0; margin: 3px 0 0 0;
} }
.tag-item { .tag-item {
display: table-cell; display: table-cell;
width: 33.33%; width: 33.33%;
text-align: left; text-align: left;
font-size: 12px; font-size: 12px;
color: #333; color: #333;
white-space: nowrap; white-space: nowrap;
padding: 0 4px; padding: 0 4px;
} }
.action-buttons { .action-buttons {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin: 10px 18px 0px 18px; margin: 10px 18px 0px 18px;
} }
>>>.el-input__inner{ .el-input__inner {
background: transparent !important; background: transparent !important;
color: #333333 !important; color: #333333 !important;
border-color: #B5C4CC; border-color: #b5c4cc;
} }
.pagination-container{ .pagination-container {
background: transparent !important; background: transparent !important;
} }
.title-desc { .title-desc {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-right: 8px; margin-right: 8px;
} }
</style> </style>

7
src/views/imageCaptioning/image-evaluate/index.vue
View File

@ -87,6 +87,7 @@ export default {
selectedImages: {}, // 用于跟踪选中的图片 selectedImages: {}, // 用于跟踪选中的图片
isSidebarVisible: true, // 控制左侧导航栏显示/隐藏 isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
addId: '', addId: '',
remarkInfo: '',
} }
}, },
@ -123,7 +124,7 @@ export default {
this.addId = '' this.addId = ''
}, },
startUpload() { startUpload(remarkInfo = '') {
console.log('开始上传') console.log('开始上传')
if (this.fileList.length === 0) { if (this.fileList.length === 0) {
@ -156,7 +157,7 @@ export default {
}) })
const params = { const params = {
id: this.addId, id: this.addId,
remark: this.remarkInfo, remark: remarkInfo || this.remarkInfo,
} }
formData.append('params', JSON.stringify(params)) formData.append('params', JSON.stringify(params))
// formData.append("id", this.addId) // formData.append("id", this.addId)
@ -190,6 +191,7 @@ export default {
balance: item.balance, balance: item.balance,
detail: item.detail, detail: item.detail,
dictValue: item.dictValue, dictValue: item.dictValue,
remark: record.remark,
}), }),
) )
allImageResults = allImageResults =
@ -316,6 +318,7 @@ export default {
balance: item.balance, balance: item.balance,
detail: item.detail, detail: item.detail,
dictValue: item.dictValue, dictValue: item.dictValue,
remark: record.remark,
}), }),
) )
allImageResults = allImageResults.concat(fileResults) allImageResults = allImageResults.concat(fileResults)