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) {
@@ -157,7 +166,7 @@ function handleKeydown(event) {
 
     // 如果两次按键时间间隔小于我们设定的双击间隔，则认为是双击
     if (now - lastKeyPressTime < doubleClickInterval) {
-       const item = taskDetailInfo.value;
+      const item = taskDetailInfo.value;
       if (
         item?.userapprove?.statshis === 2 ||
         item?.userapprove?.statshis == 3
@@ -278,24 +287,25 @@ function approvalHandler(items?: any) {
     negativeText: "取消",
     onPositiveClick: () => {
       doAudit(param);
-       overTask.value = null;
+      overTask.value = null;
+    },
+    onNegativeClick: () => {
+      overTask.value = null;
     },
-    onNegativeClick: () => {overTask.value = null;},
   });
 }
-function approvalHandlerx(item?:any){
+function approvalHandlerx(item?: any) {
- 
+  console.log(item);
-  console.log(item)
+  alert(1);
-    alert(1)
 }
-function singleRejectHandlex(item?:any){
+function singleRejectHandlex(item?: any) {
-  console.log(item)
+  console.log(item);
- const modal = unref(notPassModalRef)! as any;
+  const modal = unref(notPassModalRef)! as any;
 
- modal.showModal([item]);
+  modal.showModal([item]);
 }
 function rejectHandler(items?: any) {
-  console.log(items)
+  console.log(items);
   const modal = unref(notPassModalRef)! as any;
   modal.showModal(items);
 }
@@ -348,14 +358,13 @@ async function handleDragEnd(event, item) {
   }
 }
 async function addSuspicious() {
-
+  console.log(taskDetailInfo.value.ocrPicture);
-  console.log(taskDetailInfo.value.ocrPicture)
+  if (taskDetailInfo.value.ocrPicture.pictureid) {
- if (taskDetailInfo.value.ocrPicture.pictureid) {
     const res = await dubiousfileyd({
       pictureid: taskDetailInfo.value.ocrPicture.id,
     });
 
-  if (res.code === "OK") {
+    if (res.code === "OK") {
       message.success("加入成功");
       setBatch(false);
       getTableData();
@@ -364,8 +373,8 @@ async function addSuspicious() {
       message.error(res.message);
     }
     taskStore.setInFile(false);
-  
+  }
-}}
+}
 async function getTableData() {
   const useInfo = userStore.getUserInfo;
   const listData = [];
@@ -431,7 +440,7 @@ function overTaskHandle() {
 
 function leaveTaskHandler() {
   overTask.value = null;
-   overTasktwo.value = null;
+  overTasktwo.value = null;
 }
 
 function showActionsModal() {
@@ -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) {
@@ -529,13 +544,96 @@ function overTaskHandelr(item: any) {
   if (validate([item]) == null && batchtwo.value === false)
     overTasktwo.value = item;
 }
-function closePassno(){
+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,15 +731,49 @@ 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',
+              ? {
-                'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+                  position: 'relative',
-              }
+                  flex: 2,
+                  'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+                }
+              : {
+                  height: '92vh',
+                  flex: 2,
+                  'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+                }
             : {
                 '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,140 +1167,113 @@ 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 class="list">
+          <div
+            v-for="item in taskDetailPictureList"
+            :key="item.id"
+            class="item"
+            draggable="true"
+            @dragend="
+              (event) => {
+                handleDragEnd(event, item);
+              }
+            "
+          >
+            <div
+              class="img-wrapper"
+              :style="{
+                'background-image': `url(${item.serverThumbnailUrl})`,
+              }"
+              @mouseover="overTaskHandelr(item)"
+              @mouseleave="leaveTaskHandler"
+            >
               <div
-                v-for="item in taskDetailPictureList"
+                v-show="overTasktwo && overTasktwo.id === item.id && !batch"
-                :key="item.id"
+                class="action"
-                class="item"
-                draggable="true"
-                @dragend="
-                  (event) => {
-                    handleDragEnd(event, item);
-                  }
-                "
               >
-                <div
+                <SvgIcon
-                  class="img-wrapper"
+                  style="cursor: pointer"
-                  :style="{
+                  name="t1"
-                    'background-image': `url(${item.serverThumbnailUrl})`,
+                  @click.stop="approvalHandler([item])"
-                  }"
+                />
-                           @mouseover="overTaskHandelr(item)"
+                <SvgIcon
-        @mouseleave="leaveTaskHandler"
+                  style="cursor: pointer; margin-left: 40px"
-                >
+                  name="t2"
-             
+                  @click.stop="singleRejectHandlex(item)"
-                 <div
+                />
-            v-show="overTasktwo&& overTasktwo.id === item.id&&!batch"
+              </div>
-            class="action"
+            </div>
-      
+            <div class="small-mark" />
-       
+            <div class="check">
-          >
+              <n-checkbox
-            <SvgIcon
+                v-show="batch && item.historyStates === 1"
-              style="cursor: pointer"
+                v-model:checked="item.checked"
-              name="t1"
+                @click.stop
-              @click.stop="approvalHandler([item])"
+                @update:checked="onCheckChange($event, item)"
+              />
+            </div>
+
+            <img
+              v-if="item.historyStates === 2"
+              class="tag-status"
+              src="@/assets/images/task/tag-pass.png"
+              alt=""
             />
-            <SvgIcon
+            <img
-              style="cursor: pointer; margin-left: 40px"
+              v-if="item.historyStates === 3"
-              name="t2"
+              class="tag-status"
-              @click.stop="singleRejectHandlex(item)"
+              src="@/assets/images/task/tag-not-pass.png"
+              alt=""
             />
-          </div>
+            <div class="time">
-                </div>
+              <div class="time-item">
-                <div class="small-mark" />
+                <SvgIcon
-                <div class="check">
+                  class="svg-time"
-                  <n-checkbox
+                  color="#FFF"
-                    v-show="batch && item.historyStates === 1"
+                  size="16"
-                    v-model:checked="item.checked"
+                  name="camera-time"
-                    @click.stop
-                    @update:checked="onCheckChange($event, item)"
-                  />
-                </div>
-
-                <img
-                  v-if="item.historyStates === 2"
-                  class="tag-status"
-                  src="@/assets/images/task/tag-pass.png"
-                  alt=""
                 />
-                <img
+                <span>{{
-                  v-if="item.historyStates === 3"
+                  item.photoDateTimestamp
-                  class="tag-status"
+                    ? formatToDateHMS(Number(item.photoDateTimestamp))
-                  src="@/assets/images/task/tag-not-pass.png"
+                    : "-"
-                  alt=""
+                }}</span>
+              </div>
+              <div class="time-item time-item2">
+                <SvgIcon
+                  class="svg-time"
+                  color="#FFF"
+                  size="16"
+                  name="submit-time"
                 />
-                <div class="time">
+                <span>{{
-                  <div class="time-item">
+                  item.submitDateTimestamp
-                    <SvgIcon
+                    ? formatToDateHMS(Number(item.submitDateTimestamp))
-                      class="svg-time"
+                    : "-"
-                      color="#FFF"
+                }}</span>
-                      size="16"
-                      name="camera-time"
-                    />
-                    <span>{{
-                      item.photoDateTimestamp
-                        ? formatToDateHMS(Number(item.photoDateTimestamp))
-                        : "-"
-                    }}</span>
-                  </div>
-                  <div class="time-item time-item2">
-                    <SvgIcon
-                      class="svg-time"
-                      color="#FFF"
-                      size="16"
-                      name="submit-time"
-                    />
-                    <span>{{
-                      item.submitDateTimestamp
-                        ? formatToDateHMS(Number(item.submitDateTimestamp))
-                        : "-"
-                    }}</span>
-                  </div>
-                </div>
-                <div
-                  :class="{ 'percent-red': item.similarityScore === 100 }"
-                  class="percent"
-                >
-                  {{ item.similarityScore }}<span class="percent-unit">%</span>
-                </div>
               </div>
-              
             </div>
-    </div>
+            <div
-     <!-- <div class="wrapper-list">
+              :class="{ 'percent-red': item.similarityScore === 100 }"
+              class="percent"
+            >
+              {{ item.similarityScore }}<span class="percent-unit">%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="wrapper-list">
         <div
           v-for="(item, index) in taskDetailPictureList"
           :key="index"
@@ -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;
@@ -1882,145 +2021,147 @@ function closePassno(){
   margin: 3px 0 10px 0;
   max-width: 650px;
 }
- .allview {
+.allview {
-      flex: 0.5;
+  // overflow-y: auto;
-      background: #f6f9fd;
+  //height: 400px;
-      border-radius: 8px;
+  flex: 0.5;
-     // margin-left: 20px;
+  background: #f6f9fd;
-      padding-top: 24px;
+  border-radius: 8px;
-      .action {
+  // margin-left: 20px;
-        position: absolute;
+  padding-top: 24px;
-        z-index: 10;
+  .action {
-        width: 100%;
+    position: absolute;
-        height: 100%;
+    z-index: 10;
-        display: flex;
+    width: 100%;
-        border-radius: 8px;
+    height: 100%;
-        align-items: center;
+    display: flex;
-        justify-content: center;
+    border-radius: 8px;
-        background-color: rgba(0, 0, 0, 0.5);
+    align-items: center;
-      }
+    justify-content: center;
-      .right-card {
+    background-color: rgba(0, 0, 0, 0.5);
-        padding: 3px;
+  }
-      }
+  .right-card {
-
+    padding: 3px;
-      .header {
+  }
-        display: flex;
-        justify-content: space-between;
-        font-size: 17px;
-        font-weight: bold;
-        color: #333333;
-        margin-bottom: 16px;
-      }
-
-      .list {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-        justify-content: flex-start;
-        flex-shrink: 0;
-      }
-
-      .item {
-        // flex-basis: calc((100% - 48px) / 3);
-        box-sizing: border-box;
-        border-radius: 8px;
-        position: relative;
-        // overflow: hidden;
-        margin: 0px 16px 27px 0px;
-
-        .small-mark {
-          width: 100%;
-          height: 53px;
-          background: linear-gradient(
-            180deg,
-            rgba(0, 0, 0, 0.01),
-            rgba(0, 0, 0, 0.44) 88%
-          );
-          border-radius: 0px 8px 8px 8px;
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          z-index: 0;
-        }
-
-        .tag-status {
-          width: 46px;
-          height: 22px;
-          position: absolute;
-          left: -4px;
-          top: 4px;
-        }
-
-        .time {
-          position: absolute;
-          z-index: 3;
-          left: 3px;
-          bottom: 3px;
 
-          .time-item {
+  .header {
-            display: flex;
+    display: flex;
-            align-items: center;
+    justify-content: space-between;
-            font-size: 16px;
+    font-size: 17px;
-            font-family: PingFang SC, PingFang SC-Medium;
+    font-weight: bold;
-            font-weight: 500;
+    color: #333333;
-            color: #ffffff;
+    margin-bottom: 16px;
-            margin-bottom: 2px;
+  }
-            line-height: 12px;
-          }
 
-          .time-item2 {
+  .list {
-            margin-bottom: 0;
+    display: flex;
-          }
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-shrink: 0;
+  }
 
-          .svg-time {
+  .item {
-            margin-right: 5px;
+    // flex-basis: calc((100% - 48px) / 3);
-          }
+    box-sizing: border-box;
-        }
+    border-radius: 8px;
+    position: relative;
+    // overflow: hidden;
+    margin: 0px 16px 27px 0px;
+
+    .small-mark {
+      width: 100%;
+      height: 53px;
+      background: linear-gradient(
+        180deg,
+        rgba(0, 0, 0, 0.01),
+        rgba(0, 0, 0, 0.44) 88%
+      );
+      border-radius: 0px 8px 8px 8px;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      z-index: 0;
+    }
 
-        .img-wrapper {
+    .tag-status {
-          position: relative;
+      width: 46px;
-          width: 230px;
+      height: 22px;
-          height: 130px;
+      position: absolute;
-          overflow: hidden;
+      left: -4px;
-          background-size: cover;
+      top: 4px;
-          background-position: center;
+    }
-          background-repeat: no-repeat;
-          border-radius: 8px;
-          cursor: n-resize;
-        }
 
-        .check {
+    .time {
-          position: absolute;
+      position: absolute;
-          z-index: 5;
+      z-index: 3;
-          left: 6px;
+      left: 3px;
-          top: 4px;
+      bottom: 3px;
-        }
-      }
 
-      .percent {
+      .time-item {
-        position: absolute;
         display: flex;
         align-items: center;
-        justify-content: center;
+        font-size: 16px;
-        width: 35px;
+        font-family: PingFang SC, PingFang SC-Medium;
-        height: 18px;
+        font-weight: 500;
-        opacity: 0.9;
+        color: #ffffff;
-        background: #6f92fd;
+        margin-bottom: 2px;
-        border-radius: 6px 0px 6px 0px;
+        line-height: 12px;
-        z-index: 5;
-        right: 12px;
-        top: 2px;
-        color: #fff;
-        font-size: 14px;
       }
 
-      .percent-unit {
+      .time-item2 {
-        font-size: 8px;
+        margin-bottom: 0;
-        margin-top: 4px;
       }
 
-      .percent-red {
+      .svg-time {
-        background: #ff4e4f;
+        margin-right: 5px;
       }
     }
+
+    .img-wrapper {
+      position: relative;
+      width: 230px;
+      height: 130px;
+      overflow: hidden;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      border-radius: 8px;
+      cursor: n-resize;
+    }
+
+    .check {
+      position: absolute;
+      z-index: 5;
+      left: 6px;
+      top: 4px;
+    }
+  }
+
+  .percent {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 35px;
+    height: 18px;
+    opacity: 0.9;
+    background: #6f92fd;
+    border-radius: 6px 0px 6px 0px;
+    z-index: 5;
+    right: 12px;
+    top: 2px;
+    color: #fff;
+    font-size: 14px;
+  }
+
+  .percent-unit {
+    font-size: 8px;
+    margin-top: 4px;
+  }
+
+  .percent-red {
+    background: #ff4e4f;
+  }
+}
 </style>