qsy-zdh/pages/data/transport/belt/emss.vue

<template>
	<view class="page-body">
		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
		<view class="scroll-wrap">
			<view class="basic-info-wrap">
				<view class="info-wrap">
					<view @click="activeChange(item,index)" v-for="(item,index) in list" :class="activeData.name === item.name ? 'active item' : 'item'"
						:key="index">
						<status-tip class="status-wrap" :name="item.name" :status="item.status"
							:tip="item.status ? '运行' : '停止'"></status-tip>
					</view>
				</view>
				<view class="img-wrap">
					<image src="@/static/pd.png"/>
				</view>
				<view class="radius-wrap"></view>
			</view>
			<view class="detail-info-wrap">
				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'皮带参数'">
					<template v-slot:content>
						<simple-table :tableHead="tableHead" :list="paramsList[activeIndex]"></simple-table>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeData: {},
				list: [{
					name: 'PD2M2#皮带',
					status: 1
				},{
					name: 'PD2M3#皮带',
					status: 1
				}],
				tableHead: ['名称', '参数/状态'],
				activeIndex: 0,
				paramsList: [{
					name: '速度',
					params: ['23m/s']
				},{
					name: '远近控状态',
					params: ['正常']
				},{
					name: '联锁模式',
					params: ['暂无']
				},{
					name: '区域闯入',
					params: ['暂无']
				},{
					name: '急停',
					params: ['暂无']
				},{
					name: '备要信号',
					params: [{
						status: 1
					}]
				},{
					name: '烟雾',
					params: [{
						status: 1
					}]
				},{
					name: '堆煤',
					params: [{
						status: 1
					}]
				},{
					name: '纵断',
					params: [{
						status: 1
					}]
				},{
					name: '跑偏',
					params: [{
						status: 1
					}]
				}]
			}
		},
		onLoad(option) {
			this.pageData = JSON.parse(option.data)
			this.getData()
		},
		methods: {
			goBack() { // 返回上一頁面
				uni.navigateBack()
			},
			activeChange(item,index) { // 切换状态
				this.activeData = item
				this.activeIndex = index
			},
			async getData() {
				let res = await this.$http({
					url: `/qsy/dcs/transform/emss`,
					method: 'POST'
				})
				this.list = res.data.data.list
				this.activeData = this.list[0]
				const mKeys = Object.keys(res.data.data).filter(key => key.startsWith('m'));
				this.paramsList = mKeys.map(key => {
					return res.data.data[key]
				});
			}
		}
	}
</script>

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

			.basic-info-wrap {
				position: relative;
				height: auto;
				padding: 50rpx 49rpx 0;
				background: url(../../../../static/page_bg.png);
				background-size: 100%;
				
				.info-wrap {
					display: flex;
					flex-wrap: wrap;
					border-bottom: 1rpx dashed #fff;
					padding-bottom: 20rpx;
					
					.item {
						display: flex;
						justify-content: space-between;
						width: calc(50% - 30rpx);
						padding: 20rpx;
						color: #fff;
						font-size: 26rpx;
						
						.status-wrap {
							width: 100%;
							/deep/ .tip-wrap {
								justify-content: space-between;
							}
						}
						
						.params {
							color: #FFFF00;
						}
					}
					
					.item:nth-child(2n-1) {
						margin-right: 60rpx
					}
					
					.active {
						background: #3495FA;
						box-shadow: 0px 3px 7px 0px rgba(0, 8, 35, 0.31);
						border-radius: 14px;
					}
				}
				
				.img-wrap {
					padding: 70rpx 0;
					text-align: center;
					
					image {
						width: 443rpx;
						height: 48rpx;
					}
				}
				
				.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;

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