qsy-zdh/pages/data/supply-water/pool-system/pool-system.vue

<template>
	<view class="page-body">
		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
		<view class="scroll-wrap">
			<view class="basic-info-wrap">
				<view class="info-wrap">
					<view class="status-list">
						<view class="item-wrap" v-for="(item, index) in sbList" :key="item.id">
							<view class="name">{{ item.name }}</view>
							<status-tip class="status" v-for="(item1, index1) in item.status" :key="index1" :name="''" :status="item1.status" :tip="item1.tip"></status-tip>
						</view>
					</view>
				</view>
				<view class="img-wrap">
					<image src="@/static/pool.png" />
				</view>
				<view class="radius-wrap"></view>
			</view>
			<view class="detail-info-wrap">
				<page-card v-for="(item, index) in 2" style="margin-bottom: 30rpx;" :notShow="true" :name="`${index + 1}号水池`">
					<template v-slot:content>
						<simple-table :tableHead="tableHead" :list="paramsList"></simple-table>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeData: {}, // 当前选中的数据
				sbList: [{ // 水泵列表
					id: 0,
					name: '来自950水泵房',
					status: [{
						tip: '1号闸阀',
						status: 1
					}, {
						tip: '3号闸阀',
						status: 1
					}]
				}, {
					id: 1,
					name: '来自五分区水泵房',
					status: [{
						tip: '2号闸阀',
						status: 1
					}, {
						tip: '4号闸阀',
						status: 1
					}]
				}],
				pageData: {}, // 页头信息
				tableHead: ['名称', '参数'], // 表头信息
				paramsList: [{ // 液位列表
					name: '液位(m)',
					params: ['2.98'],
				}, {
					name: '超高液位设定值(m)',
					params: ['3'],
				}, {
					name: '高液位设定值(m)',
					params: ['2.8'],
				}, {
					name: '低液位设定值(m)',
					params: ['1'],
				}]
			}
		},
		onLoad(option) {
			this.pageData = JSON.parse(option.data)
			this.activeData = this.sbList[0]
		},
		methods: {
			goBack() { // 返回上一頁面
				uni.navigateBack()
			},
			kindChange(data) { // 切换水泵状态
				this.activeData = data
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-body {
		.scroll-wrap {
			height: calc(100vh - 85rpx);
			overflow: scroll;

			.basic-info-wrap {
				position: relative;
				height: 531rpx;
				padding: 0 49rpx;
				background: url(../../../../static/page_bg.png);
				background-size: 150%;

				.info-wrap {
					display: flex;
					flex-wrap: wrap;
					border-bottom: 1rpx dashed #fff;
				}

				.img-wrap {
					padding-top: 54rpx;
					text-align: center;

					image {
						width: 324rpx;
						height: 128rpx;
					}

					view {
						margin-top: 26rpx;
						color: #fff;
						font-size: 26rpx;
					}
				}

				.status-list {
					width: 100%;
					padding: 60rpx 0;
					
					.item-wrap {
						display: flex;
						width: 100%;
						font-size: 26rpx;
						color: #FFFFFF;
						padding: 23rpx 32rpx;
						
						.name {
							width: 40%;
						}
						
						.status {
							width: 30%;
						}
					}
					
					.active {
						background: #3495FA;
						box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0,8,35,0.31);
						border-radius: 14rpx;
					}
					
					/deep/ .tip-wrap {
						margin-left: 12rpx;
					}
				}
				
				.radius-wrap {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100vw;
					height: 30rpx;
					background-color: #fff;
					border-radius: 35rpx 35rpx 0 0;
				}
			}

			.detail-info-wrap {
				padding: 40rpx 35rpx;

				/deep/ .card-wrap:last-child {
					margin-bottom: 0 !important;
				}
			}
		}
	}
</style>