图像评估的功能

src/api/imageCaptioning/imageLibrary.js

@@ -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'
+  })
+}

src/views/imageCaptioning/image-captioning-library/index.vue

@@ -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,
+        operaTime: '',
-        roleKey: undefined,
-        status: undefined,
         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', {
+      const imageIds = this.showProMaterialsDuctList.map(item => item.imageId);
-        ...this.queryParams
+      exportImages({
-      }, `role_${new Date().getTime()}.xlsx`)
+        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)
-        // 从列表中移除
+        deleteFile({"imageId":item.imageId}).then(response => {
-        this.showProMaterialsDuctList = this.showProMaterialsDuctList.filter(i => i.id !== item.id)
+          console.log('删除结果:', response)
-        this.$message.success('删除成功')
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.getList()
+          } else {
+            this.$message.error('删除失败')
+          }
+        })
+
       }).catch(() => {
         this.$message.info('已取消删除')
       })

src/views/imageCaptioning/image-evaluate-library/index.vue

@@ -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="name">综合得分:{{ item.overallScore }}</span>
-              <span class="date">{{ item.date }}</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;">清晰度: {{ item.clarity }}分</span>
-                <span class="tag-item" style="padding-left: 16px;">干净度: 10分</span>
+                <span class="tag-item" style="padding-left: 16px;">干净度: {{ item.cleanliness }}分</span>
-                <span class="tag-item">压缩痕迹: 10分</span>
+                <span class="tag-item">压缩痕迹: {{ item.compressMarks }}分</span>
               </div>
               <div class="tag-row">
-                <span class="tag-item">明暗均衡: 10分</span>
+                <span class="tag-item">明暗均衡: {{ item.balance }}分</span>
-                <span class="tag-item">整体观感: 15分</span>
+                <span class="tag-item">整体观感: {{ item.impression }}分</span>
-                <span class="tag-item">细节体验: 15分</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,
+        pageSize: 8,
-        roleName: undefined,
+        date: '',
-        roleKey: undefined,
-        status: undefined,
         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', {
+      const imageIds = this.showProMaterialsDuctList.map(item => item.imageId);
-        ...this.queryParams
+      exportImages({
-      }, `role_${new Date().getTime()}.xlsx`)
+        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)
+        deleteFile({"imageId":item.imageId}).then(response => {
-        // 从列表中移除
+          if (response.code === 200) {
-        this.showProMaterialsDuctList = this.showProMaterialsDuctList.filter(i => i.id !== item.id)
+            this.$message.success('删除成功')
-        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 {

src/views/imageCaptioning/image-evaluate/index.vue

@@ -80,7 +80,7 @@ export default {
       imageResults: [],
       selectedImages: {}, // 用于跟踪选中的图片
       isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
-      addId: null,
+      addId: '',
     }
   },