qsy-zdh/pages/data/nitrogen/compress-system/compress-system.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>
				<view class="img-wrap">
					<image src="@/static/nitrogen-static.png" />
				</view>
				<view class="radius-wrap"></view>
			</view>
			<view class="detail-info-wrap">
				<page-card v-for="(item,index) in paramsList" :key="index" style="margin-bottom: 30rpx;" :notShow="true"
					:name="`${index + 1}#制氮机`">
					<template v-slot:content>
						<simple-table :tableHead="tableHead" :list="item.params"></simple-table>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageData: {}, // 页面数据
				tableHead: ['名称', '参数状态'], // 页头
				paramsList: [{
					params: [{ // 参数列表
							name: '1号阀',
							params: [{
								status: 1
							}]
						},
						{
							name: '2号阀',
							params: [{
								status: 0
							}]
						},
						{
							name: '3号阀',
							params: [{
								status: 1
							}]
						},
						{
							name: '排空阀',
							params: [{
								status: 1
							}]
						},
						{
							name: '系统阀',
							params: [{
								status: 1
							}]
						},
						{
							name: '送气阀',
							params: [{
								status: 1
							}]
						},
						{
							name: '4号阀',
							params: [{
								status: 0
							}]
						},
						{
							name: '空气罐压力(Mpa)',
							params: ['0.00']
						},
						{
							name: '氨气罐压力(Mpa)',
							params: ['0.00']
						},
						{
							name: '氧气含量(%)',
							params: ['0.00']
						},
						{
							name: '瞬时流量(m³/h)',
							params: ['00.00']
						}
					]
				}]
			}
		},
		onLoad(option) {
			this.pageData = JSON.parse(option.data)
			this.getData()
		},
		methods: {
			goBack() { // 返回上一頁面
				uni.navigateBack()
			},
			activeChange(item) { // 状态切换
				this.activeData = item
			},
			async getData() {
				let res = await this.$http({
					url: `/qsy/dcs/transform/zdjk`,
					method: 'POST'
				})
				this.paramsList = res.data.data.data
			}
		}
	}
</script>

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

			.basic-info-wrap {
				position: relative;
				height: 244rpx;
				padding: 0 49rpx 0;
				background: url(../../../../static/page_bg.png);
				background-size: 120%;

				.info-wrap {
					border-bottom: 1rpx dashed #fff;

				}

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

					image {
						width: 310rpx;
						height: 138rpx;
					}
				}

				.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>