bigDataApp/pages/environment/onedaythedata.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<view style="position: fixed;z-index: 100;width: 100%;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="24小时数据"></uni-nav-bar>
			</view>
			<view class="nonedata" v-if="olddata.length == 0">
				暂无数据
			</view>
			<view class="datatimes" v-if="olddata.length != 0">
				<view class="datatimes_box" v-for="(item,index) in olddata" :key="index">
					<view class="datatimes_title" @click="textshowtf(index)">
						<p class="datatimes_title_headline">{{item.ekey}}</p>
						<p class="datatimes_title_chunk">{{item.enum[1]+item.enum[2]}}</p>
					</view>
					<view class="datatimes_text" v-show="textshow[index]">
						<view class="datatimes_text_max">
							<view class="">
								<p>最大值</p>
								<p>{{item.max==-99.99?"N/A":item.max}}</p>
							</view>
							<p>{{item.maxtime|timeFormat()}}</p>
						</view>
						<view class="datatimes_text_min">
							<view class="">
								<p>最小值</p>
								<p>{{item.min==-99.99?"N/A":item.min}}</p>
							</view>
							<p>{{item.mintime|timeFormat()}}</p>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				textshow: {},
				olddata: {}
			}
		},
		methods: {
			async daydatas(data) { //设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=weather.weather.qxz_day_data',
					data: {
						device_id: data
					}
				})
				this.olddata = res.data
				for (let i = 0; i < this.olddata.length; i++) {
					this.textshow[i] = false
				}
			},
			textshowtf(index) {
				this.textshow[index] = !this.textshow[index]
				this.$forceUpdate()
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		onLoad(option) {
			this.daydatas(option.id)
		}
	}
</script>

<style lang="scss">
	.nonedata {
		position: absolute;
		top: 54px;
		width: 90%;
		left: 5%;
		text-align: center;
		font-size: 32rpx;
	}

	.datatimes {
		position: absolute;
		top: 54px;
		width: 90%;
		left: 5%;

		.datatimes_box {
			margin-bottom: 40rpx;
		}

		.datatimes_title {
			display: flex;

			.datatimes_title_headline {
				height: 58rpx;
				line-height: 58rpx;
			}

			.datatimes_title_chunk {
				box-shadow: 0 0 10rpx #bcb9ca;
				margin-left: 50rpx;
				width: 90%;
				padding: 10rpx;
			}
		}

		.datatimes_text {
			width: 88%;
			padding-left: 12%;

			.datatimes_text_max,
			.datatimes_text_min {
				display: flex;
				width: 100%;
				padding: 10rpx;
				background-color: #F2F2F2;
				margin-top: 20rpx;
				font-size: 24rpx;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
			}
		}
	}
</style>