bigdata_WX/pages/irrigate/search.vue

<template>
	<view>
		<view class="search_top">
			<view class="search_top_input">
				<input type="text" value="" placeholder="请输入设备ID或设备名称" v-model="imports" @input="searchinp" />
				<u-icon name="search" size="40" class="icon" @click="searchinp"></u-icon>
			</view>
		</view>
		<view class="prevents">
			<view class="prevents_item" v-for="item,index in eqlistdata" :key="item.d_id" @click="eqdetails(item)">
				<view class="" v-if="side_type == 18">
					<image
						:src="item.device_status==1?$imageURL+ '/bigdata_app/image/prevention/6.png':$imageURL+ '/bigdata_app/image/prevention/7.png'"
						mode="" class="prevents_item_img"></image>
					<view class="prevents_item_top">
						<p>设备名称：{{item.device_name}}</p>
						<view class="" style="display: flex;">
							<view class="" :style="{'margin-right': '10rpx','color':item.status2?'#00B075':'#f00'}">
								{{item.status2?"已启用":"已禁用"}}
							</view>
							<switch @change="switchchange2($event,item.d_id,index)" color="#00B075" :checked="item.status2" style="zoom:0.6" />
						</view>
					</view>
					<view class="prevents_item_bot">
						<view class="prevents_item_bot_item">
							<p>设备 ID：{{item.device_id}}</p>
							<p @click="newdata(item)">数据查看</p>
						</view>
						<p style="color:#909696;height: 60rpx;line-height: 60rpx;">
							设备状态：{{item.device_status==1?"在线":"离线"}}</p>
						<p style="color:#909696;height: 60rpx;line-height: 60rpx;">设备备注：{{item.device_notes}}
							<u-icon name="edit-pen" size="36" color="#00B075" @click="changeremark(item,index)">
							</u-icon>
						</p>
						<view class="prevents_item_bot_item">
							<p>地址：{{item.city}}</p>
							<u-icon name="map" size="40" color="#00B075"
								@click="selectaddress(item.city,item.device_name)"></u-icon>
						</view>
					</view>
				</view>
				<view class="" v-if="side_type == 17">
					<image :src="$imageURL+ '/bigdata_app/image/prevention/6.png'" mode=""
						class="prevents_item_img"></image>
					<view class="prevents_item_top">
						<p>设备名称：{{item.device_name}}</p>
						<view class="" style="display: flex;">
							<view class=""
								:style="{'margin-right': '10rpx','color':item.water_pump_switch2?'#00B075':'#f00'}">
								{{item.water_pump_switch2?"已开泵":"已关泵"}}
							</view>
							<switch @change="switchchange($event,item.d_id,index)" color="#00B075" :checked="item.water_pump_switch2" style="zoom:0.6" />
						</view>
					</view>
					<view class="prevents_item_bot">
						<view class="prevents_item_bot_item">
							<p>设备 ID：{{item.device_id}}</p>
							<p @click="newdata(item)" v-if="item.water_pump_switch2">实时数据</p>
						</view>
						<p style="color:#909696;height: 60rpx;line-height: 60rpx;">
							设备状态：{{item.device_status==1?"在线":"离线"}}</p>
						<p style="color:#909696;height: 60rpx;line-height: 60rpx;">设备备注：{{item.device_notes}}
							<u-icon name="edit-pen" size="36" color="#00B075" @click="changeremark(item,index)">
							</u-icon>
						</p>
						<view class="prevents_item_bot_item">
							<p>地址：{{item.city}}</p>
							<u-icon name="map" size="40" color="#00B075"
								@click="selectaddress(item.city,item.device_name)"></u-icon>
						</view>
					</view>
				</view>
				<view class="" v-if="side_type == 13">
					<image :src="$imageURL+ '/bigdata_app/image/prevention/6.png'" mode=""
						class="prevents_item_img"></image>
					<view class="prevents_item_top">
						<p>设备名称：{{item.device_name}}</p>
					</view>
					<view class="prevents_item_bot">
						<p>设备 ID：{{item.equip_id || item.device_id}}</p>
						<p>最新上报时间：{{item.uptime|timeFormat()}}</p>
					</view>
				</view>
			</view>
		</view>
		<u-modal v-model="show" :showCancelButton="true" title="请设置开泵时间" @confirm="modalconfirm" @cancel="modalcancel">
			<view class="slot-content">
				<u-input v-model="timevalue" type="number" style="width: 80%;"/>
				<p style="font-size: 12px;">分钟</p>
			</view>
		</u-modal>
		<u-modal v-model="showremark" :showCancelButton="true" title="请填写设备备注" @confirm="modalconfirmremark"
			@cancel="modalcancelremark">
			<view class="slot-contentremark">
				<u-input v-model="timevalueremark" maxlength="12" />
			</view>
		</u-modal>
		<view class="top">
			<view class="backtop" @click="top" v-if="isTop">
				<image src="../../static/images/1.png" mode="" class="img0"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Debounce,
		Throttle
	} from "../../util/anitthro.js"
	export default {
		data() {
			return {
				eqlistdata:[],
				imports:"",
				side_type:"",
				page:1,
				show: false,
				showremark: false,
				isTop:false
			}
		},
		methods: {
			async eqlist() { //设备列表 水肥一体化 L
				this.loadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=irrigation_system.waterfertilizer.water_fertilizer_list',
					data: {
						page: this.page,
						page_size: 10,
						content: this.imports
					}
				})
				console.log(res)
				this.loadingtf = false
				for (var i = 0; i < res.data.length; i++) {
					res.data[i]["status2"] = res.data[i].status == 1 ? true : false
				}
				this.eqlistdata = this.eqlistdata.concat(res.data)
			},
			async tubulareqlist() { //水电双计
				this.loadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=irrigation_system.hydropower.hydropower_list',
					data: {
						page: this.page,
						page_size: 10,
						content: this.imports
					}
				})
				console.log(res)
				this.loadingtf = false
				for (var i = 0; i < res.data.length; i++) {
					res.data[i]["water_pump_switch2"] = res.data[i].water_pump_switch == 1 ? true : false
				}
				this.eqlistdata = this.eqlistdata.concat(res.data)
				console.log(this.eqlistdata)
			},
			async sfeqlist() { //设备列表
				this.loadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=weather.weather.sf_page',
					data: {
						page: this.page,
						page_size: "10",
						device_id: this.imports,
					}
				})
				this.loadingtf = false
				this.eqlistdata = this.eqlistdata.concat(res.ids)
				console.log(this.eqlistdata)
			},
			eqdetails(data) {
				if (this.side_type == 13) {
					uni.navigateTo({
						url: "../waterandfer/datails?shebei=" + JSON.stringify(data)
					})
				}
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			search() { //搜索按钮搜索
				// this.searchinp()
				console.log(111)
				uni.navigateTo({
					url:"./search?side_type="+this.side_type
				})
			},
			searchinp() { //自动搜索
				Debounce(() => {
					this.page = 1
					this.eqlistdata = []
					if (this.side_type == 18) {
						this.eqlist()
					} else if (this.side_type == 17) {
						this.tubulareqlist()
					} else if (this.side_type == 13) {
						this.sfeqlist()
					}
				}, 1000)()
			},
			tabClick(index, type) {
				this.active = index
				this.side_type = type
				this.page = 1
				if (type == 18) {
					this.eqlistdata = []
					this.eqlist()
				} else if (type == 17) {
					this.eqlistdata = []
					this.tubulareqlist()
				} else if (type == 13) {
					this.eqlistdata = []
					this.sfeqlist()
				}
			},
			timezhuan(time) {
				function fun(a) {
					return String(a).length == 1 ? '0' + a : a
				}
				let date = new Date(time * 1000)
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				let d = date.getDate()
				let h = date.getHours()
				let min = date.getMinutes()
				let sec = date.getSeconds()
				return `${y}-${fun(m)}-${fun(d)} ${fun(h)}:${fun(min)}:${fun(sec)}`
			},
			newdata(item) {
				if (this.side_type == 17) {
					uni.navigateTo({
						url: "realtimedata?item=" + JSON.stringify(item)
					})
				} else {
					uni.navigateTo({
						url: "weathdata?item=" + JSON.stringify(item)
					})
				}
			},
			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"
							})
						}
					}
				});
			},
			async pumpcontrol(en) { //水肥开关
				console.log(en)
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=irrigation_system.hydropower.water_pump_control',
					data: {
						times: Math.floor(this.timevalue * 60),
						device_id: this.selid,
						status: en ? 1 : 0
					}
				})
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						title: "操作成功",
						icon: "none"
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					this.eqlistdata[this.selindex].water_pump_switch2 = !this.eqlistdata[this.selindex]
						.water_pump_switch2
				}
				this.timevalue = ""
			},
			switchchange(e, id, index) { //水肥 开关
				// console.log(e.detail.value)
				// console.log(this.eqlistdata[index].water_pump_switch2)
				this.eqlistdata[index].water_pump_switch2 = e.detail.value
				if (e.detail.value) {
					this.show = true
					this.selindex = index
					this.selid = id
				} else {
					this.selid = id
					this.pumpcontrol(false)
				}
			},
			async switchchange2(e, id, index) { //水电开关
				console.log(id)
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=irrigation_system.waterfertilizer.water_fertilizer_control',
					data: {
						device_ids: id,
						isopen: e ? 1 : 0
					}
				})
				console.log(res)
				if (res.info == "ok") {
					uni.showToast({
						title: "操作成功",
						icon: "none"
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					this.eqlistdata[index].status2 = !this.eqlistdata[index].status2
				}
			},
			modalcancel() { //水肥开关 确定
				this.eqlistdata[this.selindex].water_pump_switch2 = !this.eqlistdata[this.selindex].water_pump_switch2
				this.timevalue = ""
			},
			modalconfirm() { //水肥开关 取消
				this.show = true
				if (this.timevalue == "") {
					uni.showToast({
						title: "请输入开泵时间",
						icon: "none"
					})
				} else {
					this.show = false
					this.pumpcontrol(true)
				}
			},
			changeremark(item, index) { //修改备注
				this.timevalueremark = item.device_notes
				this.showremark = true
				this.selindex = index
				this.selid = item.device_id
			},
			modalcancelremark() { //修改备注 取消
			},
			modalconfirmremark() { //修改备注 确定
				this.showremark = true
				if (this.timevalueremark == "") {
					uni.showToast({
						title: "请输入设备备注",
						icon: "none"
					})
				} else {
					this.showremark = false
					this.setchangeremark()
				}
			},
			async setchangeremark() { //水肥开关
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=irrigation_system.hydropower.water_pump_modify_device_notes',
					data: {
						device_id: this.selid,
						content: this.timevalueremark
					}
				})
				console.log(res)
				if (res) {
					uni.showToast({
						title: "操作成功",
						icon: "none"
					})
					this.eqlistdata[this.selindex].device_notes = this.timevalueremark
				}
			},
		},
		onLoad(option) {
			this.side_type = option.side_type
			console.log(this.side_type)
		},
		onReachBottom() {
			this.page++
			// this.eqlist()
			if (this.side_type == 18) {
				this.eqlist()
			} else if (this.side_type == 17) {
				this.tubulareqlist()
			} else if (this.side_type == 13) {
				this.sfeqlist()
			}
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		},
	}
</script>

<style lang="scss">
	.search_top{
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.search_top_input {
		width: 90%;
		height: 54rpx;
		background-color: #E4E4E4;
		border-radius: 27rpx;
		padding-top: 8rpx;
		box-sizing: border-box;
		margin: 0 auto;
		position: relative;
		input {
			width: 85%;
			// text-indent: 1rem;
			font-size: 26rpx;
			padding-left: 20px;
			box-sizing: border-box;
		}

		.icon {
			position: absolute;
			top: 8rpx;
			right: 26rpx;
		}
	}
	.prevents {
		width: 100%;
		margin-top: 40px;
		.prevents_item {
			width: 95%;
			margin: 0 auto 30rpx;
			border-radius: 10rpx;
			box-shadow: 0 0 10rpx #bcb9ca;
			padding: 20rpx 40rpx 20rpx 80rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #fff;
	
			.prevents_item_img {
				width: 30rpx;
				height: 50rpx;
				position: absolute;
				top: -4rpx;
				left: 30rpx;
			}
	
			.prevents_item_top {
				display: flex;
				justify-content: space-between;
				height: 60rpx;
				border-bottom: 2rpx solid #F4F4F4;
				line-height: 60rpx;
				font-size: 26rpx;
	
				.red {
					color: #ff0000;
				}
	
				.green {
					color: #7DBB91;
				}
			}
	
			.prevents_item_bot {
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #BDBDBD;
	
				.prevents_item_bot_item {
					height: 60rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: space-between;
					color: #909696;
	
					p:first-child {
						width: 80%;
						overflow: hidden; //溢出隐藏
						white-space: nowrap; //禁止换行
						text-overflow: ellipsis; //...
					}
	
					p:nth-child(2) {
						height: 45rpx;
						color: #00B075;
						border-bottom: 1px solid #00B075;
					}
				}
	
				.prevents_item_bot_sapn0 {
					color: #00B075;
				}
	
				.prevents_item_bot_sapn1 {
					color: #FF4747;
				}
	
				.prevents_item_bot_sapn2 {
					color: #FFAB00;
				}
			}
		}
	}
	.top {
		position: fixed;
		right: 10px;
		bottom: 40px;
		z-index: 100;
	
		image {
			width: 100rpx;
			height: 100rpx;
		}
	
		.backtop {
			display: flex;
			justify-content: flex-end;
			margin-bottom: 10rpx;
		}
	
		.more {
			display: flex;
		}
	
		.box {
			width: 80rpx;
			height: 80rpx;
			background-color: rgba(161, 161, 161, 0.45);
			border-radius: 50%;
			text-align: center;
			line-height: 80rpx;
			box-sizing: border-box;
			margin: 14rpx 10rpx 0 0;
			color: #fff;
		}
	}
	.slot-content {
		width: 60%;
		margin: 30rpx auto;
		display: flex;
		line-height: 70rpx;
	}
	
	.slot-contentremark {
		width: 70%;
		margin: 30rpx auto;
		display: flex;
		line-height: 70rpx;
	}
</style>