pingpu_H5/pages/weather/index.vue

<template>
	<!-- 气象环境检测列表 -->
	<view>
		<!-- 搜索框 -->
		<ui-search placeholder="请输入设备ID" @confirm="searchDevice"></ui-search>
		<!-- 搜索框end -->
		<!-- 气象列表 -->
		<block v-for="(item,index) in deviceList" :key="index">
			<view class="ui-card forecast-item" @click="openDeviceDetails(item)">
				<view class="flex-1 info">
					<view class="font-16  title on">设备名称：{{item.equip_name}}</view>
					<view class="text">设备ID：{{item.equip_id}}</view>
					<view class="text text-ellipsis">地址：{{item.address}}</view>
					<view class="text">最新上报时间：{{item.uptime | timeFrom}}</view>
				</view>
				<ui-state :state="item.is_online"></ui-state>
			</view>
		</block>
		<!-- 气象列表end -->
		<ui-empty v-if="deviceList.length==0"></ui-empty>
	</view>
</template>

<script>
	import {
		getWeatherDeviceList
	} from '@/api/weather.js'
	export default {
		data() {
			return {
				// 列表搜索条件
				params: {
					device_id: '', //筛选项 设备号、设备名称
					page: 1,
					page_size: 10,
					// device_status: // 筛选项 1在线  0离线
					device_type: 5, // 5气象站 8墒情站
				},
				deviceList: [], // 设备列表
				total: 0, // 设备总数
			};
		},
		onLoad(options) {
			//获取类型 5气象站 8墒情站
			this.params.device_type=options.type ?? 5;
			this.getDeviceList();
		},
		// 触底请求
		onReachBottom(e) {
			if (this.deviceList.length >= this.total) {
				return;
			}
			this.params.page += 1;
			this.getDeviceList();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.refreshDeviceList();
			uni.stopPullDownRefresh()
		},
		methods: {
			// 刷新设备列表
			refreshDeviceList(){
				this.params.page = 1;
				this.deviceList=[];
				this.getDeviceList();
			},
			/**
			 * 打开设备详情
			 * @param {Object} device 设备信息
			 */
			openDeviceDetails(device) {
				let params={
					equip_name: device.equip_name, //设备名称
					equip_id: device.equip_id, //设备号
					address: device.address, //组织地址
					is_online: device.is_online, //在线状态 0离线 1在线
					uptime: device.uptime ,//数据更新时间  秒级时间戳
					device_type: this.params.device_type, // 5气象站 8墒情站
				}
				uni.navigateTo({
					url: `details?params=${JSON.stringify(params)}`
				})
			},
			// 获取设备列表
			async getDeviceList() {
				const {
					ids,
					nums
				} = await getWeatherDeviceList(this.params);
				this.deviceList = [...this.deviceList, ...ids];
				this.total = nums ?? 0;
			},
			/**
			 * 搜索设备
			 * @param {String} val 搜索内容
			 */
			searchDevice(val) {
				this.params.device_id = val;
				this.refreshDeviceList();
			}
		}
	}
</script>

<style lang="scss">
</style>