baozhida-deliver-medicine-app/pages/home/particulars.vue

<template>
	<!-- 仓库、车辆详情页面 -->
	<view>
		<u-navbar :title="detailTitle" autoBack placeholder></u-navbar>
		<view class="card_time">
			<uni-datetime-picker v-model="datetimeRange" type="datetimerange" rangeSeparator="至" @change="changeTime" />
		</view>
		<view class="sub_card" v-if="probeList.length > 0">
			<u-subsection :list="probeList" :current="current" keyName="T_name" @change="sectionChange"></u-subsection>
		</view>
		<view class="card_particulars">
			<view class="humiture_line"></view>
			<view class="card_humiture border_humiture">
				<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 style="width: 100%;" v-if="humitureList.length > 0">
				<view class="card_humiture" v-for="(item,index) in humitureList" :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">
					<view v-if="loadingMore" style="width: 60%;"><u-divider :text="loading"></u-divider></view>
				</view>
			</view>
			<view v-else style="padding: 30rpx 0rpx;">
				<u-empty mode="data" text="暂无温湿度记录"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				detailTitle: '',
				probeList: [],
				humitureList: [],
				datetimeRange: [],
				defaultItem: {},
				pageSize: 15,
				currentPage: 1,
				loadingMore: false,
				loading: '加载中'
			}
		},
		onReachBottom() {
			if (!this.loadingMore) {
				this.getDeviceData(this.defaultItem)
			}
		},
		onLoad(value) {
			if (value.title == 'true' || value.title === true) {
				this.detailTitle = '仓库信息'
			} else if (value.title == 'false' || value.title === false) {
				this.detailTitle = '车辆信息'
			}
			this.getSensor()
		},
		methods: {
			getSensor() {
				this.$api.get('/api/device/sensor-list').then(res => {
					if (res.code == 200) {
						if (res.data.list) {
							this.probeList = res.data.list
						}
						if (this.probeList.length > 0) {
							this.defaultItem = this.probeList[0]
						}
						this.getDeviceData(this.defaultItem)
					}
				})
			},
			getDeviceData(value) {
				this.loadingMore = true;
				let params = {
					t_sn: value.T_sn,
					t_id: value.T_id,
					startTime: '',
					endTime: '',
					page: this.currentPage,
					pageSize: this.pageSize,
				}
				if (this.datetimeRange.length > 0) {
					params.startTime = this.datetimeRange[0]
					params.endTime = this.datetimeRange[1]
				}
				this.$api.get('/api/device/data', params).then(res => {
					if (res.code == 200) {
						const data = res.data.list
						if (this.loadingMore == true && data) {
							this.humitureList = this.humitureList.concat(data);
						}
						if (data.length < this.pageSize) {
							this.loadingMore = true
							this.loading = '没有更多了'
						} else {
							this.loading = '加载中'
							this.loadingMore = false
							this.currentPage++
						}
					}
				})
			},
			// 日期选择
			changeTime(value) {
				this.datetimeRange = value
				this.currentPage = 1
				this.humitureList = []
				this.getDeviceData(this.defaultItem)
			},
			// 选择探头
			sectionChange(numIndex) {
				this.currentPage = 1
				this.humitureList = []
				this.current = numIndex
				const arrList = this.probeList[numIndex]
				this.defaultItem = arrList
				this.getDeviceData(arrList)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}

	.card_time {
		display: flex;
		margin: 20rpx;
	}

	.sub_card {
		margin: 20rpx;
	}

	.card_particulars {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0rpx;
		margin: 30rpx 20rpx 20rpx 20rpx;
		border-radius: 40rpx;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.humiture_line {
		width: 80rpx;
		height: 10rpx;
		border-radius: 20rpx;
		background-color: #C0C4CC;
		margin: 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%;
	}
</style>