jsy-app/components/custom-index-mp/custom-index-mp.vue

<template>
	<u-popup :show="open" mode="bottom" @close="close" closeable>
		<view class="lock">
			<view class="title">土壤墒情
				<view class="iconfont icon-shuaxin" @click="getList"></view>
			</view>
			<view class="list-title ">
				<view class="fixed">
					<view>层</view>
					<view>深度</view>
					<view>湿度</view>
					<view>温度</view>
				</view>
			</view>
		</view>
		<view class="list-box" style="padding-top: 108px;">
			<view class="card">
				<uni-collapse v-if="list.length">
					<uni-collapse-item title-border="none" :border="false" :open="true" v-for="item in list">
						<template v-slot:title>
							<view class="fixed" style="justify-content: space-between;">
								<view>位置：{{item.name}}</view>
								<view>{{item.time}}</view>
							</view>
						</template>
						<view class="list-content">
							<view class="fixed" v-for="data in item.data">
								<view>{{data.lv}}</view>
								<view>{{data.depth}}cm</view>
								<view>{{data.humidity}}%</view>
								<view>{{data.temperature}}℃</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<u-empty mode="data" style="height: 50vh;" v-else />
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		getMpDeviceList
	} from "@/api/controlMpInterface.js"
	export default {
		name: "Mp",
		components: {},
		props: {},
		data() {
			return {
				title: "土壤墒情",
				open: false,
				landId: null,
				mpId: null,
				list: [],
			}
		},
		created() {},
		mounted() {},
		methods: {
			/**
			 * 显示方法
			 * @param land  地块
			 * @param mpId  墒情id
			 */
			async show(land, mpId = null) {
				if (!land) {
					return;
				}
				this.landId = land.id;
				this.mpId = mpId;
				this.open = true;
				this.getList();
			},
			close() {
				this.open = false;
			},
			getList() {
				this.list = [];
				const query = {
					landId: this.landId,
					id: this.mpId
				}
				getMpDeviceList(query).then((res) => {
					let list = {};
					res.data.forEach(item => {
						if (!list[item.name]) {
							list[item.name] = {
								time: null,
								data: [],
							};
						}
						list[item.name].time = item.time;
						list[item.name].data.push(item);
					});
					if (Object.keys(list).length != 0) {
						for (var key in list) {
							this.list.push({
								name: key,
								time: list[key].time,
								data: list[key].data
							})
						}
					}
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	::v-deep.u-popup__content__close--top-right {
		z-index: 11;
	}

	.u-popup__content {
		background: transparent;


		.lock {
			position: fixed;
			width: 100%;
			height: 108px;
			z-index: 10;
			background-color: #f3f3f3;


			.title {
				font-size: 34rpx;
				position: relative;
				text-align: center;
				padding: 15px 0;

				.icon-shuaxin {
					position: absolute;
					top: 15px;
					right: 40px;
				}
			}
		}

		.list-box {
			border-radius: 10px 10px 0 0;
			width: 100vw;
			min-height: 50vh;
			max-height: calc(100vh - 100px);
			background-color: #f3f3f3;
			padding: 10px;
			overflow-y: auto;
		}



		.card {
			background-color: transparent;

			.uni-collapse {
				background-color: transparent;
				border-radius: 10px;
			}

			::v-deep.uni-collapse-item__title {
				background-color: #39ac4f;
				color: #fff;
				padding: 10px;
				border-radius: 10px;

				.uni-collapse-item__title-arrow {
					width: 40px;

					.uni-icons {
						color: #fff !important;
					}
				}

			}

			::v-deep.uni-collapse-item__wrap {
				background: transparent !important;
			}
		}

		.list-title,
		.list-content {
			background: #fff;
			border-radius: 10px;
			margin-bottom: 10px;
			box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);

			.fixed {
				view {
					font-size: 30rpx;
					padding: 10px 0;
					text-align: center;
					flex: 1;
				}
			}

		}

		.list-title {
			margin: 0 10px;
		}

		.list-content {
			margin-bottom: 0;

			.fixed {
				view {
					font-size: 28rpx;
					border-bottom: 1px solid #f3f3f3;
				}
			}

		}
	}
</style>