bigdata_WX/pages/cb/thxydetail/thxydetail.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="$imageURL+'/bigdata_app/image/environment/fuzhi.png'" mode="" class="tishi">
				</image>
			</view>
			<view class="">
				设备名称：{{equipInfo.device_name==""?"无":equipInfo.device_name}}
			</view>
			<view class="">
				设备类型：性诱3.0
			</view>
			<view class="">
				最新上报时间：{{equipInfo.uptime||equipInfo.uptime | timeFormat}}
			</view>
			<view class="">
				设备地址：{{equipInfo.address}}
			</view>
			<view class="" @click="setdecoy">
				诱芯名称：{{equipInfo.decoy}}
				<u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon>
			</view>
			<view class="" @click="setdecoy">
				诱芯到期时间：{{equipInfo.xy_expire}}
				<u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon>
			</view>
		</view>
		<u-popup v-model="yxShow" mode="center" width="600rpx">
			<u-field label="害虫名称" label-width='240' required :error-message="xyErr" v-model="decoy" class="field"
				:field-style="fieldstyle" placeholder="请填写害虫名称">
			</u-field>
			<u-field label="诱芯到期时间" label-width='240' required :error-message="xyErrtime" v-model="decoytime"
				@click="settime" class="field" :field-style="fieldstyle" placeholder="请填写到期时间">
			</u-field>
			<view class="" style="text-align: center;color: #fa3534;">
				{{tishitext}}
			</view>
			<view class="btn-box">
				<u-button @click="yxSubmit" size="mini" type="success" class="box-item">确定</u-button>
			</view>
		</u-popup>
		<u-calendar v-model="tiemshow" mode="date" :max-date="date" @change="tiemchange"  range-color="#999"
      btn-type="success"
      active-bg-color="#0BBC58"
      range-bg-color="rgba(11,188,88,0.13)"></u-calendar>
		<view class="caobox">
			<view class="caobox_item" v-if="$QueryPermission(200)" @click="tophoto">
				<image :src="$imageURL+'/bigdata_app/image/cb/1.png'" mode="widthFix"></image>
				<view class="">
					查看图片
				</view>
			</view>
			<view class="caobox_item" v-if="$QueryPermission(248)" @click="toset">
				<image :src="$imageURL+'/bigdata_app/image/cb/4.png'" mode="widthFix"></image>
				<view class="">
					设备控制
				</view>
			</view>
			<view class="caobox_item" v-if="$QueryPermission(247)" @click="tosim">
				<image :src="$imageURL+'/bigdata_app/image/cb/6.png'" mode="widthFix"></image>
				<view class="">
					SIM卡
				</view>
			</view>
			<view class="caobox_item" v-if="$QueryPermission(199)" @click="tohis">
				<image :src="$imageURL+'/bigdata_app/image/cb/2.png'" mode="widthFix"></image>
				<view class="">
					历史数据
				</view>
			</view>
		</view>
		<view class="realtime">
			<view class="realtime_title">
				<p>实时数据</p>
			</view>
			<view class="realtime_text">
				<view class="realtime_item">
					<image :src="$imageURL+'/bigdata_app/image/cb/xy2.0/wendu.png'" mode=""></image>
					<view class="text">
						<p>环境温度</p>
						<p>{{at}}℃</p>
					</view>
				</view>
				<view class="realtime_item">
					<image :src="$imageURL+'/bigdata_app/image/cb/xy2.0/shidu.png'" mode=""></image>
					<view class="text">
						<p>环境湿度</p>
						<p>{{ah}}%</p>
					</view>
				</view>
				<view class="realtime_item">
					<image :src="$imageURL+'/bigdata_app/image/cb/xy2.0/tianqi.png'" mode=""></image>
					<view class="text">
						<p>天气</p>
						<p>{{wea}}</p>
					</view>
				</view>
				<view class="realtime_item">
					<image :src="$imageURL+'/bigdata_app/image/cb/xy2.0/xiayu.png'" mode=""></image>
					<view class="text">
						<p>是否下雨</p>
						<p>{{rain}}</p>
					</view>
				</view>
				<view class="realtime_item">
					<image :src="$imageURL+'/bigdata_app/image/cb/xy2.0/fengxiang.png'" mode=""></image>
					<view class="text">
						<p>风力风向</p>
						<p>{{wind}}</p>
					</view>
				</view>
				<view class="realtime_item">
					<image :src="$imageURL+'/bigdata_app/image/cb/xy2.0/yujing.png'" mode=""></image>
					<view class="text">
						<p>诱虫次数</p>
						<p>{{wormnum}}</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseimei: "",
				equipInfo: {},
				trapnum: 1,
				at: "",
				ah: "",
				wind: "",
				wea: "",
				rain: "",
				wormnum: "",
				decoy: "",
				xyErr: "",
				xyErrtime: "",
				decoytime: "",
				yxShow: false,
				tiemshow: false,
				date: "",
				fieldstyle: { //输入框样式
					border: "2rpx solid #f6f6f6",
					"border-radius": "24px",
					"padding-left": "20rpx",
					"background-color": "#f6f6f6"
				},
				tishitext: ""
			}
		},
		methods: {
			tosim() {
				uni.navigateTo({
					url: "/pages/prevention/sim?d_id=" + this.equipInfo.d_id + "&device_id=" + this.equipInfo.imei +
						"&device_type=" + this.equipInfo.type + "&disable=" + this.equipInfo.disable
				})
			},
			tophoto() {
				uni.navigateTo({
					url: "./photolist?device_id=" + this.equipInfo.imei + "&d_id=" + this.equipInfo.d_id
				})
			},
			toset() {
				uni.navigateTo({
					url: "./thxyset?device_id=" + this.equipInfo.imei + "&d_id=" + this.equipInfo.d_id +
						"&dtype=" + this.equipInfo.dtype +
						"&device_name=" + this.equipInfo.device_name
				})
			},
			tohis() {
				uni.navigateTo({
					url: "./thxyhisdata?device_id=" + this.equipInfo.imei + "&d_id=" + this.equipInfo.d_id
				})
			},
			copy(item) {
				console.log(item)
				uni.setClipboardData({
					data: item.imei || item.device_id,
					success: function() {
						console.log('success');
					}
				});
			},
			async getbaseinfo() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.xy_three_list',
					data: {
						device_id: this.baseimei,
						device_type_id: "8",
						page: "1",
						page_size: "10",
					}
				})
				console.log(res.data[0])
				this.equipInfo = res.data[0]
				this.getatah()
				this.getwind()
				this.getweather()
				this.getworm()
			},
			async getatah() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.xy_three_at_ah',
					data: {
						device_type_id: 8,
						d_id: this.equipInfo.d_id,
						start_time: Math.floor(+new Date() / 1000 - 30 * 24 * 60 * 60),
						end_time: Math.floor(+new Date() / 1000),
					}
				})
				console.log(res)
				if (res.length) {
					this.at = res[0].at
					this.ah = res[0].ah
				} else {
					this.at = "暂无"
					this.ah = "暂无"
				}
			},
			async getwind() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.xy_three_history_data',
					data: {
						d_id: this.equipInfo.d_id,
						start_time: Math.floor(+new Date() / 1000 - 30 * 24 * 60 * 60),
						end_time: Math.floor(+new Date() / 1000),
						device_id: this.equipInfo.imei,
						page: 1,
					}
				})
				// console.log(res.data[0].d_h_t)
				if (res.data[0]) {
					var fs = res.data[0].d_h_t.wind_sped;
					let fx = res.data[0].d_h_t.wind_drec;
					// if (fx > 337.5 || fx < 22.5) {
					if (
						(fx < 360 && fx > 337.5) ||
						(fx < 22.5 && fx > 0) ||
						fx == 0 ||
						fx == 360
					) {
						fx = "北";
					} else if (fx > 22.5 && fx < 67.5) {
						fx = "东北";
					} else if (fx > 67.5 && fx < 112.5) {
						fx = "东";
					} else if (fx > 112.5 && fx < 157.5) {
						fx = "东南";
					} else if (fx > 157.5 && fx < 202.5) {
						fx = "南";
					} else if (fx > 202.5 && fx < 247.5) {
						fx = "西南";
					} else if (fx > 247.5 && fx < 292.5) {
						fx = "西";
					} else if (fx > 292.5 && fx < 337.5) {
						fx = "西北";
					} else if (fx == 666) {
						fx = "无";
					}
					if (fs >= 66.6) {
						fs = 0;
					}
					// this.monitordata[4].key = fx + "风" + fs + "级";
					this.wind = fx + "风" + fs + "级";
				} else {
					this.wind = "暂无"
				}
			},
			async getweather() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_manage.weathers',
					data: {
						lng: Number(this.equipInfo.lng),
						lat: Number(this.equipInfo.lat),
					}
				})
				console.log(res)
				// this.
				if (res[0]) {
					this.wea = res[0].wea
					this.rain = res[0].wea.indexOf("雨") == -1 ? "否" : "是"
				} else {
					this.wea = "暂无"
					this.rain = "暂无"
				}
			},
			async getworm() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.xycb_pest_chart',
					data: {
						d_id: this.equipInfo.d_id,
						start_time: Math.floor(+new Date() / 1000 - 30 * 24 * 60 * 60),
						end_time: Math.floor(+new Date() / 1000),
						device_type_id: "8",
					}
				})
				console.log(res)
				if (res.pest_data.length) {
					this.wormnum = res.pest_data[0].pest_num
				} else {
					this.wormnum = "暂无"
				}
			},
			setdecoy() {
				this.decoy = this.equipInfo.decoy
				this.decoytime = this.equipInfo.xy_expire
				this.yxShow = true
			},
			settime() {
				console.log(12)
				this.tiemshow = true
			},
			tiemchange(e) {
				console.log(e)
				this.decoytime = e.result
			},
			async yxSubmit() {
				var time = Math.floor(+new Date(this.decoytime) / 1000)
				console.log(time)
				if (this.decoy == "") {
					this.tishitext = "请填写诱芯名称"
					return
				} else if (isNaN(time)) {
					this.tishitext = "请填写诱芯到期时间"
					return
				}
				this.tishitext = ""
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.set_decopy',
					data: {
						decoy: this.decoy,
						device_id: this.equipInfo.imei,
						device_type_id: "8",
						expire_time: time,
					}
				})
				console.log(res)
				if (res.status) {
					uni.showToast({
						title: "设置成功",
						icon: "none"
					})
					this.yxShow = false
					this.getbaseinfo()
				}
			}
		},
		onLoad(option) {
			var times = new Date()
			this.date = times.getFullYear() + 1 + "-" + Number(times.getMonth() + 1) + "-" + times.getDate()
			this.baseimei = option.imei
			// console.log(this.equipInfo)
			this.getbaseinfo()
		},
	}
</script>

<style lang='less'>
	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('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/cb/onBg.png')
		}

		.off {
			background-image: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/cb/offBg.png')
		}

		.caobox {
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			font-size: 28rpx;
			color: #666;
			line-height: 50rpx;

			image {
				width: 52rpx;
			}

			.caobox_item {
				padding: 20rpx 0;
				box-sizing: border-box;
				flex-basis: 25%;
			}
		}

		.realtime {
			width: 95%;
			margin: 0rpx auto;

			.realtime_title {
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
				font-weight: 700;

				.span {
					color: #6e6c76;
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 12rpx;
				}
			}

			.realtime_text {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.realtime_item {
					width: 48%;
					height: 100rpx;
					display: flex;
					box-shadow: 0 0 10rpx #bcb9ca;
					margin-top: 20rpx;
					padding: 20rpx 0;

					image {
						width: 60rpx;
						height: 60rpx;
						margin: 20rpx 20rpx 20rpx 40rpx;
					}

					.text {
						padding: 10rpx 0 10rpx 30rpx;
					}
				}
			}
		}
	}

	.btn-box {
		text-align: center;
		padding: 20rpx 30rpx;
	}

	/deep/.u-calendar__action {
		display: flex;
		justify-content: space-around;

		.u-calendar__action__text {
			line-height: 25px;
		}
	}
</style>