baozhida-logistics-app/components/x-humiture.vue

<template>
	<view style="width: 100%;">
		<view class="sub_card" v-if="probeList.length > 0">
			<u-subsection :list="probeList" :current="current" keyName="T_name" @change="sectionChange1"></u-subsection>
		</view>
		<view class="card_humiture border_humiture" v-if="humitureData.length > 0">
			<view class="headline_item w_wsd">温度(°C)</view>
			<view class="headline_item w_wsd">湿度(Rh)</view>
			<view class="headline_item w_time">时间</view>
		</view>
		<view class="card_record" v-if="humitureData.length > 0">
			<scroll-view class="scroll-view" scroll-y="true" @scrolltolower="loadMore">
				<view class="card_humiture" v-for="(item,index) in humitureData" :key="index">
					<view class="title_item w_wsd">{{item.T_t || ''}}</view>
					<view class="title_item w_wsd">{{item.T_rh || ''}}</view>
					<view class="title_item w_time">{{item.T_time || ''}}</view>
				</view>
				<view class="center_in" v-if="loadingMore">
					<u-divider :text="loading"></u-divider>
				</view>
			</scroll-view>
		</view>
		<view v-else style="padding: 30rpx 0rpx;">
			<u-empty mode="data" text="暂无温湿度记录"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Xhumiture',
		props: {
			probeList: {
				type: Array,
				default: () => [],
			},
			waybillNo: {
				type: String,
				default: () => '',
			},
			taskId: {
				type: Number,
				default: () => null,
			},
			startTime: {
				type: String,
				default: () => '',
			},
			endTime: {
				type: String,
				default: () => '',
			},
		},
		data() {
			return {
				current: 0,
				loadingMore: true,
				pageSize: 10,
				currentPage: 1,
				tIds: [],
				humitureData: [],
				loading: '加载中',
			}
		},
		mounted() {
			// this.getProbe()
		},
		methods: {
			getlistil(num) {
				this.loadingMore = true;
				this.currentPage = 1
				this.humitureData = []
				this.getList(num)
			},
			getList(tIds) {
				this.loadingMore = true;
				this.tIds = []
				this.tIds.push(tIds)

				function methods1(arr) {
					return Array.from(new Set(arr));
				}
				this.tIds = methods1(this.tIds)
				let params = {
					t_ids: this.tIds,
					taskId: this.taskId,
					waybillNo: this.waybillNo,
					page: this.currentPage,
					pageSize: this.pageSize,
					startTime: this.startTime,
					endTime: this.endTime,
				}
				this.$api.post('/api/waybill-task/data', params).then(res => {
					if (res.code == 200) {
						const data = res.data.list
						if (this.loadingMore == true && data) {
							this.humitureData = this.humitureData.concat(data);
						}
						if (data.length < this.pageSize) {
							this.loadingMore = true
							this.loading = '没有更多了'
						} else {
							this.loadingMore = false
							this.currentPage++
						}
					}
				})
			},
			sectionChange1(value) {
				this.current = value
				this.currentPage = 1
				this.humitureData = []
				const num = this.probeList[value].T_id
				this.getList(num)
			},
			// 滚动加载更多
			loadMore() {
				if (!this.loadingMore) {
					this.getList(this.tIds[0]);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sub_card {
		margin: 0rpx 20rpx 20rpx 20rpx;
	}

	.card_humiture {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx 0rpx;
		margin-bottom: 10rpx;
	}

	.border_humiture {
		border-bottom: 1rpx solid #EBEEF5;
	}

	.headline_item {
		font-size: 30rpx;
		font-weight: 600;
	}

	.title_item {
		font-size: 28rpx
	}

	.w_wsd {
		text-align: center;
		width: 27%;
	}

	.w_time {
		text-align: center;
		width: 46%;
	}

	.card_record {
		margin-bottom: 20rpx;
	}

	.scroll-view {
		max-height: 500rpx;
		overflow: hidden;
	}
</style>