qsy-zdh/pages/data/ventilation/air-system/air-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="item-wrap">
					<view :class="index === active ? 'active item' : 'item'" v-for="(item, index) in pageData.children"
						:key="index" @click="tabChange(index)">
						<view class="title">
							{{ item.name }}
						</view>
						<view class="params">
							<view>负压</view>
							<view class="unit">
								<view>-53.52</view>
								<view>Pa</view>
							</view>
						</view>
						<view class="params">
							<view>风速</view>
							<view class="unit">
								<view>2.30</view>
								<view>m/s</view>
							</view>
						</view>
						<view class="params">
							<view>风量</view>
							<view class="unit">
								<view>11043.0</view>
								<view>m³/min</view>
							</view>
						</view>
						<view class="icon">
							<status-tip :name="'风门'" :status="item.status" :tip="item.status ? '开' : '关'"></status-tip>
						</view>
					</view>
				</view>
				<view class="icon-wrap">
					<view v-for="(item, index) in pageData.children" :key="index" class="icon">
						<image v-if="item.status" src="@/static/tf.jpg" />
						<image v-else src="@/static/tf-static.png" />
					</view>
				</view>
				<view class="radius-wrap"></view>
			</view>
			<view class="detail-info-wrap">
				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'1#机组'">
					<template v-slot:content>
						<simple-table :tableHead="tableHead" :list="data"></simple-table>
					</template>
				</page-card>
				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'2#机组'">
					<template v-slot:content>
						<simple-table :tableHead="tableHead" :list="data"></simple-table>
					</template>
				</page-card>
				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'设备状态'">
					<template v-slot:content>
						<simple-table :tableHead="tableHead1" :list="data1"></simple-table>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageData: {}, // 页面基础数据
				active: 0, // 当前选中的tab
				tableHead: ['参数名称', '1#电机', '2#电机'],
				data: [{
					name: '定子1温度℃',
					params: [75.45, 89.35],
				}, {
					name: '定子2温度℃',
					params: [80.39, 91.92],
				}, {
					name: '定子3温度℃',
					params: [81.17, 86.78],
				}, {
					name: '前轴温度℃',
					params: [33.92, 50.07],
				}, {
					name: '后轴温度℃',
					params: [12.70, 50.26],
				}, {
					name: '直母电压V',
					params: [932.89, 831.67],
				}, {
					name: '输出电压V',
					params: [385.95, 373.87],
				}, {
					name: '输出电流A',
					params: [295.52, 293.54],
				}, {
					name: '输出功率KW',
					params: [113.93, 116.79],
				}, {
					name: '输出频率Hz',
					params: [46.00, 45.00],
				}, {
					name: '水平振动mm/s',
					params: [1.98, 2.27],
				}, {
					name: '垂直振动mm/s',
					params: [0.56, 0.56],
				}, {
					name: '远程',
					params: [{
						status: 1
					}, {
						status: 1
					}],
				}],
				tableHead1: ['设备名称', '状态'],
				data1: [{
					name: '1#风机监测通讯',
					params: [{
						status: 1
					}],
				},{
					name: '2#风机监测通讯',
					params: [{
						status: 1
					}],
				},{
					name: '1500PLC主站通讯',
					params: [{
						status: 1
					}],
				},{
					name: '1-1变频DP通讯正常',
					params: [{
						status: 1
					}],
				},{
					name: '1-2变频DP通讯正常',
					params: [{
						status: 1
					}],
				},{
					name: '2-1变频DP通讯正常',
					params: [{
						status: 1
					}],
				},{
					name: '2-2变频DP通讯正常',
					params: [{
						status: 1
					}],
				}]
			}
		},
		onLoad(option) {
			this.pageData = JSON.parse(option.data)
		},
		methods: {
			goBack() { // 返回上一頁面
				uni.navigateBack()
			},
			tabChange(index) { // 切换tab
				this.active = index
			}
		}
	}
</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 60rpx;
				background: url(../../../../static/page_bg.png);
				background-size: 100%;

				.item-wrap {
					display: flex;

					.item {
						width: 50%;
						color: #fff;
						padding: 27rpx 26rpx;

						.title {
							text-align: center;
							margin-bottom: 27rpx;
						}

						.params {
							display: flex;
							font-size: 26rpx;
							margin-bottom: 27rpx;

							.unit {
								width: calc(100% - 77rpx);
								display: flex;
								justify-content: space-between;
								margin-left: 25rpx;
							}
						}

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

							.name {
								margin-right: 25rpx;
							}
						}
					}

					.active {
						background: #3495FA;
						box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 8, 35, 0.31);
						border-radius: 14rpx;
					}
				}

				.icon-wrap {
					display: flex;
					padding-top: 47rpx;

					.icon {
						width: 50%;
						text-align: center;

						image {
							width: 159rpx;
							height: 159rpx;
						}
					}
				}

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

				.change-wrap {
					padding: 32rpx 24rpx 45rpx;
					
					.legend-wrap {
						display: flex;
						justify-content: center;
						padding-top: 32rpx;
						.item {
							display: flex;
							align-items: center;
							margin-right: 30rpx;
							.icon {
								width: 18rpx;
								height: 18rpx;
								margin-right: 5rpx;
								border-radius: 4rpx;
							}
							.label {
								font-size: 16rpx
							}
						}
					}
				}
			}
		}
	}
</style>