179 lines
4.5 KiB
Vue
179 lines
4.5 KiB
Vue
<template>
|
||
<view id="alarm">
|
||
<nav-bar :is-back="true" title="报警通知"></nav-bar>
|
||
<scroll-view class="scroll-box" scroll-y @scrolltolower="reachBottom">
|
||
<view class="alarm-list">
|
||
<view class="alarm-item" v-for="(item,index) in alarmList" :key="index">
|
||
<view class="item-header">
|
||
<view class="header-title">
|
||
设备报警通知
|
||
</view>
|
||
<view class="header-time">
|
||
{{$u.timeFormat(item.alarmTime, 'mm月dd日')}}
|
||
</view>
|
||
</view>
|
||
<view class="item-body">
|
||
<view class="body-txt">设备报警</view>
|
||
<view class="body-txt"><text>时间：</text>{{$u.timeFormat(item.alarmTime, 'yyyy年mm月dd日 hh时MM分ss秒')}}</view>
|
||
<view class="body-txt"><text>设备：</text>{{item.deviceName}}</view>
|
||
<view class="body-txt"><text>等级：</text>{{item.alarmLevel | numberfilter}}级</view>
|
||
<view class="body-txt"><text>内容：</text>{{item.alarmContent}}</view>
|
||
<view class="body-txt">当前值：{{item.currentValue}}</view>
|
||
</view>
|
||
</view>
|
||
<u-empty :show="emptyShow" text="没有找到数据" :font-size="40" :icon-size="300" :margin-top="100" mode="list"></u-empty>
|
||
<u-loadmore v-if="!emptyShow" :status="loadStatus" />
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {numberfilter} from "@/static/common/js/util/number-to-chinese.js"
|
||
import NavBar from '@/common/components/navbar/NavBar.vue'
|
||
export default {
|
||
filters: {
|
||
numberfilter
|
||
},
|
||
data() {
|
||
return {
|
||
alarmList:[],
|
||
loadStatus:'loadmore',//加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
|
||
isLoadMore:false, //是否加载中
|
||
emptyShow:false, //是否显示数据为空
|
||
pageNum:1,
|
||
pageSize:10,
|
||
orderByColumn:'alarmTime',
|
||
isAsc:'desc',
|
||
}
|
||
},
|
||
components: {
|
||
NavBar
|
||
},
|
||
onLoad() {
|
||
this.getAlarmList();
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
// 获取报警通知列表
|
||
getAlarmList(){
|
||
let opt = {
|
||
url: '/prod-api/iot/alarm/record/list',
|
||
method: "GET",
|
||
}
|
||
let params = {
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize,
|
||
orderByColumn: this.orderByColumn,
|
||
isAsc: this.isAsc,
|
||
}
|
||
this.$request.TokenRequest(opt,params).then(res => {
|
||
console.log("getAlarmList",res);
|
||
if(res.code==200){
|
||
if(res.rows){
|
||
this.alarmList.push(...res.rows);
|
||
// 判断当前是否显示空
|
||
if(!this.alarmList.length){
|
||
this.emptyShow = true;
|
||
}else{
|
||
this.emptyShow = false;
|
||
}
|
||
// 判断当前是否为最后一页
|
||
if(res.rows.length<this.pageSize){ //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||
this.isLoadMore=true
|
||
this.loadStatus='nomore'
|
||
}else{
|
||
this.isLoadMore=false
|
||
this.loadStatus='loadmore'
|
||
}
|
||
}else{
|
||
this.isLoadMore=true
|
||
this.loadStatus='nomore'
|
||
}
|
||
|
||
}else{
|
||
this.$u.toast(res.msg);
|
||
this.isLoadMore=false
|
||
if(this.pageNum>1){
|
||
this.pageNum=1
|
||
}
|
||
}
|
||
|
||
}, error => {
|
||
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
||
this.isLoadMore=false
|
||
if(this.pageNum>1){
|
||
this.pageNum=1
|
||
}
|
||
})
|
||
},
|
||
// 上拉加载更多
|
||
reachBottom() {
|
||
console.log("这里上拉加载更多")
|
||
if(!this.isLoadMore){ //此处判断，上锁，防止重复请求
|
||
this.loadStatus = 'loading';
|
||
this.isLoadMore=true
|
||
this.pageNum+=1
|
||
this.getAlarmList()
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
#alarm{
|
||
background: #ebeef5;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.scroll-box{
|
||
height: calc(100% - var(--status-bar-height) - 44px);
|
||
/* #ifdef APP-PLUS */
|
||
height: calc(100% - var(--status-bar-height) - 48px);
|
||
/* #endif */
|
||
}
|
||
.alarm-list{
|
||
padding: 24rpx 24rpx 0;
|
||
.alarm-item{
|
||
width: 702rpx;
|
||
min-height: 381rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 24rpx;
|
||
.item-header{
|
||
height: 104rpx;
|
||
padding-left: 28rpx;
|
||
padding-top: 23rpx;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #e8e8f2;
|
||
.header-title{
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
color: #444444;
|
||
}
|
||
.header-time{
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
color: #999;
|
||
margin-top: 15rpx;
|
||
}
|
||
}
|
||
.item-body{
|
||
padding: 18rpx 26rpx;
|
||
.body-txt{
|
||
font-size: 26rpx;
|
||
line-height: 42rpx;
|
||
color: #0053A2;
|
||
text{
|
||
color: #444;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|