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="https://cdn.lihe-control.com/static/timeEnvironment_bg.png" mode=""></image>
		</view>

		<view class="content">
			<view class="title">
				<image src="https://cdn.lihe-control.com/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="https://cdn.lihe-control.com/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)">
						<image :src='`https://cdn.lihe-control.com/static/icon${ (index2 + 1) < 9 ? (index2 + 1) : 1 }.png`' mode=""></image>
						<view class="info">
							<view class="">{{ item2.environmentDataId }}</view>
							<view class="">{{ item2.environmentData }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="testBase" v-for="(item1,index1) in waterAndFertilizerParamsList" :key="index1">
				<view class="nav">
					<image src="https://cdn.lihe-control.com/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='`https://cdn.lihe-control.com/static/base${ (index2 + 1) < 16 ? (index2 + 1) : 1 }.png`' mode=""></image>
						<view class="info">
							<view class="">{{ item2.environmentDataId }}</view>
							<view class="">{{ item2.environmentData }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="testBase1" v-for="(item1,index1) in waterAndFertilizerParamsList" :key="index1">
				<view class="nav">
					<image src="https://cdn.lihe-control.com/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="`https://cdn.lihe-control.com/static/${ (index2 + 1) < 5 ? (index2 + 1) : 1  }.png`" mode=""></image>
					<text>{{ item2.environmentDataId }}</text>
					<text>{{ item2.environmentData }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

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

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

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

			}
		},
		onShow() {
			
		},
		mounted() {
			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: this.api.getFs_rtdata + "?equipmentId=" + i.deviceId,
								method: 'post',
							}).then(res => {
								console.log(res, '主页查看施肥机实时数据');
								if(res.code == 200){
									uni.hideLoading({
										title: '完成'
									});
									i.childList= res.data;
									console.log(this.waterAndFertilizerParamsList);
								}
							})
						})
						
					}
				})
			},
			
			// 跳转到折线图
			toTarget_water_fertilizer_PH(id,data){
				uni.navigateTo({
					url:'/pages/target_water_fertilizer_PH/target_water_fertilizer_PH?id=' + id + '&data=' + data
				})
			},
			
			// 根据数据formula返回的图标
			getIconNum(str){
				if(str == '8'){
					return '1'
				}else if(str == '9'){
					return '2'
				}
			}
		}
	}
</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;
							}
						}
					}
				}
			}

			.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>