wszhyWx/pages/timeEnvironment/timeEnvironment.vue

<template>
	<view class="timeEnvironment">
		<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false" title="实时环境"
			title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>

		<view class="navbar">
			<image src="../../static/timeEnvironment_bg.png" mode=""></image>
		</view>

		<view class="content">
			<view class="title">
				<image src="../../static/logo_1.png" mode=""></image>
				<view class="right">
					<view class="">
						温室智慧云
					</view>
					<view class="">
						Greenhouse wisdom Cloud
					</view>
				</view>
			</view>

			<view class="subtitle">
				欢迎使用温室智慧云数据统计
			</view>

			<view class="waterAndFertilizerParams" v-for="(item1,index1) in waterAndFertilizerParamsList" :key="index1">
				<view class="nav">
					<image src="../../static/PH.png" mode=""></image>
					<text>{{ item1.deviceTypeName }}</text>
				</view>
				<view class="detail">
					<view class="item" v-for="(item2,index2) in item1.childList" :key="index2"
						@click="toTarget_water_fertilizer_PH(item2.equipmentId,item2.environmentData,item2.environmentDataId,item2.equipmentNumber,item2.targetValue,getTypeList(item2.formula),item2.equipmentName)">
						<!-- <image :src='`../../static/icon/icon${ (index2 + 1) < 9 ? (index2 + 1) : 1 }.png`' mode=""></image> -->
						<image :src="`../../static/icon_new/icon${ item2.formula }.png`" mode=""></image>
						<view class="info">
							<view class="">
								{{ getStatus(item2.equipmentNumber,item2.targetValue) + item2.environmentDataId }}
							</view>
							<view class="">{{ item2.environmentData + getTypeList(item2.formula) }}</view>
						</view>
					</view>
				</view>
				<view class="updateTime">
					<span></span>
					<span>*更新数据时间&nbsp;: &nbsp;{{ updateTime }}</span>
				</view>
			</view>

			<!-- <view class="testBase" v-for="(item1,index1) in waterAndFertilizerParamsList" :key="index1">
				<view class="nav">
					<image src="../../static/base.png" mode=""></image>
					<text>{{ item1.deviceTypeName }}</text>
				</view>
				<view class="detail">
					<view class="item" v-for="(item2,index2) in item1.childList" :key="index2" @click="toTarget_water_fertilizer_PH(item2.equipmentId,item2.environmentData)">
						<image :src='`../../static/icon/icon@${ item2.formula ? item2.formula : 1 }.png`' mode=""></image>
						<view class="info">
							<view class="">{{ getStatus(item2.equipmentNumber,item2.targetValue) + item2.environmentDataId }}</view>
							<view class="">{{ item2.environmentData + getTypeList(item2.formula) }}</view>
						</view>
					</view>
				</view>
			</view> -->

			<!-- <view class="testBase1" v-for="(item1,index1) in waterAndFertilizerParamsList" :key="index1">
				<view class="nav">
					<image src="../../static/testBase1.png" mode=""></image>
					<text>{{ item1.deviceTypeName }}</text>
					<text>温室#1</text>
				</view>
				<view class="item"  v-for="(item2,index2) in item1.childList" :key="index2" @click="toTarget_water_fertilizer_PH(item2.equipmentId,item2.environmentData)">
					<image :src="`../../static/icon/${ (index2 + 1) < 5 ? (index2 + 1) : 1  }.png`" mode=""></image>
					<text>{{ getStatus(item2.equipmentNumber,item2.targetValue) + item2.environmentDataId }}</text>
					<text>{{ item2.environmentData + getTypeList(item2.formula) }}</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 头部导航背景
				background: {
					backgroundColor: 'transparent',
				},
				// 水肥参数
				waterAndFertilizerParamsList: [

				],

				// 测试基地
				testBaseList: [{
						img: "../../static/base1.png",
						name: '空气温度',
						value: "38.8klux"
					},
					{
						img: "../../static/base2.png",
						name: '光亮度',
						value: "38.8klux"
					},
					{
						img: "../../static/base3.png",
						name: '二氧化碳',
						value: "二氧化碳"
					},
					{
						img: "../../static/base3.png",
						name: '二氧化碳',
						value: "678PPM"
					},
					{
						img: "../../static/base4.png",
						name: '土壤温度',
						value: "20℃"
					},
					{
						img: "../../static/base4.png",
						name: '土壤温度',
						value: "30.1℃"
					},
					{
						img: "../../static/base5.png",
						name: '土壤湿度',
						value: "18.5%"
					},
					{
						img: "../../static/base5.png",
						name: '土壤湿度',
						value: "18.5%"
					},
					{
						img: "../../static/base6.png",
						name: '水肥PH',
						value: "0"
					},
					{
						img: "../../static/base6.png",
						name: '水肥EC',
						value: "0.2mS/cm"
					},
					{
						img: "../../static/base7.png",
						name: '3#空气温度',
						value: "29.8C"
					},
					{
						img: "../../static/base8.png",
						name: '3#空气湿度',
						value: "80.6%"
					},
					{
						img: "../../static/base2.png",
						name: '3#光亮度',
						value: "34.6 klux"
					},
					{
						img: "../../static/base3.png",
						name: '3#二氧化碳',
						value: "29.8C"
					},
					{
						img: "../../static/base5.png",
						name: '3#土壤温度',
						value: "31℃"
					},
				],

				// 测试基地
				testBaseList1: [{
						img: "../../static/1.png",
						name: '4#光亮度',
						value: "43 klux"
					},
					{
						img: "../../static/2.png",
						name: '4#二氧化碳',
						value: "742 PPM"
					},
					{
						img: "../../static/3.png",
						name: '4#土壤温度',
						value: "29.3C"
					},
					{
						img: "../../static/4.png",
						name: '4#土壤湿度',
						value: "4%"
					},
				],


				//label是名称  value是code码  
				//countType计算类型 0是原数据 1是原数据-400 2是原数据/10 3是(原数据-400) / 10
				typeList: [],

				timer: null,
				updateTime: ''
			}
		},
		onLoad() {
			this.typeList=this.api.typeList
			uni.showLoading({
				title: '加载中...'
			});
			let that = this
			uni.getStorage({
				key: 'token',
				success: function(res) {
					that.getEquipmentInfo(uni.getStorageSync('userid'))
				},
				// fail:function(err){
				// 	uni.reLaunch({
				// 		url:'/pages/login/login'
				// 	})
				// }
			})
			this.timer = setInterval(function() {
				uni.getStorage({
					key: 'token',
					success: function(res) {
						that.getEquipmentInfo(uni.getStorageSync('userid'))
					},
					// fail:function(err){
					// 	uni.reLaunch({
					// 		url:'/pages/login/login'
					// 	})
					// }
				})
			}, 60000);
		},
		onUnload() {
			let that = this
			clearTimeout(that.timer)
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中...'
			});
			let that = this
			uni.getStorage({
				key: 'token',
				success: function(res) {
					that.getEquipmentInfo(uni.getStorageSync('userid'))
				},
				// fail:function(err){
				// 	uni.reLaunch({
				// 		url:'/pages/login/login'
				// 	})
				// }
			})
		},
		mounted() {
			uni.showLoading({
				title: '加载中...'
			});
			let that = this
			uni.getStorage({
				key: 'token',
				success: function(res) {
					that.getEquipmentInfo(uni.getStorageSync('userid'))
				},
				fail: function(err) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			})
		},
		methods: {
			// 根据用户id查询对应的设备数据
			getEquipmentInfo(userid) {
				let that = this
				// uni.showLoading({
				// 	title: '加载中...'
				// });
				this.$http({
					url: this.api.sel_eqbyid + userid,
					method: 'GET'
				}).then(res => {
					// console.log(res, '根据用户id查询对应的设备数据');
					if (res.code == 200) {

						this.waterAndFertilizerParamsList = res.data.map((item, index) => {
							return {
								...item,
								childList: []
							}
						})
						this.waterAndFertilizerParamsList.forEach((i, index) => {
							
							this.$http({
								url: (i.equipmentName == 1 ? this.api.getFs_rtdata : this.api.getcontrol_rtdata) + "?equipmentId=" + i.deviceId,
								method: 'post',
							}).then(res => {
								// console.log(res, '主页查看施肥机实时数据');

								if (res.code == 200) {
									uni.hideLoading({
										title: '完成'
									});
									uni.stopPullDownRefresh();
									i.childList = res.data;
									this.updateTime = res.data[0].updateTime
									console.log(this.waterAndFertilizerParamsList);
								} else {

								}
							}).catch(err => {
								console.log('接口失败');
							})
						})
						// equipmentName==1的
						let waterAndFertilizerParamsList_1 = this.waterAndFertilizerParamsList.filter(e=>e.equipmentName == 1).sort((a,b)=>a.equipmentStatu - b.equipmentStatu)
						
						// equipmentName==10的
						let waterAndFertilizerParamsList_10 = this.waterAndFertilizerParamsList.filter(e=>e.equipmentName == 10).sort((a,b)=>a.equipmentStatu - b.equipmentStatu);
						
						console.log(waterAndFertilizerParamsList_1,waterAndFertilizerParamsList_10,'00000000000');
						this.waterAndFertilizerParamsList = [...waterAndFertilizerParamsList_1,...waterAndFertilizerParamsList_10]
					}
				})
			},

			// 跳转到折线图
			toTarget_water_fertilizer_PH(id, data, name, equipmentNumber, targetValue, unit,equipmentName) {
				uni.navigateTo({
					url: '/pages/target_water_fertilizer_PH/target_water_fertilizer_PH?id=' + id + '&data=' +
						data + '&name=' + name + '&equipmentNumber=' + equipmentNumber + '&targetValue=' +
						targetValue + '&unit=' + unit + '&equipmentName=' + equipmentName
				})
			},



			// 数据单位
			getTypeList(val) {
				let typeList1 = []
				typeList1 = this.typeList.filter(item => {
					return item.value == val
				})
				return typeList1[0].unit
			},

			// 判断是否是平均或者目标,或者是1#
			getStatus(equipmentNumber, targetValue) {
				if (targetValue == 1) {
					return '目标'
				} else if (targetValue == 0 && equipmentNumber == 0) {
					return '1#平均'
				} else if (targetValue == 0 && equipmentNumber == 15) {
					return '2#平均'
				} else if (targetValue == 0 && equipmentNumber != 0 && equipmentNumber != 15) {
					return equipmentNumber + '#'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.timeEnvironment {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		position: relative;
		background-color: #F5F6FA;

		.navbar {
			width: 100%;
			height: 100%;

			>image {
				width: 750rpx;
				height: 500rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}


		.content {
			position: absolute;
			z-index: 2;
			box-sizing: border-box;
			padding: 0rpx 30rpx 30rpx;


			.title {
				display: flex;
				align-items: center;

				>image {
					width: 71rpx;
					height: 65rpx;
				}

				.right {
					margin-left: 14rpx;

					>view:nth-child(1) {
						font-size: 44rpx;
						font-family: AlibabaPuHuiTiB;
						font-weight: bold;
						color: #FFFFFF;
					}

					>view:nth-child(2) {
						font-size: 16rpx;
						font-family: Arial-BoldMT;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 20rpx;
						opacity: 0.5;
					}
				}
			}

			.subtitle {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				margin-top: 26rpx;
			}

			.waterAndFertilizerParams {
				width: 690rpx;
				height: auto;
				box-sizing: border-box;
				padding: 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
				border-radius: 20rpx;
				margin-top: 69rpx;

				.nav {
					height: 90rpx;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #DDDDDD;

					>image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 16rpx;
					}

					>text {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
				}

				.detail {
					width: 100%;
					height: calc(100% - 90rpx);
					box-sizing: border-box;
					padding: 10rpx 0rpx;
					display: flex;
					flex-wrap: wrap;
					// justify-content: space-evenly;

					.item {
						width: 50%;
						display: flex;
						align-items: center;
						box-sizing: border-box;
						padding-left: 20rpx;
						margin-top: 30rpx;

						>image {
							width: 80rpx;
							height: 80rpx;
							margin-right: 19rpx;
						}

						.info {
							>view:nth-child(1) {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #333333;
							}

							>view:nth-child(2) {
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #333333;
							}
						}
					}
				}

				.updateTime {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;
					font-size: 22rpx;
				}
			}

			.testBase {
				width: 690rpx;
				height: auto;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
				border-radius: 20rpx;
				margin-top: 30rpx;


				.nav {
					height: 90rpx;
					box-sizing: border-box;
					padding: 20rpx;
					display: flex;
					align-items: center;

					>image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 16rpx;
					}

					>text {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
				}

				.detail {
					width: 100%;
					height: calc(100% - 90rpx);
					display: flex;
					flex-wrap: wrap;
					padding-bottom: 46rpx;

					.item {
						width: 33%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						margin-top: 30rpx;


						>image {
							width: 60rpx;
							height: 60rpx;
						}

						.info {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-top: 10rpx;

							>view:nth-child(1) {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #333333;
							}

							>view:nth-child(2) {
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #333333;
							}
						}
					}
				}
			}

			.testBase1 {
				width: 690rpx;
				height: auto;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
				border-radius: 20rpx;
				margin-top: 30rpx;
				box-sizing: border-box;
				padding: 0 20rpx 1rpx;

				.nav {
					height: 90rpx;
					box-sizing: border-box;
					padding: 20rpx;
					display: flex;
					align-items: center;

					>image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 16rpx;
					}

					>text:nth-child(2) {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					>text:nth-child(3) {
						width: 90rpx;
						height: 44rpx;
						background: #EFFCF7;
						border: 2px solid rgba(58, 187, 144, 0.25);
						border-radius: 22rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #37BA8E;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 15rpx;
					}
				}

				.item {
					width: 650rpx;
					height: 90rpx;
					background: #F5F6FA;
					border: 2px solid #E7E9F1;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;
					box-sizing: border-box;
					padding: 0 30rpx 0 20rpx;

					>image {
						width: 40rpx;
						height: 39rpx;
						margin-right: 20rpx;
					}

					>text:nth-child(2) {
						flex: 1;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					>text:nth-child(3) {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
				}
			}
		}
	}
</style>