qsy-zdh/pages/data/cj-system/kjky.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" style="margin-bottom: 40rpx;">
					<simple-table :tableHead="tableHead" :list="tableList"></simple-table>
				</view>
				<view class="table-wrap" style="margin-bottom: 40rpx;">
					<simple-table :tableHead="tableHead1" :list="tableList1"></simple-table>
				</view>
				<view class="table-wrap">
					<simple-table :tableHead="tableHead2" :list="tableList2"></simple-table>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableHead: ['巷道', '测点', '压力', '开关量'],
				tableList: [{
					name: '运输巷',
					params: ['100', '60', 'false']
				}, {
					name: '运输巷',
					params: ['300', '5', 'false']
				}, {
					name: '0',
					params: ['300', '5', 'false']
				}, {
					name: '回风巷',
					params: ['300', '5', 'false']
				}],
				tableHead1: ['工作面名称', '开关量', '测点', '机巷', '风巷'],
				tableList1: [{
					name: '110207工作面',
					params: ['1', '2700', '运输巷', '回风巷']
				}, {
					name: '002工作面',
					params: ['0', '1000', '轨道巷', '回风巷']
				}, {
					name: '110208工作面',
					params: ['1', '2500', '运输巷', '回风巷']
				}, {
					name: '110209工作面联络巷',
					params: ['0', '1000', '运输巷', '回风巷']
				}],
				tableHead2: ['检测时间', '检测值'],
				tableList2: [{
					name: '2025-01-13 08:00:00',
					params: ['6767']
				}, {
					name: '2025-01-14 08:00:00',
					params: ['6720']
				}, {
					name: '2025-01-15 08:00:00',
					params: ['6842']
				}]
			}
		},
		onLoad(option) {
			this.getData()
		},
		methods: {
			goBack() { // 返回上一頁面
				uni.navigateBack()
			},
			async getData() {
				let res = await this.$http({
					url: `/qsy/dcs/transform/kjky`,
					method: 'POST'
				})
				this.tableList = res.data.data.tableList
				this.tableList1 = res.data.data.tableList1
				this.tableList2 = res.data.data.tableList2
			}
		}
	}
</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>