增加备注字段
This commit is contained in:
BianLzhaoMin
parent
53b8a63b38
commit
b85889486c
|
|
@ -1,356 +1,397 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" >
|
||||
<el-form-item prop="operaTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.operaTime"
|
||||
type="date"
|
||||
placeholder="标注日期"
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item prop="operaTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.operaTime"
|
||||
type="date"
|
||||
placeholder="标注日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="" prop="contentImage">
|
||||
<el-select
|
||||
v-model="queryParams.operaName"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in contentImageOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="审核人"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="" prop="contentImage">
|
||||
<el-select
|
||||
v-model="queryParams.operaName"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 240px">
|
||||
<el-option
|
||||
v-for="item in contentImageOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
<el-form-item label="" prop="remark">
|
||||
<el-input
|
||||
v-model="queryParams.remark"
|
||||
placeholder="备注"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="resetQuery"
|
||||
style="background: transparent; border-color: #b1c0cb"
|
||||
>重置</el-button
|
||||
>
|
||||
<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
|
||||
:key="item.id"
|
||||
class="services-grid"
|
||||
v-for="item in showProMaterialsDuctList"
|
||||
>
|
||||
</el-option>
|
||||
<!-- 图片区域 -->
|
||||
<div class="card-image">
|
||||
<ImagePreview
|
||||
style="margin-top: 10px"
|
||||
:height="192"
|
||||
:borderRadius="10"
|
||||
:width="itemWidth"
|
||||
:src="item.bjUrl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="审核人"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
<!-- 卡片内容 -->
|
||||
<div class="card-content">
|
||||
<div class="card-footer">
|
||||
<div class="person-info">
|
||||
<span class="name">{{ item.userName }}</span>
|
||||
<span class="date">{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div class="person-info">
|
||||
<span class="name">{{ item.remark }}</span>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span class="title-desc">{{
|
||||
item.contentImage
|
||||
}}</span>
|
||||
<!-- <el-tooltip :content="item.contentImage" placement="top" :effect="'light'" :enterable="false">-->
|
||||
<!-- <span class="title-desc">{{ item.contentImage }}</span>-->
|
||||
<!-- </el-tooltip>-->
|
||||
</div>
|
||||
<div style="border-top: 1px solid #cfd4d7"></div>
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
@click="handleDelete(item)"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</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"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery" style="background:transparent;border-color: #B1C0CB;">重置</el-button>
|
||||
<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
|
||||
:key="item.id"
|
||||
class="services-grid"
|
||||
v-for="item in showProMaterialsDuctList"
|
||||
>
|
||||
<!-- 图片区域 -->
|
||||
<div class="card-image">
|
||||
<ImagePreview
|
||||
style="margin-top: 10px;"
|
||||
:height="192"
|
||||
:borderRadius="10"
|
||||
:width="itemWidth"
|
||||
:src="item.bjUrl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 卡片内容 -->
|
||||
<div class="card-content">
|
||||
<div class="card-footer">
|
||||
<div class="person-info">
|
||||
<span class="name">{{ item.userName }}</span>
|
||||
<span class="date">{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span class="title-desc">{{ item.contentImage }}</span>
|
||||
<!-- <el-tooltip :content="item.contentImage" placement="top" :effect="'light'" :enterable="false">-->
|
||||
<!-- <span class="title-desc">{{ item.contentImage }}</span>-->
|
||||
<!-- </el-tooltip>-->
|
||||
</div>
|
||||
<div style="border-top: 1px solid #CFD4D7;"></div>
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
@click="handleDelete(item)"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getAllImagelist, deleteFile, exportImages} from "@/api/imageCaptioning/imageLibrary";
|
||||
import {getSelectedAPI} from "@/api/imageCaptioning/imageCaptioning";
|
||||
import {
|
||||
getAllImagelist,
|
||||
deleteFile,
|
||||
exportImages,
|
||||
} from '@/api/imageCaptioning/imageLibrary'
|
||||
import { getSelectedAPI } from '@/api/imageCaptioning/imageCaptioning'
|
||||
|
||||
export default {
|
||||
name: "imageCaptioningLibrary",
|
||||
data() {
|
||||
return {
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 8,
|
||||
operaTime: '',
|
||||
operaType: 1,
|
||||
operaName: '',
|
||||
userName: ''
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
proMaterialsListAll: [], // 所有材料列表
|
||||
showProMaterialsDuctList: [], // 需要显示的材料列表
|
||||
itemWidth: 0, // 材料卡片宽度
|
||||
contentImageOptions:[]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getContentImageOptions();
|
||||
},
|
||||
mounted() {
|
||||
this.getItemWidth()
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 获取产品卡片宽度
|
||||
getItemWidth() {
|
||||
this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 320) / 4
|
||||
name: 'imageCaptioningLibrary',
|
||||
data() {
|
||||
return {
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 8,
|
||||
operaTime: '',
|
||||
operaType: 1,
|
||||
operaName: '',
|
||||
userName: '',
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
proMaterialsListAll: [], // 所有材料列表
|
||||
showProMaterialsDuctList: [], // 需要显示的材料列表
|
||||
itemWidth: 0, // 材料卡片宽度
|
||||
contentImageOptions: [],
|
||||
}
|
||||
},
|
||||
/** 查询角色列表 */
|
||||
getList() {
|
||||
getAllImagelist(this.queryParams).then(response => {
|
||||
this.proMaterialsListAll = response.rows;
|
||||
this.total = response.total || 0;
|
||||
this.showProMaterialsDuctList = this.proMaterialsListAll;
|
||||
})
|
||||
created() {
|
||||
this.getList()
|
||||
this.getContentImageOptions()
|
||||
},
|
||||
getContentImageOptions() {
|
||||
getSelectedAPI().then(response => {
|
||||
this.contentImageOptions = response.data;
|
||||
})
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
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")
|
||||
this.queryParams.operaTime = null
|
||||
this.queryParams.operaName = ''
|
||||
this.handleQuery()
|
||||
mounted() {
|
||||
this.getItemWidth()
|
||||
},
|
||||
|
||||
/** 导出按钮操作 */
|
||||
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(() => {
|
||||
//调用删除的方法
|
||||
console.log('删除:', item)
|
||||
deleteFile({"imageId":item.imageId}).then(response => {
|
||||
console.log('删除结果:', response)
|
||||
if (response.code === 200) {
|
||||
this.$message.success('删除成功')
|
||||
methods: {
|
||||
// 获取产品卡片宽度
|
||||
getItemWidth() {
|
||||
this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 320) / 4
|
||||
},
|
||||
/** 查询角色列表 */
|
||||
getList() {
|
||||
getAllImagelist(this.queryParams).then((response) => {
|
||||
this.proMaterialsListAll = response.rows
|
||||
this.total = response.total || 0
|
||||
this.showProMaterialsDuctList = this.proMaterialsListAll
|
||||
})
|
||||
},
|
||||
getContentImageOptions() {
|
||||
getSelectedAPI().then((response) => {
|
||||
this.contentImageOptions = response.data
|
||||
})
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
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()
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm('queryForm')
|
||||
this.queryParams.operaTime = null
|
||||
this.queryParams.operaName = ''
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
}).catch(() => {
|
||||
this.$message.info('已取消删除')
|
||||
})
|
||||
}
|
||||
}
|
||||
/** 导出按钮操作 */
|
||||
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(() => {
|
||||
//调用删除的方法
|
||||
console.log('删除:', item)
|
||||
deleteFile({ imageId: item.imageId }).then((response) => {
|
||||
console.log('删除结果:', response)
|
||||
if (response.code === 200) {
|
||||
this.$message.success('删除成功')
|
||||
this.getList()
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.info('已取消删除')
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.app-container {
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 84px);
|
||||
width: 100%;
|
||||
background: url('../../../assets/images/imageCaptioning/login-bg-background.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 84px);
|
||||
width: 100%;
|
||||
background: url('../../../assets/images/imageCaptioning/login-bg-background.png')
|
||||
no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
|
||||
.content-area {
|
||||
flex: 1;
|
||||
height: calc(100vh - 218px);
|
||||
padding-bottom: 20px;
|
||||
padding-right: 12px;
|
||||
padding-top: 2px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 30px;
|
||||
flex: 1;
|
||||
height: calc(100vh - 218px);
|
||||
padding-bottom: 20px;
|
||||
padding-right: 12px;
|
||||
padding-top: 2px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 30px;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
width: 22%;
|
||||
margin-left: 2.5%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #d6d1d1;
|
||||
border-radius: 10px;
|
||||
align-content: flex-start;
|
||||
justify-items: center;
|
||||
height: 47%;
|
||||
width: 22%;
|
||||
margin-left: 2.5%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #d6d1d1;
|
||||
border-radius: 10px;
|
||||
align-content: flex-start;
|
||||
justify-items: center;
|
||||
height: 47%;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 200px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
height: 200px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
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;
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.person-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px 18px 0 18px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px 18px 0 18px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #666;
|
||||
/*font-size: 12px;*/
|
||||
color: #666;
|
||||
/*font-size: 12px;*/
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 10px 18px 5px 18px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 10px 18px 5px 18px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
background-color: #e6f7ff;
|
||||
color: #0066cc;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
background-color: #e6f7ff;
|
||||
color: #0066cc;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 10px 18px 10px 18px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 10px 18px 10px 18px;
|
||||
}
|
||||
|
||||
>>>.el-input__inner{
|
||||
background: transparent !important;
|
||||
color: #333333 !important;
|
||||
border-color: #B5C4CC;
|
||||
.el-input__inner {
|
||||
background: transparent !important;
|
||||
color: #333333 !important;
|
||||
border-color: #b5c4cc;
|
||||
}
|
||||
|
||||
.pagination-container{
|
||||
background: transparent !important;
|
||||
.pagination-container {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.title-desc {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 8px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@ export default {
|
|||
// 修改参数处理方式，与之前的params 保持一致
|
||||
const params = {
|
||||
param: selectedTagNames,
|
||||
remark: '备注996',
|
||||
remark: this.remarkInfo,
|
||||
id: this.addId,
|
||||
}
|
||||
formData.append('params', JSON.stringify(params))
|
||||
|
|
|
|||
|
|
@ -1,385 +1,409 @@
|
|||
<template>
|
||||
<div class="image-captioning-container">
|
||||
<!-- 左侧导航栏 -->
|
||||
<Sidebar
|
||||
:is-sidebar-visible="isSidebarVisible"
|
||||
:label-list="labelList"
|
||||
:selected-item="selectedItem"
|
||||
@toggle-sidebar="toggleSidebar"
|
||||
@create-new-label="createNewLabel"
|
||||
@select-item="selectItem"
|
||||
/>
|
||||
<div class="image-captioning-container">
|
||||
<!-- 左侧导航栏 -->
|
||||
<Sidebar
|
||||
:is-sidebar-visible="isSidebarVisible"
|
||||
:label-list="labelList"
|
||||
:selected-item="selectedItem"
|
||||
@toggle-sidebar="toggleSidebar"
|
||||
@create-new-label="createNewLabel"
|
||||
@select-item="selectItem"
|
||||
/>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<div class="main-content" v-if="showNewAnnotation">
|
||||
<!-- 主内容区域-新增的 -->
|
||||
<div class="add-content">
|
||||
<!-- 标题 -->
|
||||
<div class="welcome-message">
|
||||
嗨！我是你的图像评估助理
|
||||
<!-- 主内容区域 -->
|
||||
<div class="main-content" v-if="showNewAnnotation">
|
||||
<!-- 主内容区域-新增的 -->
|
||||
<div class="add-content">
|
||||
<!-- 标题 -->
|
||||
<div class="welcome-message"> 嗨！我是你的图像评估助理 </div>
|
||||
|
||||
<!-- 输入备注 -->
|
||||
<el-input
|
||||
:rows="1"
|
||||
placeholder="请输入备注"
|
||||
type="textarea"
|
||||
v-model="remarkInfo"
|
||||
/>
|
||||
|
||||
<!-- 图片上传区域 -->
|
||||
<FileUploader
|
||||
:file-list="fileList"
|
||||
@file-change="handleFileChange"
|
||||
@remove-image="removeImage"
|
||||
@start-upload="startUpload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片上传区域 -->
|
||||
<FileUploader
|
||||
:file-list="fileList"
|
||||
@file-change="handleFileChange"
|
||||
@remove-image="removeImage"
|
||||
@start-upload="startUpload"
|
||||
/>
|
||||
</div>
|
||||
<!-- 主内容区域-历史 -->
|
||||
<div class="main-content" v-if="showNewAnnotationAdd">
|
||||
<HistoryView
|
||||
:image-results="imageResults"
|
||||
:selected-images="selectedImages"
|
||||
:file-list="fileList"
|
||||
@hand-click="handleHandClick"
|
||||
@confirm-results="confirmResults"
|
||||
@file-change="handleFileChange"
|
||||
@remove-image="removeImage"
|
||||
@start-upload="startUpload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区域-历史 -->
|
||||
<div class="main-content" v-if="showNewAnnotationAdd">
|
||||
<HistoryView
|
||||
:image-results="imageResults"
|
||||
:selected-images="selectedImages"
|
||||
:file-list="fileList"
|
||||
@hand-click="handleHandClick"
|
||||
@confirm-results="confirmResults"
|
||||
@file-change="handleFileChange"
|
||||
@remove-image="removeImage"
|
||||
@start-upload="startUpload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getImageListAPI,
|
||||
getImageListDetailsAPI,
|
||||
addImageEvaluateAPI,
|
||||
updateImageSureAPI
|
||||
} from "@/api/imageCaptioning/imageEvaluate";
|
||||
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";
|
||||
import Sidebar from '../image-captioning/components/Sidebar'
|
||||
import FileUploader from '../image-captioning/components/FileUploaderUn'
|
||||
import HistoryView from '../image-captioning/components/HistoryViewUn'
|
||||
export default {
|
||||
name: "imageCaptioning",
|
||||
components: {
|
||||
Sidebar,
|
||||
FileUploader,
|
||||
HistoryView
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showNewAnnotation: true, // 控制新建标注界面的显示状态
|
||||
showNewAnnotationAdd: false, // 控制历史界面的显示状态
|
||||
name: 'imageCaptioning',
|
||||
components: {
|
||||
Sidebar,
|
||||
FileUploader,
|
||||
HistoryView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showNewAnnotation: true, // 控制新建标注界面的显示状态
|
||||
showNewAnnotationAdd: false, // 控制历史界面的显示状态
|
||||
|
||||
// 导航栏数据
|
||||
labelList: [],
|
||||
selectedItem: null,
|
||||
// 导航栏数据
|
||||
labelList: [],
|
||||
selectedItem: null,
|
||||
|
||||
// 文件上传相关
|
||||
fileList: [],
|
||||
showImageResults: false,
|
||||
// 文件上传相关
|
||||
fileList: [],
|
||||
showImageResults: false,
|
||||
|
||||
// 图片识别结果
|
||||
imageResults: [],
|
||||
selectedImages: {}, // 用于跟踪选中的图片
|
||||
isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
|
||||
addId: '',
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
//查询左侧历史记录
|
||||
this.getImageListAPI()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getImageListAPI() {
|
||||
try {
|
||||
const res = await getImageListAPI({operaType: 2})
|
||||
// 判断返回码和数据
|
||||
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
|
||||
}))
|
||||
// 图片识别结果
|
||||
imageResults: [],
|
||||
selectedImages: {}, // 用于跟踪选中的图片
|
||||
isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
|
||||
addId: '',
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取列表异常:', error)
|
||||
}
|
||||
},
|
||||
|
||||
createNewLabel() {
|
||||
this.selectedItem = null;
|
||||
this.fileList = [];
|
||||
this.showImageResults = false;
|
||||
this.imageResults = [];
|
||||
this.selectedImages = {};
|
||||
this.showNewAnnotation = true;
|
||||
this.showNewAnnotationAdd = false;
|
||||
this.addId ='';
|
||||
created() {
|
||||
//查询左侧历史记录
|
||||
this.getImageListAPI()
|
||||
},
|
||||
|
||||
startUpload() {
|
||||
console.log('开始上传')
|
||||
|
||||
if (this.fileList.length === 0) {
|
||||
this.$message.warning('请上传图片')
|
||||
return
|
||||
}
|
||||
|
||||
// 初始化 selectedImages
|
||||
this.selectedImages = {};
|
||||
|
||||
// 显示加载状态
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '正在上传和识别图片...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
|
||||
// 保存原始文件列表用于显示结果
|
||||
const originalFileList = [...this.fileList];
|
||||
|
||||
// 清空上传预览区域
|
||||
this.fileList = [];
|
||||
|
||||
// 创建 FormData 对象
|
||||
const formData = new FormData();
|
||||
// 添加文件
|
||||
originalFileList.forEach(file => {
|
||||
formData.append('files', file.raw); // 使用 raw 字段获取原始文件对象
|
||||
});
|
||||
const params = {
|
||||
id: this.addId
|
||||
};
|
||||
formData.append('params', JSON.stringify(params));
|
||||
// formData.append("id", this.addId)
|
||||
addImageEvaluateAPI(formData)
|
||||
.then(res => {
|
||||
loading.close();
|
||||
if (res.code === 200 && res.data && Array.isArray(res.data)) {
|
||||
// 处理成功响应
|
||||
this.addId = res.data[0].operaId;
|
||||
let allImageResults = [];
|
||||
res.data.forEach(record => {
|
||||
this.addId = record.operaId;
|
||||
const fileResults = record.fileVoList.map((item, index) => ({
|
||||
url: item.bjUrl || item.url,
|
||||
id: item.imageId || index,
|
||||
name: item.originalName,
|
||||
contentImage: item.contentImage,
|
||||
fileSize: item.fileSize,
|
||||
operId: record.id,
|
||||
|
||||
overallScore: item.overallScore,
|
||||
clarity: item.clarity,
|
||||
cleanliness: item.cleanliness,
|
||||
compressMarks: item.compressMarks,
|
||||
impression: item.impression,
|
||||
balance: item.balance,
|
||||
detail: item.detail,
|
||||
dictValue:item.dictValue
|
||||
}));
|
||||
allImageResults = allImageResults.concat(fileResults);
|
||||
});
|
||||
this.imageResults = allImageResults;
|
||||
// 刷新左侧标签文本并选中对应标签
|
||||
if (res.data.length > 0) {
|
||||
this.refreshSidebarLabel(res.data[0].operaName, res.data[0].id);
|
||||
methods: {
|
||||
async getImageListAPI() {
|
||||
try {
|
||||
const res = await getImageListAPI({ operaType: 2 })
|
||||
// 判断返回码和数据
|
||||
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)
|
||||
}
|
||||
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('上传过程中出现错误');
|
||||
});
|
||||
},
|
||||
|
||||
createNewLabel() {
|
||||
this.selectedItem = null
|
||||
this.fileList = []
|
||||
this.showImageResults = false
|
||||
this.imageResults = []
|
||||
this.selectedImages = {}
|
||||
this.showNewAnnotation = true
|
||||
this.showNewAnnotationAdd = false
|
||||
this.addId = ''
|
||||
},
|
||||
|
||||
startUpload() {
|
||||
console.log('开始上传')
|
||||
|
||||
if (this.fileList.length === 0) {
|
||||
this.$message.warning('请上传图片')
|
||||
return
|
||||
}
|
||||
|
||||
// 初始化 selectedImages
|
||||
this.selectedImages = {}
|
||||
|
||||
// 显示加载状态
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '正在上传和识别图片...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
|
||||
// 保存原始文件列表用于显示结果
|
||||
const originalFileList = [...this.fileList]
|
||||
|
||||
// 清空上传预览区域
|
||||
this.fileList = []
|
||||
|
||||
// 创建 FormData 对象
|
||||
const formData = new FormData()
|
||||
// 添加文件
|
||||
originalFileList.forEach((file) => {
|
||||
formData.append('files', file.raw) // 使用 raw 字段获取原始文件对象
|
||||
})
|
||||
const params = {
|
||||
id: this.addId,
|
||||
remark: this.remarkInfo,
|
||||
}
|
||||
formData.append('params', JSON.stringify(params))
|
||||
// formData.append("id", this.addId)
|
||||
addImageEvaluateAPI(formData)
|
||||
.then((res) => {
|
||||
loading.close()
|
||||
if (
|
||||
res.code === 200 &&
|
||||
res.data &&
|
||||
Array.isArray(res.data)
|
||||
) {
|
||||
// 处理成功响应
|
||||
this.addId = res.data[0].operaId
|
||||
let allImageResults = []
|
||||
res.data.forEach((record) => {
|
||||
this.addId = record.operaId
|
||||
const fileResults = record.fileVoList.map(
|
||||
(item, index) => ({
|
||||
url: item.bjUrl || item.url,
|
||||
id: item.imageId || index,
|
||||
name: item.originalName,
|
||||
contentImage: item.contentImage,
|
||||
fileSize: item.fileSize,
|
||||
operId: record.id,
|
||||
|
||||
overallScore: item.overallScore,
|
||||
clarity: item.clarity,
|
||||
cleanliness: item.cleanliness,
|
||||
compressMarks: item.compressMarks,
|
||||
impression: item.impression,
|
||||
balance: item.balance,
|
||||
detail: item.detail,
|
||||
dictValue: item.dictValue,
|
||||
}),
|
||||
)
|
||||
allImageResults =
|
||||
allImageResults.concat(fileResults)
|
||||
})
|
||||
this.imageResults = allImageResults
|
||||
// 刷新左侧标签文本并选中对应标签
|
||||
if (res.data.length > 0) {
|
||||
this.refreshSidebarLabel(
|
||||
res.data[0].operaName,
|
||||
res.data[0].id,
|
||||
)
|
||||
}
|
||||
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('上传过程中出现错误')
|
||||
})
|
||||
},
|
||||
|
||||
refreshSidebarLabel(operaName, recordId) {
|
||||
this.getImageListAPI()
|
||||
setTimeout(() => {
|
||||
const index = this.labelList.findIndex(
|
||||
(item) => item.id === recordId,
|
||||
)
|
||||
if (index !== -1) {
|
||||
this.labelList[index].name = operaName
|
||||
}
|
||||
// 选中对应的标签
|
||||
this.selectedItem = recordId
|
||||
}, 500) // 延迟确保数据加载完成
|
||||
},
|
||||
|
||||
selectItem(item) {
|
||||
this.selectedItem = item.id
|
||||
// 这里可以添加加载历史记录数据的逻辑
|
||||
this.loadRecordData(item.id)
|
||||
},
|
||||
|
||||
loadRecordData(recordId) {
|
||||
// 模拟加载历史记录数据
|
||||
const record = this.labelList.find((r) => r.id === recordId)
|
||||
if (record) {
|
||||
this.showNewAnnotation = false
|
||||
this.showNewAnnotationAdd = true
|
||||
|
||||
// 这里可以添加实际的数据加载逻辑
|
||||
this.fileList = [] // 清空文件列表
|
||||
this.showImageResults = true // 显示识别结果
|
||||
this.selectedImages = {} // 初始化选中状态
|
||||
// 生成数据
|
||||
this.generateTestData(recordId)
|
||||
}
|
||||
},
|
||||
|
||||
handleFileChange(file, fileList) {
|
||||
if (file.raw) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
file.url = e.target.result
|
||||
}
|
||||
reader.readAsDataURL(file.raw)
|
||||
}
|
||||
// 延迟设置fileList，确保file.url已正确设置
|
||||
setTimeout(() => {
|
||||
this.fileList = fileList
|
||||
}, 100)
|
||||
},
|
||||
|
||||
removeImage(index) {
|
||||
this.fileList.splice(index, 1)
|
||||
this.$message.success('已删除文件')
|
||||
},
|
||||
|
||||
// 处理手图标点击事件
|
||||
handleHandClick(result, index) {
|
||||
console.log('点击了图片:', index)
|
||||
// 使用对象属性的方式跟踪选中状态
|
||||
if (this.selectedImages[index]) {
|
||||
console.log('取消选中:', index)
|
||||
this.$set(this.selectedImages, index, false)
|
||||
} else {
|
||||
console.log('选中:', index)
|
||||
this.$set(this.selectedImages, index, true)
|
||||
}
|
||||
},
|
||||
|
||||
async generateTestData(recordId) {
|
||||
// 后端获取的数据
|
||||
try {
|
||||
const res = await getImageListDetailsAPI({
|
||||
id: recordId,
|
||||
operaType: 2,
|
||||
})
|
||||
// 判断返回码和数据
|
||||
if (res.code === 200 && res.data && Array.isArray(res.data)) {
|
||||
this.addId = res.data[0].operaId
|
||||
|
||||
let allImageResults = []
|
||||
res.data.forEach((record) => {
|
||||
const fileResults = record.fileVoList.map(
|
||||
(item, index) => ({
|
||||
url: item.bjUrl || item.url,
|
||||
id: item.imageId || index,
|
||||
name: item.originalName,
|
||||
contentImage: item.contentImage,
|
||||
fileSize: item.fileSize,
|
||||
operId: record.id,
|
||||
|
||||
overallScore: item.overallScore,
|
||||
clarity: item.clarity,
|
||||
cleanliness: item.cleanliness,
|
||||
compressMarks: item.compressMarks,
|
||||
impression: item.impression,
|
||||
balance: item.balance,
|
||||
detail: item.detail,
|
||||
dictValue: item.dictValue,
|
||||
}),
|
||||
)
|
||||
allImageResults = allImageResults.concat(fileResults)
|
||||
})
|
||||
this.imageResults = allImageResults
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取列表异常:', error)
|
||||
}
|
||||
},
|
||||
|
||||
confirmResults() {
|
||||
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
|
||||
},
|
||||
},
|
||||
|
||||
refreshSidebarLabel(operaName, recordId) {
|
||||
this.getImageListAPI()
|
||||
setTimeout(() => {
|
||||
const index = this.labelList.findIndex(item => item.id === recordId);
|
||||
if (index !== -1) {
|
||||
this.labelList[index].name = operaName;
|
||||
}
|
||||
// 选中对应的标签
|
||||
this.selectedItem = recordId;
|
||||
}, 500); // 延迟确保数据加载完成
|
||||
},
|
||||
|
||||
selectItem(item) {
|
||||
this.selectedItem = item.id;
|
||||
// 这里可以添加加载历史记录数据的逻辑
|
||||
this.loadRecordData(item.id);
|
||||
},
|
||||
|
||||
loadRecordData(recordId) {
|
||||
// 模拟加载历史记录数据
|
||||
const record = this.labelList.find(r => r.id === recordId);
|
||||
if (record) {
|
||||
|
||||
this.showNewAnnotation = false;
|
||||
this.showNewAnnotationAdd = true;
|
||||
|
||||
// 这里可以添加实际的数据加载逻辑
|
||||
this.fileList = []; // 清空文件列表
|
||||
this.showImageResults = true; // 显示识别结果
|
||||
this.selectedImages = {}; // 初始化选中状态
|
||||
// 生成数据
|
||||
this.generateTestData(recordId);
|
||||
}
|
||||
},
|
||||
|
||||
handleFileChange(file, fileList) {
|
||||
if (file.raw) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
file.url = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file.raw);
|
||||
}
|
||||
// 延迟设置fileList，确保file.url已正确设置
|
||||
setTimeout(() => {
|
||||
this.fileList = fileList;
|
||||
}, 100);
|
||||
},
|
||||
|
||||
removeImage(index) {
|
||||
this.fileList.splice(index, 1);
|
||||
this.$message.success('已删除文件');
|
||||
},
|
||||
|
||||
// 处理手图标点击事件
|
||||
handleHandClick(result, index) {
|
||||
console.log("点击了图片:", index)
|
||||
// 使用对象属性的方式跟踪选中状态
|
||||
if (this.selectedImages[index]) {
|
||||
console.log("取消选中:", index)
|
||||
this.$set(this.selectedImages, index, false)
|
||||
} else {
|
||||
console.log("选中:", index)
|
||||
this.$set(this.selectedImages, index, true)
|
||||
}
|
||||
},
|
||||
|
||||
async generateTestData(recordId) {
|
||||
// 后端获取的数据
|
||||
try {
|
||||
const res = await getImageListDetailsAPI({id: recordId, operaType: 2})
|
||||
// 判断返回码和数据
|
||||
if (res.code === 200 && res.data && Array.isArray(res.data)) {
|
||||
this.addId = res.data[0].operaId;
|
||||
|
||||
let allImageResults = [];
|
||||
res.data.forEach(record => {
|
||||
const fileResults = record.fileVoList.map((item, index) => ({
|
||||
url: item.bjUrl || item.url,
|
||||
id: item.imageId || index,
|
||||
name: item.originalName,
|
||||
contentImage: item.contentImage,
|
||||
fileSize: item.fileSize,
|
||||
operId: record.id,
|
||||
|
||||
overallScore: item.overallScore,
|
||||
clarity: item.clarity,
|
||||
cleanliness: item.cleanliness,
|
||||
compressMarks: item.compressMarks,
|
||||
impression: item.impression,
|
||||
balance: item.balance,
|
||||
detail: item.detail,
|
||||
dictValue:item.dictValue
|
||||
}));
|
||||
allImageResults = allImageResults.concat(fileResults);
|
||||
});
|
||||
this.imageResults = allImageResults;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取列表异常:', error)
|
||||
}
|
||||
},
|
||||
|
||||
confirmResults(){
|
||||
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;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.image-captioning-container {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 84px);
|
||||
width: 100%;
|
||||
background: url('../../../assets/images/imageCaptioning/login-bg-background.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 84px);
|
||||
width: 100%;
|
||||
background: url('../../../assets/images/imageCaptioning/login-bg-background.png')
|
||||
no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 40px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
padding: 40px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.add-content {
|
||||
height: 55%;
|
||||
width: 60%;
|
||||
margin-top: 15%;
|
||||
margin-left: 22%;
|
||||
height: 55%;
|
||||
width: 60%;
|
||||
margin-top: 15%;
|
||||
margin-left: 22%;
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 50px;
|
||||
font-weight: 600;
|
||||
color: #334249;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 50px;
|
||||
font-weight: 600;
|
||||
color: #334249;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue