相似图展示

src/views/task/modal/BatchModal.vue

@@ -5,8 +5,10 @@ import { useInfiniteScroll } from '@vueuse/core'
 import { debounce } from 'lodash-es'
 import imagesloaded from 'imagesloaded'
 import { useMessage } from 'naive-ui'
+import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
+import { getViewportOffset, off, on } from '@/utils/domUtils'
+
 import { timeOptions, viewOptions } from '@/config/home'
-import { off, on } from '@/utils/domUtils'
 import { useTask } from '@/store/modules/task'
 import { TASK_STATUS_OBJ } from '@/enums/index'
 import { formatToDateHMS } from '@/utils/dateUtil'
@@ -43,6 +45,7 @@ const viewLabel = computed(() => {
 
   return item?.label
 })
+const deviceHeight = ref(600)
 
 const taskStore = useTask()
 const masonryRef = ref<ComponentRef>(null)
@@ -64,6 +67,14 @@ const sortBy: any = {
 const batch = ref(false)
 let _imagesload: any
 const message = useMessage()
+async function computeListHeight() {
+  const headEl = document.querySelector('.wrapper-content')!
+  const { bottomIncludeBody } = getViewportOffset(headEl)
+  const height = bottomIncludeBody
+  deviceHeight.value = height - 40 - 16 - 24
+}
+
+useWindowSizeFn(computeListHeight)
 
 const layout = debounce(() => {
   if (!show.value)
@@ -74,6 +85,7 @@ const layout = debounce(() => {
 
   _masonry = new Masonry(masonryRef.value as any, {
     itemSelector: '.grid-item',
+    gutter: 17,
     columnWidth: 214,
     percentPosition: true,
     stagger: 10,
@@ -208,9 +220,9 @@ function upHandler(event: MouseEvent) {
   start = null
 }
 
-const gridHeight = computed(() => {
+// const gridHeight = computed(() => {
-  return viewMode.value !== 'masonry' ? '157px' : ''
+//   return viewMode.value !== 'masonry' ? '157px' : ''
-})
+// })
 
 function addListeners() {
   selectionBox = document.querySelector('.selection-box') as HTMLDivElement
@@ -346,6 +358,12 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
   refreshHandler()
 })
 
+const listStyle = computed(() => {
+  return {
+    height: `${deviceHeight.value}px`,
+  }
+})
+
 function switchBatch() {
   setBatch(!batch.value)
 }
@@ -363,19 +381,19 @@ function sortHandler(orderby: 'similarityScore' | 'createdate') {
   refreshHandler()
 }
 
-// const gridHeight = computed(() => {
+const gridHeight = computed(() => {
-//   let height = ''
+  let height = ''
-//   if (viewMode.value === 'masonry')
+  if (viewMode.value === 'masonry')
-//     height = ''
+    height = ''
-//   else if (viewMode.value === 'horizontalVersion')
+  else if (viewMode.value === 'horizontalVersion')
-//     height = '145px'
+    height = '122px'
-//   else if (viewMode.value === 'verticalVersion')
+  else if (viewMode.value === 'verticalVersion')
-//     height = '300px'
+    height = '300px'
-//   else if (viewMode.value === '3:4')
+  else if (viewMode.value === '3:4')
-//     height = '240px'
+    height = '240px'
-
+
-//   return height
+  return height
-// })
+})
 
 defineExpose({
   showModal,
@@ -505,51 +523,57 @@ defineExpose({
               </div>
             </div>
 
-            <div ref="el" class="scroll">
+            <n-spin :show="loading">
-              <!-- <n-scrollbar :on-scroll="scrollHandler"> -->
+              <div ref="el" class="scroll" :style="listStyle">
-              <div ref="masonryRef" class="grid">
+                <!-- <n-scrollbar :on-scroll="scrollHandler"> -->
-                <div
+                <div ref="masonryRef" class="grid">
-                  v-for="(item, index) in listData" :key="index" :data-id="item.id" :style="{ height: gridHeight }"
+                  <div
-                  class="grid-item"
+                    v-for="(item, index) in listData"
-                >
+                    :key="index"
-                  <div class="img-wrap">
+                    :style="{ height: gridHeight }"
-                    <!-- <img
+                    class="grid-item"
-                      class="wrapper-content-item-img"
+                  >
-                      :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
+                    <div>
-                    > -->
+                      <n-image
-                    <n-image
+                        ref="imageRef"
-                      ref="imageRef"
+                        class="img"
-                      class="img"
+
-                      :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" :src="item.serverThumbnailUrl || item.imgUrl"
+                        :class="{
-                    />
+                          'img-fit': viewMode === 'horizontalVersion',
-                    <div class="small-mark" />
+                          'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
-                    <div class="time">
+                        }"
-                      <div v-if="item.photoDateTimestamp" class="time-item">
+
-                        <SvgIcon class="svg-time" color="#FFF" size="14" name="camera-time" />
+                        :src="item.serverThumbnailUrl || item.imgUrl"
-                        <span>{{ formatToDateHMS(Number(item.photoDateTimestamp) || 0) }}</span>
+                      />
+                      <div class="small-mark" />
+                      <div class="time">
+                        <div v-if="item.photoDateTimestamp" class="time-item">
+                          <SvgIcon class="svg-time" color="#FFF" size="14" name="camera-time" />
+                          <span>{{ formatToDateHMS(Number(item.photoDateTimestamp) || 0) }}</span>
+                        </div>
+                        <div v-if="item.submitDateTimestamp" class="time-item time-item2">
+                          <SvgIcon class="svg-time" color="#FFF" size="14" name="submit-time" />
+                          <span>{{ formatToDateHMS(Number(item.submitDateTimestamp) || 0) }}</span>
+                        </div>
                       </div>
-                      <div v-if="item.submitDateTimestamp" class="time-item time-item2">
+                      <img v-if="item.historyStates === 2" class="tag-status" src="@/assets/images/task/tag-pass.png" alt="">
-                        <SvgIcon class="svg-time" color="#FFF" size="14" name="submit-time" />
+                      <img v-if="item.historyStates === 3" class="tag-status" src="@/assets/images/task/tag-not-pass.png" alt="">
-                        <span>{{ formatToDateHMS(Number(item.submitDateTimestamp) || 0) }}</span>
+                      <div class="check">
+                        <n-checkbox
+                          v-show="batch && item.historyStates === 1"
+                          v-model:checked="item.checked" @click.prevent
+                          @update:checked="onCheckChange($event, item)"
+                        />
+                      </div>
+                      <div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
+                        {{ item.similarityScore }}<span class="percent-unit">%</span>
                       </div>
-                    </div>
-                    <img v-if="item.historyStates === 2" class="tag-status" src="@/assets/images/task/tag-pass.png" alt="">
-                    <img v-if="item.historyStates === 3" class="tag-status" src="@/assets/images/task/tag-not-pass.png" alt="">
-                    <div class="check">
-                      <n-checkbox
-                        v-show="batch && item.historyStates === 1"
-                        v-model:checked="item.checked" @click.prevent
-                        @update:checked="onCheckChange($event, item)"
-                      />
-                    </div>
-                    <div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
-                      {{ item.similarityScore }}<span class="percent-unit">%</span>
                     </div>
                   </div>
                 </div>
+                <!-- </n-scrollbar> -->
               </div>
-              <!-- </n-scrollbar> -->
+            </n-spin>
-            </div>
           </div>
 
           <div class="close" @pointerdown="closeModal">
@@ -728,7 +752,7 @@ defineExpose({
   }
 
   &-m32 {
-    margin-left: 19px;
+    // margin-left: 19px;
   }
 
   &-content {
@@ -778,17 +802,20 @@ defineExpose({
         display: block;
         height: 100%;
       }
+    }
 
-      &-img-fit {
+    .img-fit {
-        width: 100%;
+      width: 100%;
-        object-fit: cover;
+      object-fit: cover;
-      }
+      overflow: hidden;
     }
 
     .img {
       border-radius: 7px;
       display: block;
-      height: calc(100% - 25px);
+      // height: calc(100% - 25px);
+      height: 100%;
+      width: 100%;
     }
 
     .img-full {
@@ -804,8 +831,11 @@ defineExpose({
 
     .grid-item {
       width: 214px;
-      padding: 16px;
+      // padding: 16px;
+      // width: 182px;
       position: relative;
+      margin-bottom: 32px;
+      transition: 0.5s;
 
       .check{
         position: absolute;
@@ -851,4 +881,7 @@ defineExpose({
     }
   }
 }
+::v-deep(.n-image img) {
+  width: 100%!important;
+}
 </style>