elseif 1 year ago
parent 6a50a92ed0
commit 9faf0ab0bd

@ -69,7 +69,7 @@ export async function getTaskDetailPictureList(packageid: string, taskchildpictu
params, params,
}) })
const { data: { records, pages } } = res const { data: { records, pages, total } } = res
// 精简一下数据 // 精简一下数据
const list = records.map((item) => { const list = records.map((item) => {
@ -85,6 +85,7 @@ export async function getTaskDetailPictureList(packageid: string, taskchildpictu
return { return {
pageCount: pages, pageCount: pages,
data: list, data: list,
total,
} }
} }

@ -2,8 +2,9 @@
import { computed, nextTick, onBeforeMount, onMounted, onUnmounted, onUpdated, reactive, ref, unref, watch } from 'vue' import { computed, nextTick, onBeforeMount, onMounted, onUnmounted, onUpdated, reactive, ref, unref, watch } from 'vue'
import Masonry from 'masonry-layout' import Masonry from 'masonry-layout'
import { useInfiniteScroll } from '@vueuse/core' import { useInfiniteScroll } from '@vueuse/core'
import { debounce, pickBy } from 'lodash-es' import { debounce } from 'lodash-es'
import imagesloaded from 'imagesloaded' import imagesloaded from 'imagesloaded'
import { useMessage } from 'naive-ui'
import PackageSettingsModal from './modal/PackageSettingsModal.vue' import PackageSettingsModal from './modal/PackageSettingsModal.vue'
import { timeOptions, viewOptions } from '@/config/home' import { timeOptions, viewOptions } from '@/config/home'
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn' import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
@ -21,6 +22,7 @@ import { getImgUrl } from '@/utils/urlUtils'
const deviceHeight = ref(600) const deviceHeight = ref(600)
let _masonry: null | Masonry = null let _masonry: null | Masonry = null
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 viewMode = ref('masonry') const viewMode = ref('masonry')
@ -31,6 +33,7 @@ const pagination = reactive({
const configStore = useConfig() const configStore = useConfig()
const packageModalRef = ref(null) const packageModalRef = ref(null)
const loading = ref(false) const loading = ref(false)
const message = useMessage()
async function computeListHeight() { async function computeListHeight() {
const headEl = document.querySelector('.wrapper-content')! const headEl = document.querySelector('.wrapper-content')!
@ -62,7 +65,13 @@ const layout = debounce(() => {
stagger: 10, stagger: 10,
}) })
imagesloaded('.grid-item', () => { _imagesload = imagesloaded('.grid-item')
_imagesload.on('always', (instance) => {
console.log('always')
})
_imagesload.on('done', (instance) => {
(_masonry as any).layout() (_masonry as any).layout()
const scrollHeight = el.value!.scrollHeight const scrollHeight = el.value!.scrollHeight
const clientHeight = el.value!.clientHeight const clientHeight = el.value!.clientHeight
@ -70,6 +79,20 @@ const layout = debounce(() => {
el.value!.scrollTo({ top, behavior: 'instant' }) el.value!.scrollTo({ top, behavior: 'instant' })
loading.value = false loading.value = false
}) })
_imagesload.on('fail', (instance) => {
message.error('图片错误')
loading.value = false
})
// imagesloaded('.grid-item', () => {
// (_masonry as any).layout()
// const scrollHeight = el.value!.scrollHeight
// const clientHeight = el.value!.clientHeight
// const top = scrollHeight - clientHeight - 20
// el.value!.scrollTo({ top, behavior: 'instant' })
// loading.value = false
// })
}, 300) }, 300)
let canloadMore = true let canloadMore = true
@ -139,6 +162,7 @@ async function featchList() {
imgUrl: item.imgurl, imgUrl: item.imgurl,
upname: item.upname, upname: item.upname,
ocrPictureclass: item.ocrPictureclass, ocrPictureclass: item.ocrPictureclass,
uphead: item.uphead,
} }
}) })
@ -225,6 +249,9 @@ async function refreshHandler() {
const list = data.map((item) => { const list = data.map((item) => {
return { return {
imgUrl: item.imgurl, imgUrl: item.imgurl,
upname: item.upname,
ocrPictureclass: item.ocrPictureclass,
uphead: item.uphead,
} }
}) })

@ -12,6 +12,7 @@ const batch = ref(false)
const selectItems = ref<any[]>([]) const selectItems = ref<any[]>([])
const message = useMessage() const message = useMessage()
const dialog = useDialog() const dialog = useDialog()
const totalCount = ref(0)
function setBatch(value: boolean) { function setBatch(value: boolean) {
batch.value = value batch.value = value
@ -199,8 +200,9 @@ async function handleSelect(item: any) {
const taskId = item.id const taskId = item.id
taskDetailInfo.value = await getTaskDetailInfo(taskId, workStore.activeId) taskDetailInfo.value = await getTaskDetailInfo(taskId, workStore.activeId)
const res = await getTaskDetailPictureList(workStore.activeId, taskId, { ...taskpagination, ...sortBy }) const { data, total } = await getTaskDetailPictureList(workStore.activeId, taskId, { ...taskpagination, ...sortBy })
taskDetailPictureList.value = res.data taskDetailPictureList.value = data
totalCount.value = total
} }
async function sortHandler(orderby: 'pictureResult' | 'fromuptime') { async function sortHandler(orderby: 'pictureResult' | 'fromuptime') {
@ -266,6 +268,10 @@ function getPercent(pictureid: string) {
const val = Number.parseFloat(percent) const val = Number.parseFloat(percent)
return `${val}%` return `${val}%`
} }
const mark = computed(() => {
return taskDetailInfo.value.iztrueorfalse === null ? '未标记' : '已标记'
})
</script> </script>
<template> <template>
@ -319,14 +325,14 @@ function getPercent(pictureid: string) {
<span style="color:#8b8d8f;"><SvgIcon name="m1" /></span> <span style="color:#8b8d8f;"><SvgIcon name="m1" /></span>
</n-gi> </n-gi>
<n-gi span="8" style="display: flex;align-items: left;flex-direction: column;justify-content: center;"> <n-gi span="8" style="display: flex;align-items: left;flex-direction: column;justify-content: center;">
<span>未标记</span> <span>{{ mark }}</span>
<span>图片标记</span> <span>图片标记</span>
</n-gi> </n-gi>
<n-gi span="4"> <n-gi span="4">
<span style="color:#8b8d8f;"><SvgIcon name="m2" /></span> <span style="color:#8b8d8f;"><SvgIcon name="m2" /></span>
</n-gi> </n-gi>
<n-gi span="8" style="display: flex;align-items: left;flex-direction: column;justify-content: center;"> <n-gi span="8" style="display: flex;align-items: left;flex-direction: column;justify-content: center;">
<span>14</span> <span>{{ totalCount }}</span>
<span>相似匹配</span> <span>相似匹配</span>
</n-gi> </n-gi>
</n-grid> </n-grid>

Loading…
Cancel
Save