bigdata_WX/pages/irrigate/index.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 40px;">
			<!-- <view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="灌溉控制系统" right-icon="search"
					@clickRight="clickRight" size="16"></uni-nav-bar>
				<view class="inputs" :style="{'width':width+'rpx'}">
					<input type="text" value="" placeholder="请输入设备ID或设备名称" v-model="imports" @input="searchinp"
						class="inputbox" :clearable="false" />
					<u-icon name="search" size="40" class="icon" @click="search"></u-icon>
				</view>
			</view> -->
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回"
				 size="16">
				 <view class="bases_search">
				 	<view class="bases_search_text" @click="search">
				 		<u-icon name="search" class="search"></u-icon>
				 		<input type="text" v-model="imports" placeholder="设备ID搜索" disabled @input="searchinp"/>
				 	</view>
				 </view>
				 </uni-nav-bar>
			</view>
			<image :src="$imageURL+'/bigdata_app/image/irrigate/1.png'" mode="" class="image">
			</image>
			<view class="loading" v-if="loadingtf">
				<image src="../../static/images/ajax-loader.gif" mode="" class="img"></image>
			</view>
			<scroll-view class="tab-box" scroll-x="true" :scroll-into-view="'tab'+active" scroll-with-animation>
				<view class="tab-wrapper">
					<view v-for="(item,index) in equipArr" :key="item.type" v-if="item.tf"
						:id="'tab'+index" @click="tabClick(index,item.type)" :class="['tab-item',active==index?'active':'']">
						<text>{{item.name}}</text>
						<text class="bottom-line"></text>
					</view>
				</view>
			</scroll-view>
			<view class="prevents">
				<view class="prevents_item" v-for="(item,index) in eqlistdata" :key="item.d_id" @click="eqdetails(item, index)">
					<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>
								<!-- <u-switch v-model="item.status2" size="35" activeColor="#00B075"
									style="margin-top: 10rpx;" inactiveColor="#f00"
									@change="switchchange2($event,item.d_id,index)">
								</u-switch> -->
								<switch @change="switchchange2($event,item.d_id,index)" v-if="$QueryPermission(256)" 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)" v-if="$QueryPermission(205)">数据查看</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>
								<!-- <u-switch v-model="item.water_pump_switch2" size="35" active-color="#00B075"
									inactive-color="#f00" style="margin-top: 10rpx;"
									@change="switchchange($event,item.device_id,index)">
								</u-switch> -->
								<switch @change="switchchange($event,item.d_id,index)" v-if="$QueryPermission(254)" 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 || side_type=='xph'">
						<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>
		</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
	} from "../../util/anitthro.js"
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				eqlistdata: [],
				isTop: false,
				filtrateTF: false,
				device_status: "",
				width: 0, //顶部搜索栏宽度
				imports: "", //搜索设备id
				loadingtf: false,
				equipArr: [{
					name: '机井水电双控',
					type: 17, //5 环境监测 15 管式墒情
					list: [],
					pageIndex: 1,
					tf: false,
				}, {
					name: '水肥一体化(L)',
					type: 18, //5 环境监测 15 管式墒情
					list: [],
					pageIndex: 1,
					tf: false,
				}, {
					name: '水肥一体化(X)',
					type: 13, //5 环境监测 15 管式墒情
					list: [],
					pageIndex: 1,
					tf: false,
				}, {
					name: '水肥一体化',
					type: 'xph', //5 环境监测 15 管式墒情
					list: [],
					pageIndex: 1,
					tf: false,
				}, {
					name: '水肥一体化(X)',
					type: 13, //5 环境监测 15 管式墒情
					list: [],
					pageIndex: 1,
					tf: true,
				}, {
					name: '水肥一体化',
					type: 'xph', //5 环境监测 15 管式墒情
					list: [],
					pageIndex: 1,
					tf: true,
				}],
				active: 0, //tab选中的下标
				side_type: 17, //当前选中的设备类型
				show: false,
				timevalue: "",
				selindex: "", //选中的设备index
				selid: "", //选中的设备id
				showremark: false,
				timevalueremark: "",
				key: true
			}
		},
		methods: {
			async xphlist() {
				this.loadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=xphsp.views.all_devices',
					data: {
						page: this.page,
						page_size: "10",
						device_id: this.imports,
					}
				})
				this.loadingtf = false
				this.eqlistdata = this.eqlistdata.concat(res.data)
				console.log(this.eqlistdata)
			},
			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)
			},
			clickRight() {
				this.width = 600
			},
			clickLeft() {
				uni.switchTab({
					url: "../index/index"
				})
			},
			eqdetails(data, index) {
				if (this.side_type == 13) {
					uni.navigateTo({
						url: "../waterandfer/datails?shebei=" + JSON.stringify(data)
					})
				} else if(this.side_type == 'xph') {
					uni.navigateTo({
						url: "../waterandfernew/details?shebei=" + JSON.stringify(this.eqlistdata[index])
					})
				}
			},
			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()
					} else if (this.side_type == 'xph') {
						this.xphlist()
					}
				}, 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()
				} else if (type == 'xph') {
					this.eqlistdata = []
					this.xphlist()
				}
			},
			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() {
			// this.tubulareqlist()
			uni.getStorage({
				key: "jurisdiction",
				success: (res) => {
					let items = JSON.parse(res.data).filter((item) => {
						return item.pur_id == 202
					})
					var itemarr = items[0].children
					console.log(itemarr)
					for (var i = 0; i < itemarr.length; i++) {
						switch (itemarr[i].pur_id) {
							case 203:
								this.equipArr[0].tf = true
								break
							case 204:
								this.equipArr[1].tf = true
								break
							case 195:
								this.equipArr[2].tf = true
								break;
							case 288:
								this.equipArr[3].tf = true
								break;
						}
					}
					for (var i = 0; i < this.equipArr.length; i++) {
						if (this.equipArr[i].tf) {
							if (i == 0) {
								this.tubulareqlist(); 
							} else if (i == 1) {
								this.eqlist();
							} else if (i == 2) {
								this.sfeqlist();
							} else {
								this.xphlist();
							}
							this.active = i
							this.side_type = this.equipArr[i].type
							break
						}
					}
				}
			})
		},
		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()
			} else if (this.side_type == 'xph') {
				this.xphlist()
			}
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}
	.bases_search {
		width: 60%;
		background-color: #FFFFFF;
		position: absolute;
		top: 10rpx;
		left: 50%;
		margin-left: -33%;
		.bases_search_text {
			width: 90%;
			margin: 0 auto;
			background-color: #F8F8F8;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			line-height: 60rpx;
	
			.search {
				padding: 0 20rpx;
				font-size: 34rpx;
			}
	
			input {
				width: 80%;
				margin-top: 10rpx;
				font-size: 28rpx;
			}
		}
	}
	.inputs {
		height: 54rpx;
		background-color: #E4E4E4;
		border-radius: 27rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		transition: width 0.5s;
		overflow: hidden;
		padding-top: 8rpx;
		box-sizing: border-box;

		.inputbox {
			width: 85%;
			text-indent: 1rem;
			font-size: 26rpx;
		}

		.icon {
			position: absolute;
			top: 8rpx;
			right: 26rpx;
		}
	}

	/deep/.uni-icons {
		font-size: 40rpx !important;
	}

	.image {
		position: fixed;
		top: 84px;
		width: 100%;
		height: 160rpx;
		z-index: 555;
	}

	.loading {
		position: fixed;
		top: 440px;
		width: 95%;
		left: 2.5%;
		text-align: center;
		z-index: 9;

		.img {
			width: 300rpx;
			height: 40rpx;
		}
	}

	.tab-box {
		position: fixed;
		top: 164px;
		font-size: 24rpx;
		line-height: 80rpx;
		background-color: #FFFFFF;
		width: 100%;
		z-index: 2;
		white-space: nowrap;
		
		.tab-wrapper {
			display: inline-flex;
			padding: 0 20rpx;
		}

		.tab-item {
			cursor: pointer;
			position: relative;
			padding: 0 30rpx;
			flex-shrink: 0;
		}

		.tab-item.active {
			.bottom-line {
				bottom: 0;
				position: absolute;
				display: inline-block;
				width: 90rpx;
				height: 6rpx;
				left: 0;
				right: 0;
				margin: auto;
				background: $uni-color-success;
			}
		}
	}

	.prevents {
		width: 100%;
		position: absolute;
		top: 180px;

		.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>