<template>
	<view class="fullHeight">
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
		<headers :showBack="true">
			<view class="headerName">
				环境监测
			</view>
		</headers>
		<view class="menuBox">
			<view class="menuItem" @click="changeMenu(0)" :class="tabIndex==0?'active':''">
				数据总览
			</view>
			<view class="menuItem" @click="changeMenu(1)" :class="tabIndex==1?'active':''">
				数据趋势
			</view>
			<view class="menuItem" @click="changeMenu(2)" :class="tabIndex==2?'active':''">
				报警列表
			</view>
		</view>
		<!-- 数据总览 -->
		<view class="" v-if="tabIndex==0">
			<view class="blockBox">
				<view class="aqiBox">
					空气质量 <text class="txt">{{aqiData.analysisData}}</text><text class="txt">{{aqiData.analysisType}}</text>
				</view>
				<view class="numContent">
					<view class="numBox numBox1">
						<view class="num">
							{{environmentDevList.length}}
						</view>
						<view class="label">
							已有设备数量
						</view>
					</view>
					<view class="numBox">
						<view class="num">
							{{onlineDevNum}}
						</view>
						<view class="label">
							正常工作设备数量
						</view>
					</view>
				</view>
			</view>
			<view class="selectContent">
				<picker mode="selector" :range="environmentDevList" @change="changeDev" range-key="deviceName" :value="devIndex">
					<view class="selectVideoBox">
						<text class="videoName" v-if="environmentDevList.length>0">{{environmentDevList[devIndex].deviceName}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="blockBox">
				<view class="tipsBox">
					<image src="/static/tips.png" class="alarmIcon"></image>
					<text>PM10已超标！请开启喷淋装置和防尘措施</text>
				</view>
				<view class="realTimeBox">
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.temperature}} °C
							</view>
							<view class="label">
								温度
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.humidity}} %
							</view>
							<view class="label">
								湿度
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.noise}} db
							</view>
							<view class="label">
								噪音
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.windspeed}} m/s
							</view>
							<view class="label">
								风速
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.pm10}} ug/m³
							</view>
							<view class="label">
								PM10
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.pm25}} ug/m³
							</view>
							<view class="label">
								PM2.5
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="COMPANY != 'longguang'" class="blockTitle">
				雾炮喷淋
			</view>
			<view v-if="COMPANY != 'longguang'" class="blockBox" style="padding-bottom: 20px;">
				<view class="tableBox">
					<view class="tableHead">
						<view class="item">设备名称</view>
						<!-- <view class="item">设备编号</view> -->
						<view class="item">操作</view>
					</view>
					<view v-for="(item,index) in sprayDevList" :key="index" class="tableBody">
						<view class="item primaryText deviceName" @click="goTimingTaskFn(item.id)">{{item.deviceName}}</view>
						<!-- <view class="item">{{item.deviceId}}</view> -->
						<view class="item operateBar">
							<!-- <image @click="commandFn(1,item.deviceId)" v-if="item.switchStatus" src="/static/close.png" class="switchIcon"></image>
							<image @click="commandFn(2,item.deviceId)" v-else src="/static/open.png" class="switchIcon"></image> -->
							<text class="operateBtn open" @click="commandFn(1,item.deviceId,item.id,item.deviceType)">启动</text>
							<text class="operateBtn open10" @click="commandFn(3,item.deviceId,item.id,item.deviceType)">启动10分钟</text>
							<text class="operateBtn close" @click="commandFn(2,item.deviceId,item.id,item.deviceType)">停止</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="" v-if="tabIndex==1">
			<view class="selectContent">
				<picker mode="selector" :range="environmentDevList" @change="changeDev" range-key="deviceName" :value="devIndex">
					<view class="selectVideoBox">
						<text class="videoName" v-if="environmentDevList.length>0">{{environmentDevList[devIndex].deviceName}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="blockBox">
				<view class="chartTitle">
					pm2.5 (ug/m³)
				</view>
				<u-charts canvas-id="lineChart1" chartType="line" :opts="lineChartData1" ref="lineChart1" :cWidth="315" :cHeight="200" :legends="false"/>
			</view>
			<view class="blockBox">
				<view class="chartTitle">
					pm10 (ug/m³)
				</view>
				<u-charts canvas-id="lineChart2" chartType="line" :opts="lineChartData2" ref="lineChart2" :cWidth="315" :cHeight="200" :legends="false"/>
			</view>
			<view class="blockBox">
				<view class="chartTitle">
					风速 (m/s)
				</view>
				<u-charts canvas-id="lineChart3" chartType="line" :opts="lineChartData3" ref="lineChart3" :cWidth="315" :cHeight="200" :legends="false"/>
			</view>
			<view class="blockBox">
				<view class="chartTitle">
					噪音 (db)
				</view>
				<u-charts canvas-id="lineChart4" chartType="line" :opts="lineChartData4" ref="lineChart4" :cWidth="315" :cHeight="200" :legends="false"/>
			</view>
		</view>
		<view class="" v-if="tabIndex==2">
			<view class="selectContent selectContent2">
				<picker mode="selector" :range="environmentDevList" @change="changeDev" range-key="deviceName" :value="devIndex">
					<view class="selectVideoBox">
						<text class="videoName" v-if="environmentDevList.length>0">{{environmentDevList[devIndex].deviceName}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker>
				<picker mode="selector" :range="alarmTypeList" @change="changeAlarmType" range-key="alarmType" :value="alarmTypeIndex" style="margin-left:15px">
					<view class="selectVideoBox">
						<text class="videoName">{{alarmTypeList[alarmTypeIndex].alarmType}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="blockBox" v-for="(item,index) in alarmList" :key="index">
				<view class="alarmItem">
					<text class="label">报警类型：</text><text class="value">{{item.alarmTypeName}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">报警设备：</text><text class="value">{{item.deviceName}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">报警时间：</text><text class="value">{{item.time|formatDate}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">报警数值：</text><text class="value">{{item.alarmValue}}</text>
				</view>
			</view>
			<view class="placeholderBox" v-if="alarmList.length==0">
				<image src="/static/noData.png" mode="" class="noDataImg"></image>
				<view class="text">
					暂无报警
				</view>
			</view>
		</view>
		<dialogs ref="dialogs">
			 <template v-slot:content>
				 <view class="formBox2">
					 <view class="">
					 	为确保安全，启动雾炮机前，请确认：
					 </view>
					 <view class="" style="margin-left: 10px;margin-top: 10px;">
					 	1：水箱有足够的水量
					 </view>
					 <view class="" style="margin-left: 10px;">
					 	2：设备上或周边无人作业
					 </view>
					 <view class="" v-if="operateObj.operateType==3" style="margin-top: 20px;">
					 	注：10分钟后自动停止
					 </view>
					 <button type="primary" class="btn submitBtn" :class="seconds==0?'':'grey'" @click="operateFn">
						 启动<text v-if="seconds>0">({{seconds}}s)</text>
					 </button>
					 <view class="closeBtn" @click="closeDialogFn">
					 	取消
					 </view>
				 </view>
			 </template>
		</dialogs>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/component.vue';
	import headers from "../../../components/headers/headers.vue"
	import dialogs from "../../../components/dialog/dialog.vue"
	import {GetDateStr} from "../../../static/js/util.js"
	export default {
		components:{uCharts,dialogs},
		data() {
			return {
				projectDetail:'',
				aqiData:{
					analysisData: 0,
					analysisType: "--"
				},
				sprayDevList:[],
				environmentDevList:[],
				devIndex:0,
				realTimeData:{
					crc: '--',
					humidity: '--',
					noise: '--',
					plateHumidity: '--',
					plateTemperature: '--',
					pm10: '--',
					pm25: '--',
					pressure: '--',
					temperature: '--',
					tsp: '--',
					voltage: '--',
					winddirectionName: '--',
					windspeed: '--',
				},
				alarmList:[],
				dustData_24:[],
				currentDevDetail:{},
				searchDate:'',
				lineChartData1:{
					categories: [],
					series:[{
							name: "pm2.5",
							data: []
					} ]
				},
				lineChartData2:{
					categories: [],
					series: [{
							name: "pm10",
							data: []
					}]
				},
				lineChartData3:{
					categories: [],
					series: [{
							name: "风速",
							data: []
					}]
				},
				lineChartData4:{
					categories: [],
					series: [{
							name: "噪音",
							data: []
					}]
				},
				tabIndex:0,
				alarmTypeIndex:0,
				alarmTypeList:[{
					alarmType:'全部报警类型',
					id:''
				}],
				onlineDevNum:0,
				timer:null,
				operateObj:{
					operateType:'',
					deviceId:'',
					id:''
				},
				seconds: 0
			};
		},
		mounted() {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			this.searchDate=GetDateStr(0,'-')
			this.getEnvironmentDev()
			this.getAQI()
			this.getSprayDev()
			// this.$refs.lineChart1.changeData('lineChart1',this.lineChartData1)
		},
		 //时间戳的处理    
        filters: {
            formatDate: function(value) {
                var date = new Date();
                //date.setTime(value);
                var month = date.getMonth() + 1;
                var hours = date.getHours();
                if (hours < 10)
                    hours = "0" + hours;
                var minutes = date.getMinutes();
                if (minutes < 10)
                    minutes = "0" + minutes;
                var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
                    " " + hours + ":" + minutes;
                return time;
            }
 
        },
		methods:{
			goTimingTaskFn(id){
				uni.navigateTo({
					url:'./timingTask/list?id='+id
				})
			},
			closeDialogFn(){
				clearInterval(this.timer)
				this.$refs.dialogs.hideFn()
			},
			commandFn(operateType,deviceId,id,deviceType){
				// var that = this
				this.operateObj.operateType=operateType
				this.operateObj.deviceId=deviceId
				this.operateObj.id=id
				if((operateType==1||operateType==3)&&deviceType==2){
					this.seconds=3
					this.timer=setInterval(()=>{
						if(this.seconds>0){
							this.seconds--
						}else{
							clearInterval(this.timer)
						}
					},1000)
					this.$refs.dialogs.showFn()
					// uni.showModal({
					// 	title:'提示',
					// 	content:'启动雾炮机前请确保周围人员安全！',
					// 	confirmText:'启动',
					// 	success(res) {
					// 		if(res.confirm){
					// 			that.operateFn(operateType,deviceId)
					// 		}
					// 	}
					// })
				}else{
					this.seconds=0
					this.operateFn()
				}
				
			},
			operateFn(){
				// this.insertTaskFn()
				console.log(this.operateObj.operateType,this.operateObj.deviceId,this.seconds)
				if(this.operateObj.operateType==1&&this.seconds>0){
					return
				}
				var that = this
				this.sendRequest({
					url: "xmgl/sprayOperateData/add",
					data: {
						projectSn: this.projectDetail.projectSn,
						operateType: this.operateObj.operateType,
						deviceId: this.operateObj.deviceId
					},
					method: "POST",
					success(res) {
						if(that.operateObj.operateType==3){
							that.insertTaskFn()
						}else{
							that.closeDialogFn()
							uni.showToast({
								title:(that.operateObj.operateType==1?'启动':'停止')+'成功'
							})
						}
					}
				})
			},
			//插入一条定时任务
			insertTaskFn() {
				var that = this
				var params = {}
				params.executeTime=this.getMiniutesFn()
				params.isRepeat=1
				params.repeatExecuteWeek = '';
				params.sprayDevId=this.operateObj.id
				params.switchType=1
				var url = 'xmgl/sprayDevTimingTask/add'
				
				this.sendRequest({
					url: url,
					data: params,
					method: "POST",
					success(res) {
						uni.showToast({
							title: '启动10分钟成功！'
						})
						that.closeDialogFn()
					}
				})
			},
			//获取10分钟后的时间
			getMiniutesFn(){
				var date=new Date();     //1. js获取当前时间
				var min=date.getMinutes();  //2. 获取当前分钟
				date.setMinutes(min+10);  //3. 设置当前时间+10分钟：把当前分钟数+10后的值重新设置为date对象的分钟数
				var y = date.getFullYear();
				var m = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1);
				var d = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate();
				var h = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
				var f = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
				var s = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
				var formatdate = h + ":" + f;
				return formatdate
			},
			changeAlarmType(e){
				this.alarmTypeIndex = e.target.value
				this.getAlarmData()
			},
			changeMenu(index){
				this.tabIndex=index;
				this.loadData()
				if(this.tabIndex==0){
					this.getAQI()
					this.getSprayDev()
				}
			},
			loadData(){
				if(this.environmentDevList.length>0){
					switch (this.tabIndex){
						case 0:
							this.getRealTimeData()
							break;
						case 1:
							this.getDustData()
							break;
						case 2:
							this.getAlarmType()
							this.getAlarmData()
							break;
					}
				
					
				}
			},
			changeDev(e){
				this.devIndex = e.target.value
				this.currentDevDetail=this.environmentDevList[this.devIndex]
				this.loadData()
			},
			//获取aqi
			getAQI(){
				var that = this
				this.sendRequest({
					url: "xmgl/airQualityAnalysis/getCurrentDayAirQuality",
					data: {
						projectSn: this.projectDetail.projectSn
					},
					method: "POST",
					success(res) {
						that.aqiData = res.result
					}
				})
			},
			//获取数据趋势
			getDustData(){
				var that = this
				this.sendRequest({
					url: "xmgl/dustNoiseData/selectDustNoiseData",
					data: {
						projectSn: this.projectDetail.projectSn,
						searchDate: this.searchDate,
						deviceId: this.currentDevDetail.deviceId
					},
					method: "POST",
					success(res) {
						var DATA = res.result
						var xdata=[],ydata1=[],ydata2=[],ydata3=[],ydata4=[];
						DATA.forEach(element=>{
							xdata.push(element.uploadDate.split(' ')[1])
							if(element.pm25){
								ydata1.push(element.pm25)
							}else{
								ydata1.push(0)
							}
							if(element.pm10){
								ydata2.push(element.pm10)
							}else{
								ydata2.push(0)
							}
							if(element.windspeed){
								ydata3.push(element.windspeed)
							}else{
								ydata3.push(0)
							}
							if(element.noise){
								ydata4.push(element.noise)
							}else{
								ydata4.push(0)
							}
							
							// ydata2.push(element.pm10)
							// ydata3.push(element.windspeed)
							// ydata4.push(element.noise)
						})
						that.lineChartData1.categories=xdata
						that.lineChartData2.categories=xdata
						that.lineChartData3.categories=xdata
						that.lineChartData4.categories=xdata
						
						that.lineChartData1.series = [{
							name: "pm2.5",
							data: ydata1
						}]
						that.lineChartData2.series = [{
							name: "pm10",
							data: ydata2
						}]
						that.lineChartData3.series = [{
							name: "风速",
							data: ydata3
						}]
						that.lineChartData4.series = [{
							name: "噪音",
							data: ydata4
						}]
						
						// that.$refs.lineChart1.changeData('lineChart1',that.lineChartData1)
						// that.$refs.lineChart2.changeData('lineChart2',that.lineChartData2)
						// that.$refs.lineChart3.changeData('lineChart3',that.lineChartData3)
						// that.$refs.lineChart4.changeData('lineChart4',that.lineChartData4)
					}
				})
			},
			//获取报警列表
			getAlarmData(){
				var that = this
				this.sendRequest({
					url: "xmgl/environmentAlarm/list",
					data: {
						projectSn: this.projectDetail.projectSn,
						pageNo: 1,
						pageSize: 100,
						alarmTypeId:this.alarmTypeList[this.alarmTypeIndex].id,
						deviceId: this.currentDevDetail.deviceId
					},
					method: "POST",
					success(res) {
						that.alarmList = res.result.records
					}
				})
			},
			//获取报警类型
			getAlarmType(){
				if(this.alarmTypeList.length==1){
					var that = this
					this.sendRequest({
						url: "xmgl/environmentAlarmType/list",
						data: {},
						method: "POST",
						success(res) {
							that.alarmTypeList=that.alarmTypeList.concat(res.result)
						}
					})
				}
				
			},
			//获取雾炮喷淋
			getSprayDev(){
				var that = this
				this.sendRequest({
					url: "xmgl/sprayDev/list",
					data: {
						projectSn: this.projectDetail.projectSn
					},
					method: "POST",
					success(res) {
						that.sprayDevList = res.result
						// that.timer=setTimeout(()=>{
						// 	that.getSprayDev()
						// },1000)
					}
				})
			},
			//获取扬尘设备
			getEnvironmentDev(){
				var that = this
				this.sendRequest({
					url: "xmgl/environmentDev/list",
					data: {
						projectSn: this.projectDetail.projectSn
					},
					method: "POST",
					success(res) {
						that.environmentDevList = res.result
						if(res.result.length>0){
							for (var i = 0; i < res.result.length; i++) {
								if(res.result[i].devOnline==1){
									that.onlineDevNum+=1
								}
							}
							that.currentDevDetail=res.result[0]
							that.getRealTimeData()
						}
						
					}
				})
			},
			//获取实时数据
			getRealTimeData(){
				var that = this
				this.sendRequest({
					url: "xmgl/dustNoiseData/getRealTimeDustNoiseData",
					data: {
						projectSn: this.projectDetail.projectSn,
						deviceId: this.currentDevDetail.deviceId
					},
					method: "POST",
					success(res) {
						if(res.result){
							that.realTimeData = res.result
						}else{
							that.realTimeData={
								crc: '--',
								humidity: '--',
								noise: '--',
								plateHumidity: '--',
								plateTemperature: '--',
								pm10: '--',
								pm25: '--',
								pressure: '--',
								temperature: '--',
								tsp: '--',
								voltage: '--',
								winddirectionName: '--',
								windspeed: '--',
							}
						}
						
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.menuBox{
	display: flex;
	align-items: center;
	height: 36px;
	font-size: 15px;
	background-color: white;
	margin-top: -1px;
	position: relative;
	z-index: 999;
	border-bottom: 1px solid rgba(194, 194, 194, 0.2);
	.menuItem{
		flex: 1;
		text-align: center;
		&.active{
			color: rgba(43, 141, 243, 1);
		}
	}
}
.blockBox{
	box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
	border-radius: 8px;
	margin: 15px;
	padding: 15px;
}
.numContent{
	text-align: center;
}
.numBox{
	width: 130px;
	height: 50px;
	border-radius: 8px;
	background-image: linear-gradient(rgba(134, 145, 252, 1),rgba(16, 97, 254, 1));
	font-size: 12px;
	color: white;
	text-align: center;
	display: inline-block;
	.num{
		font-size: 15px;
		margin:5px 0 0px;
		
	}
}
.numBox1{
	margin-right: 10px;
}
.aqiBox{
	font-size: 14px;
	opacity: 0.8;
	text-align: center;
	margin-bottom: 10px;
	.txt{
		opacity: 1;
		margin-left: 15px;
		font-weight: bold;
	}
}
	.selectContent {
		text-align: center;
		margin-top: 15px;
	}

	.selectVideoBox {
		border: 1px solid rgba(42, 43, 91, 0.2);
		border-radius: 18px;
		height: 35px;
		font-size: 15px;

		display: inline-block;

		.videoName {
			padding: 0 12px 0 15px;
			// border-right: 1px solid rgba(42, 43, 91, 0.2);
			line-height: 35px;
			height: 35px;
		}

		.arrow {
			padding: 0 12px 0 2px;
		}
	}
.arrow {
		margin-left: 10px;
	}
.tipsBox{
	color: rgba(236, 150, 72, 1);
	font-size: 14px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
}
.realTimeBox{
	overflow: hidden;
	.item{
		float: left;
		width: 33.33%;
		.itemInner{
			// box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
			border: 1px solid rgba(220, 220, 220, 0.3);
			margin: 3.5px;
			font-size: 12px;
			text-align: center;
			padding: 7px 0;
		}
		.num{
			font-size: 15px;
			color: rgba(43, 141, 243, 1);
		}
	}
}
.alarmIcon{
	width: 20px;
	height: 20px;
}
.switchIcon{
	width: 50px;
	height: 29px;
}
.blockTitle{
	text-align: center;
}
.tableBox{
	font-size: 14px;
	width: 100%;
	.tableHead{
		font-weight: bold;
		display: flex;
		border-bottom: 1px solid rgba(42, 43, 91, 0.1);
		.item{
			flex: 1;
			padding: 0 0 10px;
			text-align: center;
			&:last-child{
				flex: 2;
			}
		}
	}
	.tableBody{
		// display: flex;
		// align-items: center;
		// .item{
		// 	flex: 1;
		// 	text-align: center;
		// 	justify-content: center;
		// 	padding: 10px 0 0px;
		// 	&:last-child{
		// 		flex: 2;
		// 	}
		// }
		.deviceName{
			padding: 15px 10px 5px;
		}
		.operateBar{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
}
.chartTitle{
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 15px;
}
.selectContent2{
	display: flex;
	align-items: center;
	justify-content: center;
}
.alarmItem{
	font-size: 14px;
	.label{
		opacity: 0.6;
	}
}
.operateBtn{
	// width: 40px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	color: white;
	display: inline-flex;
	padding: 0 10px;
	flex: 1;
	justify-content: center;
}
.operateBtn.close{
	background-color: #e65231;
}
.operateBtn.open{
	background-color: #427cec;
	margin-right: 20px;
}
.open10{
	background-color: #5cbb45;
	margin-right: 20px;
}
.closeBtn{
	font-size: 15px;
	color: rgba(42, 43, 91, 0.5);
	padding: 10px 0;
	text-align: center;
}
.grey{
	opacity: 0.6;
}
</style>
