Merge pull request 'fix/updatesyspic' (#217) from fix/updatesyspic into test

Reviewed-on: #217

package.json

@@ -37,6 +37,7 @@
     "sortablejs": "^1.15.1",
     "vue": "^3.3.8",
     "vue-draggable-plus": "^0.3.5",
+    "vue-lazyload": "^3.0.0",
     "vue-mousetrap": "^1.0.5",
     "vue-router": "^4.1.6",
     "vue-types": "^4.2.1",

pnpm-lock.yaml

@@ -71,6 +71,9 @@ dependencies:
   vue-draggable-plus:
     specifier: ^0.3.5
     version: 0.3.5(@types/sortablejs@1.15.7)
+  vue-lazyload:
+    specifier: ^3.0.0
+    version: 3.0.0
   vue-mousetrap:
     specifier: ^1.0.5
     version: 1.0.5
@@ -7320,6 +7323,10 @@ packages:
       - supports-color
     dev: true
 
+  /vue-lazyload@3.0.0:
+    resolution: {integrity: sha512-h2keL/Rj550dLgesgOtXJS9qOiSMmuJNeVlfNAYV1/IYwOQYaWk5mFJlwRxmZDK9YC5gECcFLYYj7z1lKSf9ug==}
+    dev: false
+
   /vue-mousetrap@1.0.5:
     resolution: {integrity: sha512-mDyPBBTnOrpUNDZ4vjd7X8emYwKFG2/Rsi5coZKDmF+dM5XpENrnvdmef4xHq2gcZ1HVmHqeI5jQP17p9fFpzA==}
     dependencies:

src/layout/components/Header/RecycleModal.vue

@@ -732,7 +732,7 @@ watch(() => pagination.pageNo, (newVal, oldVal) => {
                 >
                   <n-image
                     ref="imageRef"
-                    :src="item.imgUrl"
+                    :src="item?.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl"
                     :preview-src="item.imgUrl"
                     :fallback-src="bgLoadingImg"
                     class="img "

src/main.ts

@@ -5,6 +5,9 @@ import router, { setupRouter } from './router'
 import { setupGlobalProperties, setupMousestrap, setupNaive, setupNaiveDiscreteApi, setupSvgIcon } from '@/plugins'
 import { setupStore } from '@/store'
 import 'virtual:svg-icons-register'
+import VueLazyload from 'vue-lazyload'
+import bgPng from '@/assets/images/bg-loading.png'
+import closePng from '@/assets/images/close.png'
 
 async function bootstrap() {
   const app = createApp(App)
@@ -19,6 +22,12 @@ async function bootstrap() {
 const meta = document.createElement('meta')
   meta.name = 'naive-ui-style'
   document.head.appendChild(meta)
+  app.use(VueLazyload, {
+    preLoad: 1.3,
+    error: closePng,
+    loading: bgPng,
+    attempt: 1
+  })
   app.mount('#app', true)
 }
 

src/views/home/content/Content.vue

@@ -115,20 +115,21 @@ const layout = debounce(() => {
     percentPosition: true,
     stagger: 10,
   })
-
-  _imagesload = imagesloaded('.grid-item')
-
-  _imagesload.on('done', (instance) => {
-    (_masonry as any).layout()
-    if (!el.value)
-      return
   loading.value = false
-  })
+  // 暂时注释，请忽略
+  // _imagesload = imagesloaded('.grid-item')
 
-  _imagesload.on('fail', (instance) => {
+  // _imagesload.on('done', (instance) => {
-    message.error('图片错误')
+  //   (_masonry as any).layout()
-    loading.value = false
+  //   if (!el.value)
-  })
+  //     return
+  //   loading.value = false
+  // })
+
+  // _imagesload.on('fail', (instance) => {
+  //   message.error('图片错误')
+  //   loading.value = false
+  // })
 }, 300)
 
 useInfiniteScroll(
@@ -250,7 +251,7 @@ async function featchList(userSearchId?: string) {
     const list = data.map((item) => {
       return {
         imgUrl: item.imgurl,
-        thumburl: item.serverThumbnailUrl || item.imgurl || '',
+        thumburl: item.serverThumbnailUrl || item.imgurl || bgLoadingImg,
         upname: item.upname,
         ocrPictureclass: item.ocrPictureclass,
         uphead: item.uphead,
@@ -295,6 +296,16 @@ const gridHeight = computed(() => {
   return height
 })
 
+const gridMinHeight = computed(() => {
+  let height = ''
+  if (viewMode.value === 'masonry' && loading.value)
+    height = '145px'
+  else 
+    height = ''
+
+  return height
+})
+
 async function oneCheck() {
   const asideVal = cloneDeep(configStore.getAsideValue)
   asideVal.upUserName = searchValue.value
@@ -699,7 +710,7 @@ defineExpose({
             <div
               v-for="(item, index) in listData"
               :key="index"
-              :style="{ height: gridHeight }"
+              :style="{ height: gridHeight, minHeight: gridMinHeight }"
               class="grid-item"
             >
               <!-- <div :style="{ 'background-color': randomColor(0.2) }" class="wrapper-content-item-img" /> -->
@@ -724,17 +735,27 @@ defineExpose({
                 :preview-src="item.imgUrl"
                 :src="item.thumburl"
                 :fallback-src="bgLoadingImg"
+                style="display: none"
               />
+              <img @click="
+                      ($event) => {
+                        previewHandler(index, $event);
+                        hideDownload($event);
+                      }
+                    " v-lazy="item.thumburl" class="img" :class="{
+                  'img-fit': viewMode === 'horizontalVersion',
+                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+                }" alt="">
               <img
                 v-if="item.states == 3"
                 class="tag-status"
-                src="@/assets/images/task/tag-pass.png"
+                src="@/assets/images/pass.png"
                 alt=""
               >
               <img
                 v-if="item.states == 5"
                 class="tag-status"
-                src="@/assets/images/task/tag-not-pass.png"
+                src="@/assets/images/not-pass.png"
                 alt=""
               >
               <!-- @load="loadImgOver(item)" -->
@@ -941,7 +962,7 @@ defineExpose({
       width: 182px;
       border-radius: 7px;
       margin-bottom: 10px;
-      overflow: hidden;
+      overflow-x: visible;
       position: relative;
       transition: 0.5s;
       margin: 0 6px 10px 6px;
@@ -950,7 +971,7 @@ defineExpose({
         width: 46px;
         height: 22px;
         position: absolute;
-        left: -1px;
+        left: -3px;
         top: 10px;
       }
 

src/views/task/content/Content.vue

@@ -813,18 +813,18 @@ function sortHandler(orderby: 'similarityScore' | 'createdate') {
                 flex: 1,
                 // flex: 0.75,
                 // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-                background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
+                background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
               }
               : {
                 height: '92vh',
                 flex: 1,
 
                 // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-                background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
+                background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
               }
             : {
               // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-              background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
+              background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
             }
         "
         @mouseover="overTaskHandle"
@@ -1002,9 +1002,7 @@ function sortHandler(orderby: 'similarityScore' | 'createdate') {
                   class="img-wrapper"
                   :style="{
                     // 'background-image': `url(${item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl})`,
-                    background: `url(${
+                    background: `url(${item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl ? item.imgUrl : bgLoadingImg})`,
-                      item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl
-                    }), url(${bgLoadingImg})`,
                   }"
                 />
                 <div class="small-mark" />
@@ -1230,9 +1228,7 @@ function sortHandler(orderby: 'similarityScore' | 'createdate') {
               class="img-wrapper"
               :style="{
                 // 'background-image': `url(${item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl})`,
-                background: `url(${
+                background: `url(${item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl ? item.imgUrl : bgLoadingImg})`,
-                  item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl
-                }), url(${bgLoadingImg})`,
               }"
               @mouseover="overTaskHandelr(item)"
               @mouseleave="leaveTaskHandler"

src/views/worksheet/components/pictureCard.vue

@@ -70,17 +70,17 @@ function previewHandler(event: MouseEvent) {
             position: 'relative',
             flex: 2,
             // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-            background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
+            background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
           }
           : {
             height: '92vh',
             flex: 2,
             // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-            background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
+            background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
           }
         : {
           // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-          background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
+          background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
         }
     "
     @mouseover="overTaskHandle"

src/views/worksheet/content/Content.vue

@@ -834,11 +834,7 @@ defineExpose({
           >
             <div
               class="img-wrapper"
-              :style="{
+              :style="{ background: `url(${item?.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgurl ? item.imgurl: bgLoadingImg})` }"
-                background: `url(${
-                  item?.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgurl
-                }), url(${bgLoadingImg})`,
-              }"
             />
             <div class="time-wrapper">
               <div class="time">