pingpu_H5/pages/traplamp/traplamp.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.device_name}}</view>
					<view class="text">设备ID：{{item.device_id}}</view>
					<!-- <view class="text">最新上报时间：{{item.addtime | 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 {
		getList
	} from '@/api/traplamp.js'
	export default {
		data() {
			return {
				// 列表搜索条件
				params: {
					page: 1,
					page_size: 999,
					device_type: 3 // 3外联测报灯站
				},
				deviceList: [], // 设备列表
			};
		},
		async onLoad(options) {
			await this.$onLaunched;
			this.getDeviceList();
			
		},
		//下拉刷新
		onPullDownRefresh() {
			this.refreshDeviceList();
			uni.stopPullDownRefresh()
		},
		methods: {
			// 刷新设备列表
			refreshDeviceList(){
				this.params.page = 1;
				this.deviceList=[];
				this.getDeviceList();
			},
			// 获取设备列表
			async getDeviceList() {
				this.$api.loading('加载中...');
				const {
					data
				} = await getList(this.params);
				this.$api.hide();
				this.deviceList = data;
			},
			//详情
			openDeviceDetails(item) {
				console.log(item)
				uni.navigateTo({
					url:`detail/detail?id=${item.device_id}`
				})
			}
		}
	}
</script>

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