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/icon_hxpyj_sj.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 v-if="form.everyDay" style="position: absolute;right: 10rpx;top:-33rpx;">+{{form.everyDayNum}}</text>
				<text>{{form.startTime}}-{{form.endTime?form.endTime:'-'}}</text>
			</view>
			<view class="basics_li">
				<text>持续时间：</text>
				<text>{{form.riskDuration?form.riskDuration:'-'}}秒</text>
			</view>
			<view class="basics_li">
				<text>风险响应人员：</text>
				<text>{{form.responder?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.applyUser}}</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.applyUser}}</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==4 || form.warningType==1) && form.warningSubType!=2 && form.warningSubType!=3 && form.warningSubType!=4 && form.voiceBroadcast==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"><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!=2 && form.warningSubType!=3 && form.warningSubType!=4 && form.voiceBroadcast==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" ><img  src="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
			</view>
		</view>
		<view v-if="form.warningSubType!=2 && form.warningSubType!=3 && form.warningSubType!=4" class="picture">
			<view class="small_title"><text></text><text>报警抓拍</text></view>
			<view class="picture_b" >
				<!-- 西北农林演示报警抓拍预案的时候-判断不显示视频 -->
				<!-- <view class="video" v-if="form.warningType!=1">
					<video id="myvideo" class="video_t" :bindloadedmetada="onLoadedMetadata" :src="configUrl+form.recordVideo"></video>
					<img  class="video_b" @click="lockVideo()" src="@/images/icon_bjzp_spbof.png"/>
					<canvas id="myCanvas" canvas-id="myCanvas"></canvas>
				</view> -->
				<!-- <view v-if="form.warningType==1" class="img" @click="lockImg(form.warningDetailList)">
					<img v-for="item in form.warningDetailList"  :src="configUrl+item.photoUrl"/>
				</view> -->
				<!-- 西北农林演示报警抓拍预案的时候-改为图片 -->
				<!-- <view v-if="form.warningType==4" class="img" @click="lockImgTow(form.recordPhoto)">
					<img  :src="configUrl+form.recordPhoto"/>
				</view> -->
				<video id="myvideo" :class="videoType?'videoOpacity1':'videoOpacity0'"
					:controls="false" :muted="true" :autoplay="true"
					:show-fullscreen-btn="false"
					:show-play-btn="false"
					:show-center-play-btn="false"
					:enable-progress-gesture="false"
					style="height:336rpx;width:600rpx;" 
					:src="configUrl+form.recordVideo">
				</video>
			</view>
		</view>
		<!-- <view  class="bottom_btn" v-if="timeStatus && (form.warningSubType!=2 && form.warningSubType!=3 && form.warningSubType!=4)" @click="handleClick('','monitor')">查看监控</view> -->
		<!-- 西北农林演示临时 -->
		<view  class="bottom_btn" v-if="form.warningSubType!=2 && form.warningSubType!=3 && form.warningSubType!=4" @click="handleClick('','monitor')">查看监控</view>
	</scroll-view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import {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:'',
		timeStatus:false,
		videoType:false,

	}
  },
  onLoad(option) {
	  let self = this;

	  //先判断是否是通过点击列表进入
	  if(option.warningId){
		  this.warningId=option.warningId;
	  }else{
		//通过短信外链跳转进来
		if(option.id){
			console.log(11)
			if(!uni.getStorageSync('token')){
				console.log(22)
			    uni.setStorageSync('warningId',option.id);
				console.log(uni.getStorageSync('warningId'))
			    uni.redirectTo({
			        url: '/pages/login',
			    });
			}else{
				this.warningId = option.id;
				uni.removeStorageSync('warningId');
		    }
		}
	  }

  },
  onShow() {
	this.$set(this,'videoType',false);
  },
  mounted(){
	this.getInfo();

  },
  methods: {
		//截取封面
		videoCover(){
		  let video = document.getElementById('#myvideo');
		  let canvas = document.createElement("canvas");
		  let width = video.width; //canvas的尺寸和图片一样
		  let height = video.height;
		  canvas.width = width;
		  canvas.height = height;
		  canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
		  let videoImg = canvas.toDataURL('image/jpeg'); //转换为base64
		},
		onLoadedMetadata(e){
			console.log(1111)
			const duration=e.duration;
			const width=e.videoWidth;
			const heigth=e.videoHeight;
			
			const canvas=uni.createCanvasContext('myCanvas')
			canvas.canvas.width=width;
			canvas.canvas.height=heigth;
			
			canvas.drawImage('myVideo',0,0,width,heigth)
			canvas.draw();
			
			const that=this;
			
			setTimeout(function(){
				uni.canvasToTempFilePath({
					canvasId:'myCanvas',
					success:function(res) {
						const imagePath=res.tempFilePath;
						console.log(imagePath)
					}
				})
			},1000)
		},
		//滚动事件
		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=false;
			}else{
				console.log('预警没超过30分钟')
				this.timeStatus=true;
			}

		},
		//查看图片
		lockImg(list){
			if(!list[0]){
				return
			}
			let urlList=[];
			for(let i=0;i<list.length;i++){
				urlList.push(this.configUrl+list[i].photoUrl)
			}
			wx.previewImage({
				urls: urlList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {},
			})
		},
		//查看图片-单张
		lockImgTow(list){
			
			let urlList=[];
			urlList.push(this.configUrl+list)
			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();
		},
		//计算两个日期差值（天）
		datedifference(sDate1, sDate2) {    //sDate1和sDate2是2006-12-18格式
			let dateSpan,tempDate,iDays
			sDate1 = Date.parse(sDate1)
			sDate2 = Date.parse(sDate2)
			dateSpan = sDate2 - sDate1
			dateSpan = Math.abs(dateSpan)
			iDays = Math.floor(dateSpan / (24 * 3600 * 1000))
			return iDays
		 },
		//获取详情
		async getInfo(){
		    let _this = this;
			const {data} = await warningNoticeLogDetail({id:this.warningId})
			if(data.code==200){
				let res=data.data
				this.form=res;
				if(this.form.startTime!='' && this.form.startTime!=null && this.form.endTime !=''&& this.form.endTime !=null){

					if(this.form.startTime.split(' ')[0] != this.form.endTime.split(' ')[0]){
						this.form.everyDay=true;
						this.form.everyDayNum=this.datedifference(this.form.endTime.split(' ')[0],this.form.startTime.split(' ')[0])
					}
				}
				if(this.form.endTime !=''&& this.form.endTime !=null){
					this.form.endTime =this.form.endTime.split(' ')[1]
				}
				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:'预案报警信息'
					})
				}
				setTimeout(function(){
					let videoplay = wx.createVideoContext('myvideo')
					videoplay.play()
					setTimeout(function(){
						videoplay.pause()
						_this.$set(_this,'videoType',true);
					},200)
				},1000)
				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;
			align-items: center;
			margin: 0 30rpx;
			position: relative;
			>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;
			.videoOpacity1{
				opacity:1;
			}
			.videoOpacity0{
				opacity:0;
			}
			.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;
				}
			}
			.img{
				display: flex;
				justify-content:flex-start;
				flex-wrap: wrap;
				>img{
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin-right: 38rpx;
					margin-bottom: 20rpx;
				}
				>img:nth-child(3n+3){
					margin-right: 0;
				}
			}

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