qsy-zdh/pages/data/supply-water/detail/detail.vue

<template>
	<view class="page-body">
		<page-header :name="'排水系统'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
		<view class="scroll-wrap">
			<view class="basic-info-wrap">
				<view class="info-wrap">
					<view class="system-wrap">
						<view class="title">
							<view class="left">
								<image src="@/static/jg-icon.png"/>
								<view class="center">多级排水系统</view>
							</view>
							<view class="right">
								<image src="@/static/right-arrow.png"/>
							</view>
						</view>
						<view class="params-wrap">
							<view class="item" style="width: 40%;">
								<view>1#水池液位</view>
								<view>3m</view>
							</view>
							<view class="item" style="width: calc(60% - 52rpx);">
								<view>通讯状态</view>
								<view>通讯正常</view>
							</view>
							<view class="item" style="width: 40%;">
								<view>2#水池液位</view>
								<view>2.74m</view>
							</view>
							<view class="item" style="width: calc(60% - 52rpx);">
								<view>通讯地址</view>
								<view>172.16.59.241</view>
							</view>
						</view>
					</view>
					<view class="system-wrap">
						<view class="title">
							<view class="left">
								<image src="@/static/jg-icon.png"/>
								<view class="center">多级供水系统</view>
							</view>
							<view class="right">
								<image src="@/static/right-arrow.png"/>
							</view>
						</view>
						<view class="params-wrap">
							<view class="item" style="width: calc(60% - 52rpx);">
								<view>补清水量</view>
								<view>29759m³</view>
							</view>
							<view class="item" style="width: 40%;margin-left: 42rpx;">
								<view>通讯状态</view>
								<view>通讯正常</view>
							</view>
							<view class="item" style="width: 100%;justify-content: start;">
								<view>复用水累计流量</view>
								<view>10358744.8m³</view>
							</view>
						</view>
					</view>
				</view>
				<view class="radius-wrap"></view>
			</view>
			<view class="detail-info-wrap">
				<page-card v-for="(item, index) in list" style="margin-bottom: 30rpx;" :name="item.name" :data="item" @goDetail="goDetail">
					<template v-slot:content>
						<view class="item-wrap">
							<view class="position">
								<view>太仓水位</view>
								<view>{{ item.position }}</view>
							</view>
							<view class="status-wrap">
								<status-tip class="item" v-for="(item1,index1) in item.children" :key="index1" :name="item1.name" :status="item1.status" :tip="item1.status ? '运行' : '停止'"></status-tip>
							</view>
						</view>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemList: [{ // 系统列表
					name: '多级排水系统',
					children: [{
						name: '1#水池液位',
						data: '3m'
					},{
						name: '通讯状态',
						data: '通讯正常'
					},{
						name: '2#水池液位',
						data: '2.74m'
					},{
						name: '通讯地址',
						data: '172.16.59.241'
					}]
				},{
					name: '多级供水系统',
					children: [{
						name: '补清水量',
						data: '29759m³'
					},{
						name: '通讯状态',
						data: '通讯正常'
					},{
						name: '复用水累计流量',
						data: '10358744.8m³'
					}]
				}],
				list: [{ // 泵房列表
					name: '清水泵房',
					position: '2.14m',
					children: [{
						name: '1#清水泵',
						status: 0
					},{
						name: '4#清水泵',
						status: 1
					},{
						name: '2#清水泵',
						status: 0
					},{
						name: '5#清水泵',
						status: 0
					},{
						name: '3#清水泵',
						status: 0
					},{
						name: '6#清水泵',
						status: 0
					}]
				},{
					name: '+1000水泵房',
					position: '2.14m',
					children: [{
						name: '1#清水泵',
						status: 0
					},{
						name: '3#清水泵',
						status: 1
					},{
						name: '2#清水泵',
						status: 0
					},{
						name: '4#清水泵',
						status: 0
					}]
				},{
					name: '13207水泵房',
					position: '2.14m',
					children: [{
						name: '1#清水泵',
						status: 0
					},{
						name: '3#清水泵',
						status: 1
					},{
						name: '2#清水泵',
						status: 0
					},{
						name: '4#清水泵',
						status: 0
					}]
				},{
					name: '880水泵房',
					position: '2.14m',
					children: [{
						name: '1#清水泵',
						status: 0
					},{
						name: '3#清水泵',
						status: 1
					},{
						name: '2#清水泵',
						status: 0
					}]
				},{
					name: '929水泵房',
					position: '2.14m',
					children: [{
						name: '1#清水泵',
						status: 0
					},{
						name: '3#清水泵',
						status: 1
					},{
						name: '2#清水泵',
						status: 0
					}]
				},{
					name: '950水泵房',
					position: '2.14m',
					children: [{
						name: '1#清水泵',
						status: 0
					},{
						name: '3#清水泵',
						status: 1
					},{
						name: '2#清水泵',
						status: 0
					}]
				}]
			}
		},
		onLoad() {},
		methods: {
			goBack() { // 返回上一頁面
				uni.navigateBack()
			},
			goDetail(data) { // 卡片右上角跳转详情
				uni.navigateTo({
					url: `/pages/data/supply-water/supply-room/supply-room?data=${JSON.stringify(data)}`,
				})
			}
		}
	}
</script>

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

			.basic-info-wrap {
				position: relative;
				height: 610rpx;
				padding: 50rpx 49rpx 0;
				background: url(../../../../static/page_bg.png);
				background-size: 100%;
				
				.info-wrap {
					.system-wrap {
						width: calc(100vw - 98rpx);
						height: 235rpx;
						padding: 42rpx 35rpx 38rpx 52rpx;
						background: url(../../../../static/chart-bg.png);
						background-size: calc(100vw - 98rpx) 235rpx;
						margin-bottom: 27rpx;
						
						.title {
							display: flex;
							justify-content: space-between;
							
							.left {
								display: flex;
								align-items: center;
								image {
									width: 37rpx;
									height: 36rpx;
									margin-right: 21rpx;
									vertical-align: bottom;
								}
								.center {
									color: #fff;
									font-size: 34rpx;
									font-weight: 700;
								}
							}
							
							.right {
								image {
									width: 16rpx;
									height: 29rpx;
								}
							}
						}
						
						.params-wrap {
							display: flex;
							flex-wrap: wrap;
							.item {
								margin-top: 26rpx;
								display: flex;
								justify-content: space-between;
								width: calc(50% - 26rpx);
								font-size: 26rpx;
								color: #fff;
								
								view:last-child {
									color: #FFFF00;
								}
							}
							
							.item:nth-child(2n) {
								margin-left: 52rpx;
							}
						}
					}
				}
				
				.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;
				
				.item-wrap {
					padding: 47rpx 62rpx 35rpx 55rpx;
					color: #8D8D8D;
					
					.position {
						display: flex;
						
						view:first-child {
							margin-right: 20rpx;
						}
					}
					
					.status-wrap {
						display: flex;
						flex-wrap: wrap;
						
						.item {
							width: calc(50% - 30rpx);
							margin-top: 48rpx;
							
							/deep/ .status-wrap {
								color: #000000;
								view:first-child {
									margin: 0 7rpx 0 14rpx;
								}
							}
						}
						
						.item:nth-child(2n) {
							margin-left: 60rpx;
						}
					}
				}

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