CommunityApp/pages/device/records.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 fixed">
			<view style="display: flex; justify-content: space-between;">
				<view style="display: flex;">
					<view style="display: flex;" class="justify-center align-center">
						<image v-if="fireType==0" style="width: 80rpx;height: 80rpx;" src="https://szsq.nxzhsq.cn/community/miniofile/app/yangan.png"></image>
						<image v-if="fireType==1" style="width: 80rpx;height: 80rpx;" src="https://szsq.nxzhsq.cn/community/miniofile/app/ranqi.png"></image>
						<image v-if="fireType==2" style="width: 80rpx;height: 80rpx;" src="https://szsq.nxzhsq.cn/community/miniofile/app/xiaofang.png"></image>
						<image v-if="fireType==3" style="width: 80rpx;height: 80rpx;" src="https://szsq.nxzhsq.cn/community/miniofile/app/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" style="display: flex;justify-content: center;align-items: center;flex-direction: column;" class="base-color">
					<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">
									<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 "@/comps/mescroll-body/mescroll-mixins.js";
	export default {
		mixins:[MescrollMixin],
		data() {
			return {
				//设备类型
				fireType: 0,
				deviceId:'' ,//设备列表的imei等于设备告警记录的deviceId
				
				//日期筛选
				dateShow:false,
				filterDate:'',
				filterTagShow:false,
				
				list:[{
					alarmDesc: "",
					alarmId: "",
					alarmMetric: "",
					alarmTimes: null,
					alarmType: 1,
					alarmTypeSplice: "",
					alarmValue: "",
					appId: "",
					createDept: null,
					createTime: null,
					createUser: null,
					deviceId: "869951040795936",
					deviceName: "德锐斯园区智能烟感6",
					deviceType: 100004,
					id: "607",
					isAlarm: 1,
					isDeleted: 0,
					lastNoticeDate: null,
					lastSyncDate: null,
					level: "",
					metric: "",
					monitorValue: "8",
					name: "",
					orderId: "",
					orgPosition: "/640000/640100/640121/1333195565676253185/1333195722832629761/1336244940601810945/1336718963186040833",
					prefix: "",
					recordTime: "2020-12-17 13:01:07",
					status: null,
					tenantId: "804981",
					updateTime: null,
					updateUser: null,
				}],
				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" scoped>
.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>