pingpu_H5/pages/worm/index.vue

<template>
	<!--虫情监测列表 -->
	<view>
		<!-- 搜索框 -->
		<ui-search placeholder="请输入设备ID" @confirm="searchLampList"></ui-search>
		<!-- 搜索框end -->
		<!-- 监测列表 -->
		<block v-for="(item,index) in lampList" :key="index">
			<view class="ui-card forecast-item" @click="openLampDetails(item)">
				<view class="flex-1 info">
					<view class="font-16  title" :class="item.is_online?'on':'off'">
						{{item.device_name?item.device_name:'测报灯'}}</view>
					<view class="text">设备ID：{{item.imei}}</view>
					<view class="text">最新上报时间：{{ item.uptime | timeFrom}}</view>
				</view>
				<ui-state :state="item.is_online"></ui-state>
			</view>
		</block>
		<!-- 监测列表end -->
		<ui-empty v-if="lampList.length==0"></ui-empty>
	</view>
</template>

<script>
	import {
		getWormLampList
	} from '@/api/worm.js'
	export default {
		data() {
			return {
				// 列表搜索条件
				params: {
					device_type_id: 3, //3虫情测报灯 7孢子仪
					device_id: '', // 搜索项，设备号、设备名称搜索
					page: 1,
					page_size: 10,
					// device_status: // 筛选项 1在线  0离线
				},
				total: 0, // 设备总数
				lampList: [], // 测报灯列表
			};
		},
		onLoad() {
			this.getLampList();
		},
		// 触底请求
		onReachBottom(e) {
			if (this.lampList.length >= this.total) {
				return;
			}
			this.params.page += 1;
			this.getLampList();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.refreshLampList();
			uni.stopPullDownRefresh()
		},
		methods: {
			// 刷新测试灯列表
			refreshLampList() {
				this.params.page = 1;
				this.lampList = [];
				this.getLampList();
			},
			// 获取测试灯列表
			async getLampList() {
				this.$api.loading('加载中...');
				const {
					data,
					counts
				} = await getWormLampList(this.params);
				this.$api.hide();
				this.lampList = [...this.lampList, ...data];
				this.total = counts ?? 0;
			},
			/**
			 * 测试灯
			 * @param {String} val 搜索内容
			 */
			searchLampList(val) {
				this.params.device_id = val;
				this.refreshLampList();
			},
			/**
			 * 打开虫情详情列表
			 * @param {String} id  设备id
			 * @param {String} imei 设备号
			 * @param {Number} uptime 上报时间
			 */
			openLampDetails({
				id,
				imei,
				uptime
			}) {
				uni.navigateTo({
					url: `details?id=${id}&imei=${imei}&uptime=${uptime}`
				})
			}
		},
	}
</script>