|
|
|
|
@ -4,15 +4,18 @@ 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,
|
|
|
|
|
@ -54,9 +57,9 @@ const listData = ref<any[]>([])
|
|
|
|
|
const timer = ref()
|
|
|
|
|
const showClose = ref(false)
|
|
|
|
|
const deviceHeight = ref(600)
|
|
|
|
|
let _masonry: null | Masonry = null
|
|
|
|
|
let _imagesload: any
|
|
|
|
|
const masonryRef = ref<ComponentRef>(null)
|
|
|
|
|
// let _masonry: null | Masonry = null
|
|
|
|
|
// let _imagesload: any
|
|
|
|
|
// const masonryRef = ref<ComponentRef>(null)
|
|
|
|
|
const el = ref<HTMLDivElement | null>(null)
|
|
|
|
|
const viewMode = ref('masonry')
|
|
|
|
|
const pagination = reactive({
|
|
|
|
|
@ -101,36 +104,36 @@ const listStyle = computed(() => {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const layout = debounce(() => {
|
|
|
|
|
if (masonryRef.value == null || el.value == null)
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
if (_masonry !== null)
|
|
|
|
|
(_masonry as any).addItems()
|
|
|
|
|
|
|
|
|
|
_masonry = new Masonry(masonryRef.value as any, {
|
|
|
|
|
itemSelector: '.grid-item',
|
|
|
|
|
gutter: 17,
|
|
|
|
|
columnWidth: 182,
|
|
|
|
|
percentPosition: true,
|
|
|
|
|
stagger: 10,
|
|
|
|
|
})
|
|
|
|
|
loading.value = false
|
|
|
|
|
// 暂时注释，请忽略
|
|
|
|
|
_imagesload = imagesloaded('.grid-item')
|
|
|
|
|
|
|
|
|
|
_imagesload.on('done', (instance) => {
|
|
|
|
|
(_masonry as any).layout()
|
|
|
|
|
if (!el.value)
|
|
|
|
|
return
|
|
|
|
|
loading.value = false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
_imagesload.on('fail', (instance) => {
|
|
|
|
|
message.error('图片错误')
|
|
|
|
|
loading.value = false
|
|
|
|
|
})
|
|
|
|
|
}, 300)
|
|
|
|
|
// const layout = debounce(() => {
|
|
|
|
|
// if (masonryRef.value == null || el.value == null)
|
|
|
|
|
// return
|
|
|
|
|
|
|
|
|
|
// if (_masonry !== null)
|
|
|
|
|
// (_masonry as any).addItems()
|
|
|
|
|
|
|
|
|
|
// _masonry = new Masonry(masonryRef.value as any, {
|
|
|
|
|
// itemSelector: '.grid-item',
|
|
|
|
|
// gutter: 17,
|
|
|
|
|
// columnWidth: 182,
|
|
|
|
|
// percentPosition: true,
|
|
|
|
|
// stagger: 10,
|
|
|
|
|
// })
|
|
|
|
|
// loading.value = false
|
|
|
|
|
// // 暂时注释，请忽略
|
|
|
|
|
// _imagesload = imagesloaded('.grid-item')
|
|
|
|
|
|
|
|
|
|
// _imagesload.on('done', (instance) => {
|
|
|
|
|
// (_masonry as any).layout()
|
|
|
|
|
// if (!el.value)
|
|
|
|
|
// return
|
|
|
|
|
// loading.value = false
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
// _imagesload.on('fail', (instance) => {
|
|
|
|
|
// message.error('图片错误')
|
|
|
|
|
// loading.value = false
|
|
|
|
|
// })
|
|
|
|
|
// }, 300)
|
|
|
|
|
|
|
|
|
|
useInfiniteScroll(
|
|
|
|
|
el as any,
|
|
|
|
|
@ -140,12 +143,25 @@ useInfiniteScroll(
|
|
|
|
|
{ distance: 10, canLoadMore: () => canloadMore },
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
onUpdated(() => {
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
layout()
|
|
|
|
|
}, 50)
|
|
|
|
|
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(() => {
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
// layout()
|
|
|
|
|
// }, 50)
|
|
|
|
|
// })
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const timeRange = ref('')
|
|
|
|
|
@ -254,42 +270,48 @@ async function featchList(userSearchId?: string) {
|
|
|
|
|
|
|
|
|
|
const list = data.map((item) => {
|
|
|
|
|
return {
|
|
|
|
|
calHeight: 0,
|
|
|
|
|
imgUrl: item.imgurl,
|
|
|
|
|
thumburl: item.serverThumbnailUrl || item.imgurl || bgLoadingImg,
|
|
|
|
|
thumburl: item.serverThumbnailUrl,
|
|
|
|
|
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,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
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()
|
|
|
|
|
// if(isInitSeaerch.value) {
|
|
|
|
|
// listData.value = []
|
|
|
|
|
// isInitSeaerch.value = false
|
|
|
|
|
// }
|
|
|
|
|
listData.value.push(...more)
|
|
|
|
|
more.forEach((item) => {
|
|
|
|
|
item.calHeight = 182 * item.high / item.wide
|
|
|
|
|
})
|
|
|
|
|
// listData.value.push(...more)
|
|
|
|
|
listData.value = listData.value.concat(more)
|
|
|
|
|
console.log('listData.value出来了', listData.value)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const gridHeight = computed(() => {
|
|
|
|
|
let height = ''
|
|
|
|
|
if (viewMode.value === 'masonry')
|
|
|
|
|
height = ''
|
|
|
|
|
height = 'auto'
|
|
|
|
|
else if (viewMode.value === 'horizontalVersion')
|
|
|
|
|
height = '145px'
|
|
|
|
|
else if (viewMode.value === 'verticalVersion')
|
|
|
|
|
@ -477,9 +499,13 @@ function reset() {
|
|
|
|
|
canloadMore = true
|
|
|
|
|
filterId = null
|
|
|
|
|
|
|
|
|
|
layout()
|
|
|
|
|
// layout()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
watch(listData.value, (newVal, oldVal) => {
|
|
|
|
|
console.log('最新的val', newVal)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
async function refreshHandler(filtersearchId?: any) {
|
|
|
|
|
reset()
|
|
|
|
|
|
|
|
|
|
@ -639,9 +665,19 @@ const dropdownOptions = ref([
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
function finish() {
|
|
|
|
|
console.log('finish')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function scroll() {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const masonryRef = ref(null)
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
|
showLoginSuccessModal,
|
|
|
|
|
closeLoginSuccessModal
|
|
|
|
|
closeLoginSuccessModal,
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
@ -711,124 +747,117 @@ defineExpose({
|
|
|
|
|
<span style="color: #507afd; font-weight: 500">{{ totalCount }}</span> 项</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<n-spin :show="loading">
|
|
|
|
|
<div ref="el" class="scroll" :style="listStyle">
|
|
|
|
|
<!-- <n-scrollbar :on-scroll="scrollHandler"> -->
|
|
|
|
|
<div ref="masonryRef" class="grid">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in listData"
|
|
|
|
|
:key="index"
|
|
|
|
|
:style="{ height: gridHeight, minHeight: gridMinHeight }"
|
|
|
|
|
class="grid-item"
|
|
|
|
|
<!-- <n-spin :show="loading"> -->
|
|
|
|
|
<div ref="el" class="scroll" :style="listStyle">
|
|
|
|
|
<waterfall :col="8" :data="listData" :gutter-width="10" @finish="finish">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in listData"
|
|
|
|
|
:key="item.calHeight"
|
|
|
|
|
:style="{ height: gridHeight }"
|
|
|
|
|
class="grid-item"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
:key="item.thumburl"
|
|
|
|
|
v-lazy="item.thumburl"
|
|
|
|
|
:class="{
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
|
|
|
|
|
}"
|
|
|
|
|
:style="{ height: `${`${item.calHeight}px`}` }"
|
|
|
|
|
class="img"
|
|
|
|
|
alt="加载错误"
|
|
|
|
|
>
|
|
|
|
|
<!-- <div :style="{ 'background-color': randomColor(0.2) }" class="wrapper-content-item-img" /> -->
|
|
|
|
|
<!-- <img
|
|
|
|
|
class="wrapper-content-item-img" :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }"
|
|
|
|
|
:src="item.imgUrl"
|
|
|
|
|
> -->
|
|
|
|
|
|
|
|
|
|
<n-image
|
|
|
|
|
ref="imageRef"
|
|
|
|
|
class="img"
|
|
|
|
|
:img-props="{
|
|
|
|
|
onClick: ($event) => {
|
|
|
|
|
hideDownload($event);
|
|
|
|
|
showClose = true;
|
|
|
|
|
},
|
|
|
|
|
}"
|
|
|
|
|
:class="{
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
|
|
|
|
|
}"
|
|
|
|
|
:preview-src="item.imgUrl"
|
|
|
|
|
:src="item.thumburl"
|
|
|
|
|
:fallback-src="bgLoadingImg"
|
|
|
|
|
:style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
|
|
|
|
|
/>
|
|
|
|
|
<img
|
|
|
|
|
v-if="item.states == 3"
|
|
|
|
|
class="tag-status"
|
|
|
|
|
src="@/assets/images/task/tag-pass.png"
|
|
|
|
|
alt=""
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
v-if="item.states == 5"
|
|
|
|
|
class="tag-status"
|
|
|
|
|
src="@/assets/images/task/tag-not-pass.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'" />
|
|
|
|
|
<div class="val">
|
|
|
|
|
{{ `${item.similar}%` }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="isAllowDownload" class="glass">
|
|
|
|
|
<SvgIcon
|
|
|
|
|
size="16"
|
|
|
|
|
name="download"
|
|
|
|
|
style="margin-top: -6px; cursor: pointer"
|
|
|
|
|
@click="downloadImage(item)"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<n-image
|
|
|
|
|
ref="imageRef"
|
|
|
|
|
:key="item.imgUrl"
|
|
|
|
|
class="img"
|
|
|
|
|
:img-props="{
|
|
|
|
|
onClick: ($event) => {
|
|
|
|
|
hideDownload($event);
|
|
|
|
|
showClose = true;
|
|
|
|
|
},
|
|
|
|
|
}"
|
|
|
|
|
:class="{
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
|
|
|
|
|
}"
|
|
|
|
|
:preview-src="item.imgUrl"
|
|
|
|
|
:src="item.thumburl"
|
|
|
|
|
:fallback-src="bgLoadingImg"
|
|
|
|
|
:style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
|
|
|
|
|
style="display: none"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
v-if="item.states == 3"
|
|
|
|
|
class="tag-status"
|
|
|
|
|
src="@/assets/images/task/tag-pass.png"
|
|
|
|
|
alt=""
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
v-if="item.states == 5"
|
|
|
|
|
class="tag-status"
|
|
|
|
|
src="@/assets/images/task/tag-not-pass.png"
|
|
|
|
|
alt=""
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<div v-if="item.similar != -1" class="percent">
|
|
|
|
|
<SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
|
|
|
|
|
<div class="val">
|
|
|
|
|
{{ `${item.similar}%` }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="isAllowDownload" class="glass">
|
|
|
|
|
<SvgIcon
|
|
|
|
|
size="16"
|
|
|
|
|
name="download"
|
|
|
|
|
style="margin-top: -6px; cursor: pointer"
|
|
|
|
|
@click="downloadImage(item)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="info">
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<div class="img-name">
|
|
|
|
|
<n-tooltip trigger="hover">
|
|
|
|
|
<template #trigger>
|
|
|
|
|
<span>{{ item.imgName }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
<span
|
|
|
|
|
style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
|
|
|
|
|
>{{ item.imgName }}</span>
|
|
|
|
|
</n-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="icon-wrap"
|
|
|
|
|
@click="
|
|
|
|
|
($event) => {
|
|
|
|
|
previewHandler(index, $event);
|
|
|
|
|
hideDownload($event);
|
|
|
|
|
}
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<SvgIcon
|
|
|
|
|
size="13"
|
|
|
|
|
name="magnifying-2"
|
|
|
|
|
style="cursor: pointer; color: #898481"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info">
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<div class="img-name">
|
|
|
|
|
<n-tooltip trigger="hover">
|
|
|
|
|
<template #trigger>
|
|
|
|
|
<span>{{ item.imgName }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
<span
|
|
|
|
|
style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
|
|
|
|
|
>{{ item.imgName }}</span>
|
|
|
|
|
</n-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left">
|
|
|
|
|
<n-avatar
|
|
|
|
|
:src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
|
|
|
|
|
class="avatar"
|
|
|
|
|
round
|
|
|
|
|
<div
|
|
|
|
|
class="icon-wrap"
|
|
|
|
|
@click="
|
|
|
|
|
($event) => {
|
|
|
|
|
previewHandler(index, $event);
|
|
|
|
|
hideDownload($event);
|
|
|
|
|
}
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<SvgIcon
|
|
|
|
|
size="13"
|
|
|
|
|
name="magnifying-2"
|
|
|
|
|
style="cursor: pointer; color: #898481"
|
|
|
|
|
/>
|
|
|
|
|
<span>{{ item.upname }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="right">
|
|
|
|
|
<span :style="{ marginRight: '5px' }">分类</span>
|
|
|
|
|
<span>{{ item.ocrPictureclass?.classname }}</span>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left">
|
|
|
|
|
<n-avatar
|
|
|
|
|
:src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
|
|
|
|
|
class="avatar"
|
|
|
|
|
round
|
|
|
|
|
/>
|
|
|
|
|
<span>{{ item.upname }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </n-scrollbar> -->
|
|
|
|
|
</div>
|
|
|
|
|
</n-spin>
|
|
|
|
|
</waterfall>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </n-spin> -->
|
|
|
|
|
</div>
|
|
|
|
|
<PackageSettingsModal ref="packageModalRef" @commit="commitHandler" />
|
|
|
|
|
<GeneratePackageModal ref="generateModalRef" />
|
|
|
|
|
@ -898,19 +927,26 @@ defineExpose({
|
|
|
|
|
padding-bottom: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grid{
|
|
|
|
|
display: block !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img {
|
|
|
|
|
width: 182px;
|
|
|
|
|
max-width: 182px;
|
|
|
|
|
border-radius: 7px;
|
|
|
|
|
display: block;
|
|
|
|
|
height: calc(100% - 25px);
|
|
|
|
|
opacity: 1 !important;
|
|
|
|
|
// height: calc(100% - 25px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img-fit {
|
|
|
|
|
width: 100%;
|
|
|
|
|
width: 182px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img-full {
|
|
|
|
|
width: 100%;
|
|
|
|
|
width: 182px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
::v-deep(img) {
|
|
|
|
|
|
