bigDataApp/pages/cb/equip-detail/equip-detail.vue

<template>
	<view>
		<view :class="['info',equipInfo.device_status==1?'on':'off']">
			<view class="">
				设备ID：{{equipInfo.device_id}}
			</view>
			<view class="">
				设备名称：{{equipInfo.device_name}}
			</view>
			<view class="">
				设备类型：{{equipInfo.type|equipType}}
			</view>
			<view class="">
				最新上报时间：{{equipInfo.status_time | timeFormat}}
			</view>
			<view class="">
				设备地址：{{equipInfo.address}}
			</view>
			<view v-if="type==7" @click="setTime(equipInfo.d_id)">
			<text space="emsp">载玻片、培养液更换时间</text> <u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon>
			</view>
			<view v-if="type==4" @click="addYx(equipInfo.d_id)">
			<text space="emsp">添加诱芯</text> <u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon>
			</view>
			<u-popup v-model="setTimeShow" mode="center" width="600rpx" >
				<u-field
					label="载玻片更换时间"
					placeholder="选择日期"
					label-width='240'
					required
					:error-message="glassErr"
					v-model="glass_slide_time"
					@click="glass_show=true"
				>
				</u-field>
				<u-field
					label="培养液更换时间"
					placeholder="选择日期"
					label-width='240'
					required
					:error-message="culErr"
					v-model="cultivate_time"
					@click="cultivate_show=true"
				>
				</u-field>
				<view class="btn-box">
					<u-button @click="setTimeSubmit" size="mini" type="success">确定</u-button>
				</view>
				<u-calendar v-model="glass_show" mode="date" @change="timeChange($event,'glass')"></u-calendar>
				<u-calendar v-model="cultivate_show" mode="date" @change="timeChange($event,'cultivate')"></u-calendar>
			</u-popup>
			<u-popup v-model="yxShow" mode="center" width="600rpx" >
				<u-field
					label="监测害虫名称"
					label-width='240'
					required
					:error-message="xyErr"
					v-model="decoy"
				>
				</u-field>
				<view class="btn-box">
					<u-button @click="yxSubmit" size="mini" type="success">确定</u-button>
				</view>
			</u-popup>
			<u-toast ref="toast" />
		</view>
		
		<view class="equip_part">
			<template v-if="equipInfo.type==7">
				<view  class="item1" v-for="item in bzy" @click="partClick(item.path)">
					<image :src="item.icon" mode="widthFix"></image>
					<view class="">
						{{item.tex}}
					</view>
				</view>
			</template>
			<template v-else>
				<view  class="item2" v-for="item in curEquip" @click="partClick(item.path)">
					<image :src="item.icon" mode="widthFix"></image>
					<view class="">
						{{item.tex}}
					</view>
				</view>
			</template>
		</view>
		<view class="tit">
			实时数据
		</view>
		<view class="newState">
			<view class="item" v-for="item in curState">
				<image :src="item.icon" mode="widthFix"></image>
				<view class="info-con">
					<view class="active">
						{{item.txt}}
					</view>
					<view class="val" >
						{{item.value | formatValue(item.txt,type)}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:null,//设备类型
				device_status:null,
				equipInfo:{},
				cbd:[
					{
						icon:'/static/image/cb/1.png',
						tex:'查看图片',
						path:'',
					},	{
						icon:'/static/image/cb/2.png',
						tex:'历史数据',
						path:'',
					},	{
						icon:'/static/image/cb/3.png',
						tex:'害虫统计',
						path:'',
					},	{
						icon:'/static/image/cb/4.png',
						tex:'设备控制',
						path:'/pages/cb/cbd/equip-set/equip-set',
					},	{
						icon:'/static/image/cb/5.png',
						tex:'短信预警',
						path:'',
					},	{
						icon:'/static/image/cb/6.png',
						tex:'sim卡详情',
						path:'',
					}
				],
				bzy:[
					{
						icon:'/static/image/cb/4.png',
						tex:'设备控制',
						path:'/pages/cb/bzy/equip-set/equip-set'
					},{
						icon:'/static/image/cb/1.png',
						tex:'查看图片',
						path:''
					},{
						icon:'/static/image/cb/2.png',
						tex:'历史数据',
						path:''
					},{
						icon:'/static/image/cb/6.png',
						tex:'sim卡详情',
						path:''
					}
				],
				xy:[
					{
						icon:'/static/image/cb/4.png',
						tex:'设备控制',
						path:'/pages/cb/xy/equip-set/equip-set'
					},{
						icon:'/static/image/cb/6.png',
						tex:'sim卡详情',
						path:''
					},{
						icon:'/static/image/cb/2.png',
						tex:'历史数据',
						path:''
					}
				],
				newState:{},//设备最新状态
				setTimeShow:false,
				glass_show:false,
				cultivate_show:false,
				cultivate_time: "",
				glass_slide_time: "",
				glassErr:'',
				culErr:'',
				yxShow:false,//诱芯弹框
				xyErr:'',
				decoy:''
			}
		},
		computed:{
			curEquip(){
				switch(this.type){
					case 3:
						return this.cbd;
					case 7:
						return this.bzy;
					case 4:
						return this.xy
				}
			},
			curState(){
				switch(this.type){
					case 3:
						let blbs=""//灯管状态
						  if (this.newState.lamp != undefined) {
							if (this.newState.ws == 1) {
							  if (this.newState.lamp == 1) {
								blbs = "工作中";
							  } else if (dht.lux == 0) {
								blbs = "N/A（未检测到传感器）";
							  } else {
								blbs = "异常";
							  }
							} else {
							  blbs = "关闭";
							}
						  } else {
							blbs = "--";
						  }
						return [
						{
						icon:'/static/image/cb/icon02.png',
						txt:'在线状态',
						value:this.device_status==1?'在线':'离线',
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'开关状态',
						value:this.newState.ds==1?'关机':'开机'
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'通道状态',
						value:this.newState.upds==1?'落虫':'排水'
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'加热状态',
						value:this.newState.hs==1?'加热':'正常'
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'环境温度(℃)',
						value:this.newState.at
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'环境湿度(%)',
						value:this.newState.ah
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'信号强度',
						value:this.newState.csq
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'设备版本',
						value:this.newState.dver
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'雨控状态',
						value:this.newState.rps==1?"雨控":'正常'
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'温控状态',
						value:this.newState.tps==1?"温控":'正常'
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'光控状态',
						value:this.newState.lps==1?"光控":'正常'
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'灯管状态',
						value:blbs
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'上仓门',
						value:this.newState.upds==1?"打开":'关闭'
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'下仓门',
						value:this.newState.dnds==1?"打开":'关闭'
						}
					]
					case 7:
						return [{
						icon:'/static/image/cb/icon02.png',
						txt:'在线状态',
						value:this.device_status==1?'在线':'离线',
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'设备开关',
						value:this.newState.on_off==1?'开启':'关闭'
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'摄像头状态',
						value:this.newState.usb_sta==1?'异常':'正常'
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'当前电压',
						value:this.newState.v_bat
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'环境温度(℃)',
						value:this.newState.at
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'环境湿度(%)',
						value:this.newState.ah
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'信号强度',
						value:this.newState.csq
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'已培养时间',
						value:this.newState.staytime
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'设备版本',
						value:this.newState.dver
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'保温仓当前温度',
						value:this.newState.dver
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'保温仓设定温度',
						value:this.newState.dver
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'经度',
						value:this.newState.lng
						},{
						icon:'/static/image/cb/icon02.png',
						txt:'纬度',
						value:this.newState.lat
						},];
					case 4:
						return [{
						icon:'/static/image/cb/icon02.png',
						txt:'在线状态',
						value:this.device_status==1?'在线':'离线',
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'设备开关',
						value:this.newState.ds==1?'开启':'关闭'
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'工作状态',
						value:this.newState.ws==1?'工作':' 待机'
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'环境温度(℃)',
						value:this.newState.at
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'环境湿度(%)',
						value:this.newState.ah
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'充电电压',
						value:this.newState.cv
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'电池电压',
						value:this.newState.bv
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'信号强度',
						value:this.newState.csq
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'设备版本',
						value:this.newState.dver
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'充电状态',
						value:this.newState.cs==1?'充电':'正常'
						},
						{
						icon:'/static/image/cb/icon02.png',
						txt:'电池状态',
						value:this.newState.bs
						},
						]
				}
			}
		},
		filters:{
			equipType(type){
				switch(type){
					case 3:
						return "虫情测报灯";
					case 7:
						return "孢子仪";
					case 4:
						return "性诱测报"
					
				}
			},
			formatValue(val,a1,a2){
				if(a2==4&&a1=="电池状态"){
					switch(val){
						case 0:
							return '正常';
							break;
						case 1:
							return '欠压';
							break;
						case 2:
							return '过压';
							break;
					}
				}else{
					
					return val?val:'无'
				}
			}
		},
		onLoad(option){
			this.equipInfo=JSON.parse(option.info)
			this.type=this.equipInfo.type
			this.device_status=this.equipInfo.device_status
			this.getState()
			console.log(this.equipInfo)
		},
		methods: {
			async getState(){
				const res=await this.$myRequest({
					url:'/api/api_gateway?method=forecast.worm_lamp.device_history_data',
					data:{
						device_type_id:this.equipInfo.type,
						device_id:this.equipInfo.device_id,
						page: 1,
						page_size:1,
					}
				})
				this.newState=res.data[0].d_h_t
			},
			partClick(path){
				console.log(this.equipInfo)
				uni.navigateTo({
					url:path+ '?d_id=' + this.equipInfo.d_id
				});
			},
			async setTime(d_id){
				const res=await this.$myRequest({
					url:'/api/api_gateway?method=device.device_manage.get_spore_time',
					data:{
						device_type_id:this.type,
						d_id
					}
				})
				this.glass_slide_time=res.glass_slide_time?this.formatTime(res.glass_slide_time*1000,'yyyy-MM-dd'):''
				this.cultivate_time=res.cultivate_time?this.formatTime(res.cultivate_time*1000,'yyyy-MM-dd'):''
				this.setTimeShow=true
			},
			timeChange(e,a){
				if(a=='glass'){
					this.glass_slide_time=e.result
					this.glassErr=''
				}else{
					this.cultivate_time=e.result
					this.culErr=''
				}
			},
			async setTimeSubmit(){
				if(!this.glass_slide_time){
					this.glassErr="请填写载玻片更换时间"
				}
				if(!this.cultivate_time){
					this.culErr="请填写培养液更换时间"
					return 
				}
				 let glass = parseInt(
				        new Date(this.glass_slide_time).getTime() / 1000
				      );
				let cultivate = parseInt(
					      new Date(this.cultivate_time).getTime() / 1000
					    );
					const res=await this.$myRequest({
						url:'/api/api_gateway?method=device.device_manage.updata_spore_time',
						data:{
							device_type_id: this.type,
							d_id: this.equipInfo.d_id,
							glass_slide_time:glass,
							cultivate_time: cultivate
						}
					})
					if(res){
						this.$refs.toast.show({
							title: '修改成功!',
							type: 'success',
						})
					}
					this.setTimeShow=false
			},
			async addYx(d_id){
				const res=await this.$myRequest({
					url:'/api/api_gateway?method=device.device_manage.get_spore_time',
					data:{
						device_type_id:this.type,
						d_id
					}
				})
				this.decoy=res.decoy;
				this.yxShow=true
			},
			async yxSubmit(){
				if(!this.decoy){
					this.xyErr="请填写监测害虫名称";
					return false
				}
				const res=await this.$myRequest({
					url:'/api/api_gateway?method=device.device_manage.updata_spore_time',
					data:{
						device_type_id:this.type,
						d_id:this.equipInfo.d_id,
						decoy:this.decoy
					}
				})
				if(res){
					this.xyErr=""
					this.yxShow=false
				}
			}
		},
	}
</script>

<style lang='scss'>
	page{
		padding:20rpx;
 	.info{
			padding:20rpx 40rpx;
			color:#fff;
			line-height:50rpx;
			font-size:26rpx;
			background-size:100% auto;
			background-repeat: no-repeat;
			background-color:#0DC6B6;
			background-position:  top left;
		}
		.on{
			background-image:url('../../../static/image/cb/onBg.png')
		}
		.off{
			background-image:url('../../../static/image/cb/offBg.png')
		}
		.equip_part{
			display:flex;
			flex-wrap:wrap;
			text-align: center;
			font-size:28rpx;
			color:#666;
			line-height:50rpx;
			image{
				width:52rpx;
				}
			.item1{
				padding:20rpx 10rpx;
				box-sizing: border-box;
				flex-basis:25%;
			}
			.item2{
				padding:20rpx;
				box-sizing: border-box;
				flex-basis:33%;
				flex-grow:1;
			}
		}
		.tit{
			font-weight:800;
			line-height:50rpx;
			font-size:30rpx;
			margin-bottom:20rpx;
			}
		.newState{
			display:flex;
			flex-wrap:wrap;
			text-align: center;
			margin:0 -10rpx;
			.item{
				display:flex;
				flex-wrap: wrap;
 				margin:10rpx;
				width: 345rpx;
				justify-content:flex-start;
				padding:20rpx;
				box-sizing: border-box;
				border-radius: 4px;
				box-shadow: 0px 0px 5px 3px rgba(136,136,136,.1);
				font-size:24rpx;
				.info-con{
					padding-left:30rpx;
					text-align: left;
					line-height:40rpx;
				}
				image{width:70rpx;}
			}
		}
		.btn-box{
			text-align:center;
			padding:30rpx;
		}
	}

</style>