|
|
|
|
@ -5,8 +5,10 @@ import { useInfiniteScroll } from '@vueuse/core'
|
|
|
|
|
import { debounce } from 'lodash-es'
|
|
|
|
|
import imagesloaded from 'imagesloaded'
|
|
|
|
|
import { useMessage } from 'naive-ui'
|
|
|
|
|
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
|
|
|
|
|
import { getViewportOffset, off, on } from '@/utils/domUtils'
|
|
|
|
|
|
|
|
|
|
import { timeOptions, viewOptions } from '@/config/home'
|
|
|
|
|
import { off, on } from '@/utils/domUtils'
|
|
|
|
|
import { useTask } from '@/store/modules/task'
|
|
|
|
|
import { TASK_STATUS_OBJ } from '@/enums/index'
|
|
|
|
|
import { formatToDateHMS } from '@/utils/dateUtil'
|
|
|
|
|
@ -43,6 +45,7 @@ const viewLabel = computed(() => {
|
|
|
|
|
|
|
|
|
|
return item?.label
|
|
|
|
|
})
|
|
|
|
|
const deviceHeight = ref(600)
|
|
|
|
|
|
|
|
|
|
const taskStore = useTask()
|
|
|
|
|
const masonryRef = ref<ComponentRef>(null)
|
|
|
|
|
@ -64,6 +67,14 @@ const sortBy: any = {
|
|
|
|
|
const batch = ref(false)
|
|
|
|
|
let _imagesload: any
|
|
|
|
|
const message = useMessage()
|
|
|
|
|
async function computeListHeight() {
|
|
|
|
|
const headEl = document.querySelector('.wrapper-content')!
|
|
|
|
|
const { bottomIncludeBody } = getViewportOffset(headEl)
|
|
|
|
|
const height = bottomIncludeBody
|
|
|
|
|
deviceHeight.value = height - 40 - 16 - 24
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
useWindowSizeFn(computeListHeight)
|
|
|
|
|
|
|
|
|
|
const layout = debounce(() => {
|
|
|
|
|
if (!show.value)
|
|
|
|
|
@ -74,6 +85,7 @@ const layout = debounce(() => {
|
|
|
|
|
|
|
|
|
|
_masonry = new Masonry(masonryRef.value as any, {
|
|
|
|
|
itemSelector: '.grid-item',
|
|
|
|
|
gutter: 17,
|
|
|
|
|
columnWidth: 214,
|
|
|
|
|
percentPosition: true,
|
|
|
|
|
stagger: 10,
|
|
|
|
|
@ -208,9 +220,9 @@ function upHandler(event: MouseEvent) {
|
|
|
|
|
start = null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const gridHeight = computed(() => {
|
|
|
|
|
return viewMode.value !== 'masonry' ? '157px' : ''
|
|
|
|
|
})
|
|
|
|
|
// const gridHeight = computed(() => {
|
|
|
|
|
// return viewMode.value !== 'masonry' ? '157px' : ''
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
function addListeners() {
|
|
|
|
|
selectionBox = document.querySelector('.selection-box') as HTMLDivElement
|
|
|
|
|
@ -346,6 +358,12 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
|
|
|
|
|
refreshHandler()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const listStyle = computed(() => {
|
|
|
|
|
return {
|
|
|
|
|
height: `${deviceHeight.value}px`,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function switchBatch() {
|
|
|
|
|
setBatch(!batch.value)
|
|
|
|
|
}
|
|
|
|
|
@ -363,19 +381,19 @@ function sortHandler(orderby: 'similarityScore' | 'createdate') {
|
|
|
|
|
refreshHandler()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// const gridHeight = computed(() => {
|
|
|
|
|
// let height = ''
|
|
|
|
|
// if (viewMode.value === 'masonry')
|
|
|
|
|
// height = ''
|
|
|
|
|
// else if (viewMode.value === 'horizontalVersion')
|
|
|
|
|
// height = '145px'
|
|
|
|
|
// else if (viewMode.value === 'verticalVersion')
|
|
|
|
|
// height = '300px'
|
|
|
|
|
// else if (viewMode.value === '3:4')
|
|
|
|
|
// height = '240px'
|
|
|
|
|
|
|
|
|
|
// return height
|
|
|
|
|
// })
|
|
|
|
|
const gridHeight = computed(() => {
|
|
|
|
|
let height = ''
|
|
|
|
|
if (viewMode.value === 'masonry')
|
|
|
|
|
height = ''
|
|
|
|
|
else if (viewMode.value === 'horizontalVersion')
|
|
|
|
|
height = '122px'
|
|
|
|
|
else if (viewMode.value === 'verticalVersion')
|
|
|
|
|
height = '300px'
|
|
|
|
|
else if (viewMode.value === '3:4')
|
|
|
|
|
height = '240px'
|
|
|
|
|
|
|
|
|
|
return height
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
|
showModal,
|
|
|
|
|
@ -505,51 +523,57 @@ defineExpose({
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div ref="el" class="scroll">
|
|
|
|
|
<!-- <n-scrollbar :on-scroll="scrollHandler"> -->
|
|
|
|
|
<div ref="masonryRef" class="grid">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in listData" :key="index" :data-id="item.id" :style="{ height: gridHeight }"
|
|
|
|
|
class="grid-item"
|
|
|
|
|
>
|
|
|
|
|
<div class="img-wrap">
|
|
|
|
|
<!-- <img
|
|
|
|
|
class="wrapper-content-item-img"
|
|
|
|
|
:class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
|
|
|
|
|
> -->
|
|
|
|
|
<n-image
|
|
|
|
|
ref="imageRef"
|
|
|
|
|
class="img"
|
|
|
|
|
:class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" :src="item.serverThumbnailUrl || item.imgUrl"
|
|
|
|
|
/>
|
|
|
|
|
<div class="small-mark" />
|
|
|
|
|
<div class="time">
|
|
|
|
|
<div v-if="item.photoDateTimestamp" class="time-item">
|
|
|
|
|
<SvgIcon class="svg-time" color="#FFF" size="14" name="camera-time" />
|
|
|
|
|
<span>{{ formatToDateHMS(Number(item.photoDateTimestamp) || 0) }}</span>
|
|
|
|
|
<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 }"
|
|
|
|
|
class="grid-item"
|
|
|
|
|
>
|
|
|
|
|
<div>
|
|
|
|
|
<n-image
|
|
|
|
|
ref="imageRef"
|
|
|
|
|
class="img"
|
|
|
|
|
|
|
|
|
|
:class="{
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
|
|
|
|
|
}"
|
|
|
|
|
|
|
|
|
|
:src="item.serverThumbnailUrl"
|
|
|
|
|
/>
|
|
|
|
|
<div class="small-mark" />
|
|
|
|
|
<div class="time">
|
|
|
|
|
<div v-if="item.photoDateTimestamp" class="time-item">
|
|
|
|
|
<SvgIcon class="svg-time" color="#FFF" size="14" name="camera-time" />
|
|
|
|
|
<span>{{ formatToDateHMS(Number(item.photoDateTimestamp) || 0) }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="item.submitDateTimestamp" class="time-item time-item2">
|
|
|
|
|
<SvgIcon class="svg-time" color="#FFF" size="14" name="submit-time" />
|
|
|
|
|
<span>{{ formatToDateHMS(Number(item.submitDateTimestamp) || 0) }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="item.submitDateTimestamp" class="time-item time-item2">
|
|
|
|
|
<SvgIcon class="svg-time" color="#FFF" size="14" name="submit-time" />
|
|
|
|
|
<span>{{ formatToDateHMS(Number(item.submitDateTimestamp) || 0) }}</span>
|
|
|
|
|
<img v-if="item.historyStates === 2" class="tag-status" src="@/assets/images/task/tag-pass.png" alt="">
|
|
|
|
|
<img v-if="item.historyStates === 3" class="tag-status" src="@/assets/images/task/tag-not-pass.png" alt="">
|
|
|
|
|
<div class="check">
|
|
|
|
|
<n-checkbox
|
|
|
|
|
v-show="batch && item.historyStates === 1"
|
|
|
|
|
v-model:checked="item.checked" @click.prevent
|
|
|
|
|
@update:checked="onCheckChange($event, item)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
|
|
|
|
|
{{ item.similarityScore }}<span class="percent-unit">%</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<img v-if="item.historyStates === 2" class="tag-status" src="@/assets/images/task/tag-pass.png" alt="">
|
|
|
|
|
<img v-if="item.historyStates === 3" class="tag-status" src="@/assets/images/task/tag-not-pass.png" alt="">
|
|
|
|
|
<div class="check">
|
|
|
|
|
<n-checkbox
|
|
|
|
|
v-show="batch && item.historyStates === 1"
|
|
|
|
|
v-model:checked="item.checked" @click.prevent
|
|
|
|
|
@update:checked="onCheckChange($event, item)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
|
|
|
|
|
{{ item.similarityScore }}<span class="percent-unit">%</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </n-scrollbar> -->
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </n-scrollbar> -->
|
|
|
|
|
</div>
|
|
|
|
|
</n-spin>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="close" @pointerdown="closeModal">
|
|
|
|
|
@ -728,7 +752,7 @@ defineExpose({
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-m32 {
|
|
|
|
|
margin-left: 19px;
|
|
|
|
|
// margin-left: 19px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-content {
|
|
|
|
|
@ -778,17 +802,20 @@ defineExpose({
|
|
|
|
|
display: block;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-img-fit {
|
|
|
|
|
width: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
.img-fit {
|
|
|
|
|
width: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img {
|
|
|
|
|
border-radius: 7px;
|
|
|
|
|
display: block;
|
|
|
|
|
height: calc(100% - 25px);
|
|
|
|
|
// height: calc(100% - 25px);
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img-full {
|
|
|
|
|
@ -804,8 +831,11 @@ defineExpose({
|
|
|
|
|
|
|
|
|
|
.grid-item {
|
|
|
|
|
width: 214px;
|
|
|
|
|
padding: 16px;
|
|
|
|
|
// padding: 16px;
|
|
|
|
|
// width: 182px;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-bottom: 32px;
|
|
|
|
|
transition: 0.5s;
|
|
|
|
|
|
|
|
|
|
.check{
|
|
|
|
|
position: absolute;
|
|
|
|
|
@ -851,4 +881,7 @@ defineExpose({
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep(.n-image img) {
|
|
|
|
|
width: 100%!important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
