364 lines
8.8 KiB
Vue
364 lines
8.8 KiB
Vue
<template>
|
||
<view class="notice-box">
|
||
<u-dropdown class="notice-top">
|
||
<u-dropdown-item v-model="paramsObj.status" title="状态" :options="statusOptions" @change="searchList"></u-dropdown-item>
|
||
<u-dropdown-item v-model="paramsObj.applyStatus" title="审核状态" :options="applyStatusOptions" @change="searchList"></u-dropdown-item>
|
||
</u-dropdown>
|
||
<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">
|
||
{{item.alarmName}}
|
||
</view>
|
||
<!-- <view class="header-time">
|
||
{{$u.timeFormat(item.alarmTime, 'mm月dd日')}}
|
||
</view> -->
|
||
</view>
|
||
<view class="item-header-right" :style="{color:item.applyState===1?'#10CC70':item.applyState===0?'#FF2B38':'#999999'}">
|
||
{{item.applyState===1?'已处理':item.applyState===0?'未处理':'已忽略'}}
|
||
</view>
|
||
</view>
|
||
<view class="item-body">
|
||
<view class="item-body-left">
|
||
<view class="body-txt"><text>时间：</text>{{item.createdAt}}</view>
|
||
<view class="body-txt"><text>设备：</text>{{item.devName}}</view>
|
||
<view class="body-txt"><text>状态：</text>{{item.status}}</view>
|
||
<view class="body-txt"><text>等级：</text>{{item.alarmLevel | numberfilter}}级</view>
|
||
<view class="body-txt"><text>内容：</text>{{item.alarmContent}}</view>
|
||
</view>
|
||
<view class="item-body-right" v-if="item.applyState!==1">
|
||
<u-button type="primary" @click="openApply(item)">处理</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>
|
||
<u-modal v-model="applyShow" title="告警审核" :mask-close-able="true" @confirm="applyItem" ref="applyModal" :async-close="true">
|
||
<view class="slot-content">
|
||
<view class="content-item">
|
||
<view class="content-label">审核类型:</view>
|
||
<view class="content-value">
|
||
<uni-data-select
|
||
v-model="applyObj.applyState"
|
||
:localdata="applyTypeList"
|
||
placeholder="选择审核类型"
|
||
></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="content-item">
|
||
<view class="content-label">审核类型:</view>
|
||
<view class="content-value">
|
||
<u-input v-model="applyObj.applyRemark" type="textarea" border height="200" :auto-height="true" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
<u-toast ref="uToast" />
|
||
</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: '~ 暂无告警数据 ~' // 提示
|
||
}
|
||
},
|
||
tabbarIndex:3,
|
||
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:''
|
||
},
|
||
paramsObj:{
|
||
status:null,
|
||
applyStatus:null,
|
||
devId:null,
|
||
},
|
||
statusOptions: [{
|
||
label: '全部',
|
||
value: null,
|
||
},{
|
||
label: '启用',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '禁用',
|
||
value: 2,
|
||
}
|
||
],
|
||
applyStatusOptions: [{
|
||
label: '全部',
|
||
value: null,
|
||
},{
|
||
label: '未处理',
|
||
value: 0,
|
||
},
|
||
{
|
||
label: '已处理',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '已忽略',
|
||
value: 2,
|
||
}
|
||
],
|
||
// 审核弹窗
|
||
applyShow:false,
|
||
applyId:null,
|
||
applyObj:{
|
||
applyState:null,
|
||
applyRemark:null,
|
||
},
|
||
applyTypeList: [{
|
||
text: '未处理',
|
||
value: 0,
|
||
},
|
||
{
|
||
text: '已处理',
|
||
value: 1,
|
||
},
|
||
{
|
||
text: '已忽略',
|
||
value: 2,
|
||
}
|
||
]
|
||
}
|
||
},
|
||
components: {
|
||
},
|
||
onLoad(option) {
|
||
// 设备列表
|
||
if(option.devId){
|
||
this.paramsObj.devId = option.devId;
|
||
uni.setNavigationBarTitle({
|
||
title: option.devName+'告警列表'
|
||
});
|
||
}
|
||
|
||
},
|
||
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();
|
||
},
|
||
searchList(){
|
||
this.mescroll.resetUpScroll();
|
||
},
|
||
upCallback(page) {
|
||
let params = {
|
||
page: page.num,
|
||
pageSize: page.size,
|
||
status: this.paramsObj.status,
|
||
"Wheres": {
|
||
"wheres": [
|
||
{"field": "applyState","operator": "=","value": this.paramsObj.applyStatus},
|
||
]
|
||
},
|
||
// devId: this.paramsObj.devId
|
||
}
|
||
if(this.paramsObj.devId){
|
||
params.devId = this.paramsObj.devId;
|
||
}
|
||
this.$api.iotsApi.getAlarmReacordList(params).then(res => {
|
||
console.log("获取设备列表",res)
|
||
if(res.code === 0){
|
||
let curPageData = res.data && res.data.list;
|
||
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 => {
|
||
})
|
||
},
|
||
// 点击审核
|
||
openApply(data){
|
||
// console.log("点击审核",data)
|
||
this.applyId = data.id;
|
||
this.applyObj.applyState = data.applyState;
|
||
this.applyObj.applyRemark = "";
|
||
this.applyShow = true;
|
||
},
|
||
applyItem(){
|
||
console.log("审核告警",this.applyObj)
|
||
if(this.applyObj.applyState!==""){
|
||
let params = {
|
||
ids:[this.applyId],
|
||
...this.applyObj
|
||
}
|
||
console.log("params", params)
|
||
this.$api.iotsApi.applyAlarmRecord(params).then(res => {
|
||
console.log("审核告警",res)
|
||
if(res.code === 0){
|
||
this.applyShow = false;
|
||
this.$refs.uToast.show({
|
||
title: res.message,
|
||
type: 'success',
|
||
})
|
||
this.mescroll.resetUpScroll();
|
||
}else{
|
||
this.$refs.uToast.show({
|
||
title: res.message,
|
||
type: 'error',
|
||
})
|
||
}
|
||
}, error => {
|
||
})
|
||
}else{
|
||
this.$refs.uToast.show({
|
||
title: '请选择审核状态',
|
||
type: 'error',
|
||
})
|
||
this.$refs.applyModal.clearLoading();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
z-index: 999;
|
||
background-color: #FFFFFF;
|
||
}
|
||
.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;
|
||
font-weight: bold;
|
||
}
|
||
.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{
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.slot-content{
|
||
padding: 20rpx;
|
||
.content-item{
|
||
&:first-child{
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.content-label{
|
||
margin-bottom: 20rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
::v-deep .u-model__title.u-model__title{
|
||
padding-top: 30rpx;
|
||
font-weight: 500;
|
||
}
|
||
</style>
|