heyang

pages/earlyWarningManage/earlyWarningDetail.vue

@@ -0,0 +1,644 @@
+<!-- 预案报警信息 -->
+<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" :src="configUrl+form.recordVideo"></video>
+					<img  class="video_b" @click="lockVideo()" src="@/images/icon_bjzp_spbof.png"/>
+				</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>
+		</view>
+		<view  class="bottom_btn" v-if="timeStatus && (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 {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:'',
+		timeStatus: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() {
+	
+  },
+  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=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) {},
+			})
+		},
+		//视频全屏播放
+		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:'预案报警信息'
+					}) 
+				}
+				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;
+			
+			.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>

pages/earlyWarningManage/earlyWarningList.vue

@@ -0,0 +1,268 @@
+<!-- 安全检查-校院巡查管理 -->
+<template>
+  <view class="earlyWarning">
+	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
+		<viw class="list" v-for="(item,index) in dataList" :key="index">
+			<view class="list_t">{{item[0].createDate}}</view>
+			<view class="list_li" v-for="(item2,index2) in item" :key="index2" @click="handleClick(item2,'detail')">
+				<view class="list_li_t">
+					<view class="list_li_t_l"></view>
+					<view class="list_li_t_c orange_color" v-if="item2.warningType==1">算法识别</view>
+					<view class="list_li_t_c yellow_color" v-if="item2.warningType==2">化学品</view>
+					<view class="list_li_t_c yellow_color" v-if="item2.warningType==3">气瓶</view>
+					<view class="list_li_t_c red_color" v-if="item2.warningType==4">预案</view>
+					<view class="list_li_t_c2">{{item2.warningContent}}</view>
+					<view class="list_li_t_r"></view>
+				</view>
+				<view class="list_li_b">
+					<view class="list_li_b_t">
+						<text>{{item2.subName}}</text>
+						<text>{{item2.warningTime.split(' ')[1]}}</text>
+					</view>
+					<view class="list_li_b_b">
+						<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
+						<text>{{item2.buildName}}-{{item2.floorName}}{{item2.roomNum}}</text>
+					</view>
+				</view>
+			</view>
+		</viw>
+		<img class="null-img" v-if="!dataList[0]" src="@/images/null-data-1.png">
+	</scroll-view>	
+  </view>
+
+</template>
+
+<script>
+import { config } from '@/api/request/config.js'
+import {checkManageList,conditionCollegeInfo,warningNoticeLogList} from '@/api/index.js'
+export default {
+  name: "rectifyList",
+  components: {
+   
+  },
+  data() {
+    return {
+		//列表请求参数
+		getData:{
+			pageNum:1,
+			pageSize:10,
+		},
+		dataList:[],
+		dataArr:[],//临时存储
+		total:0,
+		timeStatus:false,//判断是否超过当前时间30分钟
+		
+	}
+  },
+  onLoad(option) {
+	  
+  },
+  onShow() {
+	
+  },
+  mounted(){
+	 this.getList();  
+  },
+  methods: {
+		
+		//滚动事件
+		scrollGet(){
+			let self=this;
+			if(self.total/self.getData.pageSize<=self.getData.pageNum){
+			    console.log('没有更多数据!')
+			}else{
+					setTimeout(function(){
+						self.getData.pageNum += 1;
+						self.getList(); 
+					},1000)
+						 
+			}
+			
+		},
+		
+		handleClick(row,doType){
+		  let self=this;
+		  if( doType=='detail'){//详情	
+			  uni.navigateTo({
+			    url: '/pages/earlyWarningManage/earlyWarningDetail?warningId='+row.id,//安全警报
+			  });
+		  }
+		  
+		},
+		//排序
+		sortClass(sortData){
+		  const groupBy = (array, f) => {
+		    let groups = {};
+		    array.forEach((o) => {
+		      let group = JSON.stringify(f(o));
+			  
+		      groups[group] = groups[group] || [];
+		      groups[group].push(o);
+		    });
+		    return Object.keys(groups).map((group) => {
+		      return groups[group];
+		    });
+		  };
+		  const sorted = groupBy(sortData, (item) => {
+		    return item.createDate; // 返回需要分组的对象
+		  });
+		  return sorted;
+		},
+		async getList(){
+			let self = this;
+			const {data} = await warningNoticeLogList(this.getData);
+			if(data.code==200){
+				this.dataArr=[...this.dataArr,...data.data.records]
+				this.dataList=this.sortClass(this.dataArr)
+				console.log(this.dataList)
+				this.total=data.data.total;
+			}
+		},
+	  
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.earlyWarning{
+	height:100%;
+	display flex;
+	padding: 0 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;
+	}
+	.null-img{
+		display block
+		width:276rpx;
+		height:321rpx;
+		margin:100rpx 0 0 274rpx;
+	}
+	.list{
+		.list_t{
+			height: 80rpx;
+			font-size: 30rpx;
+			font-family: PingFang SC-Medium, PingFang SC;
+			font-weight: 400;
+			color: #666666;
+			line-height: 80rpx;
+		}	
+		.list_li{
+			width: 690rpx;
+			height:auto;
+			background: #FFFFFF;
+			border-radius: 10rpx;
+			padding-bottom: 52rpx;
+			box-sizing: border-box;
+			margin-bottom: 20rpx;
+			.list_li_t{
+				position: relative;
+				height: 110rpx;
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				.list_li_t_l{
+					position: absolute;
+					left:-15rpx;
+					top: 76rpx;
+					width: 30rpx;
+					height: 30rpx;
+					background:#F5F5F5;
+					border-radius: 15rpx;
+				}
+				.list_li_t_c{
+					height: 40rpx;
+					font-size: 30rpx;
+					font-family: PingFang SC-Medium, PingFang SC;
+					font-weight: 400;
+					line-height: 36rpx;
+					margin-left: 30rpx;
+					margin-right: 20rpx;
+					border-radius: 20rpx;
+					padding: 0 20rpx;
+					box-sizing: border-box;
+					
+				}
+				.list_li_t_c2{
+					font-size: 30rpx;
+					font-family: PingFang SC-Medium, PingFang SC;
+					font-weight: 400;
+					color: #333333;
+					line-height: 30rpx;
+					white-space: nowrap;
+					overflow: hidden;
+				    text-overflow: ellipsis;
+					flex: 1;
+				}
+				.list_li_t_r{
+					position: absolute;
+					right:-15rpx;
+					top: 76rpx;
+					width: 30rpx;
+					height: 30rpx;
+					background:#F5F5F5;
+					border-radius: 15rpx;
+				}
+			}
+			.list_li_b{
+				margin: 0 30rpx;
+				border-top: 1rpx dotted #D8D8D8;
+				
+				.list_li_b_t{
+					display: flex;
+					justify-content: space-between;
+					margin-top:28rpx;
+					>text:nth-of-type(1){
+						font-size: 30rpx;
+						font-family: PingFang SC-Medium, PingFang SC;
+						font-weight: 400;
+						color: #333333;
+						line-height: 30rpx;
+					}
+					>text:nth-of-type(2){
+						font-size: 30rpx;
+						font-family: PingFang SC-Medium, PingFang SC;
+						font-weight: 400;
+						color: #666666;
+						line-height: 30rpx;
+					}
+				}
+				.list_li_b_b{
+					display: flex;
+					justify-content: flex-start;
+					margin-top:30rpx;
+					>img{
+						width: 30rpx;
+						height: 30rpx;
+						margin-right: 22rpx;
+					}
+					>text{
+						font-size: 28rpx;
+						font-family: PingFang SC-Medium, PingFang SC;
+						font-weight: 400;
+						color: #666666;
+						line-height: 28rpx;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						flex: 1;
+					}
+				}
+			}
+		}	
+	}
+	.info-max-box{
+		flex: 1;
+		overflow: scroll;
+	}
+}
+</style>

pages/earlyWarningManage/videoMonitoring.vue

@@ -0,0 +1,607 @@
+<!-- 视频监控-->
+<template>
+  <view class="earlyWarning">
+	<scroll-view scroll-x @scrolltolower="scrollGet"  class="header">
+		<view class="tabTitle_tow">
+			<view class="tabTitle_tow_li" @tap="tabClickTow(item,index)"  :key="index" v-for="(item,index) in videoHardwareList">
+				<view :class="{on:curTabTow==index}" class="tabTitle_tow_text">{{item.name}}</view>
+				<view :class="{on:curTabTow==index}" class="tabTitle_tow_across"></view>
+			</view>
+		</view>
+	</scroll-view>
+	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
+		<!-- 视频部分 -->
+		<view class="video-max-box">
+		  <video v-for="(item,index) in urlList" :key="index" ref="videoRef" :src="item.url"
+		         :poster="videoCover" :custom-cache='false' :autoplay="true" :controls="true"
+		         :enable-danmu="false" :muted="true" :show-fullscreen-btn="true" :show-center-play-btn="false"
+		         :show-play-btn="false" @error="videoErrorCallback">
+		  </video>
+		</view>
+		
+		<view class="broadcast">
+		  <view class="broadcast_t">语音广播<label>选择喇叭位置</label></view>
+		  <!-- 按钮部分 -->
+		  <view class="trumpet-max-box">
+		    <view @click="trumpetClick(index)" class="trumpet-for-box"
+		          :class="item.type?'trumpet-color-a':'trumpet-color-b'" v-for="(item,index) in trumpetList"
+		          :key="index">
+		      <img src="@/images/icon_sskz_zc.png" v-if="!item.type">
+		      <img src="@/images/icon_sskz_xz.png" v-if="item.type">
+		      {{item.name}}
+		    </view>
+		  </view>
+		  <view class="broadcast_m">
+		    <view class="broadcast_m_t" :class="liveType?'broadcast_m_t_back_a':'broadcast_m_t_back_b'"
+		          @longpress.stop="recordButton" @touchmove.stop="cancelButton" @touchend.stop="sendButton">
+		
+		      {{liveType?'松开发送':'按住说话'}}
+		    </view>
+		    <view class="broadcast_m_b" v-if="!liveType">按住说话，录入广播内容</view>
+		    <view class="broadcast_m_b" v-if="liveType">松开发送，向上滑动取消发送</view>
+		  </view>
+		</view>
+	</scroll-view>	
+  </view>
+
+</template>
+
+<script>
+import { config } from '@/api/request/config.js'
+import {laboratoryInfo,getCameraByFloor,GetStartList,getDeviceListBySub,sparseHardwareList,textParseUrlIps} from '@/api/index.js'
+export default {
+  name: "rectifyList",
+  components: {
+   
+  },
+  data() {
+    return {
+		videoCover: uni.getStorageSync('videoCover'),
+		tabTextTow:[{name:'RFID摄像头'},{name:'房间内监控1'},{name:'房间内监控2'},{name:'房间内监控3'},{name:'房间内监控3'},{name:'房间内监控3'},],
+		curTabTow:0,
+		//视频数据
+		urlList: [{}],
+		videoHardwareNUM:[], //实验室和楼道摄像头编码
+		trumpetList:[],
+		//广播相关
+		liveType: false,
+		sendLock: true, //发送锁，当为true时上锁，false时解锁发送
+		recorderManager: wx.getRecorderManager(),
+		videoHardwareList:[],//获取所有摄像头编码
+		hardwareList:[],//硬件列表
+		subId:'',
+		floorId:'',
+		
+	}
+  },
+  onLoad(option) {
+	  if(option.subId || option.floorId){
+		this.subId=option.subId
+		this.floorId=option.floorId
+	  }
+  },
+  onShow() {
+	
+  },
+  mounted(){
+	  this.getDeviceList()//喇叭接口
+	  this.sparseHardwareList()//摄像头接口
+  },
+  methods: {
+		//顶部tab点击
+		tabClickTow(item,index) {
+			this.curTabTow = index;
+			console.log(item)
+			this.GetStartList(item)
+			
+		},
+		//滚动事件
+		scrollGet(){
+			let self=this;
+			
+		},
+		videoErrorCallback(e){
+		  console.log("播放失败",e);
+		},
+		//获取实验室摄像头
+		async laboratoryInfo() {
+		
+		  let _this = this;
+		  const {
+		    data
+		  } = await laboratoryInfo(_this.subId);
+		  if (data.code == 200) {
+		    let list = data.data[0];
+		    list.labHardwareVOList.forEach(function(item) {
+		      if (item.hardwareTypeEnum.enumName == 'VIDEO_MONITOR') {
+				_this.videoHardwareList.push({name:item.hardwareName,num:item.hardwareNUM})
+		      }
+		    })
+		    _this.GetStartList(_this.videoHardwareList[0])
+			console.log(_this.videoHardwareList)
+		  }
+		},
+		
+		//获取疏散硬件列表
+		async sparseHardwareList() {
+		  let _this = this;
+		  const {
+		    data
+		  } = await sparseHardwareList()
+		  if (data.code == 200) {
+			if(data.rows[0]){
+			   this.hardwareList=data.rows;
+			   this.getCameraByFloor();
+			}else{
+			  this.laboratoryInfo();	
+			}
+		  }
+		},
+		//获取楼层摄像头列表
+		async getCameraByFloor() {
+		  let _this = this;
+		  const {
+		    data
+		  } = await getCameraByFloor({
+		    floorId: this.floorId
+		  })
+		  if (data.code == 200) {
+			  for(let i=0;i<data.data.length;i++){
+				for(let k=0;k<_this.hardwareList.length;k++){
+					if(data.data[i]==_this.hardwareList[k].hardwareNum){
+						_this.videoHardwareList.push({name:_this.hardwareList[k].name,num:_this.hardwareList[k].hardwareNum})
+					}		  
+				}
+			  }
+			  this.laboratoryInfo()
+		  }
+		},
+		async GetStartList(numData) {
+		  let self = this;
+		  if(!numData){
+			return
+		  }
+		  console.log()
+		  let obj = {
+		    page: "1",
+		    count: "100",
+		    deviceIds: numData.num,
+		  };
+		  const {
+		    data
+		  } = await GetStartList(obj)
+		  if (data.code == 200) {
+		    let list = [];
+		   for(let i=0;i<data.data.length;i++){
+		      let text = uni.getStorageSync('cameraUrl');
+		       let url = data.data[i].hls;
+		      url = url.split("rtp/");
+		      let newUrl = text + 'rtp/' + url[1];
+		      let obj = {
+		        name: "楼道监控" + (i + 1),
+		        id:data.data[i].deviceID,
+		        url: newUrl,
+				videoContext:wx.createVideoContext(data.data[i].deviceID)
+		      }
+		      list.push(obj)
+		    }
+		    this.urlList = list;
+		  }
+		},
+		//获取喇叭列表
+		async getDeviceList() {
+		  let obj = {
+		    subId: this.subId,
+		    floorId: this.floorId,
+		    page: 1,
+		    pageSize: 100,
+		  };
+		  const {
+		    data
+		  } = await getDeviceListBySub(obj)
+		  if (data.code == 200) {
+		    for (let i = 0; i < data.data.length; i++) {
+		      data.data[i].type = false;
+		    }
+		    this.$set(this, 'trumpetList', data.data)
+		  }
+		},
+		//点击选择喇叭
+		trumpetClick(index) {
+		  this.trumpetList[index].type = !this.trumpetList[index].type
+		},
+		//录制
+		recordButton(e) {
+		  console.log("按下")
+		  let self = this;
+		  let num = 0;
+		  for (let i = 0; i < self.trumpetList.length; i++) {
+		    if (self.trumpetList[i].type) {
+		      num++
+		    }
+		  }
+		  if (num == 0) {
+		    uni.showToast({
+		      title: '请选择喇叭',
+		      icon: "none",
+		      mask: true,
+		      duration: 2000
+		    });
+		    return
+		  }
+		  this.liveType = true;
+		  console.log('录制', e)
+		  this.startPoint = e.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
+		  const options = {
+		    duration: 10000,
+		    sampleRate: 16000,
+		    numberOfChannels: 1,
+		    encodeBitRate: 48000,
+		    format: 'mp3',
+		    frameSize: 50
+		  }
+		  this.recorderManager.start(options); //开始录音
+		  this.recorderManager.onStart(() => {
+		    console.log('recorder start')
+		  })
+		  this.recorderManager.onError((res) => {
+		    console.log(res);
+		  })
+		  wx.showToast({
+		    title: "正在录音，上划取消发送",
+		    icon: "none",
+		    duration: 60000 //先定义个60秒，后面可以手动调用wx.hideToast()隐藏
+		  });
+		  this.sendLock = false; //长按时是不上锁的。
+		},
+		//取消
+		cancelButton(e) {
+		  console.log("移动")
+		  let self = this;
+		  let num = 0;
+		  for (let i = 0; i < self.trumpetList.length; i++) {
+		    if (self.trumpetList[i].type) {
+		      num++
+		    }
+		  }
+		  if (num == 0) {
+		    return
+		  }
+		  this.liveType = false;
+		  console.log('取消', e)
+		  let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
+		  if (Math.abs(moveLenght) > 50) {
+		    wx.showToast({
+		      title: "松开手指,取消发送",
+		      icon: "none",
+		      duration: 60000
+		    });
+		    this.sendLock = true; //触发了上滑取消发送，上锁
+		  } else {
+		    wx.showToast({
+		      title: "正在录音，上划取消发送",
+		      icon: "none",
+		      duration: 60000
+		    });
+		    this.sendLock = false; //上划距离不足，依然可以发送，不上锁
+		  }
+		},
+		//发送
+		sendButton(e) {
+		  console.log("松开")
+		  let self = this;
+		  let num = 0;
+		  for (let i = 0; i < self.trumpetList.length; i++) {
+		    if (self.trumpetList[i].type) {
+		
+		      num++
+		    }
+		  }
+		  if (num == 0) {
+		    return
+		  }
+		  this.liveType = false;
+		  console.log('发送', e)
+		  wx.hideToast(); //结束录音、隐藏Toast提示框
+		  this.recorderManager.stop(); //结束录音
+		  this.recorderManager.onStop((res) => {
+		    if (!this.sendLock) {
+		      console.log('1', this.recorderManager)
+		      this.uploadImg(res.tempFilePath);
+		    }
+		    console.log('停止录音', res.tempFilePath)
+		    console.log("sendLock", this.sendLock);
+		  })
+		},
+		//上传MP3
+		async uploadImg(tempFilePaths) {
+		  var self = this;
+		  uni.uploadFile({
+		    url: config.base_url + '/base/file/upload', //仅为示例，非真实的接口地址
+		    header: {
+		      'Authorization': uni.getStorageSync('token')
+		    },
+		    filePath: tempFilePaths,
+		    name: 'file',
+		    formData: {
+		      'user': 'test'
+		    },
+		    success: (uploadFileRes) => {
+		      let res = JSON.parse(uploadFileRes.data);
+		      if (res.code == 200) {
+		        console.log("上传成功", res)
+		        self.textParseUrlIps(config.base_url + '/' + res.data.url);
+		      } else {
+		        uni.showToast({
+		          title: res.msg,
+		          icon: "none",
+		          mask: true,
+		          duration: 2000
+		        });
+		      }
+		    },
+		    fail: err => {
+		      uni.hideLoading()
+		    },
+		    complete: () => {}
+		  });
+		},
+		//发送语音
+		async textParseUrlIps(text) {
+		  let self = this;
+		  let newList = [];
+		  for (let i = 0; i < self.trumpetList.length; i++) {
+		    if (self.trumpetList[i].type) {
+		      let obj = {
+		        sn: self.trumpetList[i].deviceSn,
+		        port: self.trumpetList[i].port,
+		        deviceIp: self.trumpetList[i].deviceIp,
+		        type: "",
+		        name: "",
+		        speed: "",
+		        params: {
+		          tid: "",
+		          vol: self.trumpetList[i].deviceVol,
+		          urls: []
+		        }
+		      };
+		      newList.push(obj);
+		    }
+		  }
+		  const {
+		    data
+		  } = await textParseUrlIps(newList, text)
+		  if (data.code == 200) {
+		    uni.showToast({
+		      title: '发送成功',
+		      icon: "none",
+		      mask: true,
+		      duration: 2000
+		    });
+		  }
+		},
+		handleClick(row,doType){
+		  let self=this;
+		  if( doType=='detail'){//详情	
+			  
+		  }
+		  
+		},
+		
+	  
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.earlyWarning{
+	height:100%;
+	display flex;
+	padding-bottom: 30rpx;
+	box-sizing: border-box;
+	.header{
+		width:750rpx;
+		height: 100rpx;
+		position: fixed;
+		top: 0rpx;
+		z-index: 100;
+		background: #fff;
+		.tabTitle_tow{
+			height: 100rpx;
+			 white-space: nowrap;
+			display: inline-flex;	
+			.tabTitle_tow_li{
+				
+				position: relative;
+				width:210rpx;
+				height: 100rpx;
+				text-align center;
+				padding-top: 26rpx;
+				box-sizing: border-box;
+				.tabTitle_tow_text{
+					display: inline-block;
+					font-size: 30rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #333333;
+					line-height: 46rpx;
+					position: relative;
+					&.on{
+						color:#0183FA;
+					}
+				}
+				.tabTitle_tow_across{
+					width: 50rpx;
+					height: 4rpx;
+					background: #0183FA;
+					border-radius: 2rpx;
+					margin-left: 33%;
+					display none;
+					&.on{
+						display block;
+					}
+				}
+		
+			}
+		}
+		
+	}
+	.video-max-box {
+	  width: 690rpx;
+	  height: 420rpx;
+	  margin: 116rpx 30rpx 20rpx;
+	  video {
+	    width: 690rpx;
+	    height: 420rpx;
+	  }
+	}
+	.broadcast {
+	  width: 690rpx;
+	  background: #FFFFFF;
+	  border-radius: 20rpx;
+	  padding:22rpx 30rpx 30rpx;
+	  box-sizing: border-box;
+	  margin: 20rpx 30rpx 0;
+	
+	  .broadcast_t {
+	    font-size: 30rpx;
+	    font-family: PingFang SC;
+	    font-weight: 500;
+	    color: #333333;
+	    line-height: 30rpx;
+	
+	    >label {
+	      font-size: 24rpx;
+	      font-family: PingFang SC;
+	      font-weight: 500;
+	      color: #999999;
+	      line-height: 30rpx;
+	      margin-left: 16rpx;
+	    }
+	  }
+	
+	  .trumpet-max-box {
+	    display: flex;
+	    justify-content: flex-start;
+	    margin-top: 22rpx;
+	    flex-wrap: wrap;
+	
+	    .trumpet-for-box {
+	      display: inline-block;
+	       width: auto;
+	      height: 60rpx;
+	      line-height: 60rpx;
+	      font-size: 24rpx;
+	      text-align: center;
+	      cursor: pointer;
+	      overflow: hidden;
+	      border: 1rpx solid #E0E0E0;
+	      border-radius: 10rpx;
+	      color: #E0E0E0;
+	      display: flex;
+	      justify-content: center;
+	      margin-right: 20rpx;
+	      margin-bottom: 10rpx;
+				padding: 0 12rpx;
+			  box-sizing: border-box;
+	      >img {
+	        width: 36rpx;
+	        height: 34rpx;
+	        margin: 12rpx 20rpx 0 25rpx;
+	      }
+	    }
+	
+	    .trumpet-color-a {
+	      border: 1px solid #0183FA;
+	      color: #0183FA;
+	    }
+	
+	    .trumpet-color-b {
+	      border: 1px solid #CCCCCC;
+	      color: #999;
+	    }
+	  }
+	
+	  .broadcast_m {
+	    width: 100%;
+	
+	    .broadcast_m_t {
+	      width: 142rpx;
+	      height: 142rpx;
+	      margin: 30rpx 0 0 258rpx;
+	      position: relative;
+	      font-size: 24rpx;
+	      font-family: PingFang SC;
+	      font-weight: 500;
+	      line-height: 170rpx;
+	      text-align: center;
+	
+	      >img {
+	        width: 142rpx;
+	        height: 142rpx;
+	        position: absolute;
+	
+	      }
+	
+	      >label {
+	        width: 100%;
+	        font-size: 24rpx;
+	        font-family: PingFang SC;
+	        font-weight: 500;
+	        color: #0183FA;
+	        line-height: 24rpx;
+	        display: inline-block;
+	        text-align: center;
+	        position: absolute;
+	        top: 76rpx;
+	      }
+	
+	      /* 按下 */
+	      .press_color {
+	        color: #FFFFFF;
+	      }
+	
+	      /* 松开 */
+	      .slip_color {
+	        color: #0183FA;
+	      }
+	    }
+	
+	    .broadcast_m_t_back_a {
+	      background: url(@/images/icon_sskz_skfs.png);
+	      background-size: 100%;
+	      color: #FFFFFF;
+	    }
+	
+	    .broadcast_m_t_back_b {
+	      background: url(@/images/icon_sskz_azsh.png);
+	      background-size: 100%;
+	      color: #0183FA;
+	    }
+	
+	    .broadcast_m_b {
+	      font-size: 24rpx;
+	      font-family: PingFang SC;
+	      font-weight: 500;
+	      color: #999999;
+	      line-height: 24rpx;
+	      text-align: center;
+	      margin-top: 14rpx;
+	    }
+	  }
+	
+	  /* 疏散按钮 */
+	  .evacuation-button-box {
+	    width: 650rpx;
+	    height: 100rpx;
+	    background: #0183FA;
+	    color: #fff;
+	    text-align center;
+	    line-height: 100rpx;
+	    font-size: 28rpx;
+	    margin: 88rpx auto 0;
+	    border-radius: 20rpx;
+	  }
+	}
+}
+</style>