bigDataApp/pages/prevention/search.vue

<template>
	<view>
		<view style="position: fixed;z-index: 100;">
			<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回"></uni-nav-bar>
			<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="search"></u-icon>
			</view>
		</view>
		<view class="prevents">
			<view class="prevents_item" v-for="item,index in eqlistdata" :key="index">
				<image :src="item.device_status==1?'../../static/image/prevention/6.png':'../../static/image/prevention/7.png'" mode="" class="prevents_item_img"></image>
				<view class="prevents_item_top">
					<p>设备 ID：{{item.device_id}}</p>
					<p :class="item.device_status==1?'green':'red'" v-text="item.device_status==1?'在线':'离线'"></p>
				</view>
				<view class="prevents_item_bot">
					最新上报时间：{{item.status_time|timeFormat()}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Debounce,
		Throttle
	} from "../../util/anitthro.js"
	export default {
		data() {
			return {
				imports:'',
				eqlistdata:[],
				page:1,
				size:10,
				show:false,
				value:'',
				options1:[
					{
						text:"杀虫灯",
						id:2
					},
					{
						text:"虫情测报",
						id:3
					},
					{
						text:"孢子仪",
						id:7
					},
					{
						text:"性诱设备",
						id:4
					},
				]
			}
		},
		methods: {
			async eqlist() { //设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
					data: {
						device_type_id: 2,
						page:this.page,
						size:this.size,
						device_id:this.imports
					}
				})
				this.eqlistdata=this.eqlistdata.concat(res.data) 
				console.log(this.eqlistdata)
			},
			clickLeft(){
				uni.navigateBack({
					delta:1
				})
			},
			search(){
				this.eqlistdata=[]
				this.eqlist()
			},
			searchinp(){
				Debounce(() => {
					this.eqlistdata=[]
					this.eqlist()
				}, 1000)()
			},
			actionSheetCallback(index) {//选择框
				this.value = this.options1[index].text;
				// this.id = this.options1[index].id
			}
		}
	}
</script>

<style lang="scss">
.search_top_input{
		width: 80%;
		height: 54rpx;
		background-color: #E4E4E4;
		border-radius: 27rpx;
		position: absolute;
		top: 18rpx;
		right: 18rpx;
		padding-top: 8rpx;
		input{
			width: 85%;
			text-indent: 1rem;
			font-size: 26rpx;
		}
		.icon{
			position: absolute;
			top: 8rpx;
			right: 26rpx;
		}
	}

	.prevents{
		width: 100%;
		position: absolute;
		top: 54px;
		.prevents_item{
			width: 95%;
			margin: 0 auto 30rpx;
			border-radius: 10rpx;
			box-shadow: 0 0 10rpx #bcb9ca;
			padding: 20rpx 40rpx 20rpx 80rpx;
			position: relative;
			.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;
			}
		}
	}
</style>