bigdata_WX/pages/equipList/index.vue

<template>
	<view>
		<!-- <view class="status_bar"></view>
		<view style="position: fixed;top:44px;z-index: 100;width: 100%;">
			<uni-nav-bar right-icon="search" title="设备列表" @clickRight="clickRight"></uni-nav-bar>
			
		</view> -->
		<view class="textbox">
			<view class="inputs">
				<!-- <u-input v-model="imports" type="text" :border="true" /> -->
				<u-search placeholder="请输入设备ID" v-model="imports" placeholder-color="#909696" :show-action="false"
					search-icon-color="#909696" @input="searchinput">
				</u-search>
				<!-- <input type="text" value="" placeholder="请输入设备ID或设备名称" v-model="imports" @input="searchinput"
					class="inputbox" :clearable="false" />
				<u-icon name="search" size="40" class="icon" @click="search"></u-icon> -->
			</view>
			<view class="listbox">
				<view class="listbox_left">
					<view :class="currents == index ? 'listbox_left_item_act listbox_left_item' : 'listbox_left_item'"
						v-for="item, index in list" :key="index" @click="change(index)">
						{{ item.name }}
					</view>
				</view>
				<!-- <view class="list" @scroll='showOut' ref="sollo" id="list"> -->
				<scroll-view :scroll-top="0" :scroll-y="true" class="list scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view class="list_item" v-for="(item, index) in eqlistdata" :key="index" @click="historys(item)">
						<view class="list_item_top">
							<p class="p1">
								<image
									:src="'https://www.hnyfwlw.com:8006/bigdata_app/image/fourMoodBase/' + type_id + '.png'"
									mode="">
								</image>
								<view>{{ item.device_name == "" ? "--" : item.device_name }}</view>
							</p>
							<p :class="[item.is_online ? 'p2' : 'p_out']">{{ item.is_online ? "在线" : "离线" }}</p>
						</view>
						<view class="list_item_text">
							<p>设备ID：{{ item.only_for_show || item.device_id }}</p>
							<p>适配用户：{{ item.real_name == '' ? "无" : item.real_name }}</p>
							<p>最新上报时间：{{ item.uptime | timeFormat() }}</p>
							<p>添加设备时间：{{ item.addtime | timeFormat() }}</p>
							<p>设备已运行：{{ item.days }}天</p>
						</view>
						<view class="list_item_btn"
							v-if="$QueryPermission(108) && ![13, 17, 18, 11, 19, 20, 14, 25].includes(type_id)"
							@click.stop="modification(item)">
							信息修改
						</view>
					</view>
				</scroll-view>

				<!-- </view> -->
			</view>
		</view>

		<!-- <view class="utabs_box">
			<view class="utabs">
				<u-tabs :list="list" :is-scroll="true" :current="currents" @change="change" item-width="140"
					font-size="24" gutter="20" bar-width="60" active-color="#42b983" v-if="list.length"></u-tabs>
			</view>
		</view> -->
		<view class="loading" v-if="loadingtf">
			<image src="../../static/images/ajax-loader.gif" mode="" class="img"></image>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image :src="'https://www.hnyfwlw.com:8006/bigdata_app' + '/image/6209a98f0cb3b5086f2ca36152c9269.png'"
				mode="">
			</image>
		</view>
	</view>
</template>

<script>
	import {
		Debounce,
		Throttle
	} from "../../util/anitthro.js"
	export default {
		data() {
			return {
				list: [],
				current: 0,
				currents: 0,
				page: 1,
				size: 10,
				device_model: 0,
				eqlistdata: [],
				isTop: false,
				infoalter: false, // 权限设置,
				type_id: 0, //设备类型,
				imgpath: [],
				loadingtf: false,
				width: 0, //顶部搜索栏宽度
				imports: "" //搜索设备ID
			}
		},
		methods: {
			async eqlist(tf) { //设备列表
				this.loadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
					data: {
						device_type_id: this.type_id,
						page: this.page,
						page_size: this.size,
						device_id: this.imports,
						device_model: this.device_model
					}
				})
				this.loadingtf = false
				var newtime = +new Date() / 1000;
				res.data.forEach(item => {
					let {
						uptime,
						addtime
					} = item;
					item.uptime = addtime;
					item.addtime = uptime;
					var days = (newtime - item.addtime) / 60 / 60 / 24;
					item.days = Math.round(days);
				})
				if (tf) {
					this.eqlistdata = this.eqlistdata.concat(res.data)
				} else {
					this.eqlistdata = res.data
				}
				// for (var i = 0; i < this.eqlistdata.length; i++) {
				//   var days = (newtime - this.eqlistdata[i].uptime) / 60 / 60 / 24
				//   this.eqlistdata[i].days = Math.round(days)
				// }
				console.log(res)
			},
			async xyeqlist(tf) { //设备列表
				this.loadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_list',
					data: {
						device_type_id: this.type_id,
						page: this.page,
						page_size: this.size,
						device_id: this.imports,
					}
				})
				this.loadingtf = false
				var newtime = +new Date() / 1000
				if (tf) {
					this.eqlistdata = this.eqlistdata.concat(res.data)
				} else {
					this.eqlistdata = res.data
				}
				for (var i = 0; i < this.eqlistdata.length; i++) {
					var days = (newtime - this.eqlistdata[i].uptime) / 60 / 60 / 24
					this.eqlistdata[i].days = Math.round(days)
				}
				console.log(res)
			},
			//camera.camera_manage.list_camera
			async camera() { //监控
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=camera.camera_manage.list_camera',
					data: {
						page_size: 1,
					}
				})
				this.accessToken = res.accessToken
			},
			// homes.user_device_type
			async usertype() { //设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=home.homes.user_device_type',
				})
				console.log(res)
				for (var i = 0; i < res.length; i++) {
					if (
						res[i].id == 16
					) {
						continue;
					}
					var obj = {
						name: res[i].type_name,
						id: res[i].id,
						device_model: res[i].device_model
					}
					this.list.push(obj)
				}
				if (res.length) {
					console.log(this.list)
					this.type_id = this.list[0].id;
					this.device_model = this.list[0].device_model;
					if (this.list[0].id == 10) {
						this.xyeqlist()
					} else {
						this.eqlist()
					}
				}
			},
			change(index) { //头部导航栏的点击
				this.imports = ""
				this.current = index
				this.currents = index
				this.page = 1
				this.eqlistdata = []
				this.type_id = this.list[index].id;
				this.device_model = this.list[index].device_model;
				if (this.list[index].id == 10) {
					this.xyeqlist()
				} else {
					this.eqlist()
				}
			},
			clickRight() { //搜索
				this.width = '90%'
			},
			modification(item) {
				uni.navigateTo({
					url: "./seabox/modification?data=" + JSON.stringify(item) + "&id=" + this.type_id,
				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			historys(itemOld) {
				let item = JSON.parse(JSON.stringify(itemOld))
				console.log("item", item);
				switch (this.type_id) {
					// 水肥新设备
					case 22:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						uni.navigateTo({
							url: "../waterandfernew/details?shebei=" + JSON.stringify(obj),
						});
						break
						// 病虫害可视监测
					case 14:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: "../cb/sy/detail?detail=" + JSON.stringify(item),
						});
						break
					case 2:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: "../prevention/equipmentdetails?shebei=" + JSON.stringify(item),
						});
						break;
					case 5:
						console.log(item);
						var obj = {};
						obj.d_id = item.d_id;
						obj.equip_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						uni.navigateTo({
							url: "../environment/equipment?shebei=" + JSON.stringify(obj),
						});
						break;
					case 6:
						uni.navigateTo({
							url: "/pages/webview/webview?device_id=" +
								item.imei +
								"&accessToken=" +
								this.accessToken,
						});
						break;
					case 3:
						item.addtime = item.uptime;
						item.type = this.type_id;
						uni.navigateTo({
							url: "../cb/equip-detail/equip-detail?info=" + JSON.stringify(item),
						});
						break;
					case 28:
						item.addtime = item.uptime;
						item.type = this.type_id;
						uni.navigateTo({
							url: "../cb/smallPest/smallPest?info=" + JSON.stringify(item),
						});
						break;
					case 4:
						item.addtime = item.uptime;
						item.type = this.type_id;
						uni.navigateTo({
							url: "../cb/equip-detail/equip-detail?info=" + JSON.stringify(item),
						});
						break;
					case 7:
						item.addtime = item.uptime;
						item.type = this.type_id;
						uni.navigateTo({
							url: "../cb/equip-detail/equip-detail?info=" + JSON.stringify(item),
						});
						break;
					case 8:
						// item.type = this.type_id;
						uni.navigateTo({
							url: "../cb/thxydetail/thxydetail?imei=" + item.imei
						});
						break;
					case 29:
					  // item.type = this.type_id;
					  uni.navigateTo({
					    url: `../cb/nlNewXy/nlNewXy?imei=${item.imei}&showId=${item.only_for_show}`
					  });
					  break;
					case 24:
						// item.type = this.type_id;
						uni.navigateTo({
							url: "../cb/zjxydetail/thxydetail?imei=" + item.imei
						});
						break;
					case 12:
						console.log(item);
						item.addtime = item.uptime;
						uni.navigateTo({
							url: "../cb/xctdetail/xctdetail?info=" + JSON.stringify(item),
						});
						break;
					case 13:
						console.log(item);
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						uni.navigateTo({
							url: "../waterandfer/datails?shebei=" + JSON.stringify(obj),
						});
						break;
					case 15:
						console.log(item);
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						uni.navigateTo({
							url: "../environment/gsequipment?shebei=" + JSON.stringify(obj),
						});
						break;
					case 17:
						break;
					case 18:
						var obj = {};
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						uni.navigateTo({
							url: "../cb/shuifeiL/shuifeiL?detail=" + JSON.stringify(obj),
						});
						break;
					case 11:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 11;
						uni.navigateTo({
							url: "../disease/cmb?shebei=" + JSON.stringify(obj),
						});
						break;
					case 19:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 19;
						uni.navigateTo({
							url: "../disease/cmb?shebei=" + JSON.stringify(obj),
						});
						break;
					case 20:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 20;
						uni.navigateTo({
							url: "../disease/cmb?shebei=" + JSON.stringify(obj),
						});
						break;
					case 21:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 21;
						uni.navigateTo({
							url: "../disease/cmb?shebei=" + JSON.stringify(obj),
						});
						break;
						case 26:
							var obj = {};
							obj.d_id = item.d_id;
							obj.device_id = item.imei;
							obj.is_online = item.is_online;
							obj.lat = item.lat;
							obj.lng = item.lng;
							obj.equip_name = item.device_name;
							obj.uptime = item.uptime;
							obj.location = item.address;
							obj.type = 26;
							uni.navigateTo({
								url: "../disease/cmb?shebei=" + JSON.stringify(obj),
							});
							break;
						case 27:
						  var obj = {};
						  obj.d_id = item.d_id;
						  obj.device_id = item.imei;
						  obj.is_online = item.is_online;
						  obj.lat = item.lat;
						  obj.lng = item.lng;
						  obj.equip_name = item.device_name;
						  obj.uptime = item.uptime;
						  obj.location = item.address;
						  obj.type = 26;
						  uni.navigateTo({
						    url: "../disease/mls/mls?shebei=" + JSON.stringify(obj),
						  });
						  break;
					case 25:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: "../cb/xylps/detail/detail?detail=" + JSON.stringify(item),
						});
						break;
					default:
						item.addtime = item.uptime;
						item.type = this.type_id;
						uni.navigateTo({
							url: "../cb/xy2.0/particulars?info=" + JSON.stringify(item),
						});
						break;
				}
			},
			search() { //搜索
				this.eqlistdata = []
				this.page = 1
				if (this.list[this.currents].id == 10) {
					this.xyeqlist()
				} else {
					this.eqlist()
				}
			},
			searchinput() {
				Debounce(() => {
					this.eqlistdata = []
					this.page = 1
					if (this.list[this.currents].id == 10) {
						this.xyeqlist()
					} else {
						this.eqlist()
					}
				}, 1000)()
			},
			scrollTop(e) {
				console.log(e)
			},
			upper() {

			},
			lower() {
				console.log(11)
				this.page++
				if (this.type_id == 10) {
					this.xyeqlist(true)
				} else {
					this.eqlist(true)
				}
			},
			scroll() {

			},
		},
		onLoad() {
			// this.list = []
			// this.camera()
			// this.current = 0
			// this.currents = 0
			// this.page = 1
			// this.usertype()
			// this.width = 0
			// uni.getStorage({
			//   key: "jurisdiction",
			//   success: (res) => {
			//     console.log(JSON.parse(res.data));
			//     let items = JSON.parse(res.data).filter((item) => {
			//       return item.pur_id == 22 //"设备管理";
			//     });
			//     let items2 = items[0].children.filter((item) => {
			//       return item.pur_id == 23 //"设备列表";
			//     });
			//     console.log(items2[0].children);
			//     this.infoalter = items2[0].children.some((item) => {
			//       return (
			//         item.pur_id == 108 || item.pur_id == 109
			//       );
			//     });
			//     console.log(this.infoalter);
			//   },
			// });
		},
		onTabItemTap(e) {
			// console.log(e);
			this.eqlistdata = [];
			this.list = [];
			this.camera();
			this.current = 0;
			this.currents = 0;
			this.page = 1;
			this.usertype();
			this.width = 0;
		},
		onReachBottom() {
			this.page++
			if (this.type_id == 10) {
				this.xyeqlist(true)
			} else {
				this.eqlist(true)
			}
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #00B075;
	}

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

	.textbox {
		width: 100%;
		padding: 20rpx 30rpx;
		height: calc(100vh - 30rpx);
		box-sizing: border-box;
		border-top-left-radius: 80rpx;
		border-top-right-radius: 80rpx;
		margin-top: 30rpx;
		background-color: #F9F9F9;
		box-sizing: border-box;
	}

	.inputs {
		/deep/.u-content {
			background-color: #fff !important;
		}

		/deep/.uni-input-wrapper {
			background-color: #fff !important;
		}

		/deep/.u-input {
			background-color: #fff !important;
		}
	}

	.utabs_box {
		width: 100%;
		position: fixed;
		top: 88px;
		background-color: #FFFFFF;
		z-index: 100;

		.utabs {
			width: 95%;
			margin: 0 auto;
		}
	}

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

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

	.listbox {
		display: flex;
		justify-content: space-around;
		height: calc(100vh - 150rpx);
		margin-top: 20rpx;

		.listbox_left {
			background-color: #fff;
			padding: 10rpx;
			width: 180rpx;
			overflow: auto;

			.listbox_left_item {
				height: 50rpx;
				width: 100%;
				margin-bottom: 20rpx;
				text-align: center;
				border-radius: 10rpx;
				line-height: 50rpx;
				overflow: hidden; //溢出隐藏
				white-space: nowrap; //禁止换行
				text-overflow: ellipsis; //...
			}

			.listbox_left_item_act {
				background-color: rgba(0, 176, 117, 0.2);
				color: #00B075;
			}
		}
	}

	.list {
		width: calc(100vw - 300rpx);
		background-color: #FDFDFD;
		// margin-bottom: 100rpx;
		overflow-y: auto;

		.list_item {
			width: 100%;
			margin: 0 auto 20rpx;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #FFFFFF;
			box-shadow: 0 0 10rpx #bcb9ca;

			.list_item_top {
				display: flex;
				justify-content: space-between;

				.p1 {
					width: 86%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					overflow: hidden;

					image {
						width: 40rpx;
						height: 40rpx;
						vertical-align: text-top;
						margin-right: 20rpx;
					}

					view {
						width: calc(100% - 40rpx);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.p2 {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #42b983;
				}

				.p_out {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: red;
				}
			}

			.list_item_text {
				margin-top: 20rpx;

				p {
					font-size: 24rpx;
					color: #636363;
					margin-top: 10rpx;
					word-break: break-all;
				}

				p:first-child {
					font-size: 28rpx;
					font-weight: 700;
				}
			}

			.list_item_btn {
				width: 126rpx;
				color: #42b983;
				height: 40rpx;
				text-align: center;
				border: 1rpx solid #42b983;
				border-radius: 25rpx;
				font-size: 24rpx;
				line-height: 35rpx;
				position: absolute;
				bottom: 15rpx;
				right: 20rpx;
			}
		}
	}

	.top {
		position: fixed;
		right: 30px;
		bottom: 100px;
		z-index: 100;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>