pingpu_H5/pages/warn/index.vue

<template>
	<!-- 预警信息全部 -->
	<view>
		<!-- 搜索框end -->
		<ui-tabs :list="warnTabs" :active="warnTab" @clickTab="clickWarnTabs"></ui-tabs>
		<block v-for="(item,index) in warningList" :key="index">
			<!-- 虫害预警 -->
			<view class="ui-card warn-item" v-if="warnTab==1">
				<view class="title">{{item.ekey}}</view>
				<view class="subtitle">设备ID：{{item.device_id}}</view>
				<view class="subtitle">设备名称：{{item.device_name}}</view>
				<view class="paragraph">
					<text v-for="(val,key,i) in item.warning_content" :key="i">
						{{key+':'+val}},
					</text>
				</view>
				<text class="time">{{item.upltime | timeFrom}}</text>
			</view>
			<!-- 气象，墒情 预警 -->
			<view class="ui-card warn-item" v-if="warnTab==2 ||warnTab==3">
				<view class="title">{{item.ekey}}</view>
				<view class="subtitle">设备ID：{{item.device_id}}</view>
				<view class="subtitle">设备名称：{{item.device_name}}</view>
				<view class="paragraph">{{item.warning_content}}</view>
				<text class="time">{{item.upltime | timeFrom}}</text>
			</view>
		</block>
		<ui-empty v-if="warningList.length==0" text="暂无预警信息"></ui-empty>
	</view>
</template>

<script>
	import {
		getPestWarningList,
		getWeatherWarningList
	} from '@/api/warning.js'
	export default {
		data() {
			return {
				warnTab: 1, //当前设备类型
				warnTabs: [{
					text: '虫害预警',
					value: 1
				}, {
					text: '气象预警',
					value: 2
				}, {
					text: '墒情预警',
					value: 3
				}],
				// 预警列表
				warningList: [],
				params: {
					page: 1, //页数 默认为1
					page_size: 10, //数据条数据 默认为10
				},
				total: 0,
			}
		},
		async onLoad(options) {
			await this.$onLaunched;
			this.getWarningList();
		},
		// 触底请求
		onReachBottom(e) {
			if (this.warningList.length >= this.total) {
				return;
			}
			this.params.page += 1;
			this.getWarningList();
		},
		methods: {
			// 刷新预警列表
			refreshWarningList() {
				this.params.page = 1;
				this.warningList = [];
				this.getWarningList();
			},
			// 切换预警类型
			clickWarnTabs(val) {
				this.warnTab = val;
				this.refreshWarningList();
			},
			// 获取预警列表
			async getWarningList() {
				let params = {};
				if (this.warnTab == 2 || this.warnTab == 3) {
					params.device_type = this.warnTab == 2 ? 5 : 8;
				}
				const handleList = {
					1: getPestWarningList, // 丛海
					2: getWeatherWarningList, // 气象
					3: getWeatherWarningList, // 墒情
				}

				const {
					data,
					nusm
				} = await handleList[this.warnTab]({
					...params,
					...this.params
				});
				this.warningList = [...this.warningList, ...data];
				this.total = nusm ?? 0;
			},
		}
	}
</script>

<style lang="scss">
	.warn-item {
		padding: 26rpx 24rpx;

		.title {
			font-size: $font-size-title;
			color: $color-title;
			line-height: $line-height-title;
		}

		.subtitle {
			margin-top: 10rpx;
			font-size: $font-size-subtitle;
			color: $color-subtitle;
			line-height: $line-height-subtitle;
		}

		.paragraph {
			margin: 10rpx 0 18rpx;
			font-size: $font-size-paragraph;
			color: $color-paragraph;
			line-height: $line-height-paragraph;
		}

		.time {
			padding: 6rpx 15rpx;
			font-size: 28rpx;
			color: #317AFD;
			line-height: 1;
			background: rgba(49, 122, 253, .3);
			border-radius: 4rpx;
		}
	}
</style>