fix:沉浸模式下图片列表滚动问题调整主图放大

src/views/task/content/Content.vue

@@ -7,6 +7,7 @@ import {
   ref,
   unref,
   watch,
+  nextTick,
 } from "vue";
 import { chunk, clone } from "lodash-es";
 import { useDialog, useMessage } from "naive-ui";
@@ -20,7 +21,7 @@ import NotPassed from "@/components/Approval/NotPassed.vue";
 import { getAllfieldList, getfieldList } from "@/api/home/filter";
 import { TASK_STATUS_OBJ } from "@/enums/index";
 import { useFinal } from "@/store/modules/final";
-
+import { useInfiniteScroll } from "@vueuse/core";
 import {
   audit,
   dubiousfileyd,
@@ -52,11 +53,16 @@ const taskTableData = ref<any[]>([]);
 const route = useRoute();
 const isDetail = ref(false); // 是否是详情
 const finalStore = useFinal();
+const imgbigshow = ref(true);
 const sortBy: any = {
   orderType: "desc",
   orderName: "similarityScore",
 };
-
+const el = ref<HTMLDivElement | null>(null);
+const pagination = reactive({
+  pageNo: 0,
+  pageSize: 30,
+});
 function onCheckChange(checked: any, item: any) {
   const index = selectItems.value.indexOf(item);
   item.checked = checked;
@@ -105,6 +111,9 @@ onMounted(() => {
 
 let lastKeyPressTime = 0;
 let keyPressTimer = null;
+function changeimgbigshow() {
+  imgbigshow.value = !imgbigshow.value;
+}
 const doubleClickInterval = 300; // 可以自定义间隔时间，单位是毫秒
 // 键盘左右箭头快捷切换
 function handleKeydown(event) {
@@ -280,22 +289,23 @@ function approvalHandler(items?: any) {
       doAudit(param);
       overTask.value = null;
     },
-    onNegativeClick: () => {overTask.value = null;},
+    onNegativeClick: () => {
+      overTask.value = null;
+    },
   });
 }
 function approvalHandlerx(item?: any) {
- 
+  console.log(item);
-  console.log(item)
+  alert(1);
-    alert(1)
 }
 function singleRejectHandlex(item?: any) {
-  console.log(item)
+  console.log(item);
   const modal = unref(notPassModalRef)! as any;
 
   modal.showModal([item]);
 }
 function rejectHandler(items?: any) {
-  console.log(items)
+  console.log(items);
   const modal = unref(notPassModalRef)! as any;
   modal.showModal(items);
 }
@@ -348,8 +358,7 @@ async function handleDragEnd(event, item) {
   }
 }
 async function addSuspicious() {
-
+  console.log(taskDetailInfo.value.ocrPicture);
-  console.log(taskDetailInfo.value.ocrPicture)
   if (taskDetailInfo.value.ocrPicture.pictureid) {
     const res = await dubiousfileyd({
       pictureid: taskDetailInfo.value.ocrPicture.id,
@@ -364,8 +373,8 @@ async function addSuspicious() {
       message.error(res.message);
     }
     taskStore.setInFile(false);
-  
+  }
-}}
+}
 async function getTableData() {
   const useInfo = userStore.getUserInfo;
   const listData = [];
@@ -451,6 +460,12 @@ function immersionHandler() {
 // 切换全屏状态
 function toggleFullScreen() {
   isFullScreen.value = !isFullScreen.value;
+  if (isFullScreen.value) {
+    fetchData();
+    window.addEventListener("scroll", checkBottom);
+  } else {
+    window.removeEventListener("scroll", checkBottom);
+  }
 }
 function previewHandler(event: MouseEvent) {
   event.stopImmediatePropagation();
@@ -482,7 +497,7 @@ async function getDetail() {
 function notPassSuccess(param) {
   batchModalRef.value.reload();
   reloadList(param, "不通过");
-  overTask.value=null
+  overTask.value = null;
 }
 
 function reloadList(param, text) {
@@ -530,12 +545,95 @@ function overTaskHandelr(item: any) {
     overTasktwo.value = item;
 }
 function closePassno() {
-    overTask.value=null
+  overTask.value = null;
+}
+//const loadingx = ref(false);
+const items = ref([]);
+const scrollContainer = ref(null);
+let debounceTimer;
+async function fetchData() {
+  if (loading.value) {
+    return; // 如果已经在加载中，则不重复加载
+  }
+  loading.value = true;
+  try {
+    loadMore();
+  } finally {
+    loading.value = false;
+  }
+}
+//const throttledCheckScroll = throttle(checkBottom, 200);
+
+let num = 1;
+
+// 检查是否滚动到底部
+function checkBottom() {
+  const container = scrollContainer.value;
+  // console.log(1)
+  if (!container) {
+    return;
+  }
+  //const { scrollTop, clientHeight, scrollHeight } = container;
+  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+  // 获取视口的内部高度
+  const clientHeight =
+    window.innerHeight || document.documentElement.clientHeight;
+
+  // 获取整个文档的高度
+  const scrollHeight = document.documentElement.scrollHeight;
+
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => {
+    if (scrollTop + clientHeight >= scrollHeight - 10) {
+      num = num + 1;
+      console.log(num);
+      fetchData(); // 接近底部时加载更多数据
+    }
+  }, 500);
+}
+function reset() {
+  taskpagination.pageNo = 0;
+  taskpagination.pageSize = 20;
+  taskDetailPictureList.value.length = 0;
+  loading.value = false;
+  canloadMore = true;
+}
+
+async function loadMore() {
+  console.log(loading.value);
+  if (loading.value) {
+    const more = await fetchList();
+    taskDetailPictureList.value.push(...more);
+    console.log(taskDetailPictureList);
+  }
+}
+let canloadMore = true;
+async function fetchList() {
+  try {
+    pagination.pageNo += 1;
+    const { data, pageCount, total } = await getSimilarityList({
+      ...pagination,
+      ...sortBy,
+      pictureId: taskDetailInfo.value.ocrPicture.id,
+    });
+    canloadMore = pageCount >= pagination.pageNo && pageCount > 0;
+    totalCount.value = total;
+    return data;
+  } catch (error) {
+    canloadMore = false;
+    return [];
+  }
 }
 </script>
 
 <template>
-  <div class="wrapper fullscreen-container" :style="fullscreenStyles">
+  <div
+    ref="scrollContainer"
+    @scroll="checkBottom"
+    class="wrapper fullscreen-container"
+    :style="fullscreenStyles"
+  >
     <div class="wrapper-header">
       <div class="left">
         <span class="font">任务ID：{{ taskDetailInfo.fromtaskname }}</span>
@@ -633,13 +731,47 @@ function closePassno(){
         </n-button>
       </div>
     </div>
-    <div class="wrapper-detail">
+    <div
+      class="wrapper-detail"
+      :style="
+        isFullScreen
+          ? {
+              height: '596px',
+            }
+          : {}
+      "
+    >
+      <div
+      v-show="!imgbigshow"
+        class="aside-collapse-btn"
+        @click="collapseHandler"
+        :style="{
+          position: 'fixed',
+          right: '0px',
+          top: '155px',
+          cursor: 'pointer',
+          zIndex:100
+        }"
+      >
+        <SvgIcon
+          :name="false ? 'expand-cir' : 'collapse-cir'"
+          size="40"
+          @click="changeimgbigshow"
+        />
+      </div>
       <div
         class="left"
         :style="
           isFullScreen
+            ? imgbigshow
               ? {
-                height: '395px',
+                  position: 'relative',
+                  flex: 2,
+                  'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+                }
+              : {
+                  height: '92vh',
+                  flex: 2,
                   'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
                 }
             : {
@@ -786,7 +918,35 @@ function closePassno(){
         </div>
         <div class="leftback"></div>
       </div>
-      <div class="right">
+      <div
+        class="right"
+        v-show="imgbigshow"
+        :style="
+          isFullScreen
+            ? {
+                width: '320px',
+                borderLeft: '2px solid #507AFD',
+                position: 'relative',
+              }
+            : {}
+        "
+      >
+        <div
+          class="aside-collapse-btn"
+          @click="collapseHandler"
+          :style="{
+            position: 'absolute',
+            left: '-20px',
+            top: '85px',
+            cursor: 'pointer',
+          }"
+        >
+          <SvgIcon
+            :name="true ? 'expand-cir' : 'collapse-cir'"
+            size="40"
+            @click="changeimgbigshow"
+          />
+        </div>
         <n-scrollbar v-if="totalCount > 0" style="max-height: 100%">
           <div class="right-card">
             <div class="header" v-show="!isFullScreen">
@@ -978,6 +1138,7 @@ function closePassno(){
     </n-tabs>
     <div v-else class="imgbottom">
       <div
+        v-show="imgbigshow"
         style="
           display: flex;
           justify-content: space-between;
@@ -1006,40 +1167,17 @@ function closePassno(){
         >
           <div style="cursor: pointer" @click="sortHandler('createdate')">
             <span>时间排序</span>
-            <SvgIcon
+            <SvgIcon style="margin-left: 5px" name="sort" size="12" />
-              style="margin-left: 5px"
+            <SvgIcon style="margin-left: 5px" name="active-sort" size="12" />
-              name="sort"
-              size="12"
-            
-            />
-            <SvgIcon
-              style="margin-left: 5px"
-              name="active-sort"
-              size="12"
-       
-            />
           </div>
-          <div
+          <div style="margin-left: 15px; cursor: pointer">
-            style="margin-left: 15px; cursor: pointer"
-           
-          >
             <span>相似度排序</span>
-            <SvgIcon
+            <SvgIcon style="margin-left: 5px" name="sort" size="12" />
-              style="margin-left: 5px"
+            <SvgIcon style="margin-left: 5px" name="active-sort" size="12" />
-              name="sort"
-              size="12"
-           
-            />
-            <SvgIcon
-              style="margin-left: 5px"
-              name="active-sort"
-              size="12"
-      
-            />
           </div>
         </div>
       </div>
-      <div class="allview">
+      <div class="allview" v-show="imgbigshow">
         <div class="list">
           <div
             v-for="item in taskDetailPictureList"
@@ -1060,12 +1198,9 @@ function closePassno(){
               @mouseover="overTaskHandelr(item)"
               @mouseleave="leaveTaskHandler"
             >
-             
               <div
                 v-show="overTasktwo && overTasktwo.id === item.id && !batch"
                 class="action"
-      
-       
               >
                 <SvgIcon
                   style="cursor: pointer"
@@ -1136,7 +1271,6 @@ function closePassno(){
               {{ item.similarityScore }}<span class="percent-unit">%</span>
             </div>
           </div>
-              
         </div>
       </div>
       <!-- <div class="wrapper-list">
@@ -1220,7 +1354,11 @@ function closePassno(){
         </div>
       </div>-->
     </div>
-    <NotPassed ref="notPassModalRef" @success="notPassSuccess"  @close="closePassno"/>
+    <NotPassed
+      ref="notPassModalRef"
+      @success="notPassSuccess"
+      @close="closePassno"
+    />
     <BatchModal
       ref="batchModalRef"
       @reject="rejectHandler"
@@ -1232,6 +1370,7 @@ function closePassno(){
 
 <style lang="less" scoped>
 .fullscreen-container {
+  overflow-y: auto;
   /* 可添加其他样式 */
   width: 100vw;
   height: 100vh;
@@ -1883,6 +2022,8 @@ function closePassno(){
   max-width: 650px;
 }
 .allview {
+  // overflow-y: auto;
+  //height: 400px;
   flex: 0.5;
   background: #f6f9fd;
   border-radius: 8px;