取得スケジュールの問題

収集時間軸がプルダウンして未完了の問題を表示します

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)
				})
		}
	}

おすすめ

転載: blog.csdn.net/renfeideboke/article/details/130271245