feat: 解决冲突

src/views/home/content/Content.vue

@@ -4,18 +4,15 @@ import { Download as DownloadIcon, Upload as UploadIcon } from '@vicons/tabler'
 import { Icon } from '@vicons/utils'
 import { useInfiniteScroll } from '@vueuse/core'
 import dayjs from 'dayjs'
-
+import imagesloaded from 'imagesloaded'
-// import imagesloaded from 'imagesloaded'
 import { cloneDeep, debounce } from 'lodash-es'
-
+import Masonry from 'masonry-layout'
-// import Masonry from 'masonry-layout'
 import { NIcon, useMessage } from 'naive-ui'
 import type { Component } from 'vue'
 import {
   computed,
   h,
   nextTick,
-  onBeforeMount,
   onMounted,
   onUnmounted,
   onUpdated,
@@ -57,9 +54,9 @@ const listData = ref<any[]>([])
 const timer = ref()
 const showClose = ref(false)
 const deviceHeight = ref(600)
-// let _masonry: null | Masonry = null
+let _masonry: null | Masonry = null
-// let _imagesload: any
+let _imagesload: any
-// const masonryRef = ref<ComponentRef>(null)
+const masonryRef = ref<ComponentRef>(null)
 const el = ref<HTMLDivElement | null>(null)
 const viewMode = ref('masonry')
 const pagination = reactive({
@@ -104,36 +101,36 @@ const listStyle = computed(() => {
   }
 })
 
-// const layout = debounce(() => {
+const layout = debounce(() => {
-//   if (masonryRef.value == null || el.value == null)
+  if (masonryRef.value == null || el.value == null)
-//     return
+    return
-
+
-//   if (_masonry !== null)
+  if (_masonry !== null)
-//     (_masonry as any).addItems()
+    (_masonry as any).addItems()
-
+
-//   _masonry = new Masonry(masonryRef.value as any, {
+  _masonry = new Masonry(masonryRef.value as any, {
-//     itemSelector: '.grid-item',
+    itemSelector: '.grid-item',
-//     gutter: 17,
+    gutter: 17,
-//     columnWidth: 182,
+    columnWidth: 182,
-//     percentPosition: true,
+    percentPosition: true,
-//     stagger: 10,
+    stagger: 10,
-//   })
+  })
-//   loading.value = false
+  loading.value = false
-//   // 暂时注释，请忽略
+  // 暂时注释，请忽略
-//   _imagesload = imagesloaded('.grid-item')
+  _imagesload = imagesloaded('.grid-item')
-
+
-//   _imagesload.on('done', (instance) => {
+  _imagesload.on('done', (instance) => {
-//     (_masonry as any).layout()
+    (_masonry as any).layout()
-//     if (!el.value)
+    if (!el.value)
-//       return
+      return
-//     loading.value = false
+    loading.value = false
-//   })
+  })
-
+
-//   _imagesload.on('fail', (instance) => {
+  _imagesload.on('fail', (instance) => {
-//     message.error('图片错误')
+    message.error('图片错误')
-//     loading.value = false
+    loading.value = false
-//   })
+  })
-// }, 300)
+}, 300)
 
 useInfiniteScroll(
   el as any,
@@ -143,25 +140,12 @@ useInfiniteScroll(
   { distance: 10, canLoadMore: () => canloadMore },
 )
 
-onBeforeMount(async () => {
-  const more = await featchList()
-  more.forEach((item) => {
-    item.calHeight = 182 * item.high / item.wide
-  })
-  listData.value = more
-  const tmore = await featchList()
-  tmore.forEach((item) => {
-    item.calHeight = 182 * item.high / item.wide
-  })
-  listData.value = listData.value.concat(tmore)
-})
-
 onUpdated(() => {
-  // nextTick(() => {
+  nextTick(() => {
-  //   setTimeout(() => {
+    setTimeout(() => {
-  //     layout()
+      layout()
-  //   }, 50)
+    }, 50)
-  // })
+  })
 })
 
 const timeRange = ref('')
@@ -173,6 +157,14 @@ const timeLabel = computed(() => {
   return item?.label
 })
 
+const viewLabel = computed(() => {
+  const item = viewOptions.find((option) => {
+    return option.value === viewMode.value
+  })
+
+  return item?.label
+})
+
 const isAllowDownload = ref(true)
 const calNum = ref(0)
 const searchValue = ref('')
@@ -262,48 +254,46 @@ async function featchList(userSearchId?: string) {
 
     const list = data.map((item) => {
       return {
-        calHeight: 0,
         imgUrl: item.imgurl,
-        thumburl: item.serverThumbnailUrl,
+        thumburl: item.serverThumbnailUrl || item.imgurl || bgLoadingImg,
         upname: item.upname,
         ocrPictureclass: item.ocrPictureclass,
         uphead: item.uphead,
         similar: item.similarityscore || -1,
         imgName: item.imgname,
         states: item.states,
-        wide: item.wide,
-        high: item.high,
         loadOver: false,
+        isRepeatHis: item.isRepeatHis,
       }
     })
-    loading.value = false
+
     return list
   }
   catch (error) {
     canloadMore = false
-    loading.value = false
     return []
   }
 }
 
 async function loadMore() {
-  console.log('loading.value加兹安', loading.value, el.value)
   if (loading.value || el.value == null)
     return
-  canloadMore = false
+
   const more = await featchList()
-  more.forEach((item) => {
+  // if(isInitSeaerch.value) {
-    item.calHeight = 182 * item.high / item.wide
+  //   listData.value = []
-  })
+  //   isInitSeaerch.value = false
-  // listData.value.push(...more)
+  // }
-  listData.value = listData.value.concat(more)
+
-  console.log('listData.value出来了', listData.value)
+  console.log(more)
+  listData.value.push(...more)
+  console.log(listData.value)
 }
 
 const gridHeight = computed(() => {
   let height = ''
   if (viewMode.value === 'masonry')
-    height = 'auto'
+    height = ''
   else if (viewMode.value === 'horizontalVersion')
     height = '145px'
   else if (viewMode.value === 'verticalVersion')
@@ -491,13 +481,9 @@ function reset() {
   canloadMore = true
   filterId = null
 
-  // layout()
+  layout()
 }
 
-watch(listData.value, (newVal, oldVal) => {
-  console.log('最新的val', newVal)
-})
-
 async function refreshHandler(filtersearchId?: any) {
   reset()
 
@@ -657,16 +643,6 @@ const dropdownOptions = ref([
   },
 ])
 
-function finish() {
-  console.log('finish')
-}
-
-function scroll() {
-
-}
-
-const masonryRef = ref(null)
-
 defineExpose({
   showLoginSuccessModal,
   closeLoginSuccessModal,
@@ -739,30 +715,24 @@ defineExpose({
           <span style="color: #507afd; font-weight: 500">{{ totalCount }}</span> 项</span>
       </div>
 
-      <!-- <n-spin :show="loading"> -->
+      <n-spin :show="loading">
         <div ref="el" class="scroll" :style="listStyle">
-        <waterfall :col="8" :data="listData" :gutter-width="10" @finish="finish">
+          <!-- <n-scrollbar :on-scroll="scrollHandler"> -->
+          <div ref="masonryRef" class="grid">
             <div
               v-for="(item, index) in listData"
-            :key="item.calHeight"
+              :key="index"
-            :style="{ height: gridHeight }"
+              :style="{ height: gridHeight, minHeight: gridMinHeight }"
               class="grid-item"
             >
-            <img
+              <!-- <div :style="{ 'background-color': randomColor(0.2) }" class="wrapper-content-item-img" /> -->
-              :key="item.thumburl"
+              <!-- <img
-              v-lazy="item.thumburl"
+                class="wrapper-content-item-img" :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }"
-              :class="{
+                :src="item.imgUrl"
-                'img-fit': viewMode === 'horizontalVersion',
+              > -->
-                'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
-              }"
-              :style="{ height: `${`${item.calHeight}px`}` }"
-              class="img"
-              alt="加载错误"
-            >
 
               <n-image
                 ref="imageRef"
-              :key="item.imgUrl"
                 class="img"
                 :img-props="{
                   onClick: ($event) => {
@@ -778,9 +748,7 @@ defineExpose({
                 :src="item.thumburl"
                 :fallback-src="bgLoadingImg"
                 :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
-              style="display: none"
               />
-
               <img
                 v-if="item.states == 3"
                 class="tag-status"
@@ -793,6 +761,29 @@ defineExpose({
                 src="@/assets/images/task/tag-not-pass.png"
                 alt=""
               >
+              <img
+                v-if="(item.states != 3 && item.states != 5) && item.isRepeatHis"
+                class="tag-status"
+                src="@/assets/images/reset.png"
+                alt=""
+              >
+              <img
+                v-if="(item.states == 3 || item.states == 5) && item.isRepeatHis"
+                style="top:35px"
+                class="tag-status"
+                src="@/assets/images/reset.png"
+                alt=""
+              >
+              <!-- @load="loadImgOver(item)" -->
+              <!-- <n-image
+                class="img"
+                :class="{
+                  'img-fit': viewMode === 'horizontalVersion',
+                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+                }"
+                :src="baseImg"
+                v-show="!item.loadOver"
+              /> -->
 
               <div v-if="item.similar != -1" class="percent">
                 <SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
@@ -845,11 +836,16 @@ defineExpose({
                   />
                   <span>{{ item.upname }}</span>
                 </div>
+                <!-- <div class="right">
+                  <span :style="{ marginRight: '5px' }">分类</span>
+                  <span>{{ item.ocrPictureclass?.classname }}</span>
+                </div> -->
               </div>
             </div>
-        </waterfall>
           </div>
-      <!-- </n-spin> -->
+          <!-- </n-scrollbar> -->
+        </div>
+      </n-spin>
     </div>
     <PackageSettingsModal ref="packageModalRef" @commit="commitHandler" />
     <GeneratePackageModal ref="generateModalRef" />
@@ -873,6 +869,7 @@ defineExpose({
   flex-direction: column;
   box-sizing: border-box;
   margin-left: 16px;
+   margin-right: 16px;
   width: 100%;
 
   &-header {
@@ -919,26 +916,19 @@ defineExpose({
       padding-bottom: 16px;
     }
 
-    .grid{
-      display: block !important;
-    }
-
     .img {
-      width: 182px;
-      max-width: 182px;
       border-radius: 7px;
       display: block;
-      opacity: 1 !important;
+      height: calc(100% - 25px);
-      // height: calc(100% - 25px);
     }
 
     .img-fit {
-      width: 182px;
+      width: 100%;
       overflow: hidden;
     }
 
     .img-full {
-      width: 182px;
+      width: 100%;
       overflow: hidden;
 
       ::v-deep(img) {