uni-zhks-app/pages/p-i-safety-monitoring/p-i-s-sluice-name-detail/p-i-s-sluice-name-detail.vue

<template>
	<view>
		<view class="top">
			<view class="list_item">
				<view class="item" v-for="(item,index) in items" :key="index" :class="item.type" @click="click_item(item.type)">
					<view class="name">{{item.name}}</view>
					<view class="num">{{item.count}}个</view>
				</view>
			</view>
		</view>
		<view class="inner_box">
			<view class="inner_title">
				<view class="name name_1">序号</view>
				<view class="name name_2">安装地点</view>
				<view class="name name_3">数值/状态</view>
			</view>
			<view class="list_item">
				<view class="item" :class="item.status" v-for="item in List" :key="item.id">
					<view class="text text_1">{{item.id}}</view>
					<view class="text text_2">{{item.position}}</view>
					<view class="text text_3">{{item.value}}{{item.unit}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				status:'',
				items:[],
				List:[]
			};
		},
		onLoad(option) {
			console.log(option)
			this.name = option.name
			this.changeTitle(option.name)
			this.get_item(option.name)
			this.get_list(this.name)
		},
		methods:{
			changeTitle(name){
				uni.setNavigationBarTitle({
					title: name
				});
			},
			click_item(type){
				console.log(type)
				this.status = type
				this.get_list(this.name,this.status)
			},
			async get_item(name){
				const res = await this.$myRequest({
					method:"POST",
					url:"/safety/total",
					header:{
						"Content-Type":"application/json"
					},
					data:{
						name:name
					}
				})
				console.log(res.data.data)
				this.items = res.data.data
			},
			async get_list(name,status){
				const res = await this.$myRequest({
					method:"POST",
					url:"/safety/info",
					header:{
						"Content-Type":"application/json"
					},
					data:{
						name:name,
						status:status
					}
				})
				console.log(res.data.data)
				this.List = res.data.data
			},
			
		}
	}
</script>

<style lang="scss">
	.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;
			}
			.sign{
				background: #2C3E50;
			}
			.fault{
				background: #2873FF;
			}
			.open{
				background: #2C3E50;
			}
			.close{
				background: #2873FF;
			}
		}
	}
	
	.inner_box{
		.inner_title{
			
			padding: 0 24rpx;
			
			height: 94rpx;
			background: #F3F6FA;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			.name{
				font-size: 27rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #232627;
				text-align: center;
			}
			.name_1{
				width: 125rpx;
			}
			.name_2{
				margin: 0 15rpx;
				width: 420rpx;
			}
			.name_3{
				width: 125rpx;
			}
		}
		.list_item{
			.item{
				padding: 0 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				border-bottom: 1px solid #f3f3f3;
				.text{
					font-size: 25rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 94rpx;
					text-align: center;
				}
				.text_1{
					width: 125rpx;
				}
				.text_2{
					margin: 0 15rpx;
					width: 420rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.text_3{
					width: 125rpx;
				}
			}
			.normal{
				color: #27AE60;
			}
			.alarm{
				color: #E74C3C;
			}
			.sign{
				color: #2C3E50;
			}
			.fault{
				color: #2873FF;
			}
		}
	}
</style>