431 lines
11 KiB
Vue
431 lines
11 KiB
Vue
<template>
|
||
<view class="notice-box">
|
||
<view class="notice-top" @click="openSelect">
|
||
{{noticeTimeObj.beginTime!==''?noticeTimeObj.beginTime+' ~ '+noticeTimeObj.endTime:'全部时间'}}<view class="iconfont icon-xiangyou1"></view>
|
||
</view>
|
||
<mescroll-body ref="mescrollRef" top="80" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" >
|
||
<view class="notice-list">
|
||
<view class="notice-item" v-for="(item,index) in dataList" :key="index">
|
||
<view class="item-header">
|
||
<view class="item-header-left">
|
||
<view class="header-title">
|
||
设备报警通知
|
||
</view>
|
||
<view class="header-time">
|
||
{{$u.timeFormat(item.alarmTime, 'mm月dd日')}}
|
||
</view>
|
||
</view>
|
||
<view class="item-header-right" :style="{color:index%3==2?'#10CC70':index%3==1?'#FF2B38':'#999999'}">
|
||
{{index%3==2?'已处理':index%3==1?'未处理':'待处理'}}
|
||
</view>
|
||
</view>
|
||
<view class="item-body">
|
||
<view class="item-body-left">
|
||
<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 class="item-body-right" v-if="index%3!==2">
|
||
<u-button type="primary">处理</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
<u-calendar v-model="timeshow" :mode="mode" :min-date="minDate" :max-date="maxDate" @change="selectTime"></u-calendar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
|
||
import {numberfilter} from "@/static/common/js/util/number-to-chinese.js"
|
||
export default {
|
||
mixins: [MescrollMixin],
|
||
filters: {
|
||
numberfilter
|
||
},
|
||
data() {
|
||
return {
|
||
upOption:{
|
||
noMoreSize: 4,
|
||
textNoMore: '---- 已经到底啦 ----',
|
||
empty:{
|
||
tip: '~ 搜索无数据 ~' // 提示
|
||
}
|
||
},
|
||
dataList:[],
|
||
timeshow: false,
|
||
mode: 'range',
|
||
minDate:'1950-01-01',
|
||
maxDate:'2023-12-28',
|
||
timeObj:{
|
||
beginTime:'',
|
||
endTime:''
|
||
},
|
||
|
||
loadStatus:'loadmore',//加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
|
||
isLoadMore:false, //是否加载中
|
||
emptyShow:false, //是否显示数据为空
|
||
pageNum:1,
|
||
pageSize:10,
|
||
orderByColumn:'alarmTime',
|
||
isAsc:'desc',
|
||
noticeTimeObj:{
|
||
beginTime:'',
|
||
endTime:''
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
},
|
||
onLoad() {
|
||
// this.getAlarmList();
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
openSelect(){
|
||
this.maxDate=this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
|
||
this.timeshow = true;
|
||
},
|
||
selectTime(e){
|
||
console.log("当前选择日期",e)
|
||
this.noticeTimeObj.beginTime = e.startDate;
|
||
this.noticeTimeObj.endTime = e.endDate;
|
||
// 触发查询
|
||
this.mescroll.resetUpScroll();
|
||
},
|
||
upCallback(page) {
|
||
let opt = {
|
||
url: '/iot/admin/device/list',
|
||
method: 'POST',
|
||
};
|
||
let params = {
|
||
page: page.num,
|
||
pageSize: page.size,
|
||
search: this.searchVal
|
||
}
|
||
this.$request.TokenRequest(opt, params).then(res => {
|
||
console.log("获取设备列表",res)
|
||
// 假数据
|
||
res = {
|
||
"totalCount": 12,
|
||
"data": [
|
||
{
|
||
"tenantId": 10213,
|
||
"createId": 10403,
|
||
"createBy": "",
|
||
"createTime": "2023-12-02 23:25:06",
|
||
"updateBy": "",
|
||
"updateTime": "2023-12-02 23:25:06",
|
||
"recordId": 12738,
|
||
"sourceId": null,
|
||
"triggerId": 29,
|
||
"triggerName": "xt",
|
||
"deviceId": "322",
|
||
"deviceKey": "3JcEibiaC4baH1ie",
|
||
"alarmLevel": "1",
|
||
"alarmLevelName": null,
|
||
"currentValue": "(一号主机通道1:987)",
|
||
"alarmContent": "设备 报警",
|
||
"alarmTime": "2023-12-02T23:25:06",
|
||
"processState": "UNPROCESS",
|
||
"sendState": "SEND",
|
||
"sendCount": 1,
|
||
"sendWay": null,
|
||
"typeId": 20,
|
||
"typeCode": "4a7215I6DEBaH1aH",
|
||
"typeName": "低报报警",
|
||
"alarmDivide": "ALARM",
|
||
"alarmSource": "CLOUD",
|
||
"deviceName": "一号主机",
|
||
"processStateName": "未处理",
|
||
"alarmProcessList": [
|
||
|
||
],
|
||
"sendStateName": "已发送"
|
||
},
|
||
{
|
||
"tenantId": 10213,
|
||
"createId": 10403,
|
||
"createBy": "",
|
||
"createTime": "2023-12-02 23:24:05",
|
||
"updateBy": "",
|
||
"updateTime": "2023-12-02 23:24:05",
|
||
"recordId": 12733,
|
||
"sourceId": null,
|
||
"triggerId": 29,
|
||
"triggerName": "xt",
|
||
"deviceId": "322",
|
||
"deviceKey": "3JcEibiaC4baH1ie",
|
||
"alarmLevel": "1",
|
||
"alarmLevelName": null,
|
||
"currentValue": "(一号主机通道1:987)",
|
||
"alarmContent": "设备 报警",
|
||
"alarmTime": "2023-12-02T23:24:06",
|
||
"processState": "UNPROCESS",
|
||
"sendState": "SEND",
|
||
"sendCount": 1,
|
||
"sendWay": null,
|
||
"typeId": 20,
|
||
"typeCode": "4a7215I6DEBaH1aH",
|
||
"typeName": "低报报警",
|
||
"alarmDivide": "ALARM",
|
||
"alarmSource": "CLOUD",
|
||
"deviceName": "一号主机",
|
||
"processStateName": "未处理",
|
||
"alarmProcessList": [
|
||
|
||
],
|
||
"sendStateName": "已发送"
|
||
},
|
||
{
|
||
"tenantId": 10213,
|
||
"createId": 10403,
|
||
"createBy": "",
|
||
"createTime": "2023-12-02 23:24:05",
|
||
"updateBy": "",
|
||
"updateTime": "2023-12-02 23:24:05",
|
||
"recordId": 12734,
|
||
"sourceId": null,
|
||
"triggerId": 29,
|
||
"triggerName": "xt",
|
||
"deviceId": "322",
|
||
"deviceKey": "3JcEibiaC4baH1ie",
|
||
"alarmLevel": "1",
|
||
"alarmLevelName": null,
|
||
"currentValue": "(一号主机通道1:987)",
|
||
"alarmContent": "设备 报警",
|
||
"alarmTime": "2023-12-02T23:24:06",
|
||
"processState": "UNPROCESS",
|
||
"sendState": "SEND",
|
||
"sendCount": 1,
|
||
"sendWay": null,
|
||
"typeId": 20,
|
||
"typeCode": "4a7215I6DEBaH1aH",
|
||
"typeName": "低报报警",
|
||
"alarmDivide": "ALARM",
|
||
"alarmSource": "CLOUD",
|
||
"deviceName": "一号主机",
|
||
"processStateName": "未处理",
|
||
"alarmProcessList": [
|
||
|
||
],
|
||
"sendStateName": "已发送"
|
||
},
|
||
{
|
||
"tenantId": 10213,
|
||
"createId": 10403,
|
||
"createBy": "",
|
||
"createTime": "2023-12-02 23:24:05",
|
||
"updateBy": "",
|
||
"updateTime": "2023-12-02 23:24:05",
|
||
"recordId": 12735,
|
||
"sourceId": null,
|
||
"triggerId": 29,
|
||
"triggerName": "xt",
|
||
"deviceId": "322",
|
||
"deviceKey": "3JcEibiaC4baH1ie",
|
||
"alarmLevel": "1",
|
||
"alarmLevelName": null,
|
||
"currentValue": "(一号主机通道1:987)",
|
||
"alarmContent": "设备 报警",
|
||
"alarmTime": "2023-12-02T23:24:06",
|
||
"processState": "UNPROCESS",
|
||
"sendState": "SEND",
|
||
"sendCount": 1,
|
||
"sendWay": null,
|
||
"typeId": 20,
|
||
"typeCode": "4a7215I6DEBaH1aH",
|
||
"typeName": "低报报警",
|
||
"alarmDivide": "ALARM",
|
||
"alarmSource": "CLOUD",
|
||
"deviceName": "一号主机",
|
||
"processStateName": "未处理",
|
||
"alarmProcessList": [
|
||
|
||
],
|
||
"sendStateName": "已发送"
|
||
}
|
||
],
|
||
"code": 0,
|
||
"msg": "查询成功"
|
||
}
|
||
if(res.code === 0){
|
||
|
||
let curPageData = res.data && res.data;
|
||
let curPageLen = curPageData && curPageData.length || 0;
|
||
let totalSize = res.totalCount;
|
||
this.$nextTick(()=>{
|
||
// 隐藏下拉刷新和上拉加载的状态;
|
||
this.mescroll.endBySize(curPageLen, totalSize);
|
||
})
|
||
|
||
//设置列表数据
|
||
if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
|
||
this.dataList = curPageLen > 0 && this.dataList.concat(curPageData); //追加新数据
|
||
}else{
|
||
this.$u.toast(res.msg);
|
||
this.mescroll.endErr();
|
||
}
|
||
}, error => {
|
||
})
|
||
},
|
||
// 获取报警通知列表
|
||
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.dataList.push(...res.rows);
|
||
// 判断当前是否显示空
|
||
if(!this.dataList.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>
|
||
page,.notice-box{
|
||
background: #f5f5f5;
|
||
}
|
||
</style>
|
||
|
||
<style scoped lang="scss">
|
||
.notice-box{
|
||
// background: #ebeef5;
|
||
// height: 100%;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
}
|
||
.notice-top{
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 80rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #FFFFFF;
|
||
border-bottom: 1px solid #f4f6f8;
|
||
z-index: 999;
|
||
.iconfont{
|
||
transform: rotate(90deg);
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
.notice-list{
|
||
padding: 24rpx 24rpx 0;
|
||
.notice-item{
|
||
width: 702rpx;
|
||
min-height: 381rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 24rpx;
|
||
.item-header{
|
||
// height: 104rpx;
|
||
// padding-left: 28rpx;
|
||
// padding-top: 23rpx;
|
||
padding: 20rpx 25rpx;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #e8e8f2;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.item-header-left{
|
||
.header-title{
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
color: #444444;
|
||
}
|
||
.header-time{
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
color: #999;
|
||
margin-top: 15rpx;
|
||
}
|
||
}
|
||
.item-header-right{
|
||
|
||
}
|
||
}
|
||
.item-body{
|
||
padding: 18rpx 26rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
.item-body-left{
|
||
.body-txt{
|
||
font-size: 26rpx;
|
||
line-height: 42rpx;
|
||
color: #0053A2;
|
||
text{
|
||
color: #444;
|
||
}
|
||
}
|
||
}
|
||
.item-body-right{
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style>
|