ParkApp/pages/index/fire/alarm-record.vue

<template>
	<view  :class="$isEmpty(list)?'bg-white':'container'">
		<u-calendar v-model="dateShow" mode="date" @change="change"></u-calendar>
		<view v-if="!$isEmpty(list)" class="top fixed" >
			<view class="flex justify-between">
				<view class="flex">
					<view class="flex justify-center align-center">
						<image v-if="fireType==0" style="width: 80rpx;height: 80rpx;" src="/static/index/fire/yanwu1.png"></image>
						<image v-if="fireType==1" style="width: 80rpx;height: 80rpx;" src="/static/index/fire/ranqi2.png"></image>
						<image v-if="fireType==2" style="width: 80rpx;height: 80rpx;" src="/static/index/fire/xiaofang.png"></image>
					</view>
					<view class="padding-left-40">
						<view >
							<text class="text-bold">设备类型：</text>
							<text v-if="fireType==0">烟感报警器</text>
							<text v-if="fireType==1">燃气报警器</text>
							<text v-if="fireType==2">消防栓</text>
						</view>
						<view class="padding-top-10">
							<text class="text-bold">告警记录：</text>
							<text class="text-red padding-right-10 text-bold text-lg">{{total?total:0}}</text>条
						</view>
					</view>
				</view>
				<view @click="dateShow=true" class="flex text-blue  justify-center align-center">
					<text class="cuIcon-filter padding-right-20"></text>
					<text class="">筛选</text>
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view v-if="!$isEmpty(list)"  class="history">
				<u-time-line>
					<u-time-line-item nodeTop="2" v-for="(item,index) in list" :key="index">
						<template v-slot:node>
							<view class="u-node bg-white" >
								<u-icon name="clock-fill" color="#59a5f0" :size="28"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{item.recordTime}}</view>
								<view class="content" style="width: 636rpx;">
									<view >
										<text >告警等级：</text>
										<text v-if="item.level==1" class="text-red">严重告警</text>
										<text v-else-if="item.level==2" class="text-orange">警告告警</text>
										<text v-else >提示告警</text>
									</view>
									<view class="nav-title">
										<text class="">告警类型：</text>
										<text v-text="item.alarmType==0?'业务报警':'设备报警'"></text>
									</view>
									<view class="nav-title">
										<text class="">设备名称：</text>
										<text>{{item.deviceName}}</text>
									</view>
									<view class="nav-title">
										<text class="">告警原因：</text>
										<text>{{item.name}}</text>
									</view>
									<view v-if="item.monitorValue" class="nav-title">
										<text class="">监测值：</text>
										<text class="text-red text-bold">{{item.monitorValue}}</text>
									</view>
								</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	export default {
		mixins:[MescrollMixin],
		data() {
			return {
				fireType:0,
				
				dateShow:false,
				list:[],
				total:'',
				deviceId:'' ,//设备列表的imei等于设备告警激励的deviceId
				
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						page: 0,
						size: 10
					},
					noMoreSize: 3, 
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		onLoad(options) {
			this.deviceId=options.imei || ''
		},
		onShow() {
			this.fireType=getApp().globalData.fireType || 0
			if (this.fireType==0) {
				uni.setNavigationBarTitle({
					title:"烟感报警记录"
				})
			}else if (this.fireType==1) {
				uni.setNavigationBarTitle({
					title:"气感报警记录"
				})
			}else if (this.fireType==2) {
				uni.setNavigationBarTitle({
					title:"消防水压报警记录"
				})
			}
			
		},
		methods: {
			change(e) {
				console.log(e);
			},
			downCallback(){
				setTimeout(()=>{
					this.list=[]
					this.mescroll.resetUpScroll()
				},1500)
			},
			upCallback(mescroll) {
				let params={
					current:mescroll.num,
					size:mescroll.size,
					deviceId:this.deviceId
				}
				try{
					this.$api.fireDevice.alarmRecord(params).then(res=>{
						let data=res.data.records
						let length=data.length
						this.total=res.data.total
						mescroll.endBySize(length, this.total);
						if(mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list=this.list.concat(data); //追加新数据
					})
				}catch(e){
					console.log(e);
					mescroll.endErr();
				}
			},
		}
	}
</script>

<style lang="scss">
.container {
  height: calc(100vh );
  padding: 140rpx 0rpx 0rpx;
 .fixed {
	position: fixed;
	top: 0rpx;
	left: 0;
	width: 100%;
	background-color: #FFFFFF;
	box-sizing: border-box;
	z-index: 999;
  }
}

.nav-title {
	font-size: 28upx;
	font-weight: 300;
	padding-top: 20rpx;
}
	
.top{
	padding: 30rpx;
	box-shadow: 0 4rpx 6rpx rgba(204, 204, 204,.2);
	// border-bottom: 1rpx solid #efefef;
}
	
.history{
		background-color: #FFFFFF;
		padding: 40rpx 20rpx 20rpx 50rpx;
	}
.content{
	box-shadow: 0 8rpx 2rpx rgba(204, 204, 204,.2),0 -8rpx 6rpx rgba(204, 204, 204,.1),8rpx 0rpx 6rpx rgba(204, 204, 204,.1),-8rpx 0rpx 6rpx rgba(204, 204, 204,.1);
	background-color: #FFFFFF;
	padding: 20rpx;
	border-radius: 10rpx;
	margin-top: 20rpx;
}
</style>