zhgdyunapp_vue3/pages/projectEnd/markRoom/alarmList.vue

<template>
	<view class="fullHeight">
		<headers :showBack="true" class="">
			<view class="headerName">
				 报警列表
			</view>
		</headers>
		<view class="selectContent">
			<picker mode="date" @change="changeDate" :value="searchForm.queryTime">
				<view class="selectVideoBox">
					<text class="videoName">{{searchForm.queryTime}}</text>
					<uni-icons2 class="arrow" type="arrowdown" size="15"></uni-icons2>
				</view>
			</picker>
		</view>
		 <!-- :style="{ 'padding-top': (statusBarHeight+52+40) * 1.5 + 'rpx' }" -->
		<view class="listBox">
			<view class="listItem" v-for="item in list" :key="item.id" @click="goAdd(item.id)">
				<view class="title">
					{{item.alarmType}}
				</view>
				<view class="bottom">
					报警时间：{{item.alarmTime}}
				</view>
			</view>
			<view class="placeholderBox" v-show="list.length==0">
				<image src="/static/noData.png" class="noDataImg"></image>
				<view class="text">
					暂无数据
				</view>
			</view>
		</view>
		<view class="loadMoreBox" v-if="isLoadMore">
			<uni-load-more :status="loadStatus" iconType="auto"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import headers from "@/components/headers/headers.vue"
	import {GetDateStr} from "../../../static/js/util.js"
	export default {
		components:{headers},
		data() {
			return {
				searchForm:{
					devSn: "",
					queryTime: "",
					// pageNo: 1,
					// pageSize: 10,
					projectSn: ""
				},
				projectDetail:{},
				list:[],
				statusBarHeight:0,
				loadStatus:'more',
				isLoadMore:false
			};
		},
		onLoad(options) {
			this.searchForm.devSn=options.devSn
			this.list=[]
			// this.searchForm.pageNo=1
			this.statusBarHeight=uni.getStorageSync('systemInfo').statusBarHeight
			this.projectDetail=JSON.parse(uni.getStorageSync('projectDetail'))
			this.searchForm.projectSn=this.projectDetail.projectSn
			this.searchForm.queryTime=GetDateStr(0,'-')
			this.loadData()
		},
		// onReachBottom() {
		// 	if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
		// 		this.isLoadMore=true
		// 		this.searchForm.pageNo+=1
		// 		this.loadData()
		// 	}
		// },
		onPullDownRefresh() {
			// this.searchForm.pageNo=1
			this.list=[]
			this.loadData()
		},
		methods:{
			changeDate(e){
				this.searchForm.queryTime = e.target.value
				this.loadData()
			},
			loadData(){
				var that = this
				this.sendRequest({
					url: 'xmgl/standardAlarm/selectStandardAlarmListByTime',
					data: this.searchForm,
					method: "POST",
					success(res){
						that.list=res.result
						// that.list=that.list.concat(res.result.records)
						// if(res.result.records.length<that.searchForm.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
						// 	  that.isLoadMore=true                                             
						// 	  that.loadStatus='nomore'
						// }else{
						// 	  that.isLoadMore=false
						// }
						// uni.stopPullDownRefresh()
						// console.log('that.isLoadMore',that.isLoadMore)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.selectContent {
		text-align: center;
		margin-top: 30rpx;
	}
	.selectVideoBox {
			border: 1px solid rgba(42, 43, 91, 0.2);
			border-radius: 36rpx;
			height: 70rpx;
			font-size: 30rpx;
	
			display: inline-block;
	
			.videoName {
				padding: 0 24rpx 0 30rpx;
				// border-right: 1px solid rgba(42, 43, 91, 0.2);
				line-height: 70rpx;
				height: 70rpx;
			}
	
			.arrow {
				padding: 0 24rpx 0 4rpx;
			}
		}
	.arrow {
			margin-left: 20rpx;
		}
.listBox{
	margin: 30rpx;
}
.listItem{
	box-shadow: 0px 4px 26rpx 0px rgba(212, 220, 236, 0.53);
	position: relative;
	margin-bottom: 10rpx;
	padding: 30rpx;
	border-radius: 16rpx;
	.title{
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.bottom{
		color: rgba(55, 45, 102, 0.5);
		font-size: 24rpx;
	}
	.time{
		margin-right: 24rpx;
	}
}

</style>