图像评估的功能

src/api/imageCaptioning/imageEvaluate.js

@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+import request_formdata from "@/utils/request_formdata";
+
+// 查询标签列表
+export function getSelectedAPI(data) {
+    return request({
+        url: '/image/caption/getSelected',
+        method: 'POST',
+        data,
+    })
+}
+
+// 查询左侧历史记录
+export function getImageListAPI(data) {
+  return request({
+    url: '/image/caption/getImageList',
+    method: 'POST',
+    data,
+  })
+}
+
+//查询右侧的历史记录详情
+export function getImageListDetailsAPI(data) {
+    return request({
+        url: '/image/caption/getImageListDetails',
+        method: 'POST',
+        data,
+    })
+}
+
+//新增标注
+export function addImageEvaluateAPI(data) {
+  return request_formdata({
+    url: '/image/caption/addImageEvaluate',
+    method: 'POST',
+    data,
+  })
+}
+
+//修改图片
+export function updateImageSureAPI(data) {
+  return request_formdata({
+    url: '/image/caption/updateImageSure',
+    method: 'POST',
+    data,
+  })
+}
+
+

src/views/imageCaptioning/image-captioning/components/HistoryViewUn.vue

@@ -3,6 +3,7 @@
     <!-- 可滚动区域 -->
     <div class="scrollable-content">
       <ImageResults
+        :is-evaluate="1"
         :upload-info="uploadInfo"
         :image-results="imageResults"
         :selected-images="selectedImages"

src/views/imageCaptioning/image-captioning/components/ImageResults.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="image-results-container">
     <!-- 上传信息提示 -->
-    <div class="upload-info">
+    <div class="upload-info" v-if ="isEvaluate ==0">
       <img src="@/assets/images/imageCaptioning/photography.png" alt="" class="icon-photography">
       <span>{{ uploadInfo }}</span>
     </div>
@@ -11,12 +11,12 @@
       <div
         v-for="(result, index) in imageResults"
         :key="index"
-        class="image-item"
+        :class="isEvaluate == '1' ? 'image-item-evaluate' : 'image-item'"
       >
         <img
           :src="result.url"
           alt=""
-          class="result-image"
+          :class="isEvaluate == '1' ? 'result-image-evaluate' : 'result-image-item'"
         >
         <!-- 右上角的hand图标 -->
         <img
@@ -33,6 +33,29 @@
           class="icon-hand"
           @click="$emit('hand-click', result, index)"
         >
+
+
+        <div class="card-content" v-if="isEvaluate == '1'">
+          <div class="card-footer">
+            <div class="person-info">
+              <span class="name">综合得分:80</span>
+              <span class="date">2025-08-12</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>
+              </div>
+              <div class="tag-row">
+                <span class="tag-item">明暗均衡: 10分</span>
+                <span class="tag-item">整体观感: 15分</span>
+                <span class="tag-item">细节体验: 15分</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
       </div>
     </div>
 
@@ -62,7 +85,11 @@ export default {
     isSure: {
       type: String,
       default: '0'
-    }
+    },
+    isEvaluate: {
+      type: String,
+      default: '0'
+    },
   },
   watch: {
     isSure(newValue) {
@@ -109,11 +136,25 @@ export default {
   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%;
 }
 
+.result-image-evaluate {
+  width: 100%;
+  height: 260px;
+}
+
 .icon-hand {
   position: absolute;
   top: 25px;
@@ -133,4 +174,68 @@ export default {
   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;
+}
+
+.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>

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

@@ -16,7 +16,7 @@
       <div class="add-content">
         <!-- 标题 -->
         <div class="welcome-message">
-          嗨！我是你的图像标注助理
+          嗨！我是你的图像评估助理
         </div>
 
         <!-- 图片上传区域 -->
@@ -32,10 +32,10 @@
     <!-- 主内容区域-历史 -->
     <div class="main-content" v-if="showNewAnnotationAdd">
       <HistoryView
-        :upload-info="uploadInfo"
         :image-results="imageResults"
         :selected-images="selectedImages"
         :file-list="fileList"
+        :is-sure="isSure"
         @hand-click="handleHandClick"
         @confirm-results="confirmResults"
         @file-change="handleFileChange"
@@ -47,6 +47,13 @@
 </template>
 
 <script>
+import {
+  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";
@@ -63,29 +70,48 @@ export default {
       showNewAnnotationAdd: false, // 控制历史界面的显示状态
 
       // 导航栏数据
-      labelList: [
+      labelList: [],
-        {id: 1, date: '2025-09-13', name: '安全帽、绝缘子...'},
-        {id: 2, date: '2025-09-10', name: '安全帽'}
-      ],
       selectedItem: null,
 
       // 文件上传相关
       fileList: [],
       showImageResults: false,
-      uploadInfo: '',
 
       // 图片识别结果
       imageResults: [],
       selectedImages: {}, // 用于跟踪选中的图片
       isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
+      isSure:'', //小图标，确定按钮 0-未确定 1-已确定
     }
   },
+
+  created() {
+    //查询左侧历史记录
+    this.getImageListAPI()
+  },
+
   methods: {
+
+    async getImageListAPI() {
+      try {
+        const res = await getImageListAPI({operaType: 1})
+        // 判断返回码和数据
+        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)
+      }
+    },
+
     createNewLabel() {
       this.selectedItem = null;
       this.fileList = [];
       this.showImageResults = false;
-      this.uploadInfo = '';
       this.imageResults = [];
       this.selectedImages = {};
       this.showNewAnnotation = true;
@@ -117,32 +143,45 @@ export default {
       // 清空上传预览区域
       this.fileList = [];
 
-      // 模拟网络延迟
+      // 创建 FormData 对象
-      setTimeout(() => {
+      const formData = new FormData();
+      // 添加文件
+      originalFileList.forEach(file => {
+        formData.append('files', file.raw); // 使用 raw 字段获取原始文件对象
+      });
+
+      addImageEvaluateAPI(formData)
+        .then(res => {
           loading.close();
-        // 模拟上传和识别过程
+          if (res.code === 200 && res.data && Array.isArray(res.data)) {
-        const recognizedCount = Math.floor(originalFileList.length * 0.7);
+            // 处理成功响应
-        const unrecognizedCount = originalFileList.length - recognizedCount;
+            const record = res.data[0]; // 获取第一条记录
 
-        this.uploadInfo = `上传${originalFileList.length}张图片，可识别标注${recognizedCount}张，${unrecognizedCount}张无法识别标注。已识别标注图片如下，请确认。`;
+            // 设置图片结果
-
+            this.imageResults = record.fileVoList.map(item => ({
-        // 模拟识别结果（返回与上传相同数量的图片，用status字段区分成功失败）
+              url: item.bjUrl || "未找到图片地址",
-        this.imageResults = originalFileList.map((file, index) => ({
+              id: item.imageId || item.id,
-          url: file.url,
+              name: item.originalName,
-          id: index,
+              contentImage: item.contentImage,
-          // status: 1 表示识别成功，0 表示识别失败
+              fileSize: item.fileSize,
-          status: index < recognizedCount ? 1 : 0
+              operId: res.data[0].id , // 操作ID
             }));
 
-        console.log(this.imageResults);
+            this.isSure = record.isSure;
-        this.showImageResults = true;
 
-        // 切换到结果显示界面
+            this.showImageResults = true;
             this.showNewAnnotation = false;
             this.showNewAnnotationAdd = true;
-
             this.$message.success('上传和识别完成');
-      }, 1500); // 模拟1.5秒的处理时间
+          } else {
+            this.$message.error('上传失败');
+          }
+        })
+        .catch(error => {
+          loading.close();
+          console.error('上传异常:', error);
+          this.$message.error('上传过程中出现错误');
+        });
     },
 
     selectItem(item) {
@@ -163,7 +202,7 @@ export default {
         this.fileList = []; // 清空文件列表
         this.showImageResults = true; // 显示识别结果
         this.selectedImages = {}; // 初始化选中状态
-        // 生成测试数据
+        // 生成数据
         this.generateTestData(recordId);
       }
     },
@@ -200,32 +239,68 @@ export default {
       }
     },
 
-    generateTestData(recordId) {
+    async generateTestData(recordId) {
-      // 模拟从后端获取的测试数据
+      // 后端获取的数据
-      const testData = {
+      try {
-        id: recordId,
+        const res = await getImageListDetailsAPI({id: recordId, operaType: 1})
-        date: '2025-09-13',
+        // 判断返回码和数据
-        name: '安全帽、绝缘子...',
+        if (res.code === 200 && res.data && Array.isArray(res.data)) {
-        uploadInfo: `上传10张图片，可识别标注6张，4张无法识别标注。已识别标注图片如下，请确认。`,
+          // 处理图片结果数据
-        imageResults: [
+          this.imageResults = res.data[0].fileVoList.map((item, index) => ({
-          {
+            url: item.bjUrl || item.url,  // 使用 bjUrl 作为图片URL
-            url: 'https://fastly.picsum.photos/id/830/200/200.jpg?hmac=3ce7zNUn5yg_XKy7dHgIHta7t_0vghPQnAGUSGJuBZE',
+            id: item.imageId || index,    // 使用 imageId 作为ID
-            name: 'image1.jpg',
+            name: item.originalName,      // 原始文件名
-          },
+            contentImage: item.contentImage, // 图片内容标签
-          {
+            fileSize: item.fileSize,       // 文件大小
-            url: 'https://example.com/image2.jpg',
+            operId: res.data[0].id , // 操作ID
-            name: 'image1.jpg',
+          }));
-          },
-        ]
-      };
 
-      this.uploadInfo = testData.uploadInfo;
+          this.isSure = res.data[0].isSure;
-      this.imageResults = testData.imageResults;
+        }
+      } catch (error) {
+        console.error('获取列表异常:', error)
+      }
     },
 
     confirmResults(){
-      console.log("确定")
+      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;
     }