FE-lab-xcx/pages_manage/views/laboratory/infoPage.vue

<!-- 实验室详情 -->
<template>
	<view class="infoPage">
		<view class="title">
			<view class="title-t">
				<view :style="'border:1rpx solid '+newData.levelColor+';color:'+newData.levelColor+';'">
					{{newData.levelName}}
				</view>
				<view>{{newData.subName}}</view>
			</view>
			<view class="title-m">
				<view v-for="(item,index) in newData.labClassTypeList" :key="index">{{item.typeName}}</view>
			</view>
			<view class="title-m1">
				<img src="@/pages_manage/images/icon_xq_xy.png">
				<view>{{newData.deptName}}</view>
			</view>
			<view class="title-b">
				<img src="@/pages_manage/images/icon_14.png">
				<view>{{newData.buildName}}{{newData.floorName}}{{newData.subName}}{{ newData.roomNum}}</view>
			</view>
		</view>
		<view class="tab-btn">
			<view :class="currentIndex==index?'color-B':''" v-for="(item,index) in tabData" :key="index"
				@click="tabFun(index)">{{item}}</view>
		</view>
		<!-- 物联控制 -->
		<iotControl v-if="pageType == 2" :subjectData="subjectData"></iotControl>
		<!-- 安全信息牌 -->
		<safetyCard v-if="pageType == 3" :subjectData="subjectData"></safetyCard>
		<!-- 进出记录 -->
		<accessRecord v-if="pageType == 4" :subjectData="subjectData"></accessRecord>
		<!-- 语音广播弹窗 -->
		<voiceBroadcast v-if="broadcastPage" :subjectData="subjectData"></voiceBroadcast>
		<!-- 空调弹窗 -->
		<airConditioning v-if="conditioningPage" :airConditioningData="airConditioningData"></airConditioning>
	</view>
</template>
<script>
	import {
		iotControl
	} from '@/pages_manage/views/laboratory/iotControl.vue'
	import {
		safetyCard
	} from '@/pages_manage/views/laboratory/safetyCard.vue'
	import {
		accessRecord
	} from '@/pages_manage/views/laboratory/accessRecord.vue'
	import {
		voiceBroadcast
	} from '@/pages_manage/views/laboratory/voiceBroadcast.vue'
	import {
		airConditioning
	} from '@/pages_manage/views/laboratory/airConditioning.vue'
	export default {
		name: 'infoPage',
		components: {
			iotControl,
			safetyCard,
			accessRecord,
			voiceBroadcast,
			airConditioning,
		},
		data() {
			return {
				newData: {},
				tabData: ['物联控制', '安全信息牌', '进出记录'],
				currentIndex: 0,
				pageType: 2,
				//语音广播弹窗
				broadcastPage: false,
				//空调弹窗
				conditioningPage: false,
				// 查询参数
				queryParams: {
					page: 1,
					pageSize: 20,
				},
				subjectData: null,
				// 空调弹窗
				airConditioningData:null,
			}
		},
		onLoad(option) {
			this.$set(this, 'newData', JSON.parse(decodeURIComponent(option.infoData)));
			this.$set(this, 'subjectData', JSON.parse(decodeURIComponent(option.infoData)));
		},
		created() {

		},
		mounted() {

		},
		methods: {

			tabFun(index) {
				this.$set(this, 'currentIndex', index);
				if (index == 0) {
					//物联控制
					this.$set(this, 'pageType', 2);
				} else if (index == 1) {
					//安全信息牌
					this.$set(this, 'pageType', 3);
				} else if (index == 2) {
					//进出记录
					this.$set(this, 'pageType', 4);
				}

			},
			buttonClick(type, row) {
				let self = this;
				if (type == 'subDetail') {
					//实验室详情
				} else if (type == 'broadcastOpen') {
					//语音弹窗开启
					this.$set(this, 'broadcastPage', true);
				} else if (type == 'broadcastClose') {
					//语音弹窗关闭
					this.$set(this, 'broadcastPage', false);
				} else if (type == 'conditioningOpen') {
					//空调弹窗开启
					this.$set(this,'airConditioningData',row);
					this.$set(this, 'conditioningPage', true);
				} else if (type == 'conditioningClose') {
					//空调弹窗关闭
					this.$set(this, 'conditioningPage', false);
				} else if (type == 'back') {
					this.$set(this, 'pageType', 2);
				}
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.infoPage {
		height: 100%;
		display flex;
		flex-direction column;

		.title {
			height: auto;
			background: #FFFFFF;
			padding: 0 20rpx;
			box-sizing: border-box;

			.title-t {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 28rpx 0 20rpx 0;
				box-sizing: border-box;

				>view:nth-of-type(1) {
					background: #fff;
					margin-right: 20rpx;
					border-radius: 8px;
					padding: 6rpx 16rpx;
					box-sizing: border-box;
				}

				>view:nth-of-type(2) {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					line-height: 36rpx;
				}
			}

			.title-m {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				>view {
					display: inline-block;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #0183FA;
					background: rgba(1, 131, 250, 0.2);
					border-radius: 18rpx;
					padding: 6rpx 12rpx;
					box-sizing: border-box;
					margin-right: 12rpx;
					margin-bottom: 20rpx;
				}
			}

			.title-m1 {
				display: flex;
				justify-content: flex-start;
				margin: 0rpx 0 20rpx 0;

				>img {
					width: 30rpx;
					height: 27rpx;
					margin-right: 12rpx;
				}

				>view {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #666666;
					line-height: 30rpx;
				}

			}

			.title-b {
				display: flex;
				justify-content: flex-start;
				margin-bottom: 22rpx;

				>img {
					width: 30rpx;
					height: 27rpx;
					margin-right: 12rpx;
				}

				>view {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #666666;
					line-height: 30rpx;
				}
			}
		}

		.tab-btn {
			width: 750rpx;
			height: 80rpx;
			border: 1px solid #E0E0E0;
			background: #fff;
			display: flex;
			justify-content: flex-start;
			margin-top: 20rpx;

			>view {
				width: 250rpx;
				height: 80rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
				line-height: 80rpx;
				text-align: center;
				border-right: 1px solid #E0E0E0;
			}

			.color-B {
				width: 250rpx;
				height: 80rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				background: #0183FA;
			}
		}
	}
</style>