bigdata_WX/pages/irrigate/weathdata.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.status==1?'#00B075':'#f64a4a'}">
					{{item.status==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_box1">
				<view class="">
					设备变量名称
				</view>
				<view class="">
					当前值
				</view>
			</view>
			<!-- datadetails_box_item -->
			<view class="datadetails_box" v-for="item,index in data" :key="index">
				<view class="datadetails_box_name">
					{{item.name}}
				</view>
				<view class="datadetails_box_conf" v-if="compile && item.device_status==1">
					<u-switch v-model="item.values" size="35" active-color="#00B075" style="margin-top: 30rpx;" inactive-color="#f00"
						v-if="item.types==1" @change="switchchange2($event,item,index)">
					</u-switch>
					<view class="" v-if="item.types==0 || item.types==4" style="display: flex;">
						<!-- <u-input v-model="item.values" :type="item.values==0?'number':'text'" :clearable="false" style="width: 200rpx;margin: 10rpx 10rpx 0 0;" input-align="right"/> -->
						<view class="">
							{{item.values}}{{item.unit}}
						</view>
						<view class="">
							<u-icon name="edit-pen" size="36" color="#00B075" @click="inputfill(item,index)">
							</u-icon>
						</view>
					</view>
				</view>
				<view class="datadetails_box_conf" v-else>
					<view class="" v-if="item.types==1">
						{{item.values==true?"开":"关"}}{{item.unit}}
					</view>
					<view class="" v-if="item.types==0 || item.types==4">
						{{item.values?item.values:"--"}}{{item.unit}}
					</view>
				</view>
			</view>
			<u-modal v-model="show" :show-cancel-button="true" :title="baseinfo.title" @confirm="modalconfirm"
				@cancel="modalcancel">
				<view class="slot-content">
					<u-input v-model="baseinfo.content" type="number" />{{baseinfo.unit}}
				</view>
			</u-modal>
			<!-- <view class="loading" v-if="maskshow">
				<image src="../../static/images/cb/6286299.gif" mode="" class="img"></image>
			</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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {},
				data: {},
				show: false,
				baseinfo: {
					title: "",
					unit: "",
					d_id: "",
					content: "",
					index: "",
					types: ""
				},
				maskshow: false,
				compile:false
			}
		},
		onLoad(option) {
			this.item = JSON.parse(option.item)
			this.getbaseinfo()
		},
		methods: {
			async getbaseinfo(){
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=irrigation_system.waterfertilizer.water_fertilizer_list',
					data: {
						content: this.item.device_id,
					}
				})
				console.log(res)
				this.item = res.data[0]
				if(this.item.status==1){
					this.compile = true
				}else{
					this.compile = false
				}
				
				this.tubulareqlist()
			},
			async tubulareqlist() { //实时数据
				this.maskshow = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=irrigation_system.waterfertilizer.water_fertilizer_data_list',
					data: {
						device_id: this.item.device_id,
					}
				})
				this.maskshow = false
				console.log(res)
				for (var i = 0; i < res.length; i++) {
					if (res[i].types == 1) {
						res[i].values = res[i].values == 1 ? true : false
					}
				}
				this.data = res
			},
			async controlfill() { //设备控制
			this.maskshow = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=irrigation_system.waterfertilizer.water_fer_parametric_control',
					data: {
						device_id: this.item.device_id,
						d_id: this.baseinfo.d_id,
						content: this.baseinfo.content
					}
				})
				this.maskshow = false
				console.log(res)
				if (res.status == 200) {
					uni.showToast({
						title: "下发成功",
						icon: "none"
					})
					if (this.baseinfo.types == 1) {
						this.data[this.baseinfo.index].values = this.baseinfo.content==1?true:false
					}else{
						this.data[this.baseinfo.index].values = this.baseinfo.content
					}
					
				} else {
					uni.showToast({
						title: "下发失败",
						icon: "none"
					})
					if (this.baseinfo.types == 1) {
						this.data[this.baseinfo.index].values = !this.data[this.baseinfo.index].values
					}
				}
				// this.data = res
			},
			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"
							})
						}
					}
				});
			},
			switchchange2(e, item, index) {
				console.log(e)
				this.baseinfo.title = item.name
				this.baseinfo.unit = item.unit
				this.baseinfo.d_id = item.d_id
				this.baseinfo.index = index
				this.baseinfo.types = item.types
				this.baseinfo.content = e == true ? "1" : "0"
				this.controlfill()
			},
			inputfill(e, index) {
				console.log(e)
				this.show = true
				this.baseinfo.title = e.name
				this.baseinfo.unit = e.unit
				this.baseinfo.d_id = e.d_id
				this.baseinfo.index = index
			},
			modalconfirm() {
				this.controlfill()
			},
			modalcancel() {

			}
		}
	}
</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;

		.datadetails_box1 {
			font-size: 30rpx;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			height: 60rpx;
			border-bottom: 1px solid #efefef;
			line-height: 60rpx;
		}

		.datadetails_box {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #efefef;
			line-height: 100rpx;

			.datadetails_box_item {}

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

			.datadetails_box_conf_lng {
				display: flex;
				margin-top: 10rpx;
			}
		}
	}

	.slot-content {
		width: 50%;
		margin: 30rpx auto;
		display: flex;
		line-height: 70rpx;
	}
	.loading {
		position: fixed;
		top: 200px;
		width: 95%;
		left: 2.5%;
		text-align: center;
	
		.img {
			width: 300rpx;
			height: 300rpx;
		}
	}
</style>