uni-zhihuikuangshan/components/p-safety-monitoring-content-1/p-safety-monitoring-content-1.vue

<template>
	<view>
		<view class="p-i-s-content-1">
			<view class="top">
				<view class="list_item">
					<view class="item" v-for="(item,index) in simulation" :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 simulationList" :key="index"
						@click="go_name_detail(item.typeCodeDesc)">
						<view class="item_title">
							<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" v-if="index == 0" :class="index==0?'normal':''">{{inner.count}}个
									</view>
									<view class="num" v-if="index == 1" :class="index==1?'alarm':''">{{inner.count}}个
									</view>
									<view class="num" v-if="index == 2" :class="index==2?'sign':''">{{inner.count}}个
									</view>
									<view class="num" v-if="index == 3" :class="index==3?'fault':''">{{inner.count}}个
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: [
			"mine",
			"simulation",
			"simulationList"
		],
		data() {
			return {
				imglist: []
			};
		},
		computed: {
			imgUrl: function(index) {
				console.log(index)
			}
		},
		methods: {
			go_status_detail(status, title) {
				uni.navigateTo({
					url: "../../production/safety_monitoring/safety_monitoring_status_detail/safety_monitoring_status_detail?status=" +
						status + "&title=" + title + "&type=simulation" + "&mine=" + this.mine
				})
			},
			go_name_detail(name) {
				uni.navigateTo({
					url: "../../production/safety_monitoring/safety_monitoring_name_detail/safety_monitoring_name_detail?name=" +
						name + "&mine=" + this.mine
				})
			}
		}
	}
</script>

<style lang="scss">
	.p-i-s-content-1 {
		.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: #2C3E50;
				}

				.alarm {
					background: #E74C3C;
				}

				.sign {
					background: #27AE60;
				}

				.fault {
					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: #2C3E50;
								}

								.alarm {
									color: #E74C3C;
								}

								.sign {
									color: #2ECC71;
								}

								.fault {
									color: #2F54EB;
								}
							}
						}
					}
				}
			}


		}
	}
</style>