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

<template>
	<view>
		<view :class="['info',equipInfo.is_online==1?'on':'off']">
			<view class="" @click="copy(equipInfo)">
				设备ID：{{equipInfo.imei||equipInfo.device_id}}
				<image src="http://static.yfpyx.com/bigdata_app/image/environment/fuzhi.png" mode="" class="tishi"></image>
			</view>
			<view class="">
				设备名称：{{equipInfo.device_name}}
			</view>
			<view class="">
				设备类型：{{equipInfo.type|equipType}}{{equipInfo.type_name}}
			</view>
			<view class="">
				最新上报时间：{{equipInfo.addtime||equipInfo.uptime | timeFormat}}
			</view>
			<view class="">
				设备地址：{{equipInfo.address?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" class="field">
				</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" v-if="item.tf" @click="partClick(item.path)">
					<image :src="'http://static.yfpyx.com/bigdata_app'+item.icon" mode="widthFix"></image>
					<view class="">
						{{item.tex}}
					</view>
				</view>
			</template>
			<template v-else-if="equipInfo.type==3">
				<view class="item2" v-for="item in curEquip" v-if="item.tf" @click="partClick(item.path)">
					<image :src="'http://static.yfpyx.com/bigdata_app'+item.icon" mode="widthFix"></image>
					<view class="">
						{{item.tex}}
					</view>
				</view>
			</template>
			<template v-else>
				<view class="item3" v-for="item in curEquip" v-if="item.tf" @click="partClick(item.path)">
					<image :src="'http://static.yfpyx.com/bigdata_app'+item.icon" mode="widthFix"></image>
					<view class="">
						{{item.tex}}
					</view>
				</view>
			</template>
		</view>
		<view class="tit">
			<p>实时数据</p>
			<p class="span" @click="partClicks">历史数据>>></p>
		</view>
		<view class="newtishi" v-if="!newtishitf">
			暂无数据
		</view>
		<view class="newState" v-else>
			<view class="item" v-for="item in curState">
				<image :src="'http://static.yfpyx.com/bigdata_app'+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>
	import equipState from "../../../static/js/equipState_dict.json"
	export default {
		data() {
			return {
				city:"",
				type: null, //设备类型
				device_status: null,
				equipInfo: {},
				cbd: [{
					icon: '/image/cb/1.png',
					tex: '查看图片',
					path: '/pages/cb/cbd/equip-set/imgpage',
					tf:false
				}, 
				// {
				// 	icon: '/image/cb/2.png',
				// 	tex: '历史数据',
				// 	path: '/pages/cb/cbd/equip-set/historyfile',
				// 	tf:false
				// }, 
				{
					icon: '/image/cb/3.png',
					tex: '害虫统计',
					path: '/pages/cb/cbd/equip-set/statistics',
					tf:false
				}, {
					icon: '/image/cb/4.png',
					tex: '设备控制',
					path: '/pages/cb/cbd/equip-set/equip-set',
					tf:false
				}, {
					icon: '/image/cb/5.png',
					tex: '短信预警',
					path: '/pages/cb/cbd/equip-set/note',
					tf:false
				}, {
					icon: '/image/cb/6.png',
					tex: 'sim卡详情',
					path: '/pages/cb/sim/sim',
					tf:true
				},{
					icon: '/image/environment/7.png',
					tex: '一键报修',
					path: '/pages/afterSale/addafter',
					tf:true
				}],
				bzy: [{
					icon: '/image/cb/4.png',
					tex: '设备控制',
					path: '/pages/cb/bzy/equip-set/equip-set',
					tf:false
				}, {
					icon: '/image/cb/1.png',
					tex: '查看图片',
					path: '/pages/cb/cbd/equip-set/imgpage',
					tf:false
				}, 
				// {
				// 	icon: '/image/cb/2.png',
				// 	tex: '历史数据',
				// 	path: '/pages/cb/bzy/equip-set/bzyhistoryile',
				// 	tf:false
				// }, 
				{
					icon: '/image/cb/6.png',
					tex: 'sim卡详情',
					path: '/pages/cb/sim/sim',
					tf:false
				},{
					icon: '/image/environment/7.png',
					tex: '一键报修',
					path: '/pages/afterSale/addafter',
					tf:true
				}],
				xy: [{
					icon: '/image/cb/4.png',
					tex: '设备控制',
					path: '/pages/cb/xy/equip-set/equip-set',
					tf:false
				}, {
					icon: '/image/cb/6.png',
					tex: 'sim卡详情',
					path: '/pages/cb/sim/sim',
					tf:false
				}, {
					icon: '/image/cb/2.png',
					tex: '历史数据',
					path: '/pages/cb/xy/equip-set/xyhistoryile',
					tf:false
				},{
					icon: '/image/environment/7.png',
					tex: '一键报修',
					path: '/pages/afterSale/addafter',
					tf:true
				}],
				newState: {}, //设备最新状态
				setTimeShow: false,
				glass_show: false,
				cultivate_show: false,
				cultivate_time: "",
				glass_slide_time: "",
				glassErr: '',
				culErr: '',
				yxShow: false, //诱芯弹框
				xyErr: '',
				decoy: '',
				newtishitf:false,
			}
		},
		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 (equipState.lux == 0) {
									blbs = "N/A（未检测到传感器）";
								} else {
									blbs = "异常";
								}
							} else {
								blbs = "关闭";
							}
						} else {
							blbs = "--";
						}
						return [{
								icon: '/image/cb/icon02.png',
								txt: '在线状态',
								value: Number(this.device_status) == 1 ? '在线' : '离线',
							},
							{
								icon: '/image/cb/icon05.png',
								txt: '开关状态',
								value: Number(this.newState.ds) == 1 ? '开机' : '关机'
							},
							{
								icon: '/image/cb/icon13.png',
								txt: '通道状态',
								value: Number(this.newState.upds) == 1 ? '落虫' : '排水'
							},
							{
								icon: '/image/cb/icon10.png',
								txt: '加热状态',
								value: Number(this.newState.hs) == 1 ? '加热' : '正常'
							}, {
								icon: '/image/cb/icon08.png',
								txt: '环境温度(℃)',
								value: this.newState.at=="2.5"||this.newState.at=="25"||this.newState.at==""?this.newState.new_tem:this.newState.at
							}, {
								icon: '/image/cb/icon07.png',
								txt: '环境湿度(%)',
								value:this.newState.ah=="30"||this.newState.ah=="3.0"||this.newState.ah==""?this.newState.new_hum:this.newState.ah
							}, {
								icon: '/image/cb/icon16.png',
								txt: '信号强度',
								value: this.newState.csq
							}, {
								icon: '/image/cb/icon12.png',
								txt: '设备版本',
								value: this.newState.dver
							},
							{
								icon: '/image/cb/icon17.png',
								txt: '雨控状态',
								value: Number(this.newState.rps) == 1 ? "雨控" : '正常'
							}, {
								icon: '/image/cb/icon14.png',
								txt: '温控状态',
								value: Number(this.newState.tps) == 1 ? "温控" : '正常'
							}, {
								icon: '/image/cb/icon06.png',
								txt: '光控状态',
								value: Number(this.newState.lps) == 1 ? "光控" : '正常'
							}, {
								icon: '/image/cb/icon01.png',
								txt: '灯管状态',
								value: blbs
							}, {
								icon: '/image/cb/icon11.png',
								txt: '上仓门',
								value: Number(this.newState.upds) == 1 ? "打开" : '关闭'
							}, {
								icon: '/image/cb/icon15.png',
								txt: '下仓门',
								value: Number(this.newState.dnds) == 1 ? "打开" : '关闭'
							}
						]
					case 7:
						return [{
								icon: '/image/cb/icon02.png',
								txt: '在线状态',
								value: Number(this.device_status) == 1 ? '在线' : '离线',
							},
							{
								icon: '/image/cb/icon05.png',
								txt: '设备开关',
								value: Number(this.newState.ds) == 1 ? '开启' : '关闭'
							},
							{
								icon: '/image/cb/bzy/3.png',
								txt: '摄像头状态',
								value: this.newState.usb_sta == 1 ? '异常' : '正常'
							},
							{
								icon: '/image/prevention/44.png',
								txt: '当前电压',
								value: this.newState.v_bat
							}, {
								icon: '/image/cb/icon08.png',
								txt: '环境温度(℃)',
								value: this.newState.at=="2.5"||this.newState.at=="25"||this.newState.at==""?this.newState.new_tem:this.newState.at
							}, {
								icon: '/image/prevention/66.png',
								txt: '环境湿度(%)',
								value:this.newState.ah=="30"||this.newState.ah=="3.0"||this.newState.ah==""?this.newState.new_hum:this.newState.ah
							}, {
								icon: '/image/cb/icon16.png',
								txt: '信号强度',
								value: this.newState.csq
							}, {
								icon: '/image/cb/bzy/8.png',
								txt: '已培养时间',
								value: this.newState.staytime
							}, {
								icon: '/image/cb/icon12.png',
								txt: '设备版本',
								value: this.newState.dver
							}, {
								icon: '/image/cb/icon09.png',
								txt: '保温仓当前温度',
								value: this.newState.pre_temp
							}, {
								icon: '/image/cb/icon08.png',
								txt: '保温仓设定温度',
								value: this.newState.set_temp
							}
						];
					case 4:
						return [{
								icon: '/image/cb/icon02.png',
								txt: '在线状态',
								value: Number(this.device_status) == 1 ? '在线' : '离线',
							},
							{
								icon: '/image/cb/icon05.png',
								txt: '设备开关',
								value: this.newState.ds == 1 ? '开启' : '关闭'
							},
							{
								icon: '/image/cb/icon02.png',
								txt: '工作状态',
								value: this.newState.ws == 1 ? '工作' : ' 待机'
							},
							{
								icon: '/image/cb/icon12.png',
								txt: '设备版本',
								value: this.newState.dver
							},
							{
								icon: '/image/cb/icon08.png',
								txt: '环境温度(℃)',
								value: this.newState.at=="2.5"||this.newState.at=="25"||this.newState.at==""?this.newState.new_tem:this.newState.at
							},
							{
								icon: '/image/cb/icon07.png',
								txt: '环境湿度(%)',
								value:this.newState.ah=="30"||this.newState.ah=="3.0"||this.newState.ah==""?this.newState.new_hum:this.newState.ah
							},
							{
								icon: '/image/prevention/105.png',
								txt: '充电电压',
								value: this.newState.cv
							},
							{
								icon: '/image/prevention/106.png',
								txt: '电池电压',
								value: this.newState.bv
							},
							{
								icon: '/image/cb/icon16.png',
								txt: '信号强度',
								value: this.newState.csq
							},
							{
								icon: '/image/cb/xy/9.png',
								txt: '充电状态',
								value: Number(this.newState.cs) == 1 ? '充电' : '正常'
							},
							{
								icon: '/image/cb/xy/10.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 (Number(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 = Number(this.equipInfo.type) || Number(this.equipInfo.equip_type)
			this.device_status = this.equipInfo.is_online
			this.getState()
			console.log(this.equipInfo)
			this.selectaddress(this.lat,this.lng)
			
			uni.getStorage({
				key:"jurisdiction",
				success:(res)=>{
					console.log(JSON.parse(res.data))
					let items = JSON.parse(res.data).filter((item)=>{
						return item.purview_name == "测报系统"
					})
					console.log(items)
					let items2 = items[0].children.filter((item)=>{
						return item.purview_name == "虫情测报灯"
					})
					let items3 = items[0].children.filter((item)=>{
						return item.purview_name == "性诱测报"
					})
					let items4 = items[0].children.filter((item)=>{
						return item.purview_name == "孢子仪"
					})
					console.log(items2)
					var arr = items2[0].children
					for(var i =0;i<arr.length;i++){
						switch (arr[i].purview_name){
							case "数据详情":
								this.cbd[1].tf = true
								break
							case "查看图片":
								this.cbd[0].tf = true
								break
							case "设备控制":
								this.cbd[3].tf = true
								break
							case "害虫统计":
								this.cbd[2].tf = true
								this.cbd[4].tf = true
								break
							case "SIM卡":
								this.cbd[5].tf = true
								break
						}
					}
					console.log(items3[0].children)
					var arr2 = items3[0].children
					for(var i =0;i<arr2.length;i++){
						switch (arr2[i].purview_name){
							case "设备控制":
								this.xy[0].tf = true
								break;
							case "SIM卡":
								this.xy[1].tf = true
								break;
							case "数据详情":
								this.xy[2].tf = true
								break;
						}
					}
					console.log(items4[0].children)
					var arr3 = items4[0].children
					for(var i =0;i<arr3.length;i++){
						switch (arr3[i].purview_name){
							case "设备控制":
								this.bzy[0].tf = true
								break;
							case "查看图片":
								this.bzy[1].tf = true
								break;
							case "数据详情":
								this.bzy[2].tf = true
								break;
							case "SIM卡":
								this.bzy[3].tf = true
								break;
						}
					}
				}
			})
		},
		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 || this.equipInfo.equip_type,
						device_id: this.equipInfo.imei || this.equipInfo.device_id,
						page: 1,
						page_size: 1,
					}
				})
				console.log(res)
				console.log(1222)
				if(res.counts!=0){
					this.newState = res.data[0].d_h_t
					this.newtishitf = true
				}else{
					this.newtishitf = false
				}
			},
			partClick(path) {
				console.log(path)
				uni.navigateTo({
					url: path + '?d_id=' + this.equipInfo.d_id + "&device_id=" + this.equipInfo.imei + "&device_type="+this.type
				});
			},
			partClicks(){
				var path = ""
				if(this.type==3){
					path="/pages/cb/cbd/equip-set/historyfile"
				}else if(this.type == 7){
					path="/pages/cb/bzy/equip-set/bzyhistoryile"
				}
				uni.navigateTo({
					url: path + '?d_id=' + this.equipInfo.d_id + "&device_id=" + this.equipInfo.imei + "&device_type="+this.type
				});
			},
			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
				}
			},
			selectaddress(lat,lng) { //获取分布位置
				uni.request({
					url: '/dpc/ws/geocoder/v1/?location='+lat+","+lng+"&key=B2EBZ-2UW6P-RDJDG-LCMLE-AIQUS-CGFMJ",
					success: (res) => {
						if(res==0){
							this.city = res.data.result.address
						}
					}
				})
			},
			copy(item){
				console.log(item)
				uni.setClipboardData({
				    data: item.imei||item.device_id,
				    success: function () {
				        console.log('success');
				    }
				});
			},
		},
	}
</script>

<style lang='scss'>
	page {
		padding: 20rpx;
		box-sizing: border-box;
		.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;
			box-sizing: border-box;
			width: 100%;
			.tishi{
				width: 28rpx;
				height: 28rpx;
				margin: 0rpx 0 0 20rpx;
			}
		}

		.on {
			background-image: url('http://static.yfpyx.com/bigdata_app/image/cb/onBg.png')
		}

		.off {
			background-image: url('http://static.yfpyx.com/bigdata_app/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 0;
				box-sizing: border-box;
				flex-basis: 25%;
			}

			.item2 {
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				flex-basis: 33%;
				/* flex-grow: 1; */
			}
			.item3{
				padding: 20rpx 0;
				box-sizing: border-box;
				flex-basis: 25%;
			}
		}

		.tit {
			font-weight: 800;
			height: 50rpx;
			font-size: 30rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			.span{
				color: #6e6c76;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				/* margin-top: 12rpx; */
			}
		}
		.newtishi{
			width: 90%;
			margin: 0 auto;
			text-align: center;
			padding-top: 40rpx;
			font-size: 32rpx;
		}
		.newState {
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			margin: 0 -10rpx;

			.item {
				display: flex;
				flex-wrap: nowrap;
				margin: 10rpx;
				width: 345rpx;
				justify-content: flex-start;
				padding: 20rpx 10rpx;
				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;
		}
		.field {
			/deep/.uni-input-input {
				border: 2rpx solid #FF0000;
				border-radius: 24rpx;
				width: 140px;
				padding-left: 10rpx;
				box-sizing: border-box;
			}
		}
	}
</style>