bigdata_WX/pages/irrigate/realtimedata.vue

<template>
	<view style="padding-top: 20rpx;">
		<view class="datainfo">
			<view class="datainfo_item">
				<view class="">
					{{item.device_name}}
				</view>
				<view class="" :style="{'color':item.water_pump_switch==1?'#00B075':'#f64a4a'}">
					{{item.water_pump_switch==1?"已开泵":"已关泵"}}
				</view>
			</view>
			<view class="datainfo_item">
				设备ID：{{item.device_id}}
			</view>
			<view class="datainfo_item">
				设备备注：{{item.device_notes==''?"--":item.device_notes}}
			</view>
			<view class="datainfo_item">
				设备状态：{{item.device_status==1?"在线":"离线"}}
			</view>
			<view class="datainfo_item">
				<view class="datainfo_item_1">
					地址：{{item.city}}
				</view>
				<view class="">
					<u-icon name="map" size="40" color="#00B075" @click="selectaddress(item.city,item.device_name)">
					</u-icon>
				</view>
			</view>
		</view>
		<view class="datadetails">
			<view class="datadetails_img">
				<image src="../../static/images/irrigate/yinxingqia.png" mode="" class="img"></image>
			</view>
			<view class="datadetails_box">
				<view class="datadetails_box_item">
					用户卡号：{{data.card_no}}
				</view>
				<view class="datadetails_box_item">
					当前耗水量：<span style="color:#00B075;">{{data.water_consume}}T</span>
				</view>
				<view class="datadetails_box_item">
					当前耗电量：<span style="color:#00B075;">{{data.electric_consume}}Kwh</span>
				</view>
				<view class="datadetails_box_item">
					刷卡使用状态：{{data.status==1?"刷卡开泵":"刷卡关泵"}}
				</view>
				<view class="datadetails_box_item">
					倒计时：<span style="color:#00B075;">{{data.time_consume}}s</span>
				</view>
				<view class="datadetails_box_item">
					用户卡余额：<span style="color:#f64a4a;">{{data.money_remain}}</span>
				</view>
				<view class="datadetails_box_item">
					水表总耗电量：{{data.total_water}}
				</view>
				<view class="datadetails_box_item">
					数据更新时间：{{data.addtime|timeFormat()}}
				</view>
			</view>
		</view>
		<u-mask :show="maskshow">
			<view class="loading" v-if="maskshow">
				<image src="../../static/images/cb/6286299.gif" mode="" class="img"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {},
				data: {},
				Interval: null,
				maskshow: false
			}
		},
		onLoad(option) {
			// console.log(JSON.parse(option.item))
			this.item = JSON.parse(option.item)
			this.getbaseinfo()
			this.Interval = setInterval(() => {
				this.getbaseinfo()
			}, 15000)
		},
		onHide() {
			// console.log("5555")
			// clearInterval(this.Interval)
		},
		onBackPress(e) {
			// console.log("5555")
			clearInterval(this.Interval)
		},
		methods: {
			async getbaseinfo(){
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=irrigation_system.hydropower.hydropower_list',
					data: {
						content: this.item.device_id,
					}
				})
				console.log(res)
				this.item = res.data[0]
				this.tubulareqlist()
			},
			async tubulareqlist() { //实时数据
				this.maskshow = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=irrigation_system.hydropower.water_pump_instant_data',
					data: {
						device_id: this.item.device_id,
					}
				})
				this.maskshow = false
				console.log(res)
				this.data = {}
				this.data = res[0]
			},
			selectaddress(city, name) { //获取分布位置
				uni.request({
					type: "GET",
					url: "https://restapi.amap.com/v3/geocode/geo?address=" + city +
						"&key=78ce288400f4fc6d9458989875c833c2",
					dataType: "json",
					complete: ress => {
						console.log(ress)
						if (ress.data.status == 1) {
							// ress.data.geocodes[0].location
							uni.navigateTo({
								url: "./irrmap?lnglat=" + ress.data.geocodes[0].location +
									"&basename=" + name
							})
						} else {
							uni.showToast({
								title: "地址编译失败",
								icon: "none"
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}

	.datainfo {
		width: 100%;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.datainfo_item {
			display: flex;
			justify-content: space-between;
			height: 60rpx;
			font-size: 28rpx;
			color: #909696;

			.datainfo_item_1 {
				width: 80%;
				overflow: hidden; //溢出隐藏
				white-space: nowrap; //禁止换行
				text-overflow: ellipsis; //...
			}
		}

		.datainfo_item:first-child {
			font-size: 32rpx;
			color: #000;
		}
	}

	.datadetails {
		width: 100%;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.datadetails_img {
			width: 5%;
			height: 40rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.datadetails_box {
			width: 92%;

			.datadetails_box_item {
				height: 60rpx;
			}
		}
	}

	.loading {
		position: fixed;
		top: 200px;
		width: 95%;
		left: 2.5%;
		text-align: center;

		.img {
			width: 300rpx;
			height: 300rpx;
		}
	}
</style>