v3-lab-xcx/pages_manage/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">{{item.typeName}}</view>
        </view>
        <view class="title-m1">
          <img src="@/images/basicsModules/icon_xq_xy.png">
          <view>{{newData.deptName}}</view>
        </view>
        <view class="title-b">
          <img src="@/images/basicsModules/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" @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" :subjectData="subjectData"></airConditioning>
  </view>
</template>
<<script>
import {laboratoryAppletGetSubDetailInfo} from '@/api/basicsModules/index.js'
import {iotControl} from '@/pages_manage/laboratory/iotControl.vue'
import {safetyCard} from '@/pages_manage/laboratory/safetyCard.vue'
import {accessRecord} from '@/pages_manage/laboratory/accessRecord.vue'
import {voiceBroadcast} from '@/pages_manage/laboratory/voiceBroadcast.vue'
import {airConditioning} from '@/pages_manage/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,
    }
  },
  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, '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>