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

feat: 解决冲突

Browse Source
pull/265/head
raoyongjun 1 year ago
parent 73ce0b42c2
commit 47ebd76c02
1 changed files with 198 additions and 188 deletions
Show Stats Download Patch File Download Diff File

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

@ -4,15 +4,18 @@ import { Download as DownloadIcon, Upload as UploadIcon } from '@vicons/tabler'
import { Icon } from '@vicons/utils' import { Icon } from '@vicons/utils'
import { useInfiniteScroll } from '@vueuse/core' import { useInfiniteScroll } from '@vueuse/core'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import imagesloaded from 'imagesloaded'
// import imagesloaded from 'imagesloaded'
import { cloneDeep, debounce } from 'lodash-es' import { cloneDeep, debounce } from 'lodash-es'
import Masonry from 'masonry-layout'
// import Masonry from 'masonry-layout'
import { NIcon, useMessage } from 'naive-ui' import { NIcon, useMessage } from 'naive-ui'
import type { Component } from 'vue' import type { Component } from 'vue'
import { import {
computed, computed,
h, h,
nextTick, nextTick,
onBeforeMount,
onMounted, onMounted,
onUnmounted, onUnmounted,
onUpdated, onUpdated,
@ -54,9 +57,9 @@ const listData = ref<any[]>([])
const timer = ref() const timer = ref()
const showClose = ref(false) const showClose = ref(false)
const deviceHeight = ref(600) const deviceHeight = ref(600)
let _masonry: null | Masonry = null // let _masonry: null | Masonry = null
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 viewMode = ref('masonry') const viewMode = ref('masonry')
const pagination = reactive({ const pagination = reactive({
@ -101,36 +104,36 @@ const listStyle = computed(() => {
} }
}) })
const layout = debounce(() => { // const layout = debounce(() => {
if (masonryRef.value == null || el.value == null) // if (masonryRef.value == null || el.value == null)
return // return
if (_masonry !== null) // if (_masonry !== null)
(_masonry as any).addItems() // (_masonry as any).addItems()
_masonry = new Masonry(masonryRef.value as any, { // _masonry = new Masonry(masonryRef.value as any, {
itemSelector: '.grid-item', // itemSelector: '.grid-item',
gutter: 17, // gutter: 17,
columnWidth: 182, // columnWidth: 182,
percentPosition: true, // percentPosition: true,
stagger: 10, // stagger: 10,
}) // })
loading.value = false // loading.value = false
// 暂时注释，请忽略 // // 暂时注释，请忽略
_imagesload = imagesloaded('.grid-item') // _imagesload = imagesloaded('.grid-item')
_imagesload.on('done', (instance) => { // _imagesload.on('done', (instance) => {
(_masonry as any).layout() // (_masonry as any).layout()
if (!el.value) // if (!el.value)
return // return
loading.value = false // loading.value = false
}) // })
_imagesload.on('fail', (instance) => { // _imagesload.on('fail', (instance) => {
message.error('图片错误') // message.error('图片错误')
loading.value = false // loading.value = false
}) // })
}, 300) // }, 300)
useInfiniteScroll( useInfiniteScroll(
el as any, el as any,
@ -140,12 +143,25 @@ useInfiniteScroll(
{ distance: 10, canLoadMore: () => canloadMore }, { distance: 10, canLoadMore: () => canloadMore },
) )
onUpdated(() => { onBeforeMount(async () => {
nextTick(() => { const more = await featchList()
setTimeout(() => { more.forEach((item) => {
layout() item.calHeight = 182 * item.high / item.wide
}, 50) })
listData.value = more
const tmore = await featchList()
tmore.forEach((item) => {
item.calHeight = 182 * item.high / item.wide
}) })
listData.value = listData.value.concat(tmore)
})
onUpdated(() => {
// nextTick(() => {
// setTimeout(() => {
// layout()
// }, 50)
// })
}) })
const timeRange = ref('') const timeRange = ref('')
@ -157,14 +173,6 @@ const timeLabel = computed(() => {
return item?.label return item?.label
}) })
const viewLabel = computed(() => {
const item = viewOptions.find((option) => {
return option.value === viewMode.value
})
return item?.label
})
const isAllowDownload = ref(true) const isAllowDownload = ref(true)
const calNum = ref(0) const calNum = ref(0)
const searchValue = ref('') const searchValue = ref('')
@ -254,46 +262,48 @@ async function featchList(userSearchId?: string) {
const list = data.map((item) => { const list = data.map((item) => {
return { return {
calHeight: 0,
imgUrl: item.imgurl, imgUrl: item.imgurl,
thumburl: item.serverThumbnailUrl || item.imgurl || bgLoadingImg, thumburl: item.serverThumbnailUrl,
upname: item.upname, upname: item.upname,
ocrPictureclass: item.ocrPictureclass, ocrPictureclass: item.ocrPictureclass,
uphead: item.uphead, uphead: item.uphead,
similar: item.similarityscore || -1, similar: item.similarityscore || -1,
imgName: item.imgname, imgName: item.imgname,
states: item.states, states: item.states,
wide: item.wide,
high: item.high,
loadOver: false, loadOver: false,
isRepeatHis: item.isRepeatHis,
} }
}) })
loading.value = false
return list return list
} }
catch (error) { catch (error) {
canloadMore = false canloadMore = false
loading.value = false
return [] return []
} }
} }
async function loadMore() { async function loadMore() {
console.log('loading.value加兹安', loading.value, el.value)
if (loading.value || el.value == null) if (loading.value || el.value == null)
return return
canloadMore = false
const more = await featchList() const more = await featchList()
// if(isInitSeaerch.value) { more.forEach((item) => {
// listData.value = [] item.calHeight = 182 * item.high / item.wide
// isInitSeaerch.value = false })
// } // listData.value.push(...more)
listData.value = listData.value.concat(more)
console.log(more) console.log('listData.value出来了', listData.value)
listData.value.push(...more)
console.log(listData.value)
} }
const gridHeight = computed(() => { const gridHeight = computed(() => {
let height = '' let height = ''
if (viewMode.value === 'masonry') if (viewMode.value === 'masonry')
height = '' height = 'auto'
else if (viewMode.value === 'horizontalVersion') else if (viewMode.value === 'horizontalVersion')
height = '145px' height = '145px'
else if (viewMode.value === 'verticalVersion') else if (viewMode.value === 'verticalVersion')
@ -481,9 +491,13 @@ function reset() {
canloadMore = true canloadMore = true
filterId = null filterId = null
layout() // layout()
} }
watch(listData.value, (newVal, oldVal) => {
console.log('最新的val', newVal)
})
async function refreshHandler(filtersearchId?: any) { async function refreshHandler(filtersearchId?: any) {
reset() reset()
@ -643,6 +657,16 @@ const dropdownOptions = ref([
}, },
]) ])
function finish() {
console.log('finish')
}
function scroll() {
}
const masonryRef = ref(null)
defineExpose({ defineExpose({
showLoginSuccessModal, showLoginSuccessModal,
closeLoginSuccessModal, closeLoginSuccessModal,
@ -715,24 +739,30 @@ 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 ref="el" class="scroll" :style="listStyle"> <div ref="el" class="scroll" :style="listStyle">
<!-- <n-scrollbar :on-scroll="scrollHandler"> --> <waterfall :col="8" :data="listData" :gutter-width="10" @finish="finish">
<div ref="masonryRef" class="grid">
<div <div
v-for="(item, index) in listData" v-for="(item, index) in listData"
:key="index" :key="item.calHeight"
:style="{ height: gridHeight, minHeight: gridMinHeight }" :style="{ height: gridHeight }"
class="grid-item" class="grid-item"
> >
<!-- <div :style="{ 'background-color': randomColor(0.2) }" class="wrapper-content-item-img" /> --> <img
<!-- <img :key="item.thumburl"
class="wrapper-content-item-img" :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" v-lazy="item.thumburl"
:src="item.imgUrl" :class="{
> --> 'img-fit': viewMode === 'horizontalVersion',
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
}"
:style="{ height: `${`${item.calHeight}px`}` }"
class="img"
alt="加载错误"
>
<n-image <n-image
ref="imageRef" ref="imageRef"
:key="item.imgUrl"
class="img" class="img"
:img-props="{ :img-props="{
onClick: ($event) => { onClick: ($event) => {
@ -748,7 +778,9 @@ defineExpose({
:src="item.thumburl" :src="item.thumburl"
:fallback-src="bgLoadingImg" :fallback-src="bgLoadingImg"
:style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }" :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
style="display: none"
/> />
<img <img
v-if="item.states == 3" v-if="item.states == 3"
class="tag-status" class="tag-status"
@ -761,29 +793,6 @@ defineExpose({
src="@/assets/images/task/tag-not-pass.png" src="@/assets/images/task/tag-not-pass.png"
alt="" alt=""
> >
<img
v-if="(item.states != 3 && item.states != 5) && item.isRepeatHis"
class="tag-status"
src="@/assets/images/reset.png"
alt=""
>
<img
v-if="(item.states == 3 || item.states == 5) && item.isRepeatHis"
style="top:35px"
class="tag-status"
src="@/assets/images/reset.png"
alt=""
>
<!-- @load="loadImgOver(item)" -->
<!-- <n-image
class="img"
:class="{
'img-fit': viewMode === 'horizontalVersion',
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
}"
:src="baseImg"
v-show="!item.loadOver"
/> -->
<div v-if="item.similar != -1" class="percent"> <div v-if="item.similar != -1" class="percent">
<SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" /> <SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
@ -836,16 +845,11 @@ defineExpose({
/> />
<span>{{ item.upname }}</span> <span>{{ item.upname }}</span>
</div> </div>
<!-- <div class="right">
<span :style="{ marginRight: '5px' }">分类</span>
<span>{{ item.ocrPictureclass?.classname }}</span>
</div> -->
</div> </div>
</div> </div>
</waterfall>
</div> </div>
<!-- </n-scrollbar> --> <!-- </n-spin> -->
</div>
</n-spin>
</div> </div>
<PackageSettingsModal ref="packageModalRef" @commit="commitHandler" /> <PackageSettingsModal ref="packageModalRef" @commit="commitHandler" />
<GeneratePackageModal ref="generateModalRef" /> <GeneratePackageModal ref="generateModalRef" />
@ -869,7 +873,6 @@ defineExpose({
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
margin-left: 16px; margin-left: 16px;
margin-right: 16px;
width: 100%; width: 100%;
&-header { &-header {
@ -916,19 +919,26 @@ defineExpose({
padding-bottom: 16px; padding-bottom: 16px;
} }
.grid{
display: block !important;
}
.img { .img {
width: 182px;
max-width: 182px;
border-radius: 7px; border-radius: 7px;
display: block; display: block;
height: calc(100% - 25px); opacity: 1 !important;
// height: calc(100% - 25px);
} }
.img-fit { .img-fit {
width: 100%; width: 182px;
overflow: hidden; overflow: hidden;
} }
.img-full { .img-full {
width: 100%; width: 182px;
overflow: hidden; overflow: hidden;
::v-deep(img) { ::v-deep(img) {

Write Preview
Loading…
Cancel
Save