From 88c29b9daed3a5001edae3d3a7e9c63c049a13c8 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 26 Nov 2025 16:11:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/HistoryViewUn.vue              | 188 +++---
 .../components/ImageResults.vue               |  77 ++-
 .../image-captioning/index.vue                |   3 +
 .../image-evaluate-library/index.vue          | 553 ++++++++++--------
 .../imageCaptioning/image-evaluate/index.vue  |   7 +-
 5 files changed, 487 insertions(+), 341 deletions(-)

diff --git a/src/views/imageCaptioning/image-captioning/components/HistoryViewUn.vue b/src/views/imageCaptioning/image-captioning/components/HistoryViewUn.vue
index ea26359..fef8283 100644
--- a/src/views/imageCaptioning/image-captioning/components/HistoryViewUn.vue
+++ b/src/views/imageCaptioning/image-captioning/components/HistoryViewUn.vue
@@ -1,109 +1,135 @@
 <template>
-  <div class="history-content">
-    <!-- 可滚动区域 -->
-    <div class="scrollable-content">
-      <ImageResults
-        :is-evaluate="1"
-        :upload-info="uploadInfo"
-        :image-results="imageResults"
-        :selected-images="selectedImages"
-        @hand-click="handleHandClickFromChild"
-        @confirm-results="$emit('confirm-results')"
-      />
-    </div>
+    <div class="history-content">
+        <!-- 可滚动区域 -->
+        <div class="scrollable-content">
+            <ImageResults
+                :is-evaluate="1"
+                :upload-info="uploadInfo"
+                :image-results="imageResults"
+                :selected-images="selectedImages"
+                @hand-click="handleHandClickFromChild"
+                @confirm-results="$emit('confirm-results')"
+            />
+        </div>
 
-    <!-- 固定在底部的区域 -->
-    <div class="fixed-bottom-area">
-      <!-- 标签选择区域 -->
-      <TagSelector
-        :tags="tags"
-        :visible-tags="visibleTags"
-        :selected-tag="selectedTag"
-        @toggle-tag="$emit('toggle-tag', $event)"
-        @toggle-all-tags="$emit('toggle-all-tags')"
-      />
+        <!-- 固定在底部的区域 -->
+        <div class="fixed-bottom-area">
+            <!-- 标签选择区域 -->
+            <TagSelector
+                :tags="tags"
+                :visible-tags="visibleTags"
+                :selected-tag="selectedTag"
+                @toggle-tag="$emit('toggle-tag', $event)"
+                @toggle-all-tags="$emit('toggle-all-tags')"
+            />
 
-      <!-- 图片上传区域 -->
-      <FileUploader
-        :file-list="fileList"
-        :selected-tag="selectedTag"
-        @file-change="(file, fileList) => $emit('file-change', file, fileList)"
-        @remove-image="(index) => $emit('remove-image', index)"
-        @start-upload="$emit('start-upload')"
-      />
+            <!-- 输入备注 -->
+            <el-input
+                :rows="1"
+                placeholder="请输入备注"
+                type="textarea"
+                v-model="remarkInfo"
+            />
+
+            <!-- 图片上传区域 -->
+            <FileUploader
+                :file-list="fileList"
+                :selected-tag="selectedTag"
+                @file-change="
+                    (file, fileList) => $emit('file-change', file, fileList)
+                "
+                @remove-image="(index) => $emit('remove-image', index)"
+                @start-upload="$emit('start-upload', remarkInfo)"
+            />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import ImageResults from './ImageResultsUn.vue';
-import TagSelector from './TagSelector.vue';
-import FileUploader from './FileUploaderUn.vue';
+import ImageResults from './ImageResultsUn.vue'
+import TagSelector from './TagSelector.vue'
+import FileUploader from './FileUploaderUn.vue'
 import axios from 'axios'
-import {getToken} from '@/utils/auth'
+import { getToken } from '@/utils/auth'
 
 export default {
-  name: "HistoryView",
-  components: {
-    ImageResults,
-    TagSelector,
-    FileUploader
-  },
-  props: {
-    uploadInfo: {
-      type: String,
-      default: ''
+    name: 'HistoryView',
+    components: {
+        ImageResults,
+        TagSelector,
+        FileUploader,
     },
-    imageResults: {
-      type: Array,
-      default: () => []
+    data() {
+        return {
+            remarkInfo: '',
+        }
     },
-    selectedImages: {
-      type: Object,
-      default: () => ({})
+    props: {
+        uploadInfo: {
+            type: String,
+            default: '',
+        },
+        imageResults: {
+            type: Array,
+            default: () => [],
+        },
+        selectedImages: {
+            type: Object,
+            default: () => ({}),
+        },
+        tags: {
+            type: Array,
+            default: () => [],
+        },
+        visibleTags: {
+            type: Array,
+            default: () => [],
+        },
+        selectedTag: {
+            type: Array,
+            default: () => [],
+        },
+        fileList: {
+            type: Array,
+            default: () => [],
+        },
     },
-    tags: {
-      type: Array,
-      default: () => []
+    methods: {
+        handleHandClickFromChild(result, index) {
+            this.$emit('hand-click', result, index)
+        },
     },
-    visibleTags: {
-      type: Array,
-      default: () => []
+
+    watch: {
+        imageResults: {
+            handler(newVal) {
+                if (newVal.length > 0) {
+                    this.remarkInfo = newVal[0].remark
+                }
+            },
+            immediate: true,
+        },
     },
-    selectedTag: {
-      type: Array,
-      default: () => []
-    },
-    fileList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  methods: {
-    handleHandClickFromChild(result, index) {
-      this.$emit('hand-click', result, index);
-    }
-  }
 }
 </script>
 
 <style scoped>
 .history-content {
-  height: 100%;
-  width: 60%;
-  margin-left: 22%;
-  display: flex;
-  flex-direction: column;
+    height: 100%;
+    width: 60%;
+    margin-left: 22%;
+    display: flex;
+    flex-direction: column;
 }
 
 .scrollable-content {
-  flex: 1;
-  overflow-y: auto;
+    flex: 1;
+    overflow-y: auto;
 }
 
 .fixed-bottom-area {
-  position: sticky;
-  bottom: 0;
-  padding-top: 20px;
+    position: sticky;
+    bottom: 0;
+    padding-top: 20px;
 }
 </style>
diff --git a/src/views/imageCaptioning/image-captioning/components/ImageResults.vue b/src/views/imageCaptioning/image-captioning/components/ImageResults.vue
index e5854a0..7a6d91b 100644
--- a/src/views/imageCaptioning/image-captioning/components/ImageResults.vue
+++ b/src/views/imageCaptioning/image-captioning/components/ImageResults.vue
@@ -44,7 +44,7 @@
                             "
                             :src="result.url"
                             fit="contain"
-                            @click="onClickImage(result)"
+                            @click="onClickImage(result, group.isSure)"
                         >
                             <div slot="error" class="image-slot">
                                 <i class="el-icon-picture-outline"></i>
@@ -248,7 +248,7 @@
             :before-close="handleCloseImageDialog"
         >
             <template #title>
-                <span>图片标注</span>
+                <span>{{ isSure == 1 ? '图片查看' : '图片标注' }}</span>
             </template>
             <div v-if="currentImage" class="annotation-dialog">
                 <div class="annotation-preview">
@@ -309,14 +309,14 @@
                     </div>
                     <div class="annotation-buttons">
                         <el-button
-                            v-if="!isReAnnotating"
+                            v-if="!isReAnnotating && isSure != 1"
                             type="primary"
                             size="small"
                             @click="startReAnnotation"
                         >
                             重新标注
                         </el-button>
-                        <template v-else>
+                        <template v-if="isReAnnotating && isSure != 1">
                             <el-button size="small" @click="cancelReAnnotation">
                                 取消标注
                             </el-button>
@@ -445,6 +445,7 @@ export default {
             ],
 
             imgSrc: '',
+            isSure: null,
         }
     },
     created() {
@@ -485,11 +486,12 @@ export default {
         },
 
         // 点击图片显示弹框
-        onClickImage(image) {
+        onClickImage(image, isSure = null) {
             console.log('image', image)
             if (!image || !image.url) {
                 return
             }
+            this.isSure = isSure
             this.currentImage = image
             this.imgSrc = image.url
             this.imageDialogVisible = true
@@ -506,6 +508,10 @@ export default {
         },
 
         startReAnnotation() {
+            if (this.isSure == 1) {
+                this.$message.warning('该图片已确认，无法重新标注')
+                return
+            }
             this.isReAnnotating = true
             this.annotationCoords = null
             this.annotationType = ''
@@ -779,6 +785,28 @@ export default {
                 finalCanvas.height = this.originalSize.height
                 const finalCtx = finalCanvas.getContext('2d')
 
+                // 根据图片尺寸计算缩放比例，确保在不同分辨率下都能清晰显示
+                // 使用图片的平均尺寸作为基准，计算缩放因子
+                const avgSize =
+                    (this.originalSize.width + this.originalSize.height) / 2
+                const baseSize = 1000 // 基准尺寸（1000px）
+                // 使用对数缩放，避免过大图片时缩放因子过大
+                // 缩放因子范围：0.8 - 3.0
+                const scaleFactor = Math.max(
+                    0.8,
+                    Math.min(3.0, Math.sqrt(avgSize / baseSize)),
+                )
+
+                // 根据缩放因子动态计算线条宽度和字体大小
+                const baseLineWidth = 1.5
+                const lineWidth = baseLineWidth * scaleFactor
+                const baseFontSize = 12
+                const fontSize = baseFontSize * scaleFactor
+                const baseMargin = 2
+                const margin = baseMargin * scaleFactor
+                const basePadding = 2
+                const padding = basePadding * scaleFactor
+
                 // 加载原始图片
                 const img = new Image()
                 img.crossOrigin = 'Anonymous'
@@ -795,15 +823,50 @@ export default {
 
                         // 绘制所有标注框
                         this.annotations.forEach((annotation) => {
-                            const { coords } = annotation
+                            const { coords, typeName } = annotation
+                            // 绘制标注框
                             finalCtx.strokeStyle = '#03FB02'
-                            finalCtx.lineWidth = 1.5
+                            finalCtx.lineWidth = lineWidth
                             finalCtx.strokeRect(
                                 coords.x1,
                                 coords.y1,
                                 coords.x2 - coords.x1,
                                 coords.y2 - coords.y1,
                             )
+
+                            // 绘制类型名称标签
+                            if (typeName) {
+                                // 设置字体
+                                finalCtx.font = `${fontSize}px Arial`
+                                finalCtx.textBaseline = 'top'
+
+                                // 测量文字宽度
+                                const textMetrics =
+                                    finalCtx.measureText(typeName)
+                                const textWidth = textMetrics.width
+                                const textHeight = fontSize
+
+                                // 标签位置（标注框左上角 + margin）
+                                const labelX = coords.x1 + margin
+                                const labelY = coords.y1 + margin
+
+                                // 绘制背景矩形
+                                finalCtx.fillStyle = '#01CB04'
+                                finalCtx.fillRect(
+                                    labelX,
+                                    labelY,
+                                    textWidth + padding * 2,
+                                    textHeight + padding * 2,
+                                )
+
+                                // 绘制文字
+                                finalCtx.fillStyle = '#ffffff'
+                                finalCtx.fillText(
+                                    typeName,
+                                    labelX + padding,
+                                    labelY + padding,
+                                )
+                            }
                         })
 
                         resolve()
diff --git a/src/views/imageCaptioning/image-captioning/index.vue b/src/views/imageCaptioning/image-captioning/index.vue
index f817102..ea3804d 100644
--- a/src/views/imageCaptioning/image-captioning/index.vue
+++ b/src/views/imageCaptioning/image-captioning/index.vue
@@ -265,6 +265,8 @@ export default {
                                 isSure: record.isSure,
                                 operId: record.operaId,
                                 id: record.id,
+                                isSure: record.isSure,
+                                remark: record.remark,
                             }),
                         )
                         // 初始化选中状态 - 根据 isActive 字段
@@ -528,6 +530,7 @@ export default {
                             operId: record.operaId,
                             id: record.id,
                             remark: record.remark,
+                            isSure: record.isSure,
                         }),
                     )
 
diff --git a/src/views/imageCaptioning/image-evaluate-library/index.vue b/src/views/imageCaptioning/image-evaluate-library/index.vue
index 07981ee..0e45c26 100644
--- a/src/views/imageCaptioning/image-evaluate-library/index.vue
+++ b/src/views/imageCaptioning/image-evaluate-library/index.vue
@@ -1,48 +1,86 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" >
-      <el-form-item prop="date">
-        <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="date">
+                <el-date-picker
+                    v-model="queryParams.operaTime"
+                    type="date"
+                    placeholder="选择日期"
+                >
+                </el-date-picker>
+            </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>
+            <el-form-item prop="remark">
+                <el-input
+                    v-model="queryParams.remark"
+                    placeholder="请输入备注"
+                    clearable
+                    style="width: 240px"
+                />
+            </el-form-item>
 
-    <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="200"
-            :borderRadius="10"
-            :width="itemWidth"
-            :src="item.bjUrl"
-          />
-        </div>
+            <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="card-content">
-          <div class="card-footer">
-            <div class="person-info">
-              <span class="name">综合得分:{{ item.overallScore }}</span>
-              <span class="name">{{ item.dictValue }}</span>
-              <span class="date">{{ item.operaName }}</span>
-            </div>
-<!--            <div class="tags">
+        <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="200"
+                        :borderRadius="10"
+                        :width="itemWidth"
+                        :src="item.bjUrl"
+                    />
+                </div>
+
+                <!-- 卡片内容 -->
+                <div class="card-content">
+                    <div class="card-footer">
+                        <div class="person-info">
+                            <span class="name"
+                                >综合得分:{{ item.overallScore }}</span
+                            >
+                            <span class="name">{{ item.dictValue }}</span>
+                            <span class="date">{{ item.operaName }}</span>
+                        </div>
+
+                        <div class="person-info">
+                            <span class="name">备注:{{ item.remark }}</span>
+                        </div>
+                        <!--            <div class="tags">
               <div class="tag-row">
                 <span class="tag-item" style="padding-left: 16px;">清晰度: {{ item.clarity }}分</span>
                 <span class="tag-item" style="padding-left: 16px;">干净度: {{ item.cleanliness }}分</span>
@@ -54,277 +92,290 @@
                 <span class="tag-item">细节体验: {{ item.detail }}分</span>
               </div>
             </div>-->
-            <div style="border-top: 1px solid #CFD4D7;margin-top: 10px"></div>
-            <div class="action-buttons">
-              <el-button
-                type="danger"
-                size="mini"
-                @click="handleDelete(item)"
-                plain
-                icon="el-icon-delete"
-              >
-                删除
-              </el-button>
+                        <div
+                            style="
+                                border-top: 1px solid #cfd4d7;
+                                margin-top: 10px;
+                            "
+                        ></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>
         </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>
-
-    <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 {deleteFile, exportImages, getAllImagelist} from "@/api/imageCaptioning/imageLibrary";
+import {
+    deleteFile,
+    exportImages,
+    getAllImagelist,
+} from '@/api/imageCaptioning/imageLibrary'
 
 export default {
-  name: "imageCaptioningLibrary",
-  data() {
-    return {
-      // 总条数
-      total: 0,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 8,
-        date: '',
-        operaType: 2,
-        operaTime:''
-      },
-      // 表单参数
-      form: {},
-      proMaterialsListAll: [], // 所有材料列表
-      showProMaterialsDuctList: [], // 需要显示的材料列表
-      itemWidth: 0, // 材料卡片宽度
-    }
-  },
-  created() {
-    this.getList();
-  },
-  mounted() {
-    this.getItemWidth()
-  },
-
-
-  methods: {
-    // 获取产品卡片宽度
-    getItemWidth() {
-      this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 320) / 4
+    name: 'imageCaptioningLibrary',
+    data() {
+        return {
+            // 总条数
+            total: 0,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 8,
+                date: '',
+                operaType: 2,
+                operaTime: '',
+                remark: '',
+            },
+            // 表单参数
+            form: {},
+            proMaterialsListAll: [], // 所有材料列表
+            showProMaterialsDuctList: [], // 需要显示的材料列表
+            itemWidth: 0, // 材料卡片宽度
+        }
     },
-    /** 查询角色列表 */
-    getList() {
-      getAllImagelist(this.queryParams).then(response => {
-        this.proMaterialsListAll = response.rows;
-        this.total = response.total || 0;
-        console.log(this.proMaterialsListAll)
-        this.showProMaterialsDuctList = this.proMaterialsListAll;
-      })
+    created() {
+        this.getList()
     },
-    /** 搜索按钮操作 */
-    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()
+    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(() => {
-        //调用删除的方法
-        deleteFile({"imageId":item.imageId}).then(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
+                console.log(this.proMaterialsListAll)
+                this.showProMaterialsDuctList = this.proMaterialsListAll
+            })
+        },
+        /** 搜索按钮操作 */
+        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('删除失败')
-          }
-        })
-      }).catch(() => {
-        this.$message.info('已取消删除')
-      })
-    }
-  }
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm('queryForm')
+            // 重置日期为null而不是空字符串
+            this.queryParams.operaTime = null
+            this.handleQuery()
+        },
+
+        /** 导出按钮操作 */
+        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(() => {
+                    //调用删除的方法
+                    deleteFile({ imageId: item.imageId }).then((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: 20px;
+    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: 20px;
 }
 
 .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: 43%;
+    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: 43%;
 }
 
 .card-image {
-  height: 191px;
-  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: 191px;
+    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;
+    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;
-  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-direction: column;
-  margin: 10px 18px 0 18px;
-  gap: 6px;
+    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;
+    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;
+    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 0px 18px;
+    display: flex;
+    justify-content: flex-end;
+    margin: 10px 18px 0px 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>
diff --git a/src/views/imageCaptioning/image-evaluate/index.vue b/src/views/imageCaptioning/image-evaluate/index.vue
index 250671a..dccb8ad 100644
--- a/src/views/imageCaptioning/image-evaluate/index.vue
+++ b/src/views/imageCaptioning/image-evaluate/index.vue
@@ -87,6 +87,7 @@ export default {
             selectedImages: {}, // 用于跟踪选中的图片
             isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
             addId: '',
+            remarkInfo: '',
         }
     },
 
@@ -123,7 +124,7 @@ export default {
             this.addId = ''
         },
 
-        startUpload() {
+        startUpload(remarkInfo = '') {
             console.log('开始上传')
 
             if (this.fileList.length === 0) {
@@ -156,7 +157,7 @@ export default {
             })
             const params = {
                 id: this.addId,
-                remark: this.remarkInfo,
+                remark: remarkInfo || this.remarkInfo,
             }
             formData.append('params', JSON.stringify(params))
             // formData.append("id", this.addId)
@@ -190,6 +191,7 @@ export default {
                                     balance: item.balance,
                                     detail: item.detail,
                                     dictValue: item.dictValue,
+                                    remark: record.remark,
                                 }),
                             )
                             allImageResults =
@@ -316,6 +318,7 @@ export default {
                                 balance: item.balance,
                                 detail: item.detail,
                                 dictValue: item.dictValue,
+                                remark: record.remark,
                             }),
                         )
                         allImageResults = allImageResults.concat(fileResults)