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="pageType==0">甲烷气体泄露-中风险</view>
		<!-- 化学品 -->
		<view class="header_tow" v-if="pageType==1">化学品违规带离</view>
		<!-- 气瓶 -->
		<view class="header_three" v-if="pageType==2">气瓶违规带离</view>
		<!-- 算法识别 -->
		<view class="header_four" v-if="pageType==3">多人未穿戴实验服</view>
		<!-- 预案报警 -->
		<view class="site" v-if="pageType==0">
			<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
			<text>一号实验室</text>
			<text></text>
			<text>一号楼二楼C区C111</text>
		</view>
		<!-- 化学品 -->
		<view class="site_tow" v-if="pageType==1 || pageType==2 || pageType==3">
			<view class="site_tow_t">
				<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
				<text>2023-10-1014:00</text>
			</view>
			<view class="site_tow_b">
				<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
				<text>一号实验室</text>
				<text></text>
				<text>一号楼二楼C区C111</text>
			</view>
		</view>
		<!-- 预案报警 -->
		<view class="basics" v-if="pageType==0">
			<view class="small_title"><text></text><text>风险概况</text></view>
			<view class="basics_li" style="margin-top:20rpx;">
				<text>发生时间：</text>
				<text>10-12 12:00:56至12:03:03 </text>
			</view>
			<view class="basics_li">
				<text>持续时间：</text>
				<text>30秒</text>
			</view>
			<view class="basics_li">
				<text>风险响应人员：</text>
				<text>曹秀康、杨虎城、刘波 </text>
			</view>
			<view class="basics_li">
				<text>实验室内人员：</text>
				<text>刘然、李茶、周瑶瑶、李娇、 李雪、陈记、李玉玉</text>
			</view>
		</view>
		<!-- 化学品 -->
		<view class="basics" v-if="pageType==1">
			<view class="small_title"><text></text><text>化学品信息</text></view>
			<view class="basics_li" style="margin-top:20rpx;">
				<text>化学品名称</text>
				<text></text>
			</view>
			<view class="basics_li">
				<text>存放位置：</text>
				<text>3号柜化学品余量：100g</text>
			</view>
			<view class="basics_li">
				<text>化学品余量：</text>
				<text>100g</text>
			</view>
			<view class="basics_li">
				<text>申领人：</text>
				<text>曹秀康</text>
			</view>
			<view class="basics_li">
				<text>申领时间：</text>
				<text>10-10 10:00:23</text>
			</view>
			<view class="basics_li">
				<text>过期时间：</text>
				<text>10-10 10:00:23</text>
			</view>
		</view>
		<!-- 气瓶 -->
		<view class="basics" v-if="pageType==2">
			<view class="small_title"><text></text><text>气瓶信息</text></view>
			<view class="basics_li" style="margin-top:20rpx;">
				<text>气体名称</text>
				<text></text>
			</view>
			<view class="basics_li">
				<text>气体余量：</text>
				<text>10L</text>
			</view>
			<view class="basics_li">
				<text>气瓶规格：</text>
				<text>100g/瓶 </text>
			</view>
			<view class="basics_li">
				<text>申领人：</text>
				<text>刘然</text>
			</view>
			<view class="basics_li">
				<text>申领时间：</text>
				<text>10-10 10:00:23</text>
			</view>
		</view>
		<view class="note" v-if="pageType==0 || pageType==3">
			<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 class="note_li">
				<text>李秀丽（安全责任人）</text>
				<view class="note_li_r"><img  src="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
			</view>
			<view class="note_li">
				<text>周燕（安全责任人）</text>
				<view class="note_li_r"><img  src="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
			</view>
		</view>
		<view class="note">
			<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="picture">
			<view class="small_title"><text></text><text>报警抓拍</text></view>
			<view class="picture_b" @click="lockImg(item.uploadDtoList)">
				<img  src="@/images/icon_yjxx_ytz.png"/>
				<!-- <img  :src="baseUrl+imgItem.fileUrl"   v-for="(imgItem,imgIndex) in item.uploadDtoList"/> -->
			</view>
		</view>
		<view class="bottom_btn">查看监控</view>
	</scroll-view>	
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import {checkManageList,conditionCollegeInfo} from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
		pageType:3,//0预案报警信息 1化学品 2气瓶  3算法识别
		//列表请求参数
		getData:{
			pageNum:1,
			pageSize:20,
		},
		total:0,
		
	}
  },
  onLoad(option) {
	  
  },
  onShow() {
	
  },
  mounted(){
	 if(this.pageType==0){
		uni.setNavigationBarTitle({
			title:'预案报警信息'
		})
	 }else if(this.pageType==1){
		uni.setNavigationBarTitle({
			title:'化学品预警信息'
		}) 
	 }else if(this.pageType==2){
		uni.setNavigationBarTitle({
			title:'气瓶预警信息'
		}) 
	 }else if(this.pageType==3){
		uni.setNavigationBarTitle({
			title:'算法识别预警信息'
		}) 
	 }
	  
  },
  methods: {
		
		//滚动事件
		scrollGet(){
			let self=this;
			
		},
		//查看图片
		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) {},
			})
		},
		
		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;
	.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;
			>img{
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin-right: 38rpx;
				margin-bottom: 10rpx;
			}
			>img:nth-of-type(3n+3){
				margin-right: 0rpx;
			}
		}
	}
	.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>