qsy-zdh/pages/data/ts-system/flj.vue

<template>
	<view class="page-body">
		<page-header :name="'副立井提升'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
		<view class="scroll-wrap">
			<view class="basic-info-wrap">
				<view class="info-wrap">
					<view v-for="(item,index) in list" class="data-item-wrap">
						<view class="title">{{ item.name }}</view>
						<view class="data">{{ item.data }}</view>
					</view>
				</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>
						<view class="detail-wrap">
							<template v-for="(item, index) in statusList">
								<view class="item" v-if="!item.data">
									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
								</view>
								<view class="item" v-else>
									<view>{{ item.name }}</view>
									<view class="params">{{ item.data }}</view>
								</view>
							</template>
						</view>
					</template>
				</page-card>
				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'大罐'">
					<template v-slot:content>
						<view class="detail-wrap">
							<template v-for="(item, index) in statusList1">
								<view class="item" v-if="!item.data">
									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
								</view>
								<view class="item" v-else>
									<view>{{ item.name }}</view>
									<view class="params">{{ item.data }}</view>
								</view>
							</template>
						</view>
					</template>
				</page-card>
				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'提升类型'">
					<template v-slot:content>
						<view class="detail-wrap">
							<template v-for="(item, index) in statusList2">
								<view class="item" v-if="!item.data">
									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
								</view>
								<view class="item" v-else>
									<view>{{ item.name }}</view>
									<view class="params">{{ item.data }}</view>
								</view>
							</template>
						</view>
					</template>
				</page-card>
				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'运行状态'">
					<template v-slot:content>
						<view class="detail-wrap">
							<template v-for="(item, index) in statusList3">
								<view class="item" v-if="!item.data">
									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
								</view>
								<view class="item" v-else>
									<view>{{ item.name }}</view>
									<view class="params">{{ item.data }}</view>
								</view>
							</template>
						</view>
					</template>
				</page-card>
				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'去向'">
					<template v-slot:content>
						<view class="detail-wrap">
							<template v-for="(item, index) in statusList4">
								<view class="item" v-if="!item.data">
									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
								</view>
								<view class="item" v-else>
									<view>{{ item.name }}</view>
									<view class="params">{{ item.data }}</view>
								</view>
							</template>
						</view>
					</template>
				</page-card>
				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'开车方式'">
					<template v-slot:content>
						<view class="detail-wrap">
							<template v-for="(item, index) in statusList5">
								<view class="item" v-if="!item.data">
									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
								</view>
								<view class="item" v-else>
									<view>{{ item.name }}</view>
									<view class="params">{{ item.data }}</view>
								</view>
							</template>
						</view>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '磁场电流',
					data: '22.27A'
				}, {
					name: '运行速度',
					data: '32/s'
				}, {
					name: '液压站压力',
					data: '0.7MPa'
				}, {
					name: '小罐深度',
					data: '15M'
				}, {
					name: '电枢电流',
					data: '22.98A'
				}, {
					name: '大罐深度',
					data: '45M'
				}, {
					name: '提物钩数',
					data: '9'
				}, {
					name: '提人钩数',
					data: '5'
				}],
				statusList: [{
					name: '下碰撞开关',
					status: 1,
				}, {
					name: '下过卷开关',
					status: 1,
				}, {
					name: '下换层开关',
					status: 1,
				}, {
					name: '下停车开关',
					status: 1,
				}, {
					name: '下2M/s开关',
					status: 1,
				}, {
					name: '下减速开关',
					status: 1,
				}, {
					name: '下同步开关',
					status: 1,
				}],
				statusList1: [{
					name: '上碰撞开关',
					status: 1,
				}, {
					name: '上过卷开关',
					status: 1,
				}, {
					name: '上换层开关',
					status: 1,
				}, {
					name: '上停车开关',
					status: 1,
				}, {
					name: '上2M/s开关',
					status: 1,
				}, {
					name: '上减速开关',
					status: 1,
				}, {
					name: '上同步开关',
					status: 1,
				}],
				statusList2: [{
					name: '信号提人',
					status: 1,
				}, {
					name: '信号提物',
					status: 1,
				}, {
					name: '信号特运',
					status: 1,
				}, {
					name: '信号检修',
					status: 1,
				}, {
					name: '信号换层',
					status: 1,
				}],
				statusList3: [{
					name: '信号慢上',
					status: 1,
				}, {
					name: '信号慢下',
					status: 1,
				}, {
					name: '信号停车',
					status: 1,
				}, {
					name: '信号急停',
					status: 1,
				}],
				statusList4: [{
					name: '去+井口',
					status: 1,
				}, {
					name: '去+1075',
					status: 1,
				}, {
					name: '去+井底',
					status: 1,
				}],
				statusList5: [{
					name: '手动',
					status: 1,
				}, {
					name: '检修',
					status: 1,
				}, {
					name: '半自动',
					status: 1,
				}, {
					name: '下大件',
					status: 1,
				}, {
					name: '过卷复位',
					status: 1,
				}],
			}
		},
		onLoad() {},
		methods: {
			goBack() { // 返回上一頁面
				uni.navigateBack()
			}
		}
	}
</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 80rpx;
				background: url(../../../static/page_bg.png);
				background-size: 110%;

				.info-wrap {
					display: flex;
					flex-wrap: wrap;

					.data-item-wrap {
						width: 33.33%;
						padding: 9rpx 0;
						min-height: 81rpx;
						text-align: center;
						margin-top: 48rpx;
						border-right: 1px solid #FFFFFF;

						.title {
							font-size: 22rpx;
							color: #FFFFFF;
							margin-bottom: 14rpx;
						}

						.data {
							font-weight: 700;
							font-size: 32rpx;
							color: #FFF600;
						}
					}

					.data-item-wrap:nth-child(-n+3) {
						margin-top: 0;
					}

					.data-item-wrap:nth-child(3n) {
						border: none;
					}
				}

				.img-wrap {
					padding: 38rpx 0 57rpx;
					text-align: center;

					image {
						width: 350rpx;
						height: 194rpx;
					}
				}

				.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;
				
				.detail-wrap {
					display: flex;
					flex-wrap: wrap;
					padding: 35rpx 55rpx 18rpx 55rpx;
					color: #8D8D8D;
					.item {
						display: flex;
						font-size: 26rpx;
						justify-content: space-between;
						width: calc(50% - 61rpx);
						margin-bottom: 50rpx;
						
						.params {
							color: #00BD00;
						}
						
						.status-wrap {
							width: 100%;
							
							/deep/ .tip-wrap {
								width: 100%;
								justify-content: space-between;
							}
						}
					}
					
					.item:nth-child(2n) {
						margin-left: 120rpx;
					}
				}
				
				.params-wrap {
					display: flex;
					flex-wrap: wrap;
					font-size: 26rpx;
					padding: 35rpx 55rpx;
					
					.item {
						width: calc(50% - 32rpx);
						display: flex;
						justify-content: space-between;
						margin-top: 50rpx;
						
						view:first-child {
							color: #8D8D8D;
						}
					}
					
					.item:nth-child(2n) {
						margin-left: 62rpx;
					}
					
					.item:nth-child(-n+2) {
						margin-top: 0;
					}
				}
			}
		}
	}
</style>