bigdata_WX/pages/cb/sy/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://www.hnyfwlw.com:8006/bigdata_app/image/environment/fuzhi.png" mode="" class="tishi">
				</image>
			</view>
			<view class="">
				设备名称：{{equipInfo.device_name==""?"无":equipInfo.device_name}}
			</view>
			<view class="">
				设备类型：病虫害可视监测
			</view>
			<view class="">
				最新上报时间：{{equipInfo.addtime||equipInfo.uptime | timeFormat}}
			</view>
			<view class="">
				设备地址：{{equipInfo.address}}
			</view>
		</view>
		<view class="caobox">
			<view class="caobox_item" v-if="$QueryPermission(187)" @click="tophoto">
				<image src="http://www.hnyfwlw.com:8006/bigdata_app/image/cb/1.png" mode="widthFix"></image>
				<view class="">
					查看图片
				</view>
			</view>
			<view class="caobox_item" v-if="$QueryPermission(181)" @click="tohis">
				<image src="http://www.hnyfwlw.com:8006/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="http://www.hnyfwlw.com:8006/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="http://www.hnyfwlw.com:8006/bigdata_app/image/cb/xy2.0/shidu.png" mode=""></image>
					<view class="text">
						<p>环境湿度</p>
						<p>{{ah}}%RH</p>
					</view>
				</view>
				<view class="realtime_item">
					<image src="http://www.hnyfwlw.com:8006/bigdata_app/image/cb/icon02.png" mode=""></image>
					<view class="text">
						<p>开机状态</p>
						<p>{{status == 1 ? '开机' : '关机'}}</p>
					</view>
				</view>
				<view class="realtime_item">
					<image src="http://www.hnyfwlw.com:8006/bigdata_app/image/cb/xy2.0/yujing.png" mode=""></image>
					<view class="text">
						<p>版本号</p>
						<p>{{version}}</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				equipInfo: {},
				trapnum: 1,
				at: "",
				ah: "",
				status: "",
				version: "",
				xyErr: "",
				xyErrtime: "",
				decoytime: "",
				yxShow: false,
				tiemshow: false,
				date: "",
				fieldstyle: { //输入框样式
					border: "2rpx solid #f6f6f6",
					"border-radius": "24px",
					"padding-left": "20rpx",
					"background-color": "#f6f6f6"
				},
				tishitext:""
			}
		},
		methods: {
			tophoto() {
				uni.navigateTo({
					url: "./imgList?device_id=" + this.equipInfo.imei + "&d_id=" + this.equipInfo.d_id
				})
			},
			tohis() {
				uni.navigateTo({
					url: "./history?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 getatah() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.color_attract_data',
          data: {
            device_id: this.equipInfo.imei,
					}
				})
				console.log(res)
				if (res) {
					this.at = res.at/10
          this.ah = res.ah / 10
          this.status = res.ds
          this.version = res.dver
				} else {
					this.at = "暂无"
					this.ah = "暂无"
				}
			},
		},
		onLoad(option) {
			var times = new Date()
			this.date = times.getFullYear() + 1 + "-" + Number(times.getMonth() + 1) + "-" + times.getDate()
      this.equipInfo = JSON.parse(option.detail);
      console.log(this.equipInfo)
      this.getatah()
			// 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('http://www.hnyfwlw.com:8006/bigdata_app/image/cb/onBg.png')
		}

		.off {
			background-image: url('http://www.hnyfwlw.com:8006/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>