fix:沉浸模式布局及不同状态优化

src/views/task/content/Content.vue

@@ -1,5 +1,14 @@
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, reactive, ref, unref, watch } from "vue";
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  unref,
+  watch,
+  nextTick,
+} from "vue";
 import { chunk, clone } from "lodash-es";
 import { useDialog, useMessage } from "naive-ui";
 import { useRoute, useRouter } from "vue-router";
@@ -12,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,
@@ -44,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;
@@ -97,6 +111,9 @@ onMounted(() => {
 
 let lastKeyPressTime = 0;
 let keyPressTimer = null;
+function changeimgbigshow() {
+  imgbigshow.value = !imgbigshow.value;
+}
 const doubleClickInterval = 300; // 可以自定义间隔时间，单位是毫秒
 // 键盘左右箭头快捷切换
 function handleKeydown(event) {
@@ -117,12 +134,16 @@ function handleKeydown(event) {
       // 清除已经设置的定时器（如果有的话）
       clearTimeout(keyPressTimer);
       const item = taskDetailInfo.value;
-      if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) {
+      if (
+        item?.userapprove?.statshis === 2 ||
+        item?.userapprove?.statshis == 3
+      ) {
         overTask.value = null;
         return;
       }
 
-      if (validate([item]) == null && batch.value === false) overTask.value = item;
+      if (validate([item]) == null && batch.value === false)
+        overTask.value = item;
       // 执行想要的操作
       approvalHandler();
 
@@ -146,12 +167,16 @@ function handleKeydown(event) {
     // 如果两次按键时间间隔小于我们设定的双击间隔，则认为是双击
     if (now - lastKeyPressTime < doubleClickInterval) {
       const item = taskDetailInfo.value;
-      if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) {
+      if (
+        item?.userapprove?.statshis === 2 ||
+        item?.userapprove?.statshis == 3
+      ) {
         overTask.value = null;
         return;
       }
 
-      if (validate([item]) == null && batch.value === false) overTask.value = item;
+      if (validate([item]) == null && batch.value === false)
+        overTask.value = item;
       // 执行想要的操作
       const modal = unref(notPassModalRef)! as any;
       modal.showModal([taskDetailInfo.value]);
@@ -224,7 +249,8 @@ function approvalHandler(items?: any) {
     processItems = [cloneItem];
   }
 
-  if (items !== undefined && !(items instanceof PointerEvent)) processItems = items;
+  if (items !== undefined && !(items instanceof PointerEvent))
+    processItems = items;
 
   const msg = validate(processItems);
 
@@ -434,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();
@@ -471,7 +503,9 @@ function notPassSuccess(param) {
 function reloadList(param, text) {
   // 修改左侧状态
   const id = currentTaskId();
-  const hasCurrentId = param.flowTaskInfoList.find((item) => item.formId === id);
+  const hasCurrentId = param.flowTaskInfoList.find(
+    (item) => item.formId === id
+  );
   finalStore.setListKey();
   if (hasCurrentId) emit("setAsideItemName", text);
 
@@ -496,7 +530,9 @@ function getrowValue(e) {
     const hostname = window.location.hostname;
     const port = window.location.port;
     const hostWithPort = protocol + "//" + hostname + ":" + port + "/";
-    window.open(hostWithPort + "map" + "?name=" + name + "&lat=" + lat + "&lng=" + lng);
+    window.open(
+      hostWithPort + "map" + "?name=" + name + "&lat=" + lat + "&lng=" + lng
+    );
   }
 }
 function overTaskHandelr(item: any) {
@@ -505,21 +541,115 @@ function overTaskHandelr(item: any) {
     return;
   }
 
-  if (validate([item]) == null && batchtwo.value === false) overTasktwo.value = item;
+  if (validate([item]) == null && batchtwo.value === false)
+    overTasktwo.value = item;
 }
 function closePassno() {
   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>
         <template v-if="!isDetail">
-          <SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" />
+          <SvgIcon
-          <SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
+            size="22"
+            class="forward"
+            name="arrow-left"
+            @click="backHandler"
+          />
+          <SvgIcon
+            size="22"
+            class="back"
+            name="arrow-right"
+            @click="forwardHandler"
+          />
         </template>
       </div>
       <div v-if="!isDetail" class="right">
@@ -601,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})`,
               }
@@ -662,10 +826,18 @@ function closePassno() {
           />
         </div>
         <div class="mark">
-          <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 0" size="128" name="jia" />
+          <SvgIcon
+            v-show="taskDetailInfo?.iztrueorfalse === 0"
+            size="128"
+            name="jia"
+          />
         </div>
         <div class="mark">
-          <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 1" size="128" name="zhen" />
+          <SvgIcon
+            v-show="taskDetailInfo?.iztrueorfalse === 1"
+            size="128"
+            name="zhen"
+          />
         </div>
         <div class="big-mark" />
         <div class="preview" @click="previewHandler">
@@ -675,7 +847,11 @@ function closePassno() {
           <n-grid x-gap="12" y-gap="10" :cols="12">
             <n-gi span="4" class="gi1">
               <span>
-                <img class="icon-status" src="@/assets/images/task/status.png" alt="" />
+                <img
+                  class="icon-status"
+                  src="@/assets/images/task/status.png"
+                  alt=""
+                />
               </span>
             </n-gi>
             <n-gi span="8" class="gi2">
@@ -694,21 +870,36 @@ function closePassno() {
               </span>
             </n-gi>
             <n-gi span="8" class="gi2">
-              <span class="value num">{{ totalCount }}<span class="unit">张</span> </span>
+              <span class="value num"
+                >{{ totalCount }}<span class="unit">张</span>
+              </span>
               <span class="label">相似匹配</span>
             </n-gi>
           </n-grid>
         </div>
         <div class="time">
           <div class="time-item">
-            <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
+            <SvgIcon
-            <span>{{ taskDetailInfo?.ocrPicture?.photoDateTimestamp ?? "-" }}</span>
+              class="svg-time"
+              color="#FFF"
+              size="16"
+              name="camera-time"
+            />
+            <span>{{ taskDetailInfo?.ocrPicture?.photoDateTimestamp ?? "-" }}</span>
           </div>
           <div class="time-item time-item2">
-            <SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
+            <SvgIcon
+              class="svg-time"
+              color="#FFF"
+              size="16"
+              name="submit-time"
+            />
+            
             <span>{{
               taskDetailInfo?.ocrPicture?.submitDateTimestamp
-                ? formatToDateHMS(Number(taskDetailInfo.ocrPicture.submitDateTimestamp))
+                ? formatToDateHMS(
+                    Number(taskDetailInfo.ocrPicture.submitDateTimestamp)
+                  )
                 : "-"
             }}</span>
           </div>
@@ -722,7 +913,36 @@ 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
+        v-show="isFullScreen"
+          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">
@@ -776,7 +996,12 @@ function closePassno() {
                 />
                 <div class="time">
                   <div class="time-item">
-                    <SvgIcon class="svg-time" color="#FFF" size="8" name="camera-time" />
+                    <SvgIcon
+                      class="svg-time"
+                      color="#FFF"
+                      size="8"
+                      name="camera-time"
+                    />
                     <span>{{
                       item.photoDateTimestamp
                         ? formatToDateHMS(Number(item.photoDateTimestamp))
@@ -784,7 +1009,12 @@ function closePassno() {
                     }}</span>
                   </div>
                   <div class="time-item time-item2">
-                    <SvgIcon class="svg-time" color="#FFF" size="8" name="submit-time" />
+                    <SvgIcon
+                      class="svg-time"
+                      color="#FFF"
+                      size="8"
+                      name="submit-time"
+                    />
                     <span>{{
                       item.submitDateTimestamp
                         ? formatToDateHMS(Number(item.submitDateTimestamp))
@@ -853,10 +1083,16 @@ function closePassno() {
                       {{ item[0].value }}
                     </div>
                   </div>
-                  <div class="viewlabel" v-if="!(item[0].label == '拜访终端名称')">
+                  <div
+                    class="viewlabel"
+                    v-if="!(item[0].label == '拜访终端名称')"
+                  >
                     {{ item[0].label }}
                   </div>
-                  <div class="viewvalue" v-if="!(item[0].label == '拜访终端名称')">
+                  <div
+                    class="viewvalue"
+                    v-if="!(item[0].label == '拜访终端名称')"
+                  >
                     {{ item[0].value }}
                   </div>
                   <div
@@ -897,7 +1133,14 @@ function closePassno() {
       </n-tab-pane>
     </n-tabs>
     <div v-else class="imgbottom">
-      <div style="display: flex; justify-content: space-between; padding: 12px 0px 3px 0">
+      <div
+        v-show="imgbigshow"
+        style="
+          display: flex;
+          justify-content: space-between;
+          padding: 12px 0px 3px 0;
+        "
+      >
         <div>
           <span
             style="
@@ -930,7 +1173,7 @@ function closePassno() {
           </div>
         </div>
       </div>
-      <div class="allview">
+      <div class="allview" v-show="imgbigshow">
         <div class="list">
           <div
             v-for="item in taskDetailPictureList"
@@ -991,7 +1234,12 @@ function closePassno() {
             />
             <div class="time">
               <div class="time-item">
-                <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
+                <SvgIcon
+                  class="svg-time"
+                  color="#FFF"
+                  size="16"
+                  name="camera-time"
+                />
                 <span>{{
                   item.photoDateTimestamp
                     ? formatToDateHMS(Number(item.photoDateTimestamp))
@@ -999,7 +1247,12 @@ function closePassno() {
                 }}</span>
               </div>
               <div class="time-item time-item2">
-                <SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
+                <SvgIcon
+                  class="svg-time"
+                  color="#FFF"
+                  size="16"
+                  name="submit-time"
+                />
                 <span>{{
                   item.submitDateTimestamp
                     ? formatToDateHMS(Number(item.submitDateTimestamp))
@@ -1007,7 +1260,10 @@ function closePassno() {
                 }}</span>
               </div>
             </div>
-            <div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
+            <div
+              :class="{ 'percent-red': item.similarityScore === 100 }"
+              class="percent"
+            >
               {{ item.similarityScore }}<span class="percent-unit">%</span>
             </div>
           </div>
@@ -1094,14 +1350,24 @@ function closePassno() {
         </div>
       </div>-->
     </div>
-    <NotPassed ref="notPassModalRef" @success="notPassSuccess" @close="closePassno" />
+    <NotPassed
-    <BatchModal ref="batchModalRef" @reject="rejectHandler" @approval="approvalHandler" />
+      ref="notPassModalRef"
+      @success="notPassSuccess"
+      @close="closePassno"
+    />
+    <BatchModal
+      ref="batchModalRef"
+      @reject="rejectHandler"
+      @approval="approvalHandler"
+    />
     <CustomSettingModal ref="CustomSettingModalRef" @on-ok="getDetail" />
   </div>
 </template>
 
 <style lang="less" scoped>
+
 .fullscreen-container {
+  overflow-y: auto;
   /* 可添加其他样式 */
   width: 100vw;
   height: 100vh;
@@ -1753,6 +2019,8 @@ function closePassno() {
   max-width: 650px;
 }
 .allview {
+  // overflow-y: auto;
+  //height: 400px;
   flex: 0.5;
   background: #f6f9fd;
   border-radius: 8px;
@@ -1801,7 +2069,11 @@ function closePassno() {
     .small-mark {
       width: 100%;
       height: 53px;
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.44) 88%);
+      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;

src/views/task/index.vue

@@ -29,6 +29,9 @@ function setAsideItemName(text) {
 </template>
 
 <style lang="less" scoped>
+:deep(.wrapper){
+  top:0
+}
 .main {
   display: flex;
   flex-direction: row;