|
|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import Masonry from 'masonry-layout'
|
|
|
|
|
import type Masonry from 'masonry-layout'
|
|
|
|
|
import { useDialog, useMessage } from 'naive-ui'
|
|
|
|
|
import { computed, nextTick, onBeforeMount, onMounted, onUpdated, reactive, ref, unref, watch } from 'vue'
|
|
|
|
|
|
|
|
|
|
@ -35,6 +35,9 @@ let sortObj: any = {
|
|
|
|
|
orderByUptime: 'desc',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const cols = ref(8)
|
|
|
|
|
const waterfallRef = ref(null)
|
|
|
|
|
|
|
|
|
|
const timeOptions = [{
|
|
|
|
|
label: '升序',
|
|
|
|
|
value: 'asc',
|
|
|
|
|
@ -86,62 +89,66 @@ const pagination = reactive({
|
|
|
|
|
pageSize: 30,
|
|
|
|
|
})
|
|
|
|
|
let loading = false
|
|
|
|
|
let _masonry: null | Masonry = null
|
|
|
|
|
const _masonry: null | Masonry = null
|
|
|
|
|
const show = ref(false)
|
|
|
|
|
const selectedApproveItems = ref<any[]>([]) // 审核批量选中
|
|
|
|
|
const dialog = useDialog()
|
|
|
|
|
let processItems: any[] = []
|
|
|
|
|
const confrimModalRef = ref<any>()
|
|
|
|
|
|
|
|
|
|
const layout = debounce(() => {
|
|
|
|
|
if (!show.value)
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
if (_masonry !== null)
|
|
|
|
|
(_masonry as any).destroy()
|
|
|
|
|
|
|
|
|
|
_masonry = new Masonry(masonryRef.value as any, {
|
|
|
|
|
itemSelector: '.grid-item',
|
|
|
|
|
columnWidth: 214,
|
|
|
|
|
percentPosition: true,
|
|
|
|
|
stagger: 10,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
imagesloaded('.grid-item', () => {
|
|
|
|
|
(_masonry as any).layout()
|
|
|
|
|
const scrollHeight = el.value!.scrollHeight
|
|
|
|
|
const clientHeight = el.value!.clientHeight
|
|
|
|
|
const top = scrollHeight - clientHeight - 20
|
|
|
|
|
if (isTop.value)
|
|
|
|
|
el.value!.scrollTo({ top: 0, behavior: 'instant' })
|
|
|
|
|
else
|
|
|
|
|
el.value!.scrollTo({ top, behavior: 'instant' })
|
|
|
|
|
|
|
|
|
|
// let height = 800 - 15;
|
|
|
|
|
// const screenWidth = window.screen.width;
|
|
|
|
|
// if(screenWidth <= 1920) {
|
|
|
|
|
// height = 600 - 15;
|
|
|
|
|
// }
|
|
|
|
|
// el.value!.scrollTo({ top: height, behavior: 'instant' })
|
|
|
|
|
loading = false
|
|
|
|
|
console.log('loading---------------', loading)
|
|
|
|
|
console.log('pagination.pageNo---------------', pagination.pageNo)
|
|
|
|
|
if (pagination.pageNo == 3) {
|
|
|
|
|
let timer
|
|
|
|
|
if (timer)
|
|
|
|
|
clearTimeout(timer)
|
|
|
|
|
|
|
|
|
|
timer = setTimeout(() => {
|
|
|
|
|
isTop.value = false
|
|
|
|
|
console.log('isTop.value---------------', isTop.value)
|
|
|
|
|
}, 1000)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}, 300)
|
|
|
|
|
|
|
|
|
|
watch(viewMode, () => {
|
|
|
|
|
isTop.value = true
|
|
|
|
|
layout()
|
|
|
|
|
// const layout = debounce(() => {
|
|
|
|
|
// if (!show.value)
|
|
|
|
|
// return
|
|
|
|
|
|
|
|
|
|
// if (_masonry !== null)
|
|
|
|
|
// (_masonry as any).destroy()
|
|
|
|
|
|
|
|
|
|
// _masonry = new Masonry(masonryRef.value as any, {
|
|
|
|
|
// itemSelector: '.grid-item',
|
|
|
|
|
// columnWidth: 214,
|
|
|
|
|
// percentPosition: true,
|
|
|
|
|
// stagger: 10,
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
// imagesloaded('.grid-item', () => {
|
|
|
|
|
// (_masonry as any).layout()
|
|
|
|
|
// const scrollHeight = el.value!.scrollHeight
|
|
|
|
|
// const clientHeight = el.value!.clientHeight
|
|
|
|
|
// const top = scrollHeight - clientHeight - 20
|
|
|
|
|
// if (isTop.value)
|
|
|
|
|
// el.value!.scrollTo({ top: 0, behavior: 'instant' })
|
|
|
|
|
// else
|
|
|
|
|
// el.value!.scrollTo({ top, behavior: 'instant' })
|
|
|
|
|
|
|
|
|
|
// // let height = 800 - 15;
|
|
|
|
|
// // const screenWidth = window.screen.width;
|
|
|
|
|
// // if(screenWidth <= 1920) {
|
|
|
|
|
// // height = 600 - 15;
|
|
|
|
|
// // }
|
|
|
|
|
// // el.value!.scrollTo({ top: height, behavior: 'instant' })
|
|
|
|
|
// loading = false
|
|
|
|
|
// console.log('loading---------------', loading)
|
|
|
|
|
// console.log('pagination.pageNo---------------', pagination.pageNo)
|
|
|
|
|
// if (pagination.pageNo == 3) {
|
|
|
|
|
// let timer
|
|
|
|
|
// if (timer)
|
|
|
|
|
// clearTimeout(timer)
|
|
|
|
|
|
|
|
|
|
// timer = setTimeout(() => {
|
|
|
|
|
// isTop.value = false
|
|
|
|
|
// console.log('isTop.value---------------', isTop.value)
|
|
|
|
|
// }, 1000)
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// }, 300)
|
|
|
|
|
|
|
|
|
|
watch(viewMode, (newVal, oldVal) => {
|
|
|
|
|
if (newVal) {
|
|
|
|
|
isTop.value = true
|
|
|
|
|
reset()
|
|
|
|
|
loadMore()
|
|
|
|
|
}
|
|
|
|
|
// layout()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
onBeforeMount(async () => {
|
|
|
|
|
@ -153,7 +160,7 @@ let canloadMore = true
|
|
|
|
|
useInfiniteScroll(
|
|
|
|
|
el as any,
|
|
|
|
|
() => {
|
|
|
|
|
loading = false
|
|
|
|
|
// loading = false
|
|
|
|
|
console.log('加载了000000000000000---------------------------')
|
|
|
|
|
loadMore()
|
|
|
|
|
},
|
|
|
|
|
@ -164,15 +171,17 @@ async function featchList() {
|
|
|
|
|
loading = true
|
|
|
|
|
try {
|
|
|
|
|
// const result = await dubiousfilelist({ ...pagination, orderbyname: timeRange.value })
|
|
|
|
|
pagination.pageNo += 1
|
|
|
|
|
console.log('pagination.pageNo------------', pagination.pageNo)
|
|
|
|
|
const result = await dubiousfilelist({ ...pagination, ...sortObj })
|
|
|
|
|
// TODO：测试数据
|
|
|
|
|
// result.data = Array.from({ length: 30 })
|
|
|
|
|
const { data, pageCount } = result
|
|
|
|
|
const { data, pageCount, current } = result
|
|
|
|
|
pagination.pageNo = data.current
|
|
|
|
|
// canloadMore = pageCount >= pagination.pageNo && pageCount > 0;
|
|
|
|
|
canloadMore = data.pages >= pagination.pageNo && data.pages > 0
|
|
|
|
|
console.log('canloadMore------------', canloadMore)
|
|
|
|
|
|
|
|
|
|
loading = false
|
|
|
|
|
return result.data.records
|
|
|
|
|
// const list = data.map((item) => {
|
|
|
|
|
// return {
|
|
|
|
|
@ -182,22 +191,36 @@ async function featchList() {
|
|
|
|
|
// return list
|
|
|
|
|
}
|
|
|
|
|
catch (error) {
|
|
|
|
|
loading = false
|
|
|
|
|
canloadMore = false
|
|
|
|
|
return []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function loadMore() {
|
|
|
|
|
console.log('执行l------------------------', loading, el.value, pagination.pageNo)
|
|
|
|
|
if (loading || el.value == null)
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
// loading = true
|
|
|
|
|
pagination.pageNo = pagination.pageNo + 1
|
|
|
|
|
canloadMore = false
|
|
|
|
|
// pagination.pageNo = pagination.pageNo + 1
|
|
|
|
|
const more = await featchList()
|
|
|
|
|
console.log('more------------------------', more)
|
|
|
|
|
listData.value.push(...more)
|
|
|
|
|
layout()
|
|
|
|
|
more.forEach((item) => {
|
|
|
|
|
item.calHeight = 182 * item.high / item.wide
|
|
|
|
|
})
|
|
|
|
|
if (pagination.pageNo <= 2) {
|
|
|
|
|
listData.value = []
|
|
|
|
|
listData.value = listData.value.concat(more)
|
|
|
|
|
console.log('listData.value出来了11111111111111', listData.value)
|
|
|
|
|
if (pagination.pageNo == 1)
|
|
|
|
|
waterfallRef.value?.resize()
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
listData.value = listData.value.concat(more)
|
|
|
|
|
console.log('listData.value出来了2222222222', listData.value)
|
|
|
|
|
waterfallRef.value?.mix()
|
|
|
|
|
}
|
|
|
|
|
// layout()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onUpdated(() => {
|
|
|
|
|
@ -211,7 +234,7 @@ onUpdated(() => {
|
|
|
|
|
}
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
layout()
|
|
|
|
|
// layout()
|
|
|
|
|
}, 50)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
@ -276,6 +299,7 @@ function imUpdateSelectIds(x: number, y: number, w: number, h: number) {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function isSelected(pictureId: number) {
|
|
|
|
|
console.log('selectIds.value多少只啊啊啊啊啊啊啊啊啊啊啊啊啊', selectIds.value, pictureId)
|
|
|
|
|
return selectIds.value.includes(String(pictureId))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -394,11 +418,13 @@ onMounted(async () => {
|
|
|
|
|
|
|
|
|
|
async function showModal() {
|
|
|
|
|
show.value = true
|
|
|
|
|
// reset()
|
|
|
|
|
// pagination.pageNo = 1
|
|
|
|
|
// const list = await featchList()
|
|
|
|
|
// listData.value = list
|
|
|
|
|
reset()
|
|
|
|
|
pagination.pageNo = 1
|
|
|
|
|
const list = await featchList()
|
|
|
|
|
listData.value = list
|
|
|
|
|
layout()
|
|
|
|
|
loadMore()
|
|
|
|
|
// layout()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function onChange() {
|
|
|
|
|
@ -411,12 +437,14 @@ async function onChange() {
|
|
|
|
|
// orderbyname: val,
|
|
|
|
|
orderByUptime: timeRange.value,
|
|
|
|
|
}
|
|
|
|
|
pagination.pageNo = 1
|
|
|
|
|
canloadMore = true
|
|
|
|
|
const list = await featchList()
|
|
|
|
|
listData.value = list
|
|
|
|
|
// pagination.pageNo = 1
|
|
|
|
|
// canloadMore = true
|
|
|
|
|
// const list = await featchList()
|
|
|
|
|
// listData.value = list
|
|
|
|
|
isTop.value = true
|
|
|
|
|
layout()
|
|
|
|
|
reset()
|
|
|
|
|
loadMore()
|
|
|
|
|
// layout()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function onChangeView() {
|
|
|
|
|
@ -429,12 +457,14 @@ async function onChangeView() {
|
|
|
|
|
// orderbyname: val,
|
|
|
|
|
orderBySimilarity: similarRange.value,
|
|
|
|
|
}
|
|
|
|
|
pagination.pageNo = 1
|
|
|
|
|
canloadMore = true
|
|
|
|
|
const list = await featchList()
|
|
|
|
|
listData.value = list
|
|
|
|
|
// pagination.pageNo = 1
|
|
|
|
|
// canloadMore = true
|
|
|
|
|
// const list = await featchList()
|
|
|
|
|
// listData.value = list
|
|
|
|
|
isTop.value = true
|
|
|
|
|
layout()
|
|
|
|
|
reset()
|
|
|
|
|
loadMore()
|
|
|
|
|
// layout()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function closeModal(event: MouseEvent) {
|
|
|
|
|
@ -446,10 +476,12 @@ async function commit() {
|
|
|
|
|
const res = await removeFiles({ pictureid: ids })
|
|
|
|
|
if (res.code === 'OK') {
|
|
|
|
|
message.success('移除成功')
|
|
|
|
|
pagination.pageNo = 1
|
|
|
|
|
const list = await featchList()
|
|
|
|
|
listData.value = list
|
|
|
|
|
layout()
|
|
|
|
|
// pagination.pageNo = 1
|
|
|
|
|
// const list = await featchList()
|
|
|
|
|
// listData.value = list
|
|
|
|
|
reset()
|
|
|
|
|
loadMore()
|
|
|
|
|
// layout()
|
|
|
|
|
setBatch(false)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -520,7 +552,7 @@ function reset() {
|
|
|
|
|
selectedApproveItems.value.length = 0
|
|
|
|
|
loading = false
|
|
|
|
|
canloadMore = true
|
|
|
|
|
layout()
|
|
|
|
|
// layout()
|
|
|
|
|
}
|
|
|
|
|
function validate(items: any[]) {
|
|
|
|
|
if (items.length === 0)
|
|
|
|
|
@ -590,11 +622,13 @@ function reloadList() {
|
|
|
|
|
}
|
|
|
|
|
async function refreshHandler(filtersearchId?: any) {
|
|
|
|
|
// 注释 rao start
|
|
|
|
|
// reset()
|
|
|
|
|
// pagination.pageNo = 1
|
|
|
|
|
// const list = await featchList()
|
|
|
|
|
// listData.value = list
|
|
|
|
|
reset()
|
|
|
|
|
pagination.pageNo = 1
|
|
|
|
|
const list = await featchList()
|
|
|
|
|
listData.value = list
|
|
|
|
|
layout()
|
|
|
|
|
loadMore()
|
|
|
|
|
// layout()
|
|
|
|
|
// 注释 rao end
|
|
|
|
|
// reset();
|
|
|
|
|
|
|
|
|
|
@ -602,25 +636,52 @@ async function refreshHandler(filtersearchId?: any) {
|
|
|
|
|
// filterId = filtersearchId;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
useInfiniteScroll(
|
|
|
|
|
el as any,
|
|
|
|
|
() => {
|
|
|
|
|
loadMore()
|
|
|
|
|
},
|
|
|
|
|
{ distance: 10, canLoadMore: () => canloadMore },
|
|
|
|
|
)
|
|
|
|
|
}, 300)
|
|
|
|
|
})
|
|
|
|
|
// nextTick(() => {
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
// useInfiniteScroll(
|
|
|
|
|
// el as any,
|
|
|
|
|
// () => {
|
|
|
|
|
// loadMore()
|
|
|
|
|
// },
|
|
|
|
|
// { distance: 10, canLoadMore: () => canloadMore },
|
|
|
|
|
// )
|
|
|
|
|
// }, 300)
|
|
|
|
|
// })
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function finish() {
|
|
|
|
|
console.log('finish')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onBeforeMount(async () => {
|
|
|
|
|
const screenWidth = window.screen.width
|
|
|
|
|
if (screenWidth > 1920 && screenWidth <= 2560)
|
|
|
|
|
cols.value = 12
|
|
|
|
|
else if (screenWidth <= 1920 && screenWidth >= 1792)
|
|
|
|
|
cols.value = 8
|
|
|
|
|
else if (screenWidth < 1792 && screenWidth > 1440)
|
|
|
|
|
cols.value = 7
|
|
|
|
|
else if (screenWidth <= 1440)
|
|
|
|
|
cols.value = 6
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function previewHandler(index: number, event: MouseEvent, thumburl, imgUrl) {
|
|
|
|
|
event.stopImmediatePropagation()
|
|
|
|
|
event.stopPropagation()
|
|
|
|
|
if (imageRef.value?.[index] && (imageRef.value[index] as any).src)
|
|
|
|
|
// (imageRef.value?.[index] as any).mergedOnClick()
|
|
|
|
|
// previewImageUrl(thumburl, imgUrl);
|
|
|
|
|
(imageRef.value?.[index] as any).click()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
watch(() => show.value, async (newVal) => {
|
|
|
|
|
if (show.value) {
|
|
|
|
|
pagination.pageNo = 1
|
|
|
|
|
const list = await featchList()
|
|
|
|
|
listData.value = list
|
|
|
|
|
layout()
|
|
|
|
|
// pagination.pageNo = 1
|
|
|
|
|
// const list = await featchList()
|
|
|
|
|
// listData.value = list
|
|
|
|
|
// layout()
|
|
|
|
|
reset()
|
|
|
|
|
loadMore()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
@ -667,18 +728,6 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
|
<span>相似度排序</span>
|
|
|
|
|
<SvgIcon style="margin-left: 8px" name="sort" size="12" />
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click" @change="onChange">
|
|
|
|
|
<div class="wrapper-content-form-dropdown">
|
|
|
|
|
<span>时间排序</span>
|
|
|
|
|
<SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" />
|
|
|
|
|
</div>
|
|
|
|
|
</n-popselect>
|
|
|
|
|
<n-popselect v-model:value="similarRange" :options="timeOptions" trigger="click" @change="onChangeView">
|
|
|
|
|
<div class="wrapper-content-form-dropdown">
|
|
|
|
|
<span>相似度排序</span>
|
|
|
|
|
<SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" />
|
|
|
|
|
</div>
|
|
|
|
|
</n-popselect> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="remove" @click="remove">
|
|
|
|
|
@ -696,26 +745,41 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
|
返回
|
|
|
|
|
</n-button>
|
|
|
|
|
<div style="cursor: pointer; margin-left: 16px" @click.stop="rejectHandler">
|
|
|
|
|
<!--<SvgIcon width="64" height="28" name="a1" />-->
|
|
|
|
|
<img class="btn-approval btn-left" style="margin-left: 16px" src="@/assets/images/task/btn-not-pass.png" alt="" >
|
|
|
|
|
<!-- <SvgIcon width="64" height="28" name="a1" /> -->
|
|
|
|
|
<img class="btn-approval btn-left" style="margin-left: 16px" src="@/assets/images/task/btn-not-pass.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<SvgIcon size="24" name="vs" />
|
|
|
|
|
<div style="cursor: pointer" @click.stop="approvalHandler">
|
|
|
|
|
<!-- <SvgIcon width="64" height="28" name="a2" />-->
|
|
|
|
|
<img class="btn-approval" src="@/assets/images/task/btn-pass.png" alt="" >
|
|
|
|
|
<!-- <SvgIcon width="64" height="28" name="a2" /> -->
|
|
|
|
|
<img class="btn-approval" src="@/assets/images/task/btn-pass.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div ref="el" class="scroll" :style="{ height: maxHeight, marginTop: '16px' }">
|
|
|
|
|
<!-- <n-scrollbar :on-scroll="scrollHandler"> -->
|
|
|
|
|
<div ref="masonryRef" class="grid">
|
|
|
|
|
<div v-if="viewMode != 'masonry'" class="grid" :style="{ 'grid-template-columns': `repeat(${cols}, 182px)` }">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item) in listData" :key="item.pictureId" :data-id="item.pictureId"
|
|
|
|
|
v-for="(item, index) in listData" :key="item.pictureId" :data-id="item.pictureId"
|
|
|
|
|
:class="{ 'grid-item-selected': isSelected(item.pictureId) }" :style="{ height: gridHeight }"
|
|
|
|
|
class="grid-item"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
:key="item.pictureId"
|
|
|
|
|
v-lazy="item.imgUrl"
|
|
|
|
|
:class="{
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
|
|
|
|
|
}"
|
|
|
|
|
:style="{ height: `${item.calHeight}px` }"
|
|
|
|
|
class="img"
|
|
|
|
|
alt="加载错误"
|
|
|
|
|
@click="
|
|
|
|
|
($event) => {
|
|
|
|
|
previewHandler(index, $event, item.serverThumbnailUrl, item.imgUrl);
|
|
|
|
|
}
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<n-image
|
|
|
|
|
ref="imageRef"
|
|
|
|
|
:src="item?.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl"
|
|
|
|
|
@ -725,7 +789,7 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
|
:class="{
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }"
|
|
|
|
|
:style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
|
|
|
|
|
:style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})`, display: 'none' }"
|
|
|
|
|
/>
|
|
|
|
|
<n-checkbox
|
|
|
|
|
v-if="batch && item.historyStates === 1" v-model:checked="item.checked"
|
|
|
|
|
@ -742,16 +806,6 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
|
{{ item.similarityScore }}<span class="percent-unit">%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="time">
|
|
|
|
|
<!-- <div class="time-item">
|
|
|
|
|
<SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
|
|
|
|
|
<span>{{ item?.photoDateTimestamp ?
|
|
|
|
|
formatToDateHMS(Number(item.photoDateTimestamp)) : '-' }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="time-item time-item2">
|
|
|
|
|
<SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
|
|
|
|
|
<span>{{ item.submitDateTimestamp ?
|
|
|
|
|
formatToDateHMS(Number(item.submitDateTimestamp)) : '-' }}</span>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="time-item" style="margin-bottom: 4px;">
|
|
|
|
|
<SvgIcon color="#FFF" size="16" name="camera" style="margin-right: 4px;" />
|
|
|
|
|
<span class="time-value">{{ item?.photoDateTimestamp
|
|
|
|
|
@ -765,7 +819,67 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </n-scrollbar> -->
|
|
|
|
|
<waterfall v-if="viewMode === 'masonry'" ref="waterfallRef" :col="cols" :data="listData" :gutter-width="10" @finish="finish">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in listData" :key="item.pictureId" :data-id="item.pictureId"
|
|
|
|
|
:class="{ 'grid-item-selected': isSelected(item.pictureId) }" :style="{ height: gridHeight }"
|
|
|
|
|
class="grid-item"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
:key="item.pictureId"
|
|
|
|
|
v-lazy="item.imgUrl"
|
|
|
|
|
:class="{
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
|
|
|
|
|
}"
|
|
|
|
|
:style="{ height: `${item.calHeight}px` }"
|
|
|
|
|
class="img"
|
|
|
|
|
alt="加载错误"
|
|
|
|
|
@click="
|
|
|
|
|
($event) => {
|
|
|
|
|
previewHandler(index, $event, item.serverThumbnailUrl, item.imgUrl);
|
|
|
|
|
}
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<n-image
|
|
|
|
|
ref="imageRef"
|
|
|
|
|
:src="item?.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl"
|
|
|
|
|
:preview-src="item.imgUrl"
|
|
|
|
|
:fallback-src="bgLoadingImg"
|
|
|
|
|
class="img "
|
|
|
|
|
:class="{
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }"
|
|
|
|
|
:style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})`, display: 'none' }"
|
|
|
|
|
/>
|
|
|
|
|
<n-checkbox
|
|
|
|
|
v-if="batch && item.historyStates === 1" v-model:checked="item.checked"
|
|
|
|
|
style="position:absolute;left:20px;top:20px" @click.prevent.stop
|
|
|
|
|
@update:checked="onCheckChange($event, item)"
|
|
|
|
|
/>
|
|
|
|
|
<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="{ 'percent-red': item.similarityScore === 100 }" class="percent">
|
|
|
|
|
{{ item.similarityScore }}<span class="percent-unit">%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="time">
|
|
|
|
|
<div class="time-item" style="margin-bottom: 4px;">
|
|
|
|
|
<SvgIcon color="#FFF" size="16" name="camera" style="margin-right: 4px;" />
|
|
|
|
|
<span class="time-value">{{ item?.photoDateTimestamp
|
|
|
|
|
? formatToDateHMS(Number(item.photoDateTimestamp)) : '- -' }} </span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="time-item">
|
|
|
|
|
<SvgIcon class="svg-time" color="#FFF" size="16" name="time" />
|
|
|
|
|
<span>{{ item.submitDateTimestamp
|
|
|
|
|
? formatToDateHMS(Number(item.submitDateTimestamp)) : '- -' }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</waterfall>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@ -826,9 +940,19 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep(.vue-waterfall) {
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
.vue-waterfall-column {
|
|
|
|
|
max-width: 190px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img {
|
|
|
|
|
width: 182px;
|
|
|
|
|
max-width: 182px;
|
|
|
|
|
border-radius: 7px;
|
|
|
|
|
display: block;
|
|
|
|
|
opacity: 1 !important;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -846,7 +970,9 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
|
&-m32 {
|
|
|
|
|
margin-left: 32px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grid-item-selected {
|
|
|
|
|
background-color: #dae3ff;
|
|
|
|
|
}
|
|
|
|
|
&-content {
|
|
|
|
|
&-form {
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -884,21 +1010,30 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
|
|
|
|
|
|
&-item {
|
|
|
|
|
&-img {
|
|
|
|
|
width: 182px;
|
|
|
|
|
border-radius: 7px;
|
|
|
|
|
display: block;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-img-fit {
|
|
|
|
|
width: 100%;
|
|
|
|
|
width: 182px;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grid{
|
|
|
|
|
grid-gap: 0px 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grid-item {
|
|
|
|
|
width: 214px;
|
|
|
|
|
padding: 16px;
|
|
|
|
|
box-sizing: content-box;
|
|
|
|
|
width: 182px;
|
|
|
|
|
padding: 6px;
|
|
|
|
|
transition: 0.5s;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
position: relative;
|
|
|
|
|
// background-color: #fff;
|
|
|
|
|
|
|
|
|
|
.tag-status {
|
|
|
|
|
width: 46px;
|
|
|
|
|
@ -909,9 +1044,6 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.grid-item-selected {
|
|
|
|
|
background-color: #dae3ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.percent {
|
|
|
|
|
position: absolute;
|
|
|
|
|
@ -925,7 +1057,7 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
|
border-radius: 6px 0px 6px 0px;
|
|
|
|
|
z-index: 5;
|
|
|
|
|
right: 28px;
|
|
|
|
|
top: 20px;
|
|
|
|
|
top: 0px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
|
|
@ -941,10 +1073,10 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
|
.time {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 182px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
// padding-left: 10px;
|
|
|
|
|
z-index: 3;
|
|
|
|
|
left: 16px;
|
|
|
|
|
bottom: 16px;
|
|
|
|
|
left: 6px;
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
background: linear-gradient(180deg,rgba(6,0,0,0.01),rgba(0, 0, 0, 0.44) 100%);
|
|
|
|
|
border-radius: 0 0 7px 7px;
|
|
|
|
|
.time-item {
|
|
|
|
|
|
