采集时间轴往下拉显示不完全的问题
HTML:
<div class="step" style="overflow: auto">
<el-scrollbar class="time-scrollbar">
<el-steps
class="st-steps"
direction="vertical"
v-infinite-scroll="captureDataLoad"
:infinite-scroll-disabled="disabled"
:infinite-scroll-immediate="false"
space="67">
<el-step class="item" v-for="(item, index) in peopleCapture.captureData" :key="index">
<template #icon>
<div>
{{ peopleCapture.captureData.length > 0 ? peopleCapture.total - index : 0 }}
</div>
</template>
<template #title>
<span class="time">{{ item.captureTime }}</span>
<span class="text">{{ item.address }}</span>
</template>
<template #description>
<el-button class="sch"
@click="handleView(item, peopleCapture)">查看点位 </el-button>
</template>
</el-step>
</el-steps>
<p v-if="loading">加载中...</p>
<p v-if="noMore">数据加载完成</p>
</el-scrollbar>
</div>
//获取采集时间轴数据 -- 综合查询
const getSearchCaptureList = async (flag) => {
//
return new Promise(async (resolve) => {
const params = {
currentPage: state.currentPage,
pageSize: 20,
dates: state.dates.length > 0 ? state.dates : condition.dates,
middleAdd: condition.middleAdd,
number: condition.number,
numberType: condition.numberType,
searchType: condition.searchType
}
const res = await http.getSearchCaptureList(params)
if (res && res.success) {
const data = res.data
if (data.list.length > 0) {
if (flag) {
//
resolve(data)
} else {
peopleCapture.lastTime = data.list.length ? data.list[0].captureTime : null
peopleCapture.lastAddress = data.list.length ? data.list[0].address : null
peopleCapture.captureData = data.list.length ? data.list : []
peopleCapture.total = Number(data.total)
peopleCapture.pages = data.pages
}
}
} else {
utils.message('error', res.info, 3000)
}
})
}
//获取采集时间轴数据 -- 一键搜
const getClickSearchCaptureList = (flag) => {
//
return new Promise(async (resolve) => {
const params = {
currentPage: state.currentPage,
pageSize: 20,
dates: state.dates.length > 0 ? state.dates : condition.dates,
number: condition.number,
searchType: condition.searchType
}
const res = await http.getClickSearchCaptureList(params)
if (res && res.success) {
const data = res.data
if (data.list.length > 0) {
if (flag) {
//
resolve(data)
} else {
peopleCapture.lastTime = data.list.length ? data.list[0].captureTime : null
peopleCapture.lastAddress = data.list.length ? data.list[0].address : null
peopleCapture.captureData = data.list.length ? data.list : []
peopleCapture.total = Number(data.total)
peopleCapture.pages = data.pages
}
}
} else {
utils.message('error', res.info, 3000)
}
})
}
const loading = ref(false)
const noMore = computed(() => state.currentPage >= peopleCapture.pages)
const disabled = computed(() => loading.value || noMore.value)
//数据懒加载--采集时间轴
const captureDataLoad = () => {
loading.value = true
state.currentPage += 1
if (condition.numberType) {
getSearchCaptureList(true)
.then((data) => {
peopleCapture.captureData = peopleCapture.captureData.concat(data.list)
peopleCapture.total = Number(data.total)
loading.value = false
})
.catch((eer) => {
console.log('采集时间轴报错:', err)
})
} else {
getClickSearchCaptureList(true)
.then((data) => {
peopleCapture.captureData = peopleCapture.captureData.concat(data.list)
peopleCapture.total = Number(data.total)
loading.value = false
})
.catch((eer) => {
console.log('采集时间轴报错:', err)
})
}
}