uni-zhks-app/components/p-i-s-content-2/p-i-s-content-2.vue

<template>
	<view>
		<view class="p-i-s-content-2">
			<view class="top">
				<view class="list_item">
					<view class="item" v-for="(item,index) in sluice" :key="index" :class="item.type"  @click="go_status_detail(item.type,item.name)">
						<view class="name">{{item.name}}</view>
						<view class="num">{{item.count}}个</view>
					</view>
				</view>
			</view>
			<view class="inner">
				<view class="list_item">
					<view class="item" v-for="(item,index) in sluiceList" :key="index" @click="go_name_detail(item.typeCodeDesc)">
						<view class="item_title">
							<view class="item_icon">
								<image src="./icon/dianliang.png" mode=""></image>
							</view>
							<view class="item_name">{{item.typeCodeDesc}}</view>
						</view>
						<view class="item_content">
							<view class="item_content_list">
								<view class="content_item" v-for="(inner,index) in item.normalCount" :key="index">
									<view class="name">{{inner.name}}</view>
									<view class="num" :class="inner.type">{{inner.count}}个</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:[
			"sluice",
			"sluiceList"
		],
		data() {
			return {
				
			};
		},
		methods:{
			go_status_detail(status,title){
				// console.log(status)
				uni.navigateTo({
					url:"../../pages/p-i-safety-monitoring/p-i-s-sluice-status-detail/p-i-s-sluice-status-detail?status=" + status + "&title=" + title
				})
			},
			go_name_detail(name){
				uni.navigateTo({
					url:"../../pages/p-i-safety-monitoring/p-i-s-sluice-name-detail/p-i-s-sluice-name-detail?name=" + name
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.p-i-s-content-2{
		.top{
			height: 202rpx;
			background: #FFFFFF;
			
			border-bottom: 1rpx solid #f3f3f3;
			.list_item{
				height: 202rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.item{
					width: 106rpx;
					height: 106rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 53rpx;
					.name{
						margin-top: 21rpx;
						font-size: 25rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						
						line-height: 34rpx;
					}
					.num{
						margin-top: 4rpx;
						font-size: 21rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						
						line-height: 29rpx;
					}
				}
				.item_1{
					background: #27AE60;
				}
				.item_2{
					background: #E74C3C;
				}
				.item_3{
					background: #2C3E50;
				}
				.item_4{
					background: #2873FF;
				}
				
				// 开关量 统计
				.normal{
					background: #27AE60;
				}
				.alarm{
					background: #E74C3C;
				}
				.open{
					background: #2C3E50;
				}
				.close{
					background: #2873FF;
				}
			}
		}
		.inner{
			.list_item{
				.item{
					border-top: 1rpx solid #f3f3f3;
					border-bottom: 1rpx solid #f3f3f3;
					box-sizing: border-box;
					padding: 0 30rpx;
					padding-top: 28rpx;
					padding-bottom: 26rpx;
					
					.item_title{
						display: flex;
						box-sizing: border-box;
						padding-bottom: 18rpx;
						border-bottom: 1rpx solid #f3f3f3;
						.item_icon{
							margin-left: 6rpx;
							image{
								width: 83rpx;
								height: 83rpx;
							}
						}
						.item_name{
							margin-left: 23rpx;
							font-size: 29rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #002257;
							line-height: 83rpx;

						}
					}
					.item_content{
						.item_content_list{
							display: flex;
							justify-content: space-between;
							.content_item{
								width: 158rpx;
								text-align: center;
								.name{
									margin-top: 22rpx;
									font-size: 25rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #97A3B4;
									line-height: 33rpx;

								}
								.num{
									margin-top: 6rpx;
									font-size: 28rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									line-height: 33rpx;

								}
								.normal{
									color: #2ECC71;
								}
								.alarm{
									color: #E74C3C;
								}
								.sign{
									color: #2C3E50;
								}
								.fault{
									color: #2F54EB;
								}
							}
						}
					}
				}
			}
		}
	}
</style>