pingpu_H5/pages/aftersale/list.vue

<template>
	<!-- 故障上报设备列表 -->
	<view>
		<!-- 搜索框 -->
		<ui-search placeholder="请输入设备ID" @confirm="searchDevice"></ui-search>
		<!-- 搜索框end -->
		<ui-tabs :list="deviceTabs" :active="deviceTab" @clickTab="clickDeviceTabs"></ui-tabs>
		<!-- 设备列表 -->
		<block v-for="(item,index) in deviceList" :key="index">
	        <!-- 气象站 墒情站 -->
			<view class="ui-card forecast-item" @click="openDeviceDetails(item.equip_id,item.equip_name)" v-if="deviceTab==1 || deviceTab==3">
				<view class="flex-1 info">
					<view class="font-16 title" :class="item.is_online==1?'on':'off'">设备名称：{{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>
				<view class="aftersale-tips">故障上报</view>
			</view>
			<!-- 测报灯 -->
			<view class="ui-card forecast-item" @click="openDeviceDetails(item.imei,item.device_name)" v-if="deviceTab==4">
				<view class="flex-1 info">
					<view class="font-16 title" :class="item.is_online==1?'on':'off'">设备名称：{{item.device_name?item.device_name:'测报灯'}}</view>
					<view class="text">设备ID：{{item.imei}}</view>
					<view class="text">最新上报时间：{{ item.uptime | timeFrom}}</view>
				</view>
				<view class="aftersale-tips">故障上报</view>
			</view>
			<!-- 监控 -->
			<view class="ui-card forecast-item" @click="openDeviceDetails(item.device_id,item.device_name)" v-if="deviceTab==2">
				<view class="flex-1 info">
					<view class="font-16 title" :class="item.status==1?'on':'off'">设备名称：{{item.device_name}}</view>
					<view class="text">设备ID：{{item.device_id}}</view>
					<view class="text">SIM卡号：{{ item.sim}}</view>
				</view>
				<view class="aftersale-tips">故障上报</view>
			</view>
		</block>
		<!-- 气象列表end -->
		<ui-empty v-if="deviceList.length==0"></ui-empty>
	</view>
</template>

<script>
	import {
		getWeatherDeviceList
	} from '@/api/weather.js' // 气象列表
	import {
		getCameraList
	} from '@/api/camera.js' // 监控列表
	import {
		getWormLampList
	} from '@/api/worm.js' // 孢子仪 测报灯列表
	export default {
		data() {
			return {
				// 列表搜索条件
				params: {
					device_id: '', //筛选项 设备号、设备名称
					page: 1,
					page_size: 10,
					// device_type: 5, // 5气象站 8墒情站
					// device_type_id：3 3虫情测报灯 7孢子仪
				},
				deviceList: [], // 设备列表
				total: 0, // 设备总数
				deviceTab: 1, //当前设备类型
				deviceTabs: [{
						text: '气象站',
						value: 1
					}, {
						text: '监控',
						value: 2
					},
					{
						text: '墒情站',
						value: 3
					}, {
						text: '测报灯',
						value: 4
					}
				]
			};
		},
		onLoad() {
			this.getDeviceList();
		},
		// 触底请求
		onReachBottom(e) {
			if (this.deviceList.length >= this.total) {
				return;
			}
			this.params.page += 1;
			this.getDeviceList();
		},
		methods: {
			// 刷新设备列表
			refreshDeviceList() {
				this.params.page = 1;
				this.deviceList = [];
				this.getDeviceList();
			},
			// 切换设备类型
			clickDeviceTabs(val) {
				this.deviceTab = val;
				this.refreshDeviceList();
			},
			/**
			 * 打开设备故障上报
			 * @param {Object} deviceId 设备号
			 */
			openDeviceDetails(deviceId,deviceName) {
				uni.navigateTo({
					url: `index?deviceId=${deviceId}&name=${deviceName}`
				})
			},
			// 获取设备列表
			async getDeviceList() {
				let params = {};
				if (this.deviceTab == 1 || this.deviceTab == 3) {
					params.device_type = this.deviceTab == 1 ? 5 : 8;
				}
				if (this.deviceTab == 4) {
					params.device_type_id = 3;
				}
				const {
					data,
					counts
				} = await this.requestDeviceList({
					...this.params,
					...params
				});
				this.deviceList = [...this.deviceList, ...data];
				this.total = counts ?? 0;
			},
			// 请求设备列表
			async requestDeviceList(params) {
				const handleList = {
					1: getWeatherDeviceList, // 气象
					2: getCameraList, // 监控
					3: getWeatherDeviceList, // 墒情
					4: getWormLampList,
				}

				let res = await handleList[this.deviceTab](params);
				// 气象 墒情
				if (this.deviceTab == 1 || this.deviceTab == 3) {
					return {
						data: res.ids,
						counts: res.nums,
					}
				}
				return {
					data: res.data,
					counts: res.counts,
				}
			},
			/**
			 * 搜索设备
			 * @param {String} val 搜索内容
			 */
			searchDevice(val) {
				this.params.device_id = val;
				this.refreshDeviceList();
			}
		}
	}
</script>

<style lang="scss">
	.aftersale-tips {
		color: #E93F27;
		font-size: 20rpx;
	}
</style>