pingpu_H5/pages/weather/warn.vue

<template>
	<!-- 气象站、墒情站预警信息 -->
	<view>
		<block v-for="(item,index) in warningList" :key="index">
			<view class="ui-card warn-item">
				<view class="title">{{item.ekey}}</view>
				<view class="subtitle">设备ID：{{item.device_id}}</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 {
		getWeatherWarningList
	} from '@/api/warning.js'
	export default {
		data() {
			return {
				// 预警列表
				warningList: [],
				params: {
					page: 1, //页数 默认为1
					page_size: 10, //数据条数据 默认为10
					device_type: 5, //5 气象站 8墒情站
				},
				total: 0,
			}
		},
		onLoad(options) {
			//获取类型 5气象站 8墒情站
			this.params.device_type = options.type ?? 5;
			this.getWarningList();
		},
		// 触底请求
		onReachBottom(e) {
			if (this.warningList.length >= this.total) {
				return;
			}
			this.params.page += 1;
			this.getWarningList();
		},
		methods: {
			// 获取设备列表
			async getWarningList() {
				const {
					data,
					nusm
				} = await getWeatherWarningList(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>