topage页面样式、布局和信息完善（缺复核记录）

check-ui/src/views/business/proofread/index.vue

@@ -34,13 +34,13 @@
             <div class="text-line">
               审核进度：{{item.reviewProgress}}%
             </div>
-            <!-- 已复审条目 -->
+            <!-- 已复核条目 -->
             <div class="text-line">
-              已复审条目数：{{item.backup2}}
+              已复核条目数：{{item.backup2}}
             </div>
-            <!-- 已复审进度 -->
+            <!-- 已复核进度 -->
             <div class="text-line">
-              复审进度：{{item.recheckProgress}}%
+              复核进度：{{item.recheckProgress}}%
             </div>
           </el-card>
         </el-col>
@@ -116,10 +116,10 @@ export default {
         console.log(response);
         this.photoList = response.rows;
 
-        // 计算审核进度和复审进度
+        // 计算审核进度和复核进度
         for (const book of this.photoList) {
           this.$set(book, 'reviewProgress', ((book.backup1 / 3444.0) * 100).toFixed(2));// backup1保存的是已审核条目数
-          this.$set(book, 'recheckProgress', ((book.backup2 / 3444.0) * 100).toFixed(2));// backup2保存的是已复审条目数
+          this.$set(book, 'recheckProgress', ((book.backup2 / 3444.0) * 100).toFixed(2));// backup2保存的是已复核条目数
         }
       } catch (error) {
         console.error("获取数据失败", error);

check-ui/src/views/business/proofread/topage.vue

@@ -6,9 +6,8 @@
       <div class="spinner"></div>
       <p>加载中...</p>
     </div>
-    <h2>当前为第{{ currentPage }}页</h2>
     <!-- 复核文本的对话框 -->
-    <el-dialog :visible.sync="RecheckDialog" width="80%">
+    <el-dialog :visible.sync="RecheckDialog" width="80%" class="recheck-dialog">
       <el-form :model="RecheckForm">
         <el-form-item label="条目截图" prop="imgCode">
           <el-image
@@ -19,15 +18,20 @@
           />
         </el-form-item>
         <el-form-item label="审核记录" prop="text">
-          <div v-for="(item, index) in RecheckForm.text" :key="index" style="margin-bottom: 10px;">
+          <div v-for="(item, index) in RecheckForm.text" :key="index" class="record-item">
             <!-- 时间 -->
-            <el-input v-model="RecheckForm.time[index]" disabled></el-input>
-            <!-- 用户名 -->
-            <el-input v-model="RecheckForm.userName[index]" disabled></el-input>
-            <!-- 审核记录 -->
-            <el-input v-model="RecheckForm.text[index]" ></el-input>
-
-            <el-button type="primary" @click="confirmRecheck(index)">复核通过</el-button>
+            <div class="record-time">
+              <el-input v-model="RecheckForm.time[index]" disabled></el-input>
+            </div>
+            <!-- 审核人/复核通过 -->
+            <div class="record-user">
+              <el-input v-model="RecheckForm.userName[index]" disabled></el-input>
+              <el-button type="primary" @click="confirmRecheck(index)">复核通过</el-button>
+            </div>
+            <!-- 复核内容 -->
+            <div class="record-content">
+              <el-input v-model="RecheckForm.text[index]" ></el-input>
+            </div>
           </div>
         </el-form-item>
       </el-form>
@@ -36,76 +40,169 @@
       </div>
 
     </el-dialog>
+
+    <!--  复核记录的对话框  -->
+    <el-dialog :visible.sync="RecheckRecordDialog" width="80%" class="record-dialog">
+      <el-form :model="RecheckRecordForm">
+        <el-form-item label="条目截图" prop="imgCode">
+          <el-image
+            v-if="RecheckRecordForm.imgCode"
+            :src="'data:image/png;base64,' + RecheckRecordForm.imgCode"
+            style="max-width: 100%; height: auto;"
+            fit="contain"
+          />
+        </el-form-item>
+        <el-form-item label="复核记录" prop="text">
+          <div v-for="(item, index) in RecheckRecordForm.text" :key="index" class="record-item"
+               :class="{
+          'final-record': RecheckRecordForm.isFinal[index], // 最终复核通过的记录
+          'review-record': RecheckRecordForm.code[index] === 'A02', // 复核记录
+          'check-record': RecheckRecordForm.code[index] === 'A01' // 审核记录
+        }"
+          >
+            <!-- 时间 -->
+            <div class="record-time">
+              <el-input v-model="RecheckRecordForm.time[index]" disabled></el-input>
+            </div>
+            <!-- 修改人 -->
+            <div class="record-user">
+              <el-input v-model="RecheckRecordForm.userName[index]" disabled></el-input>
+            </div>
+            <!-- 复核内容 -->
+            <div class="record-content">
+              <el-input v-model="RecheckRecordForm.text[index]" ></el-input>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
     <!-- 分页组件 -->
-<!--    <el-pagination-->
-<!--      v-if="totalpage > 0"-->
-<!--      :current-page="currentPage"-->
-<!--      :page-size="pageSize"-->
-<!--      :total="totalpage"-->
-<!--      @current-change="handlePageChange"-->
-<!--      layout="total, prev, pager, next, jumper"-->
-<!--    ></el-pagination>-->
-
-<!--    <div class="pagination">-->
-<!--      <el-pagination-->
-<!--        background-->
-<!--        layout="total, prev, pager, next, jumper"-->
-<!--        :current-page="currentPage"-->
-<!--        :page-size="pageSize"-->
-<!--        :total="totalpage"-->
-<!--        @current-change="handlePageChange"-->
-<!--      />-->
-<!--    </div>-->
-
-    <div class="pagination">
-      <el-pagination
-        background
-        layout="total, prev, pager, next, jumper"
-        :current-page="currentPage"
-        :page-size="pageSize"
-        :total="totalItem"
-        @current-change="handlePageChange"
-      />
+    <!--    <el-pagination-->
+    <!--      v-if="totalpage > 0"-->
+    <!--      :current-page="currentPage"-->
+    <!--      :page-size="pageSize"-->
+    <!--      :total="totalpage"-->
+    <!--      @current-change="handlePageChange"-->
+    <!--      layout="total, prev, pager, next, jumper"-->
+    <!--    ></el-pagination>-->
+
+    <!--    <div class="pagination">-->
+    <!--      <el-pagination-->
+    <!--        background-->
+    <!--        layout="total, prev, pager, next, jumper"-->
+    <!--        :current-page="currentPage"-->
+    <!--        :page-size="pageSize"-->
+    <!--        :total="totalpage"-->
+    <!--        @current-change="handlePageChange"-->
+    <!--      />-->
+    <!--    </div>-->
+
+    <div class="top-container">
+      <!-- 分页器 -->
+      <div class="pagination">
+        <el-pagination
+          background
+          layout="prev, pager, next, jumper"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          :total="totalItem"
+          @current-change="handlePageChange"
+        />
+      </div>
+
+      <!-- 页面信息 -->
+      <div class="pagination-info">
+        <div>页面位置：第{{ currentPage }}页</div>
+        <div>总条目数：{{ totalItem }}</div>
+        <div>当前页条目数：{{ currentPageItemsCount }}</div>
+      </div>
+
+      <!-- 筛选框 -->
+      <div class="filter-container">
+        <el-select v-model="filterStatus" placeholder="请选择状态" @change="handleFilterChange">
+          <el-option label="所有条目" value="所有条目"></el-option>
+          <el-option label="未审核" value="未审核"></el-option>
+          <el-option label="已审核" value="已审核"></el-option>
+          <el-option label="已复核" value="已复核"></el-option>
+        </el-select>
+        <div class="filtered-items-count">当前页筛选后的条目数：{{ filteredItemsCount }}</div>
+      </div>
+    </div>
+
+    <!-- 下方的内容：总条目数、已审核条目数等 -->
+    <div class="bottom-container">
+      <div class="info-item">
+        <span>总条目数：</span>
+        <span>{{ totalItems }}</span>
+      </div>
+      <div class="info-item">
+        <span>已审核条目数：</span>
+        <span>{{ reviewedItems }}</span>
+      </div>
+      <div class="info-item">
+        <span>审核进度：</span>
+        <span>{{ reviewProgress }}%</span>
+      </div>
+      <div class="info-item">
+        <span>已复核条目数：</span>
+        <span>{{ recheckedItems }}</span>
+      </div>
+      <div class="info-item">
+        <span>复核进度：</span>
+        <span>{{ recheckProgress }}%</span>
+      </div>
+    </div>
+
+    <!-- 滚动提示语 -->
+    <div
+      v-show="showScrollMessage && isScrollMessagePlaying"
+      class="scroll-message-container"
+      @animationend="onScrollMessageEnd"
+    >
+      <el-icon class="horn-icon"></el-icon>
+      <div class="scroll-message">
+        文本识别结果可能有误，如果发现文字与截图不符，请直接进行修改。
+      </div>
     </div>
 
     <!-- 显示分页数据 -->
-<!--    <div class="container">-->
-<!--      <ul class="item-list">-->
-<!--        <li-->
-<!--          v-for="item in allitems"-->
-<!--          :key="item.itemGuid"-->
-<!--          class="item"-->
-<!--        >-->
-<!--          &lt;!&ndash; 左边显示图片 &ndash;&gt;-->
-<!--          <img-->
-<!--            :src="'data:image/png;base64,' + item.itemImgCode"-->
-<!--            class="item-image"-->
-<!--            alt="图片"-->
-<!--          />-->
-<!--          &lt;!&ndash; 右边显示文本 &ndash;&gt;-->
-<!--          &lt;!&ndash; 右边显示可编辑文本 &ndash;&gt;-->
-<!--          <input-->
-<!--            v-model="item.itemText"-->
-<!--            class="item-input"-->
-<!--            type="text"-->
-<!--          />-->
-<!--          <el-button  type="primary"-->
-<!--                      size="medium"-->
-<!--                      @click="handleCheck(item.itemGuid,item.itemText)">审核</el-button>-->
-<!--          <el-button  type="primary"-->
-<!--                     size="medium"-->
-<!--                     @click="handleReCheck(item.itemGuid,item.taskGuid)">复核</el-button>-->
-<!--          <el-button-->
-<!--            size="medium"-->
-<!--            :style="{ backgroundColor: getStatusColor(item.status),}">-->
-<!--            {{ item.status }}-->
-<!--          </el-button>-->
-<!--        </li>-->
-<!--      </ul>-->
-<!--    </div>-->
+    <!--    <div class="container">-->
+    <!--      <ul class="item-list">-->
+    <!--        <li-->
+    <!--          v-for="item in allitems"-->
+    <!--          :key="item.itemGuid"-->
+    <!--          class="item"-->
+    <!--        >-->
+    <!--          &lt;!&ndash; 左边显示图片 &ndash;&gt;-->
+    <!--          <img-->
+    <!--            :src="'data:image/png;base64,' + item.itemImgCode"-->
+    <!--            class="item-image"-->
+    <!--            alt="图片"-->
+    <!--          />-->
+    <!--          &lt;!&ndash; 右边显示文本 &ndash;&gt;-->
+    <!--          &lt;!&ndash; 右边显示可编辑文本 &ndash;&gt;-->
+    <!--          <input-->
+    <!--            v-model="item.itemText"-->
+    <!--            class="item-input"-->
+    <!--            type="text"-->
+    <!--          />-->
+    <!--          <el-button  type="primary"-->
+    <!--                      size="medium"-->
+    <!--                      @click="handleCheck(item.itemGuid,item.itemText)">审核</el-button>-->
+    <!--          <el-button  type="primary"-->
+    <!--                     size="medium"-->
+    <!--                     @click="handleReCheck(item.itemGuid,item.taskGuid)">复核</el-button>-->
+    <!--          <el-button-->
+    <!--            size="medium"-->
+    <!--            :style="{ backgroundColor: getStatusColor(item.status),}">-->
+    <!--            {{ item.status }}-->
+    <!--          </el-button>-->
+    <!--        </li>-->
+    <!--      </ul>-->
+    <!--    </div>-->
     <div class="container">
       <ul class="item-list">
-        <li v-for="item in allitems" :key="item.itemGuid" class="item">
+        <li v-for="(item, index) in filteredItems" :key="item.itemGuid" class="item">
           <!-- 左侧图片样式 -->
           <div class="item-image-wrapper">
             <img
@@ -117,54 +214,73 @@
 
           <!-- 右侧文本及按钮 -->
           <div class="item-content">
-            <input
-              v-model="item.itemText"
-              class="item-input"
-              type="text"
-            />
+            <div class="input-status-container">
+              <input
+                v-model="item.itemText"
+                class="item-input"
+                type="text"
+              />
+              <div class="item-status">
+                状态：{{ item.status }}
+              </div>
+            </div>
             <div class="item-buttons">
-<!--              <el-button-->
-<!--                type="primary"-->
-<!--                size="medium"-->
-<!--                @click="handleCheck(item.itemGuid, item.itemText)"-->
-<!--              >-->
-<!--                审核-->
-<!--              </el-button>-->
-<!--              <el-button-->
-<!--                type="primary"-->
-<!--                size="medium"-->
-<!--                @click="handleReCheck(item.itemGuid, item.taskGuid)"-->
-<!--              >-->
-<!--                复核-->
-<!--              </el-button>-->
+              <!--              <el-button-->
+              <!--                type="primary"-->
+              <!--                size="medium"-->
+              <!--                @click="handleCheck(item.itemGuid, item.itemText)"-->
+              <!--              >-->
+              <!--                审核-->
+              <!--              </el-button>-->
+              <!--              <el-button-->
+              <!--                type="primary"-->
+              <!--                size="medium"-->
+              <!--                @click="handleReCheck(item.itemGuid, item.taskGuid)"-->
+              <!--              >-->
+              <!--                复核-->
+              <!--              </el-button>-->
+              <!--              <el-button-->
+              <!--                type="primary"-->
+              <!--                size="medium"-->
+              <!--                @click="handleCheck(item.itemGuid, item.itemText)"-->
+              <!--                :disabled="item.status === '已复核'"-->
+              <!--              >-->
+              <!--                审核保存通过-->
+              <!--              </el-button>-->
               <el-button
                 type="primary"
                 size="medium"
-                @click="handleCheck(item.itemGuid, item.itemText)"
-                :disabled="item.status === '已复审'"
+                @click="confirmCheck(index)"
+                :disabled="item.status === '已复核'"
               >
-                审核
+                审核保存通过
               </el-button>
               <el-button
                 type="primary"
                 size="medium"
                 @click="handleReCheck(item.itemGuid, item.taskGuid)"
-                :disabled="item.status === '已复审'"
+                :disabled="item.status === '已复核'"
               >
-                复核
+                复核通过
               </el-button>
               <el-button
+                type="primary"
                 size="medium"
-                :style="{ backgroundColor: getStatusColor(item.status) }"
+                @click="handleShowRecord(item.itemGuid,item.taskGuid)"
               >
-                {{ item.status }}
+                复核记录
               </el-button>
+              <!--              <el-button-->
+              <!--                size="medium"-->
+              <!--                :style="{ backgroundColor: getStatusColor(item.status) }"-->
+              <!--              >-->
+              <!--                状态：{{ item.status }}-->
+              <!--              </el-button>-->
             </div>
           </div>
         </li>
       </ul>
     </div>
-
   </div>
 </template>
 
@@ -177,6 +293,9 @@ import dayjs from "dayjs";
 import {addResult} from "@/api/business/result";
 import current from "element-ui/packages/table/src/store/current";
 import {getBook, updateBook} from "../../../api/business/book";
+import task from "../task/index.vue";
+import axios from "axios";
+import index from "vuex";
 export default {
   name: 'Topage',
   data() {
@@ -187,6 +306,17 @@ export default {
       pageSize: 25,  // 每页显示的条目数
       totalpage: 0,  // 总页数
       totalItem: 3500, // 总条目数
+      currentPageItemsCount: 0, // 当前页的条目数
+      filterStatus: '所有条目', // 默认显示所有条目
+      filteredItemsCount: 0, // 存储筛选后的条目数
+      filteredItems: [], // 存储筛选后的条目
+      totalItems: 3444, // 总条目数
+      reviewedItems: 0, // 已审核条目数
+      recheckedItems: 0, // 已复核条目数
+      reviewProgress: 0, // 审核进度
+      recheckProgress: 0, // 复核进度
+      showScrollMessage: false, // 控制滚动提示语的显示与隐藏
+      isScrollMessagePlaying: false, // 控制滚动提示语的播放状态
       //books: [],  // 所有书籍
       //paginatedBooks: [],  // 当前页的数据
       // 根据书id查出来所有的页
@@ -227,7 +357,7 @@ export default {
         pdfUrl: null,
         status: null,
         backup1: null, // 保存已审核条目数
-        backup2: null // 保存已复审条目数
+        backup2: null // 保存已复核条目数
       },
       // 任务form
       TaskForm:{
@@ -241,7 +371,17 @@ export default {
         imgCode: null,
         text: [],
         time: [],
-        userName: []
+        userName: [],
+        isFinal: [], // 标记哪条数据是最终复核通过的
+      },
+      RecheckRecordDialog: false, // 控制复核记录对话框的显示
+      // 审核记录form
+      RecheckRecordForm:{
+        imgCode: null, // 条目截图
+        text: [], // 复核记录内容
+        time: [], // 复核时间
+        userName: [], // 复核人
+        isFinal: [], // 标记哪条数据是最终复核通过的
       },
       // 复核按钮索引
       RecheckIndex: 0,
@@ -277,6 +417,12 @@ export default {
     this.fetchBookData(); // 获取书目数据
     // 获取总条目数
   },
+  async mounted() {
+    await this.fetchBooks(); // 确保数据加载完成
+    this.filteredItems = this.allitems; // 初始化filteredItems
+    this.filteredItemsCount = this.allitems.length;
+    console.log('所有条目数据：', this.allitems);
+  },
   methods: {
     // 根据页码获取数据
     // async fetchBooks() {
@@ -325,8 +471,14 @@ export default {
     //     this.loading = false; // 结束加载
     //   }
     // },
+    onScrollMessageEnd() {
+      this.isScrollMessagePlaying = false; // 动画结束后停止播放
+      this.showScrollMessage = false; // 隐藏黄色框
+    },
     async fetchBooks() {
       this.loading = true;
+      this.showScrollMessage = false; // 加载时不显示滚动提示语
+      this.isScrollMessagePlaying = false; // 加载时不播放滚动提示语
       this.allitems = [];
       this.items = [];
 
@@ -368,10 +520,24 @@ export default {
 
         // 排序
         this.allitems = this.items.sort((a, b) => a.item_line - b.item_line);
+
+        // 更新当前页的条目数
+        this.currentPageItemsCount = this.allitems.length;
+
+        // 初始化筛选后的条目数
+        this.filteredItemsCount = this.allitems.length;
+
+        // 初始化筛选后的条目数
+        await this.handleFilterChange();
+
       } catch (error) {
         console.error("获取数据失败", error);
       } finally {
         this.loading = false;
+
+        // 加载完成后显示滚动提示语
+        this.showScrollMessage = true;
+        this.isScrollMessagePlaying = true; // 开始播放滚动提示语
       }
     },
     async fetchBookData() {
@@ -382,23 +548,16 @@ export default {
         // 将backup1和backup2转换为数字类型
         this.BookForm.backup1 = Number(this.BookForm.backup1) || 0;
         this.BookForm.backup2 = Number(this.BookForm.backup2) || 0;
+
+        // 更新审核和复核进度
+        this.reviewedItems = this.BookForm.backup1;
+        this.recheckedItems = this.BookForm.backup2;
+        this.reviewProgress = ((this.reviewedItems / this.totalItems) * 100).toFixed(2);
+        this.recheckProgress = ((this.recheckedItems / this.totalItems) * 100).toFixed(2);
       } catch (error) {
         console.error("获取book数据失败", error);
       }
     },
-    // 根据状态返回不同的背景颜色
-    getStatusColor(status) {
-      switch(status) {
-        case '未审核':
-          return '#ffffff';  // ⚪ 白色
-        case '待复审':
-          return '#d9d9d9';  // 🌫 灰色
-        case '已复审':
-          return '#d3e0ff';  // 💙 淡蓝色
-        default:
-          return '#f4f4f5';  // 🩶 默认浅灰色
-      }
-    },
     // 页码改变时触发
     handlePageChange(newPage) {
       console.log("当前页码:", newPage);
@@ -406,6 +565,16 @@ export default {
       this.currentPage = newPage;
       this.fetchBooks();  // 重新获取数据
     },
+    async handleFilterChange() {
+      if (this.filterStatus === '所有条目') {
+        this.filteredItems = this.allitems;
+        this.filteredItemsCount = this.allitems.length;
+      } else {
+        this.filteredItems = this.allitems.filter(item => item.status === this.filterStatus);
+        this.filteredItemsCount = this.filteredItems.length;
+      }
+      console.log("筛选后的条目：", this.filteredItems);
+    },
     // handleCheck(id,text){
     //   // 添加到工作记录
     //   this.RecordForm.userGuid = this.$store.state.user.name;
@@ -427,72 +596,143 @@ export default {
     //   })
     // }
     //
-    async handleCheck(id, text) {
+    async confirmCheck(index) {
+      try {
+        // 检查 index 是否有效
+        if (index === undefined || index < 0 || index >= this.filteredItems.length) {
+          throw new Error("无效的索引");
+        }
+
+        // 获取当前条目
+        const item = this.filteredItems[index];
+        if (!item) {
+          throw new Error("未找到对应的条目");
+        }
+        // 弹出确认对话框
+        await this.$confirm('确定要审核通过吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        });
+
+        // 用户点击“确定”后执行审核逻辑
+        // const item = this.filteredItems[index]; // 获取当前条目
+        await this.handleCheck(item.itemGuid, item.itemText); // 调用审核逻辑
+      } catch (error) {
+        // 用户点击“取消”时的处理
+        if (error !== 'cancel') {
+          console.error("审核失败:", error);
+          this.$message.error("审核失败，请重试！");
+        } else {
+          this.$message({
+            type: 'info',
+            message: '已取消审核'
+          });
+        }
+      }
+    },
+
+    async handleCheck(itemGuid, itemText) {
       try {
-        // 添加到工作记录
+        // 记录操作日志
         this.RecordForm.userGuid = this.$store.state.user.name;
-        this.RecordForm.target1 = id;
-        this.RecordForm.target2 = text;
+        this.RecordForm.target1 = itemGuid;
+        this.RecordForm.target2 = itemText;
         this.RecordForm.code = "A01";
         await addLog(this.RecordForm);
 
         // 获取任务信息
-        const res = await getByItemId(id);
+        const res = await getByItemId(itemGuid);
         this.TaskForm.taskGuid = res.data.taskGuid;
-        this.TaskForm.itemGuid = id;
-        this.TaskForm.status = "待复审";
-        this.TaskForm.itemText = text;
+        this.TaskForm.itemGuid = itemGuid;
+        this.TaskForm.status = "已审核";
+        this.TaskForm.itemText = itemText;
 
-        //更新book表中的backup1（已审核条目数）
-        console.log("更新前的backup1:", this.BookForm.backup1)
-        this.BookForm.backup1 += 1;
-        updateBook(this.BookForm);
-        console.log("更新后的backup1:", this.BookForm.backup1)
+        // 更新已审核条目数
+        this.reviewedItems += 1;
+        this.reviewProgress = ((this.reviewedItems / this.totalItems) * 100).toFixed(2);
+
+        // 如果条目状态不是“已审核”, 则更新 backup1
+        if (res.data.status !== '已审核') {
+          console.log("更新前的 backup1:", this.BookForm.backup1);
+          this.BookForm.backup1 += 1;
+          await updateBook(this.BookForm);
+          console.log("更新后的 backup1:", this.BookForm.backup1);
+        }
 
-        //检查是否完成审核
+        // 检查是否完成审核
         if (this.BookForm.backup1 === 3444) {
-          this.$message.success("所有条目已审核完毕！")
+          this.$message.success("所有条目已审核完毕！");
         }
 
         // 更新任务状态
         await updateTask(this.TaskForm);
         this.$message.success("审核成功");
 
-        // **更新前端 UI**
-        const item = this.allitems.find(i => i.itemGuid === id);
-        if (item) item.status = "待复审";
-
+        // 更新前端 UI
+        const item = this.filteredItems.find(i => i.itemGuid === itemGuid);
+        if (item) item.status = "已审核";
       } catch (error) {
         console.error("审核失败:", error);
         this.$message.error("审核失败，请重试！");
       }
     },
-    handleReCheck(itemId,taskId){
-      this.itemGuid = itemId
-      this.taskGuid = taskId
-      //console.log(taskId)
-      Promise.all([
-        getItem(itemId),   // 获取 item 数据
-        getByItem(itemId)   // 获取其他数据
-      ])
-        .then(([itemResponse, byItemResponse]) => {
-          // 处理 getItem 请求的结果
-          this.RecheckForm.imgCode = itemResponse.data.itemImgCode;
-          //console.log(itemResponse)
-          // 处理 getByItem 请求的结果
-          //console.log(byItemResponse);
-          for (let i = 0 ; i < byItemResponse.data.length ; i++)
-          {
-            this.RecheckForm.text[i] = byItemResponse.data[i].target2
-            this.RecheckForm.time[i] = byItemResponse.data[i].createAt
-            this.RecheckForm.userName[i] = byItemResponse.data[i].userGuid
-          }
-          // 两个请求完成后，再打开对话框
-          this.RecheckDialog = true;
-        })
-        .catch(error => {
-          console.error("请求发生错误:", error);
-        });
+
+    // handleReCheck(itemId,taskId){
+    //   this.itemGuid = itemId
+    //   this.taskGuid = taskId
+    //   //console.log(taskId)
+    //   Promise.all([
+    //     getItem(itemId),   // 获取 item 数据
+    //     getByItem(itemId)   // 获取其他数据
+    //   ])
+    //     .then(([itemResponse, byItemResponse]) => {
+    //       // 处理 getItem 请求的结果
+    //       this.RecheckForm.imgCode = itemResponse.data.itemImgCode;
+    //       //console.log(itemResponse)
+    //       // 处理 getByItem 请求的结果
+    //       //console.log(byItemResponse);
+    //       for (let i = 0 ; i < byItemResponse.data.length ; i++)
+    //       {
+    //         this.RecheckForm.text[i] = byItemResponse.data[i].target2
+    //         this.RecheckForm.time[i] = byItemResponse.data[i].createAt
+    //         this.RecheckForm.userName[i] = byItemResponse.data[i].userGuid
+    //       }
+    //       // 两个请求完成后，再打开对话框
+    //       this.RecheckDialog = true;
+    //     })
+    //     .catch(error => {
+    //       console.error("请求发生错误:", error);
+    //     });
+    // },
+    async handleReCheck(itemId, taskId) {
+      this.itemGuid = itemId;
+      this.taskGuid = taskId;
+      try {
+        const [itemResponse, byItemResponse] = await Promise.all([
+          getItem(itemId), // 获取 item 数据
+          getByItem(itemId), // 获取审核记录
+        ]);
+
+        console.log("itemResponse：",itemResponse)
+        console.log("itemResponse：",itemResponse.data)
+        console.log("byItemResponse：",byItemResponse)
+        console.log("byItemResponse：",byItemResponse.data)
+
+        // 处理 getItem 请求的结果
+        this.RecheckForm.imgCode = itemResponse.data.itemImgCode;
+
+        // 处理 getByItem 请求的结果
+        this.RecheckForm.text = byItemResponse.data.map((item) => item.target2);
+        this.RecheckForm.time = byItemResponse.data.map((item) => item.createAt);
+        this.RecheckForm.userName = byItemResponse.data.map((item) => item.userGuid);
+
+        // 打开对话框
+        this.RecheckDialog = true;
+      } catch (error) {
+        console.error("请求发生错误:", error);
+        this.$message.error("获取数据失败，请重试！");
+      }
     },
     CancelRecheck(){
       this.RecheckDialog = false
@@ -528,6 +768,78 @@ export default {
         });
       });
     },
+
+    async handleShowRecord(itemId, taskId) {
+      this.itemGuid = itemId;
+      this.taskGuid = taskId;
+      try {
+        const [itemResponse, byItemResponse] = await Promise.all([
+          getItem(itemId), // 获取 item 数据
+          getByItem(itemId), // 获取审核记录
+        ]);
+
+        console.log("itemResponse：",itemResponse)
+        console.log("byItemResponse：",byItemResponse)
+
+        // 获取条目截图
+        this.RecheckRecordForm.imgCode = itemResponse.data.itemImgCode;
+
+        // // 获取时间、复核人、内容
+        // this.RecheckRecordForm.text = byItemResponse.data.map((item) => item.target2);
+        // this.RecheckRecordForm.time = byItemResponse.data.map((item) => item.createAt);
+        // this.RecheckRecordForm.userName = byItemResponse.data.map((item) => item.userGuid);
+        //
+        //
+        // // 标记最终通过的记录
+        // this.RecheckRecordForm.isFinal = byItemResponse.data.map((item) => item.isFinal || false);
+
+        // 获取所有记录
+        this.RecheckRecordForm.text = byItemResponse.data.map((item) => item.target2);
+        this.RecheckRecordForm.time = byItemResponse.data.map((item) => item.createAt);
+        this.RecheckRecordForm.userName = byItemResponse.data.map((item) => item.userGuid);
+        this.RecheckRecordForm.isFinal = byItemResponse.data.map((item) => item.isFinal || false);
+        this.RecheckRecordForm.code = byItemResponse.data.map((item) => item.code); // 记录类型
+
+        console.log("byItemResponse.data:", byItemResponse.data);
+        console.log("byItemResponse.data[0].target2:", byItemResponse.data[0]?.target2);
+        console.log("RecheckRecordForm.text:", this.RecheckRecordForm.text);
+        console.log("RecheckRecordForm.isFinal:", this.RecheckRecordForm.isFinal);
+
+
+        // 打开对话框
+        this.RecheckRecordDialog = true;
+      } catch (error) {
+        console.error("请求发生错误:", error);
+        this.$message.error("获取数据失败，请重试！");
+      }
+    },
+    // async handleShowRecord(itemId) {
+    //   this.itemGuid = itemId;
+    //   try {
+    //     // 获取条目截图
+    //     const itemResponse = await getItem(itemId);
+    //     this.RecheckRecordForm.imgCode = itemResponse.data.itemImgCode;
+    //
+    //     // 获取审核记录
+    //     const byItemResponse = await getByItem(itemId);
+    //     this.RecheckRecordForm.text = byItemResponse.data.map((item) => item.target2);
+    //     this.RecheckRecordForm.time = byItemResponse.data.map((item) => item.createAt);
+    //     this.RecheckRecordForm.userName = byItemResponse.data.map((item) => item.userGuid);
+    //
+    //     // 标记最终复核通过的记录
+    //     const finalReviewIndex = byItemResponse.data.findIndex(
+    //       (item) => item.code === "A02" && item.target2 === this.itemForm.itemText2
+    //     );
+    //     this.RecheckRecordForm.isFinal = byItemResponse.data.map((_, i) => i === finalReviewIndex);
+    //
+    //     // 打开对话框
+    //     this.RecheckRecordDialog = true;
+    //   } catch (error) {
+    //     console.error("获取审核记录失败:", error);
+    //     this.$message.error("获取审核记录失败，请重试！");
+    //   }
+    // },
+
     // submitRecheck(){
     //   this.RecordForm.userGuid = this.$store.state.user.name;
     //   this.RecordForm.target1 = this.itemGuid
@@ -645,6 +957,11 @@ export default {
     //     });
     //   }
     // }
+
+    // //获取审核记录背景颜色
+    // getRecordBackgroundColor(index) {
+    //   return this.RecheckRecordForm.isFinal[index] ? "#d3e0ff" : "#f4f4f5";
+    // },
     async submitRecheck() {
       try {
         // 记录操作日志
@@ -657,19 +974,23 @@ export default {
         // 修改任务状态
         this.TaskForm.taskGuid = this.taskGuid;
         this.TaskForm.itemGuid = this.itemGuid;
-        this.TaskForm.status = "已复审";
+        this.TaskForm.status = "已复核";
         this.TaskForm.itemText = this.checkText;
         await updateTask(this.TaskForm);
 
-        // 更新book表中的backup2（已复审条目数）
+        // 更新已复核条目数
+        this.recheckedItems += 1;
+        this.recheckProgress = ((this.recheckedItems / this.totalItems) * 100).toFixed(2);
+
+        // 更新book表中的backup2（已复核条目数）
         console.log("更新前的backup2:", this.BookForm.backup2)
         this.BookForm.backup2 += 1;
         updateBook(this.BookForm);
         console.log("更新后的backup2:", this.BookForm.backup2)
 
-        // 检查是否完成复审
+        // 检查是否完成复核
         if (this.BookForm.backup2 === 3444) {
-          this.$message.success("所有条目已复审完毕！");
+          this.$message.success("所有条目已复核完毕！");
         }
 
         // 插入核对结果
@@ -685,9 +1006,47 @@ export default {
         const response = await getItem(this.itemGuid);
         this.itemForm = { ...response.data };
         this.itemForm.itemText2 = this.RecordForm.target2;
-        this.itemForm.status = "已复审";
+        this.itemForm.status = "已复核";
         await updateItem(this.itemForm);
 
+        // 标记最终复核通过的记录
+        // const finalReviewIndex = this.RecheckRecordForm.text.findIndex(
+        //   (text, index) => this.RecheckRecordForm.code[index] === "A02" && text === this.RecheckForm.text[this.RecheckIndex]
+        // );
+        const finalReviewIndex = this.RecheckRecordForm.text.findIndex(
+          (text, index) =>
+            this.RecheckRecordForm.code[index] === "A02" &&
+            text.includes(this.RecheckForm.text[this.RecheckIndex])
+        );
+
+        console.log("finalReviewIndex:", finalReviewIndex);
+
+        if (finalReviewIndex !== -1) {
+          this.$set(this.RecheckRecordForm.isFinal, finalReviewIndex, true);
+        }
+
+        console.log("this.RecheckRecordForm.isFinal:", this.RecheckRecordForm.isFinal);
+        console.log("RecheckForm.text[this.RecheckIndex]:", this.RecheckForm.text[this.RecheckIndex]);
+        console.log("RecheckRecordForm.text:", this.RecheckRecordForm.text);
+        console.log("RecheckRecordForm.code:", this.RecheckRecordForm.code);
+        if (this.RecheckRecordForm.text.length === 0 || this.RecheckForm.text.length === 0) {
+          console.error("RecheckRecordForm.text 或 RecheckForm.text 为空");
+          return;
+        }
+        console.log("RecheckRecordForm.text:", this.RecheckRecordForm.text);
+        console.log("RecheckForm.text[this.RecheckIndex]:", this.RecheckForm.text[this.RecheckIndex]);
+
+        // console.log("this.RecheckForm.text:", this.RecheckForm.text);
+        //
+        // // 同步到 RecheckRecordForm
+        // this.RecheckRecordForm.isFinal = this.RecheckForm.isFinal;
+        //
+        // // 使用 this.$set 更新 isFinal
+        // this.$set(this.RecheckRecordForm, 'isFinal', this.RecheckForm.isFinal);
+        //
+        // console.log("this.RecheckForm.isFinal:", this.RecheckForm.isFinal);
+        // console.log("this.RecheckRecordForm.isFinal:", this.RecheckRecordForm.isFinal)
+
         // 关闭弹窗 & 重置表单
         this.RecheckDialog = false;
         this.resetRecheckForm();
@@ -695,7 +1054,7 @@ export default {
 
         // **更新前端 UI**
         const item = this.allitems.find(i => i.itemGuid === this.itemGuid);
-        if (item) item.status = "已复审";
+        if (item) item.status = "已复核";
 
       } catch (error) {
         console.error("复核失败:", error);
@@ -724,9 +1083,24 @@ export default {
   padding: 10px 0;
 }
 
+/* 斑马纹效果 */
+.item:nth-child(odd) {
+  background-color: #ece5e5; /* 奇数行背景色 */
+}
+
+.item:nth-child(even) {
+  background-color: #ffffff; /* 偶数行背景色 */
+}
+
+/* 悬浮效果 */
+.item:hover {
+  background-color: #cfcccc; /* 悬浮时的背景色 */
+  transition: background-color 0.3s ease; /* 添加过渡效果 */
+}
+
 /* 图片样式 */
 .item-image-wrapper {
-  width: 60%; /* 控制图片的宽度 */
+  width: 53%; /* 控制图片的宽度 */
   height: 150px; /* 控制图片的高度 */
   margin-right: 20px; /* 给图片和其他内容留出间隙 */
 }
@@ -740,7 +1114,7 @@ export default {
 
 /* 输入框样式 */
 .item-input {
-  width: 400px; /* 统一设置输入框的宽度 */
+  width: 450px; /* 统一设置输入框的宽度 */
   height: 50px;
   margin-right: 20px; /* 输入框和按钮之间的间隙 */
 }
@@ -748,8 +1122,29 @@ export default {
 /* 按钮容器样式 */
 .item-buttons {
   display: flex;
-  gap: 80px; /* 按钮之间的间隙 */
+  gap: 50px; /* 按钮之间的间隙 */
   align-items: center; /* 保证按钮垂直居中 */
+  margin-top: 10px;
+}
+
+.item-content {
+  display: flex;
+  flex-direction: column; /* 垂直排列 */
+  gap: 10px; /* 子元素之间的间距 */
+}
+
+.input-status-container {
+  display: flex;
+  align-items: center; /* 垂直居中 */
+}
+
+.item-status {
+  margin-left: 20px; /* 与输入框的间距 */
+  font-size: 14px; /* 字体大小 */
+  font-weight: bold; /* 加粗 */
+  color: #666; /* 字体颜色 */
+  white-space: nowrap; /* 防止文本换行 */
+  align-self: center; /* 垂直居中 */
 }
 
 .loading-overlay {
@@ -780,5 +1175,179 @@ export default {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
-</style>
 
+/* 顶部容器：分页器、页面信息、筛选框 */
+.top-container {
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: space-between; /* 元素之间均匀分布 */
+  margin-bottom: 20px; /* 底部留出一些空间 */
+}
+
+/* 分页器样式 */
+.pagination {
+  flex: 1;
+  margin-top: 30px;
+  margin-right: 20px;
+}
+
+/* 页面信息 */
+.pagination-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+  margin-left: 100px;
+}
+
+/* 筛选容器样式 */
+.filter-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  margin-top: 30px;
+  margin-right: 110px;
+}
+
+.filtered-items-count {
+  margin-left: 30px;
+  font-size: 14px;
+  color: #666;
+}
+
+/* 底部容器：总条目数、已审核条目数等 */
+.bottom-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 50px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+}
+
+/* 每个信息项的样式 */
+.info-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 14px;
+  color: #666;
+}
+
+.info-item span {
+  margin-bottom: 5px;
+}
+
+/* 滚动提示语样式 */
+.scroll-message-container {
+  max-width: 600px;
+  margin: 10px auto;
+  padding: 10px;
+  background-color: #ffeb3b; /* 黄色背景 */
+  color: #333;
+  font-size: 14px;
+  border-radius: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.scroll-message-container.visible {
+  visibility: visible; /* 显示时设置为可见 */
+}
+
+.horn-icon {
+  margin-right: 10px;
+  font-size: 18px;
+  color: #f57c00;
+}
+
+.scroll-message {
+  display: inline-block;
+  padding-left: 50%;
+  animation: scroll 15s linear infinite;
+}
+
+@keyframes scroll {
+  from {
+    transform: translateX(100%); /* 从右侧开始 */
+  }
+  to {
+    transform: translateX(-100%); /* 滚动到左侧 */
+  }
+}
+
+/* 默认记录样式 */
+.record-item {
+  padding: 10px;
+  margin-bottom: 10px;
+  background-color: #f5f5f5;
+  border-left: 4px solid #d9d9d9;
+}
+
+/* 审核记录样式 */
+.check-record {
+  background-color: #f5f5f5;
+  border-left: 4px solid #d9d9d9;
+}
+
+/* 复核记录样式 */
+.review-record {
+  background-color: #e6f7ff;
+  border-left: 4px solid #1890ff;
+}
+
+/* 最终复核通过的记录样式 */
+.final-record {
+  background-color: #e6f7ff;
+  border-left: 4px solid #1890ff;
+}
+
+/* 审核记录部分样式 */
+.record-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.record-time {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.record-user {
+  flex: 1;
+  margin-right: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.record-content {
+  flex: 2;
+}
+
+.info-container {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 20px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 14px;
+  color: #666;
+}
+
+.info-item span {
+  margin-bottom: 5px;
+}
+
+</style>