bigdata_WX/pages/disease/mls/forecastResult.vue

<template>
	<view class="bigBox">
		<u-card :show-head="false" margin="0rpx 20rpx" :show-foot="false">
			<view class="cardBox" slot="body">
				<view class="selecttimes" @click="tiemshow = !tiemshow">
					<view class="timesbox">
						<image
							:src="'http://www.hnyfwlw.com:8006/bigdata_app/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'"
							mode=""></image>
						<p>{{ initTime ? '出苗期' : begintime }}</p>
						<p class="or">~</p>
						<p>{{ initTime ? '收获期' : end }}</p>
						<u-icon name="rili" custom-prefix="custom-icon" class="icon"></u-icon>
					</view>
					<u-calendar v-model="tiemshow" mode="range" @change="tiemchange"></u-calendar>
				</view>
				<view class="empty" v-if="initTime">
					请先选择出苗期和收获期
				</view>
				<view class="empty" v-else-if="list.length == 0">
						数据为空
				</view>
				<scroll-view scroll-top="0" scroll-x="true" class="scroll-X" v-else>
					<table class="table">
						<tr class="tr">
							<th class="th" v-for="(value, key) in param" :key="'a' + key">
								{{ value }}
							</th>
						</tr>
						<tr class="tr" v-for="(items, indexs) in list" :key="'b' + indexs">
							<td class="td" v-for="(value, key) in param">{{ items[key]}}</td>
						</tr>
					</table>
				</scroll-view>
			</view>
			<view class="" slot="foot"><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view>
		</u-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tiemshow: false,
				initTime: true,
				forecastId:'',
				end:'',
				begintime:'',
				list: [],
				param: {
					ciDai: '代/次',
					sTime: '本次侵染开始时间',
					eTime: '本次侵染结束时间',
					awsDeg: '本次侵染程度',
					awsFen: '本次侵染的分值',
					awsYao: '是否使用预报数据',
				}
			}
		},
		onLoad(option) {
			this.forecastId = option.id;
			this.end = parseInt(+new Date() / 1000);
			this.begintime = parseInt(this.end - 24 * 60 * 60);
		},
		methods: {
			async histprydatas() {
				//表格历史数据
				const res = await this.$myRequest({
					url: "/api/api_gateway?method=wheat.potato.potato_time",
					data: {
						device_id: this.forecastId,
						start:this.begintime,
						end: this.end
					},
				});
				console.log(res);
				this.list = res.data.list;
			},
			tiemchange(e) {
				console.log(e);
				this.initTime = false;
				//切换时间
				// this.begintime = parseInt(+new Date(e.startDate) / 1000);
				this.begintime = e.startDate;
				this.end = e.endDate;
				this.histprydatas();
			}
		}
	}
</script>

<style scoped lang="less">
	.bigBox {
		width: 100vw;
		height: calc(100vh - 80rpx);
		background: #eee;
		box-sizing: border-box;
		padding-top: 20rpx;
		overflow: hidden;

		.cardBox {
			height: 75vh;
			overflow-y: auto;
			padding-top: 20rpx;
			.empty{
				display: flex;
				justify-content: center;
				align-items: center;
				height: calc(100% - 60rpx);
			}
			.selecttimes {
				width: 90%;
				box-shadow: 0 0 10rpx #bcb9ca;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				margin: 0 auto;
				font-size: 28rpx;
			
				.timesbox {
					display: flex;
					justify-content: space-around;
			
					image {
						width: 30rpx;
						height: 30rpx;
						margin-top: 6rpx;
					}
			
					.icon {
						color: #949494;
						text-align: right;
						margin-left: 30rpx;
					}
				}
			
				/deep/.u-calendar__action {
					display: flex;
					justify-content: space-around;
			
					.u-calendar__action__text {
						line-height: 25px;
					}
				}
			}
			
			.scroll-X {
				width: 100%;
				margin: 20rpx auto;
				height: calc(100% - 120rpx);
				overflow-y: auto;
				.tr {
					display: flex;
					overflow: hidden;

					.th,
					.td {
						display: inline-block;
						padding: 5rpx;
						width: 300rpx;
						text-align: center;
						height: 52rpx;
						line-height: 52rpx;
						border: 2rpx solid #f1f1f1;
					}
				}

				.tr:nth-child(2n-1) {
					background-color: #f5fff8;
				}

				.tr:first-child {
					background-color: #57c878;
					color: #fff;
				}
			}
		}
	}
</style>