From b85889486ce783aba5b48f7ea6e62f617b380762 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 26 Nov 2025 11:01:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=87=E6=B3=A8=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../image-captioning-library/index.vue        | 621 ++++++++-------
 .../image-captioning/index.vue                |   2 +-
 .../imageCaptioning/image-evaluate/index.vue  | 720 +++++++++---------
 3 files changed, 704 insertions(+), 639 deletions(-)

diff --git a/src/views/imageCaptioning/image-captioning-library/index.vue b/src/views/imageCaptioning/image-captioning-library/index.vue
index d1479ea..f57fa07 100644
--- a/src/views/imageCaptioning/image-captioning-library/index.vue
+++ b/src/views/imageCaptioning/image-captioning-library/index.vue
@@ -1,356 +1,397 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" >
-      <el-form-item prop="operaTime">
-        <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="operaTime">
+                <el-date-picker
+                    v-model="queryParams.operaTime"
+                    type="date"
+                    placeholder="标注日期"
+                >
+                </el-date-picker>
+            </el-form-item>
 
+            <el-form-item label="" prop="contentImage">
+                <el-select
+                    v-model="queryParams.operaName"
+                    placeholder="请选择"
+                    clearable
+                    filterable
+                    style="width: 240px"
+                >
+                    <el-option
+                        v-for="item in contentImageOptions"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.name"
+                    >
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="" prop="userName">
+                <el-input
+                    v-model="queryParams.userName"
+                    placeholder="审核人"
+                    clearable
+                    style="width: 240px"
+                    @keyup.enter.native="handleQuery"
+                />
+            </el-form-item>
 
-      <el-form-item label="" prop="contentImage">
-        <el-select
-          v-model="queryParams.operaName"
-          placeholder="请选择"
-          clearable
-          filterable
-          style="width: 240px">
-            <el-option
-              v-for="item in contentImageOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.name"
+            <el-form-item label="" prop="remark">
+                <el-input
+                    v-model="queryParams.remark"
+                    placeholder="备注"
+                    clearable
+                    style="width: 240px"
+                    @keyup.enter.native="handleQuery"
+                />
+            </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>
+
+        <div class="content-area" ref="servicesGrid">
+            <div
+                :key="item.id"
+                class="services-grid"
+                v-for="item in showProMaterialsDuctList"
             >
-            </el-option>
+                <!-- 图片区域 -->
+                <div class="card-image">
+                    <ImagePreview
+                        style="margin-top: 10px"
+                        :height="192"
+                        :borderRadius="10"
+                        :width="itemWidth"
+                        :src="item.bjUrl"
+                    />
+                </div>
 
-        </el-select>
-      </el-form-item>
-      <el-form-item label="" prop="userName">
-        <el-input
-          v-model="queryParams.userName"
-          placeholder="审核人"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
+                <!-- 卡片内容 -->
+                <div class="card-content">
+                    <div class="card-footer">
+                        <div class="person-info">
+                            <span class="name">{{ item.userName }}</span>
+                            <span class="date">{{ item.createTime }}</span>
+                        </div>
+                        <div class="person-info">
+                            <span class="name">{{ item.remark }}</span>
+                        </div>
+                        <div class="tags">
+                            <span class="title-desc">{{
+                                item.contentImage
+                            }}</span>
+                            <!--              <el-tooltip :content="item.contentImage" placement="top" :effect="'light'" :enterable="false">-->
+                            <!--                <span class="title-desc">{{ item.contentImage }}</span>-->
+                            <!--              </el-tooltip>-->
+                        </div>
+                        <div style="border-top: 1px solid #cfd4d7"></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>
+
+        <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            :page-sizes="[8, 16, 32, 64]"
+            @pagination="getList"
         />
-      </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>
-
-    <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="192"
-            :borderRadius="10"
-            :width="itemWidth"
-            :src="item.bjUrl"
-          />
-        </div>
-
-        <!-- 卡片内容 -->
-        <div class="card-content">
-          <div class="card-footer">
-            <div class="person-info">
-              <span class="name">{{ item.userName }}</span>
-              <span class="date">{{ item.createTime }}</span>
-            </div>
-            <div class="tags">
-              <span class="title-desc">{{ item.contentImage }}</span>
-<!--              <el-tooltip :content="item.contentImage" placement="top" :effect="'light'" :enterable="false">-->
-<!--                <span class="title-desc">{{ item.contentImage }}</span>-->
-<!--              </el-tooltip>-->
-            </div>
-            <div style="border-top: 1px solid #CFD4D7;"></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>
-
-    <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 {getAllImagelist, deleteFile, exportImages} from "@/api/imageCaptioning/imageLibrary";
-import {getSelectedAPI} from "@/api/imageCaptioning/imageCaptioning";
+import {
+    getAllImagelist,
+    deleteFile,
+    exportImages,
+} from '@/api/imageCaptioning/imageLibrary'
+import { getSelectedAPI } from '@/api/imageCaptioning/imageCaptioning'
 
 export default {
-  name: "imageCaptioningLibrary",
-  data() {
-    return {
-      // 总条数
-      total: 0,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 8,
-        operaTime: '',
-        operaType: 1,
-        operaName: '',
-        userName: ''
-      },
-      // 表单参数
-      form: {},
-      proMaterialsListAll: [], // 所有材料列表
-      showProMaterialsDuctList: [], // 需要显示的材料列表
-      itemWidth: 0, // 材料卡片宽度
-      contentImageOptions:[]
-    }
-  },
-  created() {
-    this.getList();
-    this.getContentImageOptions();
-  },
-  mounted() {
-    this.getItemWidth()
-  },
-
-
-  methods: {
-    // 获取产品卡片宽度
-    getItemWidth() {
-      this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 320) / 4
+    name: 'imageCaptioningLibrary',
+    data() {
+        return {
+            // 总条数
+            total: 0,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 8,
+                operaTime: '',
+                operaType: 1,
+                operaName: '',
+                userName: '',
+            },
+            // 表单参数
+            form: {},
+            proMaterialsListAll: [], // 所有材料列表
+            showProMaterialsDuctList: [], // 需要显示的材料列表
+            itemWidth: 0, // 材料卡片宽度
+            contentImageOptions: [],
+        }
     },
-    /** 查询角色列表 */
-    getList() {
-      getAllImagelist(this.queryParams).then(response => {
-        this.proMaterialsListAll = response.rows;
-        this.total = response.total || 0;
-        this.showProMaterialsDuctList = this.proMaterialsListAll;
-      })
+    created() {
+        this.getList()
+        this.getContentImageOptions()
     },
-    getContentImageOptions() {
-      getSelectedAPI().then(response => {
-        this.contentImageOptions = response.data;
-      })
-    },
-    /** 搜索按钮操作 */
-    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.queryParams.operaName = ''
-      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(() => {
-        //调用删除的方法
-        console.log('删除:', item)
-        deleteFile({"imageId":item.imageId}).then(response => {
-          console.log('删除结果:', 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
+                this.showProMaterialsDuctList = this.proMaterialsListAll
+            })
+        },
+        getContentImageOptions() {
+            getSelectedAPI().then((response) => {
+                this.contentImageOptions = response.data
+            })
+        },
+        /** 搜索按钮操作 */
+        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('删除失败')
-          }
-        })
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm('queryForm')
+            this.queryParams.operaTime = null
+            this.queryParams.operaName = ''
+            this.handleQuery()
+        },
 
-      }).catch(() => {
-        this.$message.info('已取消删除')
-      })
-    }
-  }
+        /** 导出按钮操作 */
+        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(() => {
+                    //调用删除的方法
+                    console.log('删除:', item)
+                    deleteFile({ imageId: item.imageId }).then((response) => {
+                        console.log('删除结果:', response)
+                        if (response.code === 200) {
+                            this.$message.success('删除成功')
+                            this.getList()
+                        } else {
+                            this.$message.error('删除失败')
+                        }
+                    })
+                })
+                .catch(() => {
+                    this.$message.info('已取消删除')
+                })
+        },
+    },
 }
 </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: 30px;
+    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: 30px;
 }
 
 .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: 47%;
+    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: 47%;
 }
 
 .card-image {
-  height: 200px;
-  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: 200px;
+    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;
-  margin-top: 4px;
+    display: flex;
+    flex-direction: column;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    min-height: 24px;
+    margin-top: 4px;
 }
 
 .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-wrap: wrap;
-  margin: 10px 18px 5px 18px;
-  height: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 10px 18px 5px 18px;
+    height: 20px;
 }
 
 .tag-item {
-  background-color: #e6f7ff;
-  color: #0066cc;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 12px;
+    background-color: #e6f7ff;
+    color: #0066cc;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
 }
 
 .action-buttons {
-  display: flex;
-  justify-content: flex-end;
-  margin: 10px 18px 10px 18px;
+    display: flex;
+    justify-content: flex-end;
+    margin: 10px 18px 10px 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-captioning/index.vue b/src/views/imageCaptioning/image-captioning/index.vue
index c61fc66..16f2ec4 100644
--- a/src/views/imageCaptioning/image-captioning/index.vue
+++ b/src/views/imageCaptioning/image-captioning/index.vue
@@ -224,7 +224,7 @@ export default {
             // 修改参数处理方式，与之前的params 保持一致
             const params = {
                 param: selectedTagNames,
-                remark: '备注996',
+                remark: this.remarkInfo,
                 id: this.addId,
             }
             formData.append('params', JSON.stringify(params))
diff --git a/src/views/imageCaptioning/image-evaluate/index.vue b/src/views/imageCaptioning/image-evaluate/index.vue
index 2392964..250671a 100644
--- a/src/views/imageCaptioning/image-evaluate/index.vue
+++ b/src/views/imageCaptioning/image-evaluate/index.vue
@@ -1,385 +1,409 @@
 <template>
-  <div class="image-captioning-container">
-    <!-- 左侧导航栏 -->
-    <Sidebar
-      :is-sidebar-visible="isSidebarVisible"
-      :label-list="labelList"
-      :selected-item="selectedItem"
-      @toggle-sidebar="toggleSidebar"
-      @create-new-label="createNewLabel"
-      @select-item="selectItem"
-    />
+    <div class="image-captioning-container">
+        <!-- 左侧导航栏 -->
+        <Sidebar
+            :is-sidebar-visible="isSidebarVisible"
+            :label-list="labelList"
+            :selected-item="selectedItem"
+            @toggle-sidebar="toggleSidebar"
+            @create-new-label="createNewLabel"
+            @select-item="selectItem"
+        />
 
-    <!-- 主内容区域 -->
-    <div class="main-content" v-if="showNewAnnotation">
-      <!-- 主内容区域-新增的 -->
-      <div class="add-content">
-        <!-- 标题 -->
-        <div class="welcome-message">
-          嗨！我是你的图像评估助理
+        <!-- 主内容区域 -->
+        <div class="main-content" v-if="showNewAnnotation">
+            <!-- 主内容区域-新增的 -->
+            <div class="add-content">
+                <!-- 标题 -->
+                <div class="welcome-message"> 嗨！我是你的图像评估助理 </div>
+
+                <!-- 输入备注 -->
+                <el-input
+                    :rows="1"
+                    placeholder="请输入备注"
+                    type="textarea"
+                    v-model="remarkInfo"
+                />
+
+                <!-- 图片上传区域 -->
+                <FileUploader
+                    :file-list="fileList"
+                    @file-change="handleFileChange"
+                    @remove-image="removeImage"
+                    @start-upload="startUpload"
+                />
+            </div>
         </div>
 
-        <!-- 图片上传区域 -->
-        <FileUploader
-          :file-list="fileList"
-          @file-change="handleFileChange"
-          @remove-image="removeImage"
-          @start-upload="startUpload"
-        />
-      </div>
+        <!-- 主内容区域-历史 -->
+        <div class="main-content" v-if="showNewAnnotationAdd">
+            <HistoryView
+                :image-results="imageResults"
+                :selected-images="selectedImages"
+                :file-list="fileList"
+                @hand-click="handleHandClick"
+                @confirm-results="confirmResults"
+                @file-change="handleFileChange"
+                @remove-image="removeImage"
+                @start-upload="startUpload"
+            />
+        </div>
     </div>
-
-    <!-- 主内容区域-历史 -->
-    <div class="main-content" v-if="showNewAnnotationAdd">
-      <HistoryView
-        :image-results="imageResults"
-        :selected-images="selectedImages"
-        :file-list="fileList"
-        @hand-click="handleHandClick"
-        @confirm-results="confirmResults"
-        @file-change="handleFileChange"
-        @remove-image="removeImage"
-        @start-upload="startUpload"
-      />
-    </div>
-  </div>
 </template>
 
 <script>
 import {
-  getImageListAPI,
-  getImageListDetailsAPI,
-  addImageEvaluateAPI,
-  updateImageSureAPI
-} from "@/api/imageCaptioning/imageEvaluate";
+    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";
+import Sidebar from '../image-captioning/components/Sidebar'
+import FileUploader from '../image-captioning/components/FileUploaderUn'
+import HistoryView from '../image-captioning/components/HistoryViewUn'
 export default {
-  name: "imageCaptioning",
-  components: {
-    Sidebar,
-    FileUploader,
-    HistoryView
-  },
-  data() {
-    return {
-      showNewAnnotation: true, // 控制新建标注界面的显示状态
-      showNewAnnotationAdd: false, // 控制历史界面的显示状态
+    name: 'imageCaptioning',
+    components: {
+        Sidebar,
+        FileUploader,
+        HistoryView,
+    },
+    data() {
+        return {
+            showNewAnnotation: true, // 控制新建标注界面的显示状态
+            showNewAnnotationAdd: false, // 控制历史界面的显示状态
 
-      // 导航栏数据
-      labelList: [],
-      selectedItem: null,
+            // 导航栏数据
+            labelList: [],
+            selectedItem: null,
 
-      // 文件上传相关
-      fileList: [],
-      showImageResults: false,
+            // 文件上传相关
+            fileList: [],
+            showImageResults: false,
 
-      // 图片识别结果
-      imageResults: [],
-      selectedImages: {}, // 用于跟踪选中的图片
-      isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
-      addId: '',
-    }
-  },
-
-  created() {
-    //查询左侧历史记录
-    this.getImageListAPI()
-  },
-
-  methods: {
-    async getImageListAPI() {
-      try {
-        const res = await getImageListAPI({operaType: 2})
-        // 判断返回码和数据
-        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
-          }))
+            // 图片识别结果
+            imageResults: [],
+            selectedImages: {}, // 用于跟踪选中的图片
+            isSidebarVisible: true, // 控制左侧导航栏显示/隐藏
+            addId: '',
         }
-      } catch (error) {
-        console.error('获取列表异常:', error)
-      }
     },
 
-    createNewLabel() {
-      this.selectedItem = null;
-      this.fileList = [];
-      this.showImageResults = false;
-      this.imageResults = [];
-      this.selectedImages = {};
-      this.showNewAnnotation = true;
-      this.showNewAnnotationAdd = false;
-      this.addId ='';
+    created() {
+        //查询左侧历史记录
+        this.getImageListAPI()
     },
 
-    startUpload() {
-      console.log('开始上传')
-
-      if (this.fileList.length === 0) {
-        this.$message.warning('请上传图片')
-        return
-      }
-
-      // 初始化 selectedImages
-      this.selectedImages = {};
-
-      // 显示加载状态
-      const loading = this.$loading({
-        lock: true,
-        text: '正在上传和识别图片...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      });
-
-      // 保存原始文件列表用于显示结果
-      const originalFileList = [...this.fileList];
-
-      // 清空上传预览区域
-      this.fileList = [];
-
-      // 创建 FormData 对象
-      const formData = new FormData();
-      // 添加文件
-      originalFileList.forEach(file => {
-        formData.append('files', file.raw); // 使用 raw 字段获取原始文件对象
-      });
-      const params = {
-        id: this.addId
-      };
-      formData.append('params', JSON.stringify(params));
-      // formData.append("id", this.addId)
-      addImageEvaluateAPI(formData)
-        .then(res => {
-          loading.close();
-          if (res.code === 200 && res.data && Array.isArray(res.data)) {
-            // 处理成功响应
-            this.addId = res.data[0].operaId;
-            let allImageResults = [];
-            res.data.forEach(record => {
-              this.addId = record.operaId;
-              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,
-                dictValue:item.dictValue
-              }));
-              allImageResults = allImageResults.concat(fileResults);
-            });
-            this.imageResults = allImageResults;
-            // 刷新左侧标签文本并选中对应标签
-            if (res.data.length > 0) {
-              this.refreshSidebarLabel(res.data[0].operaName, res.data[0].id);
+    methods: {
+        async getImageListAPI() {
+            try {
+                const res = await getImageListAPI({ operaType: 2 })
+                // 判断返回码和数据
+                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)
             }
-            this.showImageResults = true;
-            this.showNewAnnotation = false;
-            this.showNewAnnotationAdd = true;
-            this.$message.success('上传和识别完成');
-          } else {
-            this.$message.error('上传失败');
-          }
-        })
-        .catch(error => {
-          loading.close();
-          console.error('上传异常:', error);
-          this.$message.error('上传过程中出现错误');
-        });
+        },
+
+        createNewLabel() {
+            this.selectedItem = null
+            this.fileList = []
+            this.showImageResults = false
+            this.imageResults = []
+            this.selectedImages = {}
+            this.showNewAnnotation = true
+            this.showNewAnnotationAdd = false
+            this.addId = ''
+        },
+
+        startUpload() {
+            console.log('开始上传')
+
+            if (this.fileList.length === 0) {
+                this.$message.warning('请上传图片')
+                return
+            }
+
+            // 初始化 selectedImages
+            this.selectedImages = {}
+
+            // 显示加载状态
+            const loading = this.$loading({
+                lock: true,
+                text: '正在上传和识别图片...',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)',
+            })
+
+            // 保存原始文件列表用于显示结果
+            const originalFileList = [...this.fileList]
+
+            // 清空上传预览区域
+            this.fileList = []
+
+            // 创建 FormData 对象
+            const formData = new FormData()
+            // 添加文件
+            originalFileList.forEach((file) => {
+                formData.append('files', file.raw) // 使用 raw 字段获取原始文件对象
+            })
+            const params = {
+                id: this.addId,
+                remark: this.remarkInfo,
+            }
+            formData.append('params', JSON.stringify(params))
+            // formData.append("id", this.addId)
+            addImageEvaluateAPI(formData)
+                .then((res) => {
+                    loading.close()
+                    if (
+                        res.code === 200 &&
+                        res.data &&
+                        Array.isArray(res.data)
+                    ) {
+                        // 处理成功响应
+                        this.addId = res.data[0].operaId
+                        let allImageResults = []
+                        res.data.forEach((record) => {
+                            this.addId = record.operaId
+                            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,
+                                    dictValue: item.dictValue,
+                                }),
+                            )
+                            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
+                        this.$message.success('上传和识别完成')
+                    } else {
+                        this.$message.error('上传失败')
+                    }
+                })
+                .catch((error) => {
+                    loading.close()
+                    console.error('上传异常:', error)
+                    this.$message.error('上传过程中出现错误')
+                })
+        },
+
+        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
+            // 这里可以添加加载历史记录数据的逻辑
+            this.loadRecordData(item.id)
+        },
+
+        loadRecordData(recordId) {
+            // 模拟加载历史记录数据
+            const record = this.labelList.find((r) => r.id === recordId)
+            if (record) {
+                this.showNewAnnotation = false
+                this.showNewAnnotationAdd = true
+
+                // 这里可以添加实际的数据加载逻辑
+                this.fileList = [] // 清空文件列表
+                this.showImageResults = true // 显示识别结果
+                this.selectedImages = {} // 初始化选中状态
+                // 生成数据
+                this.generateTestData(recordId)
+            }
+        },
+
+        handleFileChange(file, fileList) {
+            if (file.raw) {
+                const reader = new FileReader()
+                reader.onload = (e) => {
+                    file.url = e.target.result
+                }
+                reader.readAsDataURL(file.raw)
+            }
+            // 延迟设置fileList，确保file.url已正确设置
+            setTimeout(() => {
+                this.fileList = fileList
+            }, 100)
+        },
+
+        removeImage(index) {
+            this.fileList.splice(index, 1)
+            this.$message.success('已删除文件')
+        },
+
+        // 处理手图标点击事件
+        handleHandClick(result, index) {
+            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: 2,
+                })
+                // 判断返回码和数据
+                if (res.code === 200 && res.data && Array.isArray(res.data)) {
+                    this.addId = res.data[0].operaId
+
+                    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,
+                                dictValue: item.dictValue,
+                            }),
+                        )
+                        allImageResults = allImageResults.concat(fileResults)
+                    })
+                    this.imageResults = allImageResults
+                }
+            } catch (error) {
+                console.error('获取列表异常:', error)
+            }
+        },
+
+        confirmResults() {
+            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
+        },
     },
-
-    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;
-      // 这里可以添加加载历史记录数据的逻辑
-      this.loadRecordData(item.id);
-    },
-
-    loadRecordData(recordId) {
-      // 模拟加载历史记录数据
-      const record = this.labelList.find(r => r.id === recordId);
-      if (record) {
-
-        this.showNewAnnotation = false;
-        this.showNewAnnotationAdd = true;
-
-        // 这里可以添加实际的数据加载逻辑
-        this.fileList = []; // 清空文件列表
-        this.showImageResults = true; // 显示识别结果
-        this.selectedImages = {}; // 初始化选中状态
-        // 生成数据
-        this.generateTestData(recordId);
-      }
-    },
-
-    handleFileChange(file, fileList) {
-      if (file.raw) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          file.url = e.target.result;
-        };
-        reader.readAsDataURL(file.raw);
-      }
-      // 延迟设置fileList，确保file.url已正确设置
-      setTimeout(() => {
-        this.fileList = fileList;
-      }, 100);
-    },
-
-    removeImage(index) {
-      this.fileList.splice(index, 1);
-      this.$message.success('已删除文件');
-    },
-
-    // 处理手图标点击事件
-    handleHandClick(result, index) {
-      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: 2})
-        // 判断返回码和数据
-        if (res.code === 200 && res.data && Array.isArray(res.data)) {
-          this.addId = res.data[0].operaId;
-
-          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,
-              dictValue:item.dictValue
-            }));
-            allImageResults = allImageResults.concat(fileResults);
-          });
-          this.imageResults = allImageResults;
-        }
-      } catch (error) {
-        console.error('获取列表异常:', error)
-      }
-    },
-
-    confirmResults(){
-      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;
-    }
-  },
 }
 </script>
 
 <style scoped>
 .image-captioning-container {
-  display: flex;
-  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%;
+    display: flex;
+    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%;
 }
 
 .main-content {
-  flex: 1;
-  padding: 40px;
-  overflow-y: auto;
+    flex: 1;
+    padding: 40px;
+    overflow-y: auto;
 }
 
 .add-content {
-  height: 55%;
-  width: 60%;
-  margin-top: 15%;
-  margin-left: 22%;
+    height: 55%;
+    width: 60%;
+    margin-top: 15%;
+    margin-left: 22%;
 }
 
 .welcome-message {
-  text-align: center;
-  font-size: 20px;
-  margin-bottom: 50px;
-  font-weight: 600;
-  color: #334249;
-  font-style: normal;
-  text-transform: none;
+    text-align: center;
+    font-size: 20px;
+    margin-bottom: 50px;
+    font-weight: 600;
+    color: #334249;
+    font-style: normal;
+    text-transform: none;
 }
 </style>