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  class="top bg-white " style="position: fixed;top: 0;z-index: 999;width: 100%;">
			<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/icon/yangan.png"></image>
						<image v-if="fireType==1" style="width: 80rpx;height: 80rpx;" src="../../../static/icon/ranqi.png"></image>
						<image v-if="fireType==2" style="width: 80rpx;height: 80rpx;" src="../../../static/icon/xiaofang.png"></image>
						<image v-if="fireType==3" style="width: 80rpx;height: 80rpx;" src="../../../static/icon/dianbiao.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>
							<text v-if="fireType==3">电表设备</text>
						</view>
						<view class="padding-top-10">
							<text class="text-bold" v-text="fireType==3?'抄表记录：':'告警记录：'"></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 base-color flex-direction justify-center align-center">
					<view class="padding-bottom-20 text-bold">
						<text class="cuIcon-filter padding-right-20"></text>
						<text class="">筛选</text>
					</view>
					<u-tag :text="filterDate" @close="tagClick" :show="!$isEmpty(filterDate)"  size="mini" :closeable="true" mode="plain" type="error"/>
				</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="#5064eb" :size="28"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view v-if="fireType==3">
								<view class="u-order-title">抄表时间：{{item.readTime}}</view>
								<view class="content" style="width: 636rpx;">
									<view class="nav-title">
										<text class="">设备厂家：</text>
										<text >{{item.deviceFactory}}</text>
									</view>
									<view class="nav-title">
										<text class="">安装位置：</text>
										<text v-text="item.installAddress"></text>
									</view>
									<view class="nav-title">
										<text class="">年用量：</text>
										<text>{{item.yearValue}} Kwh</text>
									</view>
									<view class="nav-title">
										<text class="">月用量：</text>
										<text>{{item.monthValue}} Kwh</text>
									</view>
									<view class="nav-title">
										<text class="">日用量：</text>
										<text>{{item.dayValue}} Kwh</text>
									</view>
									<view class="nav-title">
										<text class="">总用量：</text>
										<text>{{item.totalValue}} Kwh</text>
									</view>
								</view>
							</view>
							<view v-else>
								<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,
				deviceId:'' ,//设备列表的imei等于设备告警记录的deviceId
				
				//日期筛选
				dateShow:false,
				filterDate:'',
				filterTagShow:false,
				
				list:[],
				total:'',
				
				downOption: {
					use: false,
					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) {
				this.filterDate=e.result
				this.mescroll.resetUpScroll()
			},
			tagClick(){
				this.filterDate=''
				this.mescroll.resetUpScroll()
			},
			
			downCallback(){
				setTimeout(()=>{
					this.list=[]
					this.mescroll.resetUpScroll()
				},1500)
			},
			async upCallback(mescroll) {
				let params={
					current:mescroll.num,
					size:mescroll.size,
					deviceId:this.deviceId
				}
				if (!this.$isEmpty(this.filterDate)) {
					params.recordTime=this.filterDate
				}
				try{
					
					let res=null
					if (this.fireType==3) {
						//抄表记录
						 res=await this.$api.fireDevice.electricmeterrecord({imei:this.deviceId})
					}else{
						//设备报警记录
						res=await this.$api.fireDevice.alarmRecord(params)
					}
					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;
  }
}

.text-red{
	color: #ca0000;
}

.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>