图像评估的功能

src/api/imageCaptioning/imageLibrary.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 查询参数列表
+export function getAllImagelist(query) {
+  return request({
+    url: '/image/caption/list',
+    method: 'get',
+    params: query
+  })
+}

src/components/ImagePreview/index.vue

@@ -2,7 +2,6 @@
     <div>
         <el-image
             :src="src1"
-            fit="cover"
             :style="`width:${realWidth};height:${realHeight};border-radius: ${borderRadius}px;`"
             v-if="!isShowMask"
         >
@@ -14,7 +13,6 @@
         <el-image
             :src="src1"
             v-else
-            fit="cover"
             :preview-src-list="realSrcList"
             :style="`width:${realWidth};height:${realHeight};border-radius: ${borderRadius}px;`"
         >

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

@@ -46,11 +46,11 @@
         <!-- 图片区域 -->
         <div class="card-image">
           <ImagePreview
-            style="margin-top: 10px"
+            style="margin-top: 10px;"
             :height="192"
             :borderRadius="10"
             :width="itemWidth"
-            :src1="item.image"
+            :src1="item.bjUrl"
           />
         </div>
 
@@ -58,12 +58,12 @@
         <div class="card-content">
           <div class="card-footer">
             <div class="person-info">
-              <span class="name">{{ item.name }}</span>
+              <span class="name">{{ item.userName }}</span>
               <span class="date">{{ item.date }}</span>
             </div>
             <div class="tags">
-              <el-tooltip :content="item.description" placement="top" :effect="'light'" :enterable="false">
+              <el-tooltip :content="item.contentImage" placement="top" :effect="'light'" :enterable="false">
-                <span class="title-desc">{{ item.description }}</span>
+                <span class="title-desc">{{ item.contentImage }}</span>
               </el-tooltip>
             </div>
             <div style="border-top: 1px solid #CFD4D7;"></div>
@@ -96,17 +96,7 @@
 </template>
 
 <script>
-import {
+import {getAllImagelist} from "@/api/imageCaptioning/imageLibrary";
-  getRole,
-  delRole,
-  addRole,
-  updateRole,
-  dataScope,
-  changeRoleStatus,
-  deptTreeSelect
-} from "@/api/system/role"
-import {treeselect as menuTreeselect, roleMenuTreeselect} from "@/api/system/menu"
-import {getMaterialListAPI} from "@/api/publicService/proMaterials";
 
 export default {
   name: "imageCaptioningLibrary",
@@ -117,10 +107,11 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 8,
         roleName: undefined,
         roleKey: undefined,
-        status: undefined
+        status: undefined,
+        operaType: 1
       },
       // 表单参数
       form: {},
@@ -144,10 +135,9 @@ export default {
     },
     /** 查询角色列表 */
     getList() {
-      getMaterialListAPI().then(response => {
+      getAllImagelist(this.queryParams).then(response => {
         this.proMaterialsListAll = response.rows;
         this.total = response.total || 0;
-        console.log(this.proMaterialsListAll)
         this.showProMaterialsDuctList = this.proMaterialsListAll;
       })
     },
@@ -226,6 +216,7 @@ export default {
   border-radius: 10px;
   align-content: flex-start;
   justify-items: center;
+  height: 47%;
 }
 
 .card-image {
@@ -276,7 +267,7 @@ export default {
 .tags {
   display: flex;
   flex-wrap: wrap;
-  margin: 10px 18px 0 18px;
+  margin: 10px 18px 5px 18px;
   height: 20px;
 }
 

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

@@ -59,7 +59,7 @@
           @click="$emit('start-upload')"
           :disabled="fileList.length === 0"
         >
-          开始标注
+          开始评估
         </el-button>
       </div>
     </div>

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

@@ -5,6 +5,7 @@
       <ImageResults
         :upload-info="uploadInfo"
         :image-results="imageResults"
+        :grouped-image-results="groupedImageResults"
         :selected-images="selectedImages"
         :is-sure="isSure"
         @hand-click="handleHandClickFromChild"
@@ -59,6 +60,10 @@ export default {
       type: Array,
       default: () => []
     },
+    groupedImageResults: {
+      type: Array,
+      default: () => []
+    },
     selectedImages: {
       type: Object,
       default: () => ({})

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

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import ImageResults from './ImageResults.vue';
+import ImageResults from './ImageResultsUn.vue';
 import TagSelector from './TagSelector.vue';
 import FileUploader from './FileUploaderUn.vue';
 import axios from 'axios'

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

@@ -1,68 +1,148 @@
 <template>
   <div class="image-results-container">
-    <!-- 上传信息提示 -->
+    <!-- 按下标分组显示 -->
-    <div class="upload-info" v-if ="isEvaluate ==0">
+    <template v-if="groupedImageResults && groupedImageResults.length > 0">
-      <img src="@/assets/images/imageCaptioning/photography.png" alt="" class="icon-photography">
+      <div v-for="(group, groupIndex) in groupedImageResults" :key="group.index" class="group-section">
-      <span>{{ uploadInfo }}</span>
+        <!-- 每组的上传信息提示 -->
-    </div>
+        <div class="upload-info" v-if="isEvaluate == '0'">
+          <img src="@/assets/images/imageCaptioning/photography.png" alt="" class="icon-photography">
+          <span>
+            第{{ group.index + 1 }}组 - {{ group.operaName }}:
+            上传{{ group.totalCount }}张图片，可识别标注{{ group.recognizedCount }}张，
+            {{ group.unrecognizedCount }}张无法识别标注。已识别标注图片如下，请确认。
+          </span>
+        </div>
 
-    <!-- 图片识别结果展示 -->
+        <!-- 每组的图片展示 -->
-    <div class="image-results-grid">
+        <div class="image-results-grid">
-      <div
+          <div
-        v-for="(result, index) in imageResults"
+            v-for="(result, imageIndex) in group.images"
-        :key="index"
+            :key="imageIndex"
-        :class="isEvaluate == '1' ? 'image-item-evaluate' : 'image-item'"
+            :class="isEvaluate == '1' ? 'image-item-evaluate' : 'image-item'"
-      >
+          >
-        <img
+            <img
-          :src="result.url"
+              :src="result.url"
-          alt=""
+              alt=""
-          :class="isEvaluate == '1' ? 'result-image-evaluate' : 'result-image-item'"
+              :class="isEvaluate == '1' ? 'result-image-evaluate' : 'result-image'"
-        >
+            >
-        <!-- 右上角的hand图标 -->
+            <!-- 右上角的hand图标 -->
-        <img
+            <img
-          v-if="selectedImages[index] && isSure == '0'"
+              v-if="isGroupImageSelected(groupIndex, imageIndex) && isEvaluate == '0'"
-          src="@/assets/images/imageCaptioning/hand-yellow.png"
+              src="@/assets/images/imageCaptioning/hand-yellow.png"
-          alt="selected"
+              alt="selected"
-          class="icon-hand"
+              class="icon-hand"
-          @click="$emit('hand-click', result, index)"
+              @click="handleGroupImageClick(groupIndex, imageIndex, group.isSure)"
-        >
+            >
-        <img
+            <img
-          v-else-if="!selectedImages[index] && isSure == '0'"
+              v-else-if="!isGroupImageSelected(groupIndex, imageIndex) && isEvaluate == '0'"
-          src="@/assets/images/imageCaptioning/hand.png"
+              src="@/assets/images/imageCaptioning/hand.png"
-          alt="hand"
+              alt="hand"
-          class="icon-hand"
+              class="icon-hand"
-          @click="$emit('hand-click', result, index)"
+              @click="handleGroupImageClick(groupIndex, imageIndex, group.isSure)"
-        >
+            >
 
-
+            <div class="card-content" v-if="isEvaluate == '1'">
-        <div class="card-content" v-if="isEvaluate == '1'">
+              <div class="card-footer">
-          <div class="card-footer">
+                <div class="person-info">
-            <div class="person-info">
+                  <span class="name">综合得分:{{ overallScore }}</span>
-              <span class="name">综合得分:80</span>
+                  <span class="date">{{ contentImage }}</span>
-              <span class="date">2025-08-12</span>
+                </div>
-            </div>
+                <div class="tags">
-            <div class="tags">
+                  <div class="tag-row">
-              <div class="tag-row">
+                    <span class="tag-item" style="padding-left: 16px;">清晰度: {{ clarity }}分</span>
-                <span class="tag-item" style="padding-left: 16px;">清晰度: 20分</span>
+                    <span class="tag-item" style="padding-left: 16px;">干净度: {{ cleanliness }}分</span>
-                <span class="tag-item" style="padding-left: 16px;">干净度: 10分</span>
+                    <span class="tag-item">压缩痕迹: {{ compressMarks }}分</span>
-                <span class="tag-item">压缩痕迹: 10分</span>
+                  </div>
-              </div>
+                  <div class="tag-row">
-              <div class="tag-row">
+                    <span class="tag-item">明暗均衡: {{ balance }}分</span>
-                <span class="tag-item">明暗均衡: 10分</span>
+                    <span class="tag-item">整体观感: {{ impression }}分</span>
-                <span class="tag-item">整体观感: 15分</span>
+                    <span class="tag-item">细节体验: {{ detail }}分</span>
-                <span class="tag-item">细节体验: 15分</span>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
 
+        <!-- 每组的操作按钮 -->
+        <div class="action-buttons" v-if="isEvaluate == '0'">
+          <el-button
+            type="primary"
+            @click="confirmGroup(groupIndex)"
+            :disabled="group.isSure === '1'"
+          >
+            {{ group.isSure === '1' ? '已确认' : '确认' }}
+          </el-button>
+        </div>
       </div>
-    </div>
+    </template>
 
-    <!-- 操作按钮 -->
+    <!-- 保持原有的单一展示方式 -->
-    <div class="action-buttons">
+    <template v-else>
-      <el-button type="primary" @click="$emit('confirm-results')" v-if="isSure == '0'">确认</el-button>
+      <!-- 上传信息提示 -->
-    </div>
+      <div class="upload-info" v-if ="isEvaluate == '0'">
+        <img src="@/assets/images/imageCaptioning/photography.png" alt="" class="icon-photography">
+        <span>{{ uploadInfo }}</span>
+      </div>
+
+      <!-- 图片识别结果展示 -->
+      <div class="image-results-grid">
+        <div
+          v-for="(result, index) in imageResults"
+          :key="index"
+          :class="isEvaluate == '1' ? 'image-item-evaluate' : 'image-item'"
+        >
+          <img
+            :src="result.url"
+            alt=""
+            :class="isEvaluate == '1' ? 'result-image-evaluate' : 'result-image'"
+          >
+          <!-- 右上角的hand图标 -->
+          <img
+            v-if="selectedImages[index] && isEvaluate == '0'"
+            src="@/assets/images/imageCaptioning/hand-yellow.png"
+            alt="selected"
+            class="icon-hand"
+            @click="handleImageClick(index, isSure)"
+          >
+          <img
+            v-else-if="!selectedImages[index] && isEvaluate == '0'"
+            src="@/assets/images/imageCaptioning/hand.png"
+            alt="hand"
+            class="icon-hand"
+            @click="handleImageClick(index, isSure)"
+          >
+
+          <div class="card-content" v-if="isEvaluate == '1'">
+            <div class="card-footer">
+              <div class="person-info">
+                <span class="name">综合得分:{{ overallScore }}</span>
+                <span class="date">{{ contentImage }}</span>
+              </div>
+              <div class="tags">
+                <div class="tag-row">
+                  <span class="tag-item" style="padding-left: 16px;">清晰度: {{ clarity }}分</span>
+                  <span class="tag-item" style="padding-left: 16px;">干净度: {{ cleanliness }}分</span>
+                  <span class="tag-item">压缩痕迹: {{ compressMarks }}分</span>
+                </div>
+                <div class="tag-row">
+                  <span class="tag-item">明暗均衡: {{ balance }}分</span>
+                  <span class="tag-item">整体观感: {{ impression }}分</span>
+                  <span class="tag-item">细节体验: {{ detail }}分</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="action-buttons" v-if="isEvaluate == '0'">
+        <el-button type="primary" @click="$emit('confirm-results')" :disabled="isSure === '1'">
+          {{ isSure === '1' ? '已确认' : '确认' }}
+        </el-button>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -78,27 +158,55 @@ export default {
       type: Array,
       default: () => []
     },
+    groupedImageResults: {
+      type: Array,
+      default: () => []
+    },
     selectedImages: {
       type: Object,
       default: () => ({})
     },
-    isSure: {
-      type: String,
-      default: '0'
-    },
     isEvaluate: {
       type: String,
       default: '0'
     },
-  },
+    isSure: {
-  watch: {
+      type: String,
-    isSure(newValue) {
+      default: ''
-      console.log('isSure changed to:', newValue);
     }
   },
-  mounted() {
+  methods: {
-    // 打印初始 isSure 的值
+    isGroupImageSelected(groupIndex, imageIndex) {
-    console.log('Initial isSure:', this.isSure);
+      // 根据分组索引和图片索引判断是否选中
+      const key = `${groupIndex}-${imageIndex}`;
+      return !!this.selectedImages[key];
+    },
+
+    handleGroupImageClick(groupIndex, imageIndex, groupIsSure) {
+      // 如果该组已确认，则不允许更改选择
+      if (groupIsSure === '1') {
+        this.$message.warning('该组已确认，无法更改选择');
+        return;
+      }
+
+      const key = `${groupIndex}-${imageIndex}`;
+      this.$emit('hand-click', {groupIndex, imageIndex, key});
+    },
+
+    handleImageClick(index, isSure) {
+      // 如果已确认，则不允许更改选择
+      if (isSure === '1') {
+        this.$message.warning('已确认，无法更改选择');
+        return;
+      }
+
+      this.$emit('hand-click', {index, isSingle: true});
+    },
+
+    confirmGroup(groupIndex) {
+      // 可以在这里处理特定组的确认逻辑
+      this.$emit('confirm-results', groupIndex);
+    }
   }
 }
 </script>

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

@@ -0,0 +1,196 @@
+<template>
+  <div class="image-results-container">
+    <!-- 保持原有的单一展示方式 -->
+    <template >
+      <!-- 图片识别结果展示 -->
+      <div class="image-results-grid">
+        <div
+          v-for="(result, index) in imageResults"
+          :key="index"
+          class="image-item-evaluate"
+        >
+          <img
+            :src="result.url"
+            alt=""
+            class="result-image-evaluate"
+          >
+
+          <div class="card-content" >
+            <div class="card-footer">
+              <div class="person-info">
+                <span class="name">综合得分:{{ result.overallScore }}</span>
+                <span class="date">{{ result.contentImage }}</span>
+              </div>
+              <div class="tags">
+                <div class="tag-row">
+                  <span class="tag-item" style="padding-left: 16px;">清晰度: {{ result.clarity }}分</span>
+                  <span class="tag-item" style="padding-left: 16px;">干净度: {{ result.cleanliness }}分</span>
+                  <span class="tag-item">压缩痕迹: {{ result.compressMarks }}分</span>
+                </div>
+                <div class="tag-row">
+                  <span class="tag-item">明暗均衡: {{ result.balance }}分</span>
+                  <span class="tag-item">整体观感: {{ result.impression }}分</span>
+                  <span class="tag-item">细节体验: {{ result.detail }}分</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ImageResults",
+  props: {
+
+    imageResults: {
+      type: Array,
+      default: () => []
+    },
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+.upload-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 16px;
+  color: #54646C;
+  font-weight: 600;
+}
+
+.icon-photography {
+  width: 47px;
+  height: 47px;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+.image-results-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+  margin-bottom: 30px;
+}
+
+.image-item {
+  position: relative;
+  width: 100%;
+  height: 260px;
+  border-radius: 8px;
+  overflow: hidden;
+  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;
+  right: 25px;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+.icon-hand:hover {
+  opacity: 0.8;
+}
+
+.action-buttons {
+  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-captioning/index.vue

@@ -45,6 +45,7 @@
       <HistoryView
         :upload-info="uploadInfo"
         :image-results="imageResults"
+        :grouped-image-results="groupedImageResults"
         :selected-images="selectedImages"
         :tags="tags"
         :visible-tags="visibleTags"
@@ -106,6 +107,9 @@ export default {
       selectedImages: {}, // 用于跟踪选中的图片
       isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
       isSure:'', //小图标，确定按钮 0-未确定 1-已确定
+      addId:'', //新增id
+
+      groupedImageResults: [], // 新增分组数据
     }
   },
 
@@ -166,6 +170,7 @@ export default {
       this.selectedImages = {};
       this.showNewAnnotation = true;
       this.showNewAnnotationAdd = false;
+      this.addId ='';
     },
 
     startUpload() {
@@ -204,33 +209,44 @@ export default {
         formData.append('files', file.raw); // 使用 raw 字段获取原始文件对象
       });
       formData.append('param', selectedTagNames);
+      formData.append('id', this.addId);
       //调用上传的接口，传递文件列表和标签IDs，name
       addImageInfoAPI(formData)
         .then(res => {
           loading.close();
           if (res.code === 200 && res.data && Array.isArray(res.data)) {
-            // 处理成功响应
+            // 处理成功响应 - 获取全部记录
-            const record = res.data[0]; // 获取第一条记录
+            const records = res.data;
-            const totalCount = record.imageNum || originalFileList.length;
+            this.addId = records[0]?.operaId || '';
-            const recognizedCount = record.bzNum || 0;
+            console.log('this.addId:', this.addId)
-            const unrecognizedCount = record.wbzNum || (totalCount - recognizedCount);
 
-            this.uploadInfo = `上传${totalCount}张图片，可识别标注${recognizedCount}张，${unrecognizedCount}张无法识别标注。已识别标注图片如下，请确认。`;
+            // 按下标分组存储数据
-
+            this.groupedImageResults = records.map((record, index) => ({
-            // 设置图片结果
+              index: index, // 下标
-            this.imageResults = record.fileVoList.map(item => ({
+              operaName: record.operaName,
-              url: item.bjUrl || "未找到图片地址",
+              images: record.fileVoList.map(item => ({
-              id: item.imageId || item.id,
+                url: item.bjUrl || "未找到图片地址",
-              name: item.originalName,
+                id: item.imageId || item.id,
-              contentImage: item.contentImage,
+                name: item.originalName,
-              fileSize: item.fileSize,
+                contentImage: item.contentImage,
-              operId: res.data[0].id , // 操作ID
+                fileSize: item.fileSize,
+                operId: record.id,
+              })),
+              totalCount: record.imageNum || originalFileList.length,
+              recognizedCount: record.bzNum || 0,
+              unrecognizedCount: record.wbzNum || 0,
+              isSure: record.isSure,
+              operId: record.id
             }));
+            // 初始化选中状态 - 根据 isActive 字段
+            this.initializeSelectedImages(records);
 
-            this.isSure = record.isSure;
+            // this.isSure = record.isSure;
 
             // 刷新左侧标签文本并选中对应标签
-            this.refreshSidebarLabel(record.operaName, record.id);
+            if (records.length > 0) {
+              this.refreshSidebarLabel(records[0].operaName, records[0].id);
+            }
 
             this.showImageResults = true;
             this.showNewAnnotation = false;
@@ -354,67 +370,163 @@ export default {
       this.$message.success('已删除文件');
     },
 
+    // 处理手图标点击事件
     // 处理手图标点击事件
     handleHandClick(result, index) {
-      console.log(result)
+      // 判断是分组模式还是普通模式
-      console.log("点击了图片:", index)
+      if (typeof result === 'object' && result.hasOwnProperty('groupIndex') && result.hasOwnProperty('imageIndex')) {
-      // 使用对象属性的方式跟踪选中状态
+        // 分组模式
-      if (this.selectedImages[index]) {
+        const { groupIndex, imageIndex, key } = result;
-        console.log("取消选中:", index)
+
-        this.$set(this.selectedImages, index, false)
+        console.log("点击了分组图片:", groupIndex, imageIndex);
+
+        // 检查是否已有其他未确认分组的选中项
+        const hasOtherUnconfirmedGroupSelection = Object.keys(this.selectedImages).some(k => {
+          if (k.includes('-')) {
+            const [otherGroupIndex, otherImageIndex] = k.split('-').map(Number);
+            // 获取其他分组的信息
+            const otherGroup = this.groupedImageResults[otherGroupIndex];
+            // 只有当其他分组未确认且与当前分组不同时，才限制选择
+            if (otherGroup && otherGroup.isSure !== '1' && otherGroupIndex !== groupIndex && this.selectedImages[k]) {
+              return true;
+            }
+          }
+          return false;
+        });
+
+        // 如果已有其他未确认分组的选中项，提示用户
+        if (hasOtherUnconfirmedGroupSelection) {
+          this.$message.warning('当前版本不支持跨组选择，请先取消其他组的选择');
+          return;
+        }
+
+        if (this.selectedImages[key]) {
+          console.log("取消选中分组图片:", groupIndex, imageIndex);
+          this.$set(this.selectedImages, key, false);
+        } else {
+          console.log("选中分组图片:", groupIndex, imageIndex);
+          this.$set(this.selectedImages, key, true);
+        }
+      } else if (typeof result === 'object' && result.hasOwnProperty('index') && result.isSingle) {
+        // 普通模式
+        const { index } = result;
+        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);
+        }
       } else {
-        console.log("选中:", index)
+        // 兼容旧的处理方式
-        this.$set(this.selectedImages, index, true)
+        console.log(result);
+        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: 1})
-        // 判断返回码和数据
         if (res.code === 200 && res.data && Array.isArray(res.data)) {
-          // 处理图片结果数据
+          this.addId = res.data[0].operaId;
-          this.imageResults = res.data[0].fileVoList.map((item, index) => ({
+          console.log('addId:', this.addId);
-            url: item.bjUrl || item.url,  // 使用 bjUrl 作为图片URL
+          // 按下标分组存储数据
-            id: item.imageId || index,    // 使用 imageId 作为ID
+          this.groupedImageResults = res.data.map((record, index) => ({
-            name: item.originalName,      // 原始文件名
+            index: index, // 下标
-            contentImage: item.contentImage, // 图片内容标签
+            operaName: record.operaName,
-            fileSize: item.fileSize,       // 文件大小
+            images: record.fileVoList.map(item => ({
-            operId: res.data[0].id , // 操作ID
+              url: item.bjUrl || item.url,
+              id: item.imageId || item.id,
+              name: item.originalName,
+              contentImage: item.contentImage,
+              fileSize: item.fileSize,
+              operId: record.id
+            })),
+            totalCount: record.imageNum || 0,
+            recognizedCount: record.bzNum || 0,
+            unrecognizedCount: record.wbzNum || 0,
+            isSure: record.isSure,
+            operId: record.operaId
           }));
 
-          this.isSure = res.data[0].isSure;
+          // 初始化选中状态 - 根据 isActive 字段
-
+          this.initializeSelectedImages(res.data);
-          const totalCount = res.data[0].imageNum || 0;
+          // 设置第一条记录的状态用于界面显示
-          const recognizedCount = res.data[0].bzNum || 0;
+          this.isSure = res.data[0]?.isSure || '';
-          const unrecognizedCount = res.data[0].wbzNum ;
-          this.uploadInfo = `上传${totalCount}张图片，可识别标注${recognizedCount}张，${unrecognizedCount}张无法识别标注。已识别标注图片如下，请确认。`;
         }
       } catch (error) {
         console.error('获取列表异常:', error)
       }
     },
 
-    confirmResults() {
+    // 获取选中图片的ID和operId
-      console.log('当前 selectedImages 状态:', this.selectedImages);
+    getSelectedImageInfo() {
-      // 获取所有被选中的图片（基于 index 判断）
+      const selectedImageInfo = [];
-      const selectedItems = [];
+
-      for (let index in this.selectedImages) {
+      // 遍历选中的图片
-        const idx = parseInt(index);
+      for (let key in this.selectedImages) {
-        if (this.selectedImages[idx]) {
+        if (this.selectedImages[key]) {
-          selectedItems.push(this.imageResults[idx]); // 根据 index 取出 imageResults 中对应图片
+          // 判断是分组模式还是普通模式
+          if (key.includes('-')) {
+            // 分组模式: key格式为 "groupIndex-imageIndex"
+            const [groupIndex, imageIndex] = key.split('-').map(Number);
+            const group = this.groupedImageResults[groupIndex];
+            if (group && group.images[imageIndex]) {
+              selectedImageInfo.push({
+                imageId: group.images[imageIndex].id,
+                operId: group.operId,
+                imageName: group.images[imageIndex].name
+              });
+            }
+          } else {
+            // 普通模式: key是数字索引
+            const index = parseInt(key);
+            if (this.imageResults[index]) {
+              selectedImageInfo.push({
+                imageId: this.imageResults[index].id,
+                operId: this.imageResults[index].operId,
+                imageName: this.imageResults[index].name
+              });
+            }
+          }
         }
       }
-      if (selectedItems.length === 0) {
+
-        this.$message.warning('请至少选择一张图片');
+      return selectedImageInfo;
-        return;
+    },
+
+    confirmResults() {
+      const selectedInfo = this.getSelectedImageInfo();
+
+      if (selectedInfo.length === 0) {
+        // this.$message.warning('请至少选择一张图片');
+        // return;
+        this.handleConfirm(this.addId, );
+      }else{
+        // 获取图片ID数组
+        const imageIds = selectedInfo.map(item => item.imageId);
+
+        // 获取operId（假设所有选中图片属于同一组，使用第一个）
+        const operId = selectedInfo[0].operId;
+
+        console.log('选中的图片IDs:', imageIds);
+        console.log('操作ID:', operId);
+
+        // 调用确认接口
+        this.handleConfirm(operId, imageIds);
       }
-      // 提取 operId 和 imageId
+
-      const imageIds = selectedItems.map(item => item.id);
+
-      const operId = selectedItems[0].operId; // 所有图片的 operId 应该一致
-      // 调用确认接口
-      this.handleConfirm(operId,imageIds);
     },
 
     async handleConfirm(operId,imageIds) {
@@ -439,7 +551,26 @@ export default {
 
     toggleSidebar() {
       this.isSidebarVisible = !this.isSidebarVisible;
-    }
+    },
+
+
+    initializeSelectedImages(records) {
+      // 清空当前选中状态
+      this.selectedImages = {};
+      // 遍历所有分组和图片
+      records.forEach((record, groupIndex) => {
+        if (record.fileVoList && Array.isArray(record.fileVoList)) {
+          record.fileVoList.forEach((fileItem, imageIndex) => {
+            // 如果 isActive 为 "1"，则默认选中
+            if (fileItem.isActive === "1") {
+              const key = `${groupIndex}-${imageIndex}`;
+              this.$set(this.selectedImages, key, true);
+            }
+          });
+        }
+      });
+    },
+
   },
 }
 </script>

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

@@ -83,17 +83,7 @@
 </template>
 
 <script>
-import {
+import {getAllImagelist} from "@/api/imageCaptioning/imageLibrary";
-  getRole,
-  delRole,
-  addRole,
-  updateRole,
-  dataScope,
-  changeRoleStatus,
-  deptTreeSelect
-} from "@/api/system/role"
-import {treeselect as menuTreeselect, roleMenuTreeselect} from "@/api/system/menu"
-import {getMaterialListAPI} from "@/api/publicService/proMaterials";
 
 export default {
   name: "imageCaptioningLibrary",
@@ -107,7 +97,8 @@ export default {
         pageSize: 10,
         roleName: undefined,
         roleKey: undefined,
-        status: undefined
+        status: undefined,
+        operaType: 2
       },
       // 表单参数
       form: {},
@@ -131,7 +122,7 @@ export default {
     },
     /** 查询角色列表 */
     getList() {
-      getMaterialListAPI().then(response => {
+      getAllImagelist(this.queryParams).then(response => {
         this.proMaterialsListAll = response.rows;
         this.total = response.total || 0;
         console.log(this.proMaterialsListAll)

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

@@ -35,7 +35,6 @@
         :image-results="imageResults"
         :selected-images="selectedImages"
         :file-list="fileList"
-        :is-sure="isSure"
         @hand-click="handleHandClick"
         @confirm-results="confirmResults"
         @file-change="handleFileChange"
@@ -81,7 +80,7 @@ export default {
       imageResults: [],
       selectedImages: {}, // 用于跟踪选中的图片
       isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
-      isSure:'', //小图标，确定按钮 0-未确定 1-已确定
+      addId: null,
     }
   },
 
@@ -91,10 +90,9 @@ export default {
   },
 
   methods: {
-
     async getImageListAPI() {
       try {
-        const res = await getImageListAPI({operaType: 1})
+        const res = await getImageListAPI({operaType: 2})
         // 判断返回码和数据
         if (res.code === 200 && res.data && Array.isArray(res.data)) {
           this.labelList = res.data.map(item => ({
@@ -116,6 +114,7 @@ export default {
       this.selectedImages = {};
       this.showNewAnnotation = true;
       this.showNewAnnotationAdd = false;
+      this.addId ='';
     },
 
     startUpload() {
@@ -149,26 +148,39 @@ export default {
       originalFileList.forEach(file => {
         formData.append('files', file.raw); // 使用 raw 字段获取原始文件对象
       });
-
+      formData.append("id", this.addId)
       addImageEvaluateAPI(formData)
         .then(res => {
           loading.close();
           if (res.code === 200 && res.data && Array.isArray(res.data)) {
             // 处理成功响应
-            const record = res.data[0]; // 获取第一条记录
+            this.addId = res.data[0].operaId;
-
+            let allImageResults = [];
-            // 设置图片结果
+            res.data.forEach(record => {
-            this.imageResults = record.fileVoList.map(item => ({
+              this.addId = record.operaId;
-              url: item.bjUrl || "未找到图片地址",
+              const fileResults = record.fileVoList.map((item, index) => ({
-              id: item.imageId || item.id,
+                url: item.bjUrl || item.url,
-              name: item.originalName,
+                id: item.imageId || index,
-              contentImage: item.contentImage,
+                name: item.originalName,
-              fileSize: item.fileSize,
+                contentImage: item.contentImage,
-              operId: res.data[0].id , // 操作ID
+                fileSize: item.fileSize,
-            }));
+                operId: record.id,
-
-            this.isSure = record.isSure;
 
+                overallScore: item.overallScore,
+                clarity: item.clarity,
+                cleanliness: item.cleanliness,
+                compressMarks: item.compressMarks,
+                impression: item.impression,
+                balance: item.balance,
+                detail: item.detail,
+              }));
+              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;
@@ -184,6 +196,18 @@ export default {
         });
     },
 
+    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;
       // 这里可以添加加载历史记录数据的逻辑
@@ -242,20 +266,32 @@ export default {
     async generateTestData(recordId) {
       // 后端获取的数据
       try {
-        const res = await getImageListDetailsAPI({id: recordId, operaType: 1})
+        const res = await getImageListDetailsAPI({id: recordId, operaType: 2})
         // 判断返回码和数据
         if (res.code === 200 && res.data && Array.isArray(res.data)) {
-          // 处理图片结果数据
+          this.addId = res.data[0].operaId;
-          this.imageResults = res.data[0].fileVoList.map((item, index) => ({
-            url: item.bjUrl || item.url,  // 使用 bjUrl 作为图片URL
-            id: item.imageId || index,    // 使用 imageId 作为ID
-            name: item.originalName,      // 原始文件名
-            contentImage: item.contentImage, // 图片内容标签
-            fileSize: item.fileSize,       // 文件大小
-            operId: res.data[0].id , // 操作ID
-          }));
 
-          this.isSure = res.data[0].isSure;
+          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,
+            }));
+            allImageResults = allImageResults.concat(fileResults);
+          });
+          this.imageResults = allImageResults;
         }
       } catch (error) {
         console.error('获取列表异常:', error)