qsy-zdh/pages/data/cj-system/gzm.vue

<template>
	<view class="page-body">
		<page-header :name="'智能掘进工作面'" :bg="'transparent'" :showLeft="true" @goBack="goBack()"></page-header>
		<view class="bg-wrap"></view>
		<view class="scroll-wrap">
			<view class="info-wrap">
				<view class="title">智能掘进工作面参数</view>
				<view class="table-wrap">
					<simple-table :tableHead="tableHead" :list="tableList"></simple-table>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableHead: ['参数', '数值'],
				tableList: [{
					name: '人员检测',
					params: [{
						status: 1
					}],
				},{
					name: '油泵运行',
					params: [{
						status: 1
					}],
				},{
					name: '高速运行',
					params: [{
						status: 1
					}],
				},{
					name: '油箱温度',
					params: ['32℃']
				}, {
					name: '油泵计时',
					params: ['32h32min']
				}, {
					name: '截割计时',
					params: ['29h29min']
				}, {
					name: '俯仰角度',
					params: ['30°']
				}, {
					name: '翻滚角度',
					params: ['01°']
				}, {
					name: '回转角度',
					params: ['01°']
				}, {
					name: '升降角度',
					params: ['30°']
				}, {
					name: '自动截取时间',
					params: ['29min']
				}, {
					name: '遥控截割时间',
					params: ['30min']
				}]
			}
		},
		onLoad(option) {
			this.getData()
		},
		methods: {
			goBack() { // 返回上一頁面
				uni.navigateBack()
			},
			async getData() {
				let res = await this.$http({
					url: `/qsy/dcs/transform/gzm`,
					method: 'POST'
				})
				this.tableList = res.data.data.tableList
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-body {
		position: relative;
		background-color: #f5f6f8;
		/deep/ .header-wrap {
			position: relative;
			z-index: 2;
		}

		.bg-wrap {
			position: absolute;
			z-index: 1;
			top: 0;
			width: 100vw;
			height: 670rpx;
			background: url(@/static/pg-bg-2.png);
			background-size: 100%;
		}

		.scroll-wrap {
			position: relative;
			z-index: 2;
			overflow-y: scroll;
			height: calc(100vh - 85rpx);
			padding: 60rpx 35rpx 45rpx;

			.status-wrap {
				display: flex;
				height: 167rpx;
				border-radius: 20rpx;
				margin-bottom: 60rpx;
				background: #C5EDFF;

				.item {
					flex: 1;
					justify-content: center;
					padding: 35rpx 97rpx 35rpx 97rpx;
					border-right: 1rpx dashed #fff;

					.name {
						font-size: 28rpx;
						font-weight: 700;
						text-align: center;
						margin-bottom: 25rpx;
					}

					.status {
						/deep/ .tip-wrap {
							font-size: 26rpx;

							.name {
								color: #8D8D8D;
							}

							.status-wrap {
								view:first-child {
									margin: 0 8rpx 0 30rpx;
								}
							}
						}
					}
				}

				.item:last-child {
					border: none;
				}
			}

			.info-wrap {
				.title {
					margin-bottom: 29rpx;
					font-weight: 700;
					font-size: 36rpx;
					color: #000000;
				}
				
				.table-wrap {
					overflow: hidden;
					border-radius: 20rpx;
					background-color: #fff;
					
					/deep/ .table-head {
						background-color: #F0F0F0;
					}
				}
			}
		}
	}
</style>