guoxiangbin
/
ocr-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Merge pull request 'feat: 修改选择条件问题' (#269) from fix/updatesyspic into test

Browse Source 
Reviewed-on: #269
pull/272/head
yaoshuli 1 year ago
parent c68a20e48d 908fc9c799
commit 17d2a65f8a
2 changed files with 257 additions and 228 deletions
Show Stats Download Patch File Download Diff File

3
src/api/home/main.ts
Unescape View File

@ -261,11 +261,12 @@ export async function getPictureList(params: any): Promise<any> {
headers: { 'Content-Type': ContentTypeEnum.FORM_DATA }, headers: { 'Content-Type': ContentTypeEnum.FORM_DATA },
}) })
const { data: { records, pages, total } } = res const { data: { records, pages, total, current } } = res
return { return {
pageCount: pages, pageCount: pages,
data: records, data: records,
total, total,
current,
} }
} }

482
src/views/home/content/Content.vue
Unescape View File

@ -61,6 +61,7 @@ const deviceHeight = ref(600)
// let _imagesload: any // let _imagesload: any
// const masonryRef = ref<ComponentRef>(null) // const masonryRef = ref<ComponentRef>(null)
const el = ref<HTMLDivElement | null>(null) const el = ref<HTMLDivElement | null>(null)
const waterfallRef = ref(null)
const viewMode = ref('masonry') const viewMode = ref('masonry')
const pagination = reactive({ const pagination = reactive({
pageNo: 0, pageNo: 0,
@ -145,16 +146,16 @@ useInfiniteScroll(
) )
onBeforeMount(async () => { onBeforeMount(async () => {
const more = await featchList() // const more = await featchList()
more.forEach((item) => { // more.forEach((item) => {
item.calHeight = 182 * item.high / item.wide // item.calHeight = 182 * item.high / item.wide
}) // })
listData.value = more // listData.value = more
const tmore = await featchList() // const tmore = await featchList()
tmore.forEach((item) => { // tmore.forEach((item) => {
item.calHeight = 182 * item.high / item.wide // item.calHeight = 182 * item.high / item.wide
}) // })
listData.value = listData.value.concat(tmore) // listData.value = listData.value.concat(tmore)
const screenWidth = window.screen.width const screenWidth = window.screen.width
if (screenWidth > 1920 && screenWidth <= 2560) if (screenWidth > 1920 && screenWidth <= 2560)
cols.value = 11 cols.value = 11
@ -218,6 +219,16 @@ watch(
}, },
) )
watch(
() => configStore.getAsideValue,
async (newVal, oldVal) => {
if (newVal) {
reset()
loadMore()
}
},
)
async function featchList(userSearchId?: string) { async function featchList(userSearchId?: string) {
loading.value = true loading.value = true
try { try {
@ -235,6 +246,7 @@ async function featchList(userSearchId?: string) {
pageCount: 0, pageCount: 0,
data: [], data: [],
total: 0, total: 0,
current: 1,
} }
const sortObj: any = {} // rao start const sortObj: any = {} // rao start
if (sortBy.orderbyvalue == 'pictureResult') if (sortBy.orderbyvalue == 'pictureResult')
@ -266,12 +278,14 @@ async function featchList(userSearchId?: string) {
upUserName: searchValue, upUserName: searchValue,
}) })
} }
const { data, pageCount, total } = result const { data, pageCount, total, current } = result
pagination.pageNo = current
totalCount.value = total totalCount.value = total
canloadMore = pageCount >= pagination.pageNo && pageCount > 0 canloadMore = pageCount >= pagination.pageNo && pageCount > 0
const list = data.map((item) => { const list = data.map((item) => {
return { return {
id: item.id,
calHeight: 0, calHeight: 0,
imgUrl: item.imgurl, imgUrl: item.imgurl,
thumburl: item.serverThumbnailUrl, thumburl: item.serverThumbnailUrl,
@ -306,8 +320,22 @@ async function loadMore() {
item.calHeight = 182 * item.high / item.wide item.calHeight = 182 * item.high / item.wide
}) })
// listData.value.push(...more) // listData.value.push(...more)
listData.value = listData.value.concat(more) if (pagination.pageNo == 1) {
console.log('listData.value出来了', listData.value) listData.value = []
listData.value = listData.value.concat(more)
console.log('listData.value出来了', listData.value)
waterfallRef.value?.resize()
}
else {
// setTimeout(() => {
// const height = el.value?.scrollHeight - 1000
// console.log('listData.value出来了height', height)
// el.value?.scrollTo({ top: height, behavior: 'smooth' })
// }, 50)
listData.value = listData.value.concat(more)
console.log('listData.value出来了', listData.value)
waterfallRef.value?.mix()
}
} }
const gridHeight = computed(() => { const gridHeight = computed(() => {
@ -498,34 +526,34 @@ watch(
{ deep: true }, { deep: true },
) )
function reset() { function reset(val?) {
pagination.pageNo = 0 pagination.pageNo = 0
pagination.pageSize = 30 pagination.pageSize = 30
listData.value = []
listData.value.length = 0 listData.value.length = 0
loading.value = false loading.value = false
canloadMore = true canloadMore = true
filterId = null filterId = null
// layout() // layout()
} }
async function refreshHandler(filtersearchId?: any) { async function refreshHandler(filtersearchId?: any) {
reset() reset(true)
if (filtersearchId) if (filtersearchId)
filterId = filtersearchId filterId = filtersearchId
loadMore(true)
nextTick(() => { // nextTick(() => {
setTimeout(() => { // setTimeout(() => {
useInfiniteScroll( // useInfiniteScroll(
el as any, // el as any,
() => { // () => {
loadMore() // loadMore()
}, // },
{ distance: 10, canLoadMore: () => canloadMore }, // { distance: 10, canLoadMore: () => canloadMore },
) // )
}, 300) // }, 300)
}) // })
} }
function getAvatar(url: string): string { function getAvatar(url: string): string {
@ -750,225 +778,225 @@ defineExpose({
<span style="color: #507afd; font-weight: 500">{{ totalCount }}</span> 项</span> <span style="color: #507afd; font-weight: 500">{{ totalCount }}</span> 项</span>
</div> </div>
<n-spin :show="loading"> <!-- <n-spin :show="loading"> -->
<div v-if="viewMode != 'masonry'" ref="el" class="scroll" :style="listStyle"> <div v-if="viewMode != 'masonry'" ref="el" class="scroll" :style="listStyle">
<div class="grid" :style="{ 'grid-template-columns': `repeat(${cols}, 182px)` }"> <div class="grid" :style="{ 'grid-template-columns': `repeat(${cols}, 182px)` }">
<div <div
v-for="(item, index) in listData" v-for="(item, index) in listData"
:key="item.calHeight" :key="item.id"
:style="{ height: `${gridHeight}px` }" :style="{ height: `${gridHeight}px` }"
class="grid-item" class="grid-item"
>
<img
:key="item.id"
v-lazy="item.thumburl"
:class="{
'img-fit': viewMode === 'horizontalVersion',
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
}"
:style="{ height: `${viewMode === 'masonry' ? `${item.calHeight}px` : `${gridHeight - 25}px`}` }"
class="img"
alt="加载错误"
> >
<img
:key="item.thumburl"
v-lazy="item.thumburl"
:class="{
'img-fit': viewMode === 'horizontalVersion',
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
}"
:style="{ height: `${viewMode === 'masonry' ? `${item.calHeight}px` : `${gridHeight - 25}px`}` }"
class="img"
alt="加载错误"
>
<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 <n-image
v-if="item.states == 3" ref="imageRef"
class="tag-status" :key="item.imgUrl"
src="@/assets/images/task/tag-pass.png" class="img"
alt="" :img-props="{
> onClick: ($event) => {
<img hideDownload($event);
v-if="item.states == 5" showClose = true;
class="tag-status" },
src="@/assets/images/task/tag-not-pass.png" }"
alt="" :class="{
> 'img-fit': viewMode === 'horizontalVersion',
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
<div v-if="item.similar != -1" class="percent"> }"
<SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" /> :preview-src="item.imgUrl"
<div class="val"> :src="item.thumburl"
{{ `${item.similar}%` }} :fallback-src="bgLoadingImg"
</div> :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
</div> style="display: none"
<div v-if="isAllowDownload" class="glass"> />
<SvgIcon
size="16" <img
name="download" v-if="item.states == 3"
style="margin-top: -6px; cursor: pointer" class="tag-status"
@click="downloadImage(item)" 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>
<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="info">
<div class="footer"> <div class="footer">
<div class="img-name"> <div class="img-name">
<n-tooltip trigger="hover"> <n-tooltip trigger="hover">
<template #trigger> <template #trigger>
<span>{{ item.imgName }}</span> <span>{{ item.imgName }}</span>
</template> </template>
<span <span
style="font-size: 12px; margin-top: 4px; margin-bottom: 16px" style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
>{{ item.imgName }}</span> >{{ item.imgName }}</span>
</n-tooltip> </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> </div>
<div class="left"> <div
<n-avatar class="icon-wrap"
:src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar" @click="
class="avatar" ($event) => {
round previewHandler(index, $event);
hideDownload($event);
}
"
>
<SvgIcon
size="13"
name="magnifying-2"
style="cursor: pointer; color: #898481"
/> />
<span>{{ item.upname }}</span>
</div> </div>
</div> </div>
<div class="left">
<n-avatar
:src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
class="avatar"
round
/>
<span>{{ item.upname }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="viewMode === 'masonry'" ref="el" class="scroll" :style="listStyle"> </div>
<waterfall :col="cols" :data="listData" :gutter-width="10" @finish="finish"> <div v-if="viewMode === 'masonry'" ref="el" class="scroll" :style="listStyle">
<div <waterfall ref="waterfallRef" :col="cols" :data="listData" :gutter-width="10" @finish="finish">
v-for="(item, index) in listData" <div
:key="item.calHeight" v-for="(item, index) in listData"
class="grid-item" :key="item.id"
class="grid-item"
>
<img
:key="item.id"
v-lazy="item.thumburl"
:class="{
'img-fit': viewMode === 'horizontalVersion',
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
}"
:style="{ height: `${item.calHeight}px` }"
class="img"
alt="加载错误"
> >
<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="加载错误"
>
<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 <n-image
v-if="item.states == 3" ref="imageRef"
class="tag-status" :key="item.imgUrl"
src="@/assets/images/task/tag-pass.png" class="img"
alt="" :img-props="{
> onClick: ($event) => {
<img hideDownload($event);
v-if="item.states == 5" showClose = true;
class="tag-status" },
src="@/assets/images/task/tag-not-pass.png" }"
alt="" :class="{
> 'img-fit': viewMode === 'horizontalVersion',
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
<div v-if="item.similar != -1" class="percent"> }"
<SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" /> :preview-src="item.imgUrl"
<div class="val"> :src="item.thumburl"
{{ `${item.similar}%` }} :fallback-src="bgLoadingImg"
</div> :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
</div> style="display: none"
<div v-if="isAllowDownload" class="glass"> />
<SvgIcon
size="16" <img
name="download" v-if="item.states == 3"
style="margin-top: -6px; cursor: pointer" class="tag-status"
@click="downloadImage(item)" 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>
<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="info">
<div class="footer"> <div class="footer">
<div class="img-name"> <div class="img-name">
<n-tooltip trigger="hover"> <n-tooltip trigger="hover">
<template #trigger> <template #trigger>
<span>{{ item.imgName }}</span> <span>{{ item.imgName }}</span>
</template> </template>
<span <span
style="font-size: 12px; margin-top: 4px; margin-bottom: 16px" style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
>{{ item.imgName }}</span> >{{ item.imgName }}</span>
</n-tooltip> </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> </div>
<div class="left"> <div
<n-avatar class="icon-wrap"
:src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar" @click="
class="avatar" ($event) => {
round previewHandler(index, $event);
hideDownload($event);
}
"
>
<SvgIcon
size="13"
name="magnifying-2"
style="cursor: pointer; color: #898481"
/> />
<span>{{ item.upname }}</span>
</div> </div>
</div> </div>
<div class="left">
<n-avatar
:src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
class="avatar"
round
/>
<span>{{ item.upname }}</span>
</div>
</div> </div>
</waterfall> </div>
</div> </waterfall>
</n-spin> </div>
<!-- </n-spin> -->
</div> </div>
<PackageSettingsModal ref="packageModalRef" @commit="commitHandler" /> <PackageSettingsModal ref="packageModalRef" @commit="commitHandler" />
<GeneratePackageModal ref="generateModalRef" /> <GeneratePackageModal ref="generateModalRef" />

Write Preview
Loading…
Cancel
Save