baozhida-deliver-medicine-app/pages/order/humiture.vue

<template>
	<!-- 温湿度 -->
	<view>
		<u-navbar title="温湿度记录" autoBack placeholder></u-navbar>
		<view v-if="humitureList.length > 0">
			<view class="card_particulars" v-for="(item,index) in humitureList" :key="index">
				<view class="card_describe">
					<view class="describe_title">{{item.title}}</view>
					<view class="describe_time">{{item.startTime}}</view>
					<view class="describe_time">{{item.endTime}}</view>
				</view>
				<view class="humiture_details" @click="foldingPanel(item)">
					<view class="title_details">温湿度</view>
					<view style="display: flex;">
						<view class="title_blue title_details">查看详情</view>
						<u-icon :class="item.collapseil ? '' : 'overturn'" name="arrow-down"></u-icon>
					</view>
				</view>
				<view v-show="item.collapseil">
					<x-humiture ref="humiture" :taskId="item.id" :waybillNo="orderList.waybillNo"
						:current="item.presentNum" :probeList="item.deviceSensorList"></x-humiture>
				</view>
			</view>
		</view>
		<view style="margin-top: 30%;" v-else>
			<u-empty mode="data" text="当前没有温湿度记录"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: {},
				humitureList: [],
				userType: '',
				myChart: null,
				chartData: {},
				chartData1: {},
			}
		},
		mounted() {
			var userInfo = this.$cache.getCache('userInfo')
			this.userType = userInfo.userType
			var orderList = this.$cache.getCache('orderDetails')
			this.orderList = orderList
			this.getList()
		},
		methods: {
			getList() {
				this.$api.get('/api/waybill-task', {
					waybillNo: this.orderList.waybillNo,
				}).then(res => {
					if (res.code == 200) {
						this.humitureList = res.data.list
						this.humitureList.forEach((item, index) => {
							item.title = ''
							item.collapseil = true
							if (item.coolerBox.id) {
								item.title = item.coolerBox.name
							}
							if (item.deviceSensorList) {
								this.$nextTick(() => {
									this.$refs.humiture[index].getlist(item.deviceSensorList[0]
										.T_id)
								})
							}
						})
					}
				})
			},
			// 折叠面板
			foldingPanel(value) {
				this.humitureList.forEach((item, index) => {
					if (item.id == value.id) {
						if (item.collapseil) {
							item.collapseil = false
						} else {
							this.$refs.humiture[index].getlist(item.deviceSensorList[0].T_id)
							item.collapseil = true
						}
					}
				})
				this.$forceUpdate()
			},
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				if (e[0].status == 'open') {
					this.humitureList.forEach((item, index) => {
						this.$refs.humiture[index].getlist(item.deviceSensorList[0].T_id)
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.card_particulars {
		display: flex;
		flex-direction: column;
		padding-top: 20rpx;
		margin: 30rpx 20rpx 20rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.card_describe {
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #EBEEF5;
	}

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

	.describe_time {
		font-size: 28rpx;
	}

	.humiture_details {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	}

	.title_blue {
		color: #2979ff;
		margin-right: 10rpx;
	}

	.title_details {
		font-size: 28rpx;
	}

	::v-deep .u-collapse-item__content__text {
		padding: 0rpx 0rpx 30rpx 0rpx;
	}

	::v-deep .u-line {
		display: none;
	}

	.card_qiucharts {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.card_echart {
		width: 80%;
		height: 500rpx;
	}

	.card_echart {
		width: 80%;
		height: 500rpx;
	}

	.overturn {
		transform: rotate(180deg);
	}
</style>