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

相似图展示

Browse Source
pull/87/head
Dragon 1 year ago
parent 6584f8f1fe
commit b281600df6
2 changed files with 445 additions and 403 deletions
Show Stats Download Patch File Download Diff File

689
src/views/final/content/Content.vue
View File

File diff suppressed because it is too large Load Diff

159
src/views/task/modal/BatchModal.vue
Unescape View File

@ -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 || 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>
</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>

Write Preview
Loading…
Cancel
Save