FE-V2-XCX/pages/earlyWarningManage/earlyWarningDetail.vue

<!-- 预案报警信息 -->
<template>
  <view class="earlyWarning">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<!-- 预案报警 -->
		<view class="header" v-if="form.warningType==4">{{form.warningContent}}</view>
		<!-- 化学品 -->
		<view class="header_tow" v-if="form.warningType==2">{{form.warningContent}}</view>
		<!-- 气瓶 -->
		<view class="header_three" v-if="form.warningType==3">{{form.warningContent}}</view>
		<!-- 算法识别 -->
		<view class="header_four" v-if="form.warningType==1">{{form.warningContent}}</view>
		<!-- 预案报警 -->
		<view class="site" v-if="form.warningType==4">
			<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
			<text>{{form.subName}}</text>
			<text></text>
			<text>{{form.buildName}}{{form.floorName}}{{form.roomNum}}</text>
		</view>
		<!-- 化学品 -->
		<view class="site_tow" v-if="form.warningType==2 || form.warningType==3 || form.warningType==1">
			<view class="site_tow_t">
				<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
				<text>{{form.warningTime}}</text>
			</view>
			<view class="site_tow_b">
				<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
				<text>{{form.subName}}</text>
				<text></text>
				<text>{{form.buildName}}{{form.floorName}}{{form.roomNum}}</text>
			</view>
		</view>
		<!-- 预案报警 -->
		<view class="basics" v-if="form.warningType==4">
			<view class="small_title"><text></text><text>风险概况</text></view>
			<view class="basics_li" style="margin-top:20rpx;">
				<text>发生时间：</text>
				<text>{{form.startTime}}至{{form.endTime?form.endTime:'-'}}</text>
			</view>
			<view class="basics_li">
				<text>持续时间：</text>
				<text>{{form.riskDuration}}秒</text>
			</view>
			<view class="basics_li">
				<text>风险响应人员：</text>
				<text>{{form.responder}}</text>
			</view>
			<view class="basics_li">
				<text>实验室内人员：</text>
				<text>{{form.indoorUser?form.indoorUser:'-'}}</text>
			</view>
		</view>
		<!-- 化学品 -->
		<view class="basics" v-if="form.warningType==2">
			<view class="small_title"><text></text><text>化学品信息</text></view>
			<view class="basics_li" style="margin-top:20rpx;">
				<text>{{form.name}}</text>
				<text></text>
			</view>
			<view class="basics_li">
				<text>存放位置：</text>
				<text>{{form.deposit}}</text>
			</view>
			<view class="basics_li">
				<text>化学品余量：</text>
				<text>{{form.margin}}</text>
			</view>
			<view class="basics_li" v-if="form.warningSubType==2">
				<text>申领人：</text>
				<text>{{form.apply}}</text>
			</view>
			<view class="basics_li" v-if="form.warningSubType==2">
				<text>申领时间：</text>
				<text>{{form.applyTime}}</text>
			</view>
			<view class="basics_li" v-if="form.warningSubType==3||form.warningSubType==4">
				<text>过期时间：</text>
				<text>{{form.expirationTime}}</text>
			</view>
		</view>
		<!-- 气瓶 -->
		<view class="basics" v-if="form.warningType==3">
			<view class="small_title"><text></text><text>气瓶信息</text></view>
			<view class="basics_li" style="margin-top:20rpx;">
				<text>{{form.name}}</text>
				<text></text>
			</view>
			<view class="basics_li">
				<text>气体余量：</text>
				<text>{{form.margin}}</text>
			</view>
			<view class="basics_li">
				<text>气瓶规格：</text>
				<text>{{form.specification}}</text>
			</view>
			<view class="basics_li">
				<text>所有人：</text>
				<text>{{form.holder}}</text>
			</view>
			<view class="basics_li">
				<text>入库时间：</text>
				<text>{{form.entryTime}}</text>
			</view>
			<view class="basics_li" v-if="form.warningSubType==2">
				<text>申领人：</text>
				<text>{{form.apply}}</text>
			</view>
			<view class="basics_li" v-if="form.warningSubType==2">
				<text>申领时间：</text>
				<text>{{form.applyTime}}</text>
			</view>
		</view>
		<view class="note" v-if="form.warningType==4 || form.warningType==1">
			<view class="small_title"><text></text><text>通知短信</text></view>
			<view class="note_li" style="margin-top:20rpx;" v-for="(item,index) in form.messageVOList">
				<text>{{item.name}}</text>
				<view class="note_li_r" v-if="item.isSuccess==1"><img  src="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
			</view>
		</view>
		<view class="note" v-if="(form.warningType==2 || form.warningType==3) && form.warningSubType==1">
			<view class="small_title"><text></text><text>预警通知</text></view>
			<view class="note_li" style="margin-top:20rpx;" >
				<text>声光报警通知</text>
				<view class="note_li_r" v-if="form.voiceBroadcast==1"><img  src="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
			</view>
		</view>
		<view class="note" v-if="(form.warningType==1 || form.warningType==4) && form.warningSubType==1">
			<view class="small_title"><text></text><text>预警通知</text></view>
			<view class="note_li" style="margin-top:20rpx;" >
				<text>语音播报</text>
				<view class="note_li_r" v-if="form.voiceBroadcast==1"><img  src="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
			</view>
		</view>
		<view class="picture">
			<view class="small_title"><text></text><text>报警抓拍</text></view>
			<view class="picture_b" >
				<view class="video">
					<video id="myvideo" class="video_t" :src="configUrl+form.recordVideo"></video>
					<img  class="video_b" @click="lockVideo()" src="@/images/icon_bjzp_spbof.png"/>
				</view>
			</view>
		</view>
		<view class="bottom_btn" @click="handleClick('','monitor')">查看监控</view>
	</scroll-view>	
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import {checkManageList,conditionCollegeInfo,warningNoticeLogDetail} from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
		configUrl:config.base_url,
		//列表请求参数
		getData:{
			pageNum:1,
			pageSize:20,
		},
		total:0,
		warningId:'',
		form:{},
		currentTime:'',
		
	}
  },
  onLoad(option) {
	  let self = this;
	  //先判断是否是通过点击列表进入
	  if(option.warningId){
		  this.warningId=option.warningId;
	  }else{
		//通过短信外链跳转进来
		if(option.id){
			if(!uni.getStorageSync('token')){
			    uni.setStorageSync('warningId',option.id);
			    uni.redirectTo({
			        url: '/pages/login',
			    });
			}	
		}else{
			  this.warningId = uni.getStorageSync('warningId');
			  uni.removeStorageSync('warningId');
		}   
	  }
	 
  },
  onShow() {
	
  },
  mounted(){
	this.getInfo(); 
	
  },
  methods: {
		
		//滚动事件
		scrollGet(){
			let self=this;
			
		},
		//判断预警时间是否超过30分钟
		compareTime (gettime){
			let timeOut = 30 * 60 * 1000;
			let currentTime = new Date().getTime()  //获取当前时间
			let endTime = new Date(gettime).getTime() //预警时间
			if(currentTime-endTime>timeOut){
				console.log('预警时间超过30分钟')
				this.timeStatus=true;
			}else{
				console.log('预警没超过30分钟')
				this.timeStatus=false;
			}	
			
		},
		//查看图片
		lockImg(list){
			console.log(list)
			if(!list[0]){
				return
			}
			let urlList=[];
			for(let i=0;i<list.length;i++){
				urlList.push(this.baseUrl+list[i].fileUrl)
			}
			wx.previewImage({
				urls: urlList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {},
			})
		},
		//视频全屏播放
		lockVideo(){
			this.videoContext = uni.createVideoContext("myvideo", this);    
			this.videoContext.requestFullScreen({ direction: 90 });  
			this.videoContext.play();
		},
		//获取详情
		async getInfo(){
		    let _this = this;
			console.log(_this.warningId)
			const {data} = await warningNoticeLogDetail({id:_this.warningId})
			if(data.code==200){
				let res=data.data
				this.form=res;
				
				if(res.warningType==1){
					uni.setNavigationBarTitle({
						title:'算法识别预警信息'
					})
				}else if(res.warningType==2){
					uni.setNavigationBarTitle({
						title:'化学品预警信息'
					}) 
				}else if(res.warningType==3){
					uni.setNavigationBarTitle({
						title:'气瓶预警信息'
					}) 
				}else if(res.warningType==4){
					uni.setNavigationBarTitle({
						title:'预案报警信息'
					}) 
				}
				this.compareTime(res.warningTime);
			}
		},
		handleClick(row,doType){
		  let self=this;
		  if( doType=='monitor'){//监控
			  uni.navigateTo({
			    url: '/pages/earlyWarningManage/videoMonitoring?subId='+this.form.subId+'&floorId='+this.form.floorId//我的实验室
			  });
		  }
		  
		},
		
	  
  }
}
</script>

<style lang="stylus" scoped>
.earlyWarning{
	height:100%;
	display flex;
	padding-bottom: 30rpx;
	box-sizing: border-box;
	.red_color{
		color: #D40000;
		border: 1rpx solid #D40000;
	}
	.orange_color{
		color: #FF4800;
		border: 1rpx solid #FF4800;
	}
	.yellow_color{
		color: #FFA34E;
		border: 1rpx solid #FFA34E;
	}
	.info-max-box{
		flex: 1;
		overflow: scroll;
	}
	.header{
		width: 750rpx;
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #D40000;
		line-height: 80rpx;
		text-align: center;
		background: rgba(212,0,0,0.2);
	}
	.header_tow{
		width: 750rpx;
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #FF4800;
		line-height: 80rpx;
		text-align: center;
		background: rgba(255,72,0,0.2);
	}
	.header_three{
		width: 750rpx;
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #FF4800;
		line-height: 80rpx;
		text-align: center;
		background: rgba(255,72,0,0.2);
	}
	.header_four{
		width: 750rpx;
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #FFA34E;
		line-height: 80rpx;
		text-align: center;
		background: rgba(255,163,78,0.2);
	}
	.site{
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin:20rpx 30rpx;
		>img{
			width: 30rpx;
			height: 30rpx;
			margin-right: 22rpx;
			margin-left: 30rpx;
		}
		>text:nth-of-type(1){
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 28rpx;
		}
		>text:nth-of-type(2){
			display: inline-block;
			width: 2rpx;
			height: 20rpx;
			background: #E0E0E0;
			margin: 0 24rpx 0 28rpx;
		}
		>text:nth-of-type(3){
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 28rpx;
		}
	}
	.site_tow{
		width: 690rpx;
		height: 170rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin:20rpx 30rpx;
		overflow: hidden;
		.site_tow_t{
			height: 40rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 32rpx;
			>img{
				width: 30rpx;
				height: 30rpx;
				margin-right: 22rpx;
				margin-left: 30rpx;
			}
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;
			}
		}
		.site_tow_b{
			height: 40rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20rpx;
			>img{
				width: 30rpx;
				height: 30rpx;
				margin-right: 22rpx;
				margin-left: 30rpx;
			}
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;
			}
			>text:nth-of-type(2){
				display: inline-block;
				width: 2rpx;
				height: 20rpx;
				background: #E0E0E0;
				margin: 0 24rpx 0 28rpx;
			}
			>text:nth-of-type(3){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;
			}
		}
		
	}
	.small_title{
		height: 90rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1rpx solid #E0E0E0;
		>text:nth-of-type(1){
			display: inline-block;
			width: 4rpx;
			height: 30rpx;
			background: #0183FA;
			margin: 0 22rpx 0 28rpx;
		}
		>text:nth-of-type(1){
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 30rpx;
		}
	}
	.basics{
		margin-left: 30rpx;
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding-bottom: 16rpx;
		box-sizing: border-box;
		.basics_li{
			display: flex;
			justify-content: space-between;
			margin: 0 30rpx;
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 60rpx;
			}
			>text:nth-of-type(2){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 60rpx;
				flex: 1;
				text-align: right;
			}
		}
	}
	.note{
		margin-left: 30rpx;
		margin-top: 20rpx;
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding-bottom: 16rpx;
		box-sizing: border-box;
		.note_li{
			display: flex;
			justify-content: space-between;
			margin: 0 30rpx;
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 60rpx;
			}
			.note_li_r{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				>img{
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #0183FA;
				line-height: 60rpx;
				
			}
		}
	}
	.picture{
		margin-left: 30rpx;
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 20rpx;
		.picture_b{
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			padding: 40rpx 30rpx 10rpx;
			box-sizing: border-box;
			
			.video{
				position: relative;
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin-right: 38rpx;
				margin-bottom: 10rpx;
				.video_t{
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					position: absolute;
				}
				.video_b{
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					left: 55rpx;
					top: 55rpx;
				}
			}
			
		}
	}
	.bottom_btn{
		width: 690rpx;
		height: 90rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		border: 1rpx solid #0183FA;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #0183FA;
		line-height: 90rpx;
		text-align: center;
		background: #F5F5F5;
		margin: 90rpx 30rpx 30rpx;
		
	}
}
</style>