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>
		<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:''
					},{
						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:''
					},{
						icon:'/static/image/cb/6.png',
						tex:'sim卡详情',
						path:''
					},{
						icon:'/static/image/cb/2.png',
						tex:'历史数据',
						path:''
					}
				],
				newState:{},//设备最新状态
			}
		},
		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
				});
			}
		},
	}
</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;}
			}
		}
	}

</style>