图像评估的功能
This commit is contained in:
parent
4d09b1e008
commit
360e0e690a
|
|
@ -8,3 +8,20 @@ export function getAllImagelist(query) {
|
|||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteFile(data) {
|
||||
return request({
|
||||
url: '/image/caption/deleteFile',
|
||||
method: 'POST',
|
||||
params:data,
|
||||
})
|
||||
}
|
||||
|
||||
export function exportImages(data) {
|
||||
return request({
|
||||
url: '/image/caption/getPackageDownload',
|
||||
method: 'POST',
|
||||
data: data,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" >
|
||||
<el-form-item prop="date">
|
||||
<el-form-item prop="operaTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.date"
|
||||
v-model="queryParams.operaTime"
|
||||
type="date"
|
||||
placeholder="标注日期"
|
||||
>
|
||||
|
|
@ -11,18 +11,18 @@
|
|||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="" prop="roleName">
|
||||
<el-form-item label="" prop="operaName">
|
||||
<el-input
|
||||
v-model="queryParams.roleName"
|
||||
v-model="queryParams.operaName"
|
||||
placeholder="标注项"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="roleKey">
|
||||
<el-form-item label="" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.roleKey"
|
||||
v-model="queryParams.userName"
|
||||
placeholder="审核人"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
<div class="card-footer">
|
||||
<div class="person-info">
|
||||
<span class="name">{{ item.userName }}</span>
|
||||
<span class="date">{{ item.date }}</span>
|
||||
<span class="date">{{ item.operaTime }}</span>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<el-tooltip :content="item.contentImage" placement="top" :effect="'light'" :enterable="false">
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {getAllImagelist} from "@/api/imageCaptioning/imageLibrary";
|
||||
import {getAllImagelist, deleteFile, exportImages} from "@/api/imageCaptioning/imageLibrary";
|
||||
|
||||
export default {
|
||||
name: "imageCaptioningLibrary",
|
||||
|
|
@ -108,9 +108,7 @@ export default {
|
|||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 8,
|
||||
roleName: undefined,
|
||||
roleKey: undefined,
|
||||
status: undefined,
|
||||
operaTime: '',
|
||||
operaType: 1
|
||||
},
|
||||
// 表单参数
|
||||
|
|
@ -144,19 +142,42 @@ export default {
|
|||
/** 搜索按钮操作 */
|
||||
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.handleQuery()
|
||||
},
|
||||
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/role/export', {
|
||||
...this.queryParams
|
||||
}, `role_${new Date().getTime()}.xlsx`)
|
||||
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('下载失败');
|
||||
});
|
||||
},
|
||||
|
||||
// 删除处理方法
|
||||
|
|
@ -166,11 +187,18 @@ export default {
|
|||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 这里可以添加实际的删除逻辑
|
||||
//调用删除的方法
|
||||
console.log('删除:', item)
|
||||
// 从列表中移除
|
||||
this.showProMaterialsDuctList = this.showProMaterialsDuctList.filter(i => i.id !== item.id)
|
||||
this.$message.success('删除成功')
|
||||
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('已取消删除')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" >
|
||||
<el-form-item prop="date">
|
||||
<el-date-picker
|
||||
v-model="queryParams.date"
|
||||
v-model="queryParams.operaTime"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
>
|
||||
|
|
@ -27,10 +27,10 @@
|
|||
<div class="card-image">
|
||||
<ImagePreview
|
||||
style="margin-top: 10px"
|
||||
:height="188"
|
||||
:height="180"
|
||||
:borderRadius="10"
|
||||
:width="itemWidth"
|
||||
:src1="item.image"
|
||||
:src1="item.bjUrl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -38,19 +38,19 @@
|
|||
<div class="card-content">
|
||||
<div class="card-footer">
|
||||
<div class="person-info">
|
||||
<span class="name">综合得分:{{ item.name }}</span>
|
||||
<span class="date">{{ item.date }}</span>
|
||||
<span class="name">综合得分:{{ item.overallScore }}</span>
|
||||
<span class="date">{{ item.operaName }}</span>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<div class="tag-row">
|
||||
<span class="tag-item" style="padding-left: 16px;">清晰度: 20分</span>
|
||||
<span class="tag-item" style="padding-left: 16px;">干净度: 10分</span>
|
||||
<span class="tag-item">压缩痕迹: 10分</span>
|
||||
<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">压缩痕迹: {{ item.compressMarks }}分</span>
|
||||
</div>
|
||||
<div class="tag-row">
|
||||
<span class="tag-item">明暗均衡: 10分</span>
|
||||
<span class="tag-item">整体观感: 15分</span>
|
||||
<span class="tag-item">细节体验: 15分</span>
|
||||
<span class="tag-item">明暗均衡: {{ item.balance }}分</span>
|
||||
<span class="tag-item">整体观感: {{ item.impression }}分</span>
|
||||
<span class="tag-item">细节体验: {{ item.detail }}分</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top: 1px solid #CFD4D7;margin-top: 10px"></div>
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {getAllImagelist} from "@/api/imageCaptioning/imageLibrary";
|
||||
import {deleteFile, exportImages, getAllImagelist} from "@/api/imageCaptioning/imageLibrary";
|
||||
|
||||
export default {
|
||||
name: "imageCaptioningLibrary",
|
||||
|
|
@ -94,10 +94,8 @@ export default {
|
|||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
roleName: undefined,
|
||||
roleKey: undefined,
|
||||
status: undefined,
|
||||
pageSize: 8,
|
||||
date: '',
|
||||
operaType: 2
|
||||
},
|
||||
// 表单参数
|
||||
|
|
@ -132,19 +130,43 @@ export default {
|
|||
/** 搜索按钮操作 */
|
||||
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")
|
||||
// 重置日期为null而不是空字符串
|
||||
this.queryParams.operaTime = null
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/role/export', {
|
||||
...this.queryParams
|
||||
}, `role_${new Date().getTime()}.xlsx`)
|
||||
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('下载失败');
|
||||
});
|
||||
},
|
||||
|
||||
// 删除处理方法
|
||||
|
|
@ -154,11 +176,15 @@ export default {
|
|||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 这里可以添加实际的删除逻辑
|
||||
console.log('删除:', item)
|
||||
// 从列表中移除
|
||||
this.showProMaterialsDuctList = this.showProMaterialsDuctList.filter(i => i.id !== item.id)
|
||||
this.$message.success('删除成功')
|
||||
//调用删除的方法
|
||||
deleteFile({"imageId":item.imageId}).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message.success('删除成功')
|
||||
this.getList()
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message.info('已取消删除')
|
||||
})
|
||||
|
|
@ -204,6 +230,7 @@ export default {
|
|||
border-radius: 10px;
|
||||
align-content: flex-start;
|
||||
justify-items: center;
|
||||
height: 47%;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export default {
|
|||
imageResults: [],
|
||||
selectedImages: {}, // 用于跟踪选中的图片
|
||||
isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
|
||||
addId: null,
|
||||
addId: '',
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue