uni-zhks-app/pages/p-i-power/p-i-power.vue

<template>
	<view>
		<view class="top">
			<view class="time">
				<text>2019-10-22 星期二 11:01:32</text>
			</view>
		</view>
		<view class="content">
			<view class="content_title">
				实时参数
			</view>
			<view class="content_inner">
				<view class="inner_box" v-for="item in powerList" :key="item.dsspara_id" :class="open == item.dsspara_id? '':'item_box_close'"  @click="change(item.dsspara_id)">
					<view class="item">
						<view class="left">
							<view class="line"></view>
							<view class="name">{{item.dsspara_name}}</view>
						</view>
						<view class="icon">
							<uni-icons color="#999" :type="open == item.dsspara_id? 'arrowdown':'arrowright'"></uni-icons>
						</view>
					</view>
					<view class="item_content">
						<view class="item_content_list">
							<view v-for="item in mdparaList" :key="item.mdpara_id" class="item_content_list_item" :class="item.mdpara_state == 0?'item_content_list_item_close':''" >
								<view class="item_content_list_item_title">
									<view class="item_content_list_item_title_left">
										<view class="item_content_list_item_title_left_icon"></view>
										<view class="item_content_list_item_title_left_name">{{item.mdpara_name}}</view>
									</view>
									<view class="item_content_list_item_title_left_flag">
										<text>{{item.mdpara_state==0?'关':'开'}}</text>
									</view>
								</view>
								<view class="item_content_list_item_content">
									<view class="inner_list">
										<view class="inner_list_item"  v-for="list in item.ycpara">{{list.name}}：{{list.val}} {{list.unit}}</view>
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				open:0,
				
				// 列表
				powerList:[],
				// 详情
				mdparaList:[]
			};
		},
		onLoad() {
			this.get_powerList()
		},
		methods:{
			change(dsspara_id){
				this.open = dsspara_id
				// this.mdparaList = []
				this.get_mdparaList(dsspara_id)
			},
			// 获取列表
			async get_powerList(){
				const res = await this.$myRequest({
					url:"/electric/dsspara"
				})
				console.log(res.data.data)
				this.powerList = res.data.data
			},
			
			// 获取详情
			async get_mdparaList(dsspara_id){
				const res = await this.$myRequest({
					url:"/electric/mdpara",
					data:{
						dsspara_id:dsspara_id
					}
				})
				console.log(res.data.data)
				this.mdparaList = res.data.data
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #009FE8;
		box-sizing: border-box;
		padding: 0 15rpx;

	}
	.top{
		position: relative;
		top: 0;
		left: 0;
		
		height: 314rpx;
		background-image: url(./icon/top.png);
		background-size: cover;
		background-repeat: no-repeat;
		
		.time{
			position: absolute;
			right: 30rpx;
			bottom: 10rpx;
			text{
				height: 44rpx;
				font-size: 31rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #2C3E50;
				line-height: 44rpx;
			}

		}
	}
	.content{
		margin-top: 8rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 29rpx 0px rgba(59, 74, 116, 0.14);
		border-radius: 20rpx;
		padding-bottom: 20rpx;

		.content_title{
			line-height: 96rpx;
			text-align: center;
			
			font-size: 31rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #232627;
			border-bottom: 1rpx solid #f3f3f3;
		}
		.content_inner{
			.inner_box{
				.item{
					height: 88rpx;
					box-sizing: border-box;
					padding-left: 25rpx;
					padding-right: 25rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					border-bottom: 1px solid #f3f3f3;
					.left{
						display: flex;
						align-items: center;
						.line{
							
							width: 7rpx;
							height: 63rpx;
							background: #009FE8;
							border-radius: 3rpx;

						}
						.name{
							margin-left: 20rpx;
							font-size: 33rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #000000;

						}
					}
					.icon{
						
					}
				}
				.item_content{
					box-sizing: border-box;
					padding: 22rpx;
					.item_content_list{
						.item_content_list_item{
							margin-bottom: 15rpx;
							width: 670rpx;
							border-radius: 10rpx;
							border: 4rpx solid #009FE8;
							
							box-sizing: border-box;
							padding: 28rpx 18rpx 0;
							
							.item_content_list_item_title{
								height: 76rpx;
								background: #E74C3C;
								border-radius: 37rpx;
								
								display: flex;
								justify-content: space-between;
								align-items: center;
								
								box-sizing: border-box;
								padding-left: 30rpx;
								padding-right: 30rpx;
								
								.item_content_list_item_title_left{
									display: flex;
									.item_content_list_item_title_left_icon{
										width: 40rpx;
										height: 40rpx;
										
										background-image: url(./icon/flag.png);
										background-size: cover;
										background-repeat: no-repeat;
									}
									.item_content_list_item_title_left_name{
										margin-left: 20rpx;
										
										font-size: 27rpx;
										font-family: PingFangSC-Medium, PingFang SC;
										font-weight: 500;
										color: #FFFFFF;

									}
								}
								.item_content_list_item_title_left_flag{
									width: 46rpx;
									height: 46rpx;
									background: #FFFFFF;
									border-radius: 5rpx;
									text-align: center;
									text{
										font-size: 25rpx;
										font-family: PingFangSC-Medium, PingFang SC;
										font-weight: 500;
										color: #E74C3C;
										

									}

								}
							}
							.item_content_list_item_content{
								box-sizing: border-box;
								padding: 20rpx 10rpx;
								.inner_list{
									display: flex;
									flex-wrap: wrap;
									.inner_list_item{
										margin-bottom: 15rpx;
										width: 50%;
										height: 39rpx;
										font-size: 27rpx;
										font-family: PingFangSC-Medium, PingFang SC;
										font-weight: 500;
										color: #2C3E50;
										line-height: 39rpx;

									}
								}
							}
												
						}
						.item_content_list_item_close{
							.item_content_list_item_title{
								background: #27AE60;
							}
						}
						
					
					}
				}
				
			}
			.item_box_close{
				.item_content{
					display: none;
				}
			}
		}
	}
</style>