<template>
|
<div class="indexWarp">
|
<van-nav-bar title="设备告警历史查询" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder right-text="筛选" @click-right="showPopup=true">
|
</van-nav-bar>
|
<van-pull-refresh v-model="tab.refreshing" @refresh="onRefresh(tab)">
|
<van-list v-model="tab.loading" :finished="tab.finished" finished-text="没有更多了" @load="loadData(tab)">
|
<div class="pd-24">
|
<div class="card m-b-24" v-for="(item,i) in tab.listData" :key="i">
|
<div class="commonTitle cardTitle">
|
{{item.sessdion1}}
|
</div>
|
<div class="commonTitle">
|
<div class="label">设备ID：</div>
|
<div class="text">
|
{{item.battery1}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">设备名：</div>
|
<div class="text">
|
{{item.tes1}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">设备IP：</div>
|
<div class="text">
|
{{item.tester1}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">告警事件：</div>
|
<div class="text">
|
{{item.alm_name}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">告警等级：</div>
|
<div class="text">
|
{{item.alm_level_name}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">告警开始时间：</div>
|
<div class="text">
|
{{item.start1}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">确认告警时间：</div>
|
<div class="text">
|
{{item.monomer1}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">告警结束时间：</div>
|
<div class="text">
|
{{item.end1}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">是否确认告警：</div>
|
<div class="text">
|
{{item.alm_is_confirmed==0?'否':'是'}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<van-button size="mini" color="#f3535f" @click="deleteUser(item)">删除</van-button>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
</van-pull-refresh>
|
|
<van-popup v-model="showPopup" position="right" :style="{ width: '90%' ,height:'100%'}">
|
<div class="card">
|
<van-field v-model="selectValue1" is-link readonly name="picker" label="维护区：" placeholder="请选择维护区" @click="showPicker1 = true" />
|
<van-field v-model="selectValue2" is-link readonly name="picker" label="机房站点：" placeholder="请选择机房站点" @click="showPicker2 = true" />
|
<van-field v-model="startDrsj" is-link readonly name="picker" label="开始日期：" placeholder="请选择开始日期" @click="showTimePopup1 = true" />
|
<van-field v-model="endDrsj" is-link readonly name="picker" label="结束日期：" placeholder="请选择结束日期" @click="showTimePopup2 = true" />
|
<div class="subBtn" @click="selectScreen">保存</div>
|
</div>
|
</van-popup>
|
|
<van-popup v-model="showPicker1" round position="bottom">
|
<van-picker show-toolbar :columns="vindicate" value-key="label" @confirm="changeSelect1" @cancel="showPicker1 = false" title="维护区" />
|
</van-popup>
|
<van-popup v-model="showPicker2" round position="bottom">
|
<van-picker show-toolbar :columns="newRoms" value-key="label" @confirm="changeSelect2" @cancel="showPicker2 = false" title="机房站点" />
|
</van-popup>
|
<van-popup v-model="showTimePopup1" round position="bottom">
|
<van-datetime-picker v-model="startdatetime" type="date" :min-date="minDate" :max-date="maxDate" title="告警开始日期" @cancel="show = false" @confirm="confirmPicker1" />
|
</van-popup>
|
<van-popup v-model="showTimePopup2" round position="bottom">
|
<van-datetime-picker v-model="enddatetime" type="date" :min-date="minDate" :max-date="maxDate" title="告警开始日期" @cancel="show = false" @confirm="confirmPicker2" />
|
</van-popup>
|
<div class="refBtn" @click="onRefresh">
|
<van-icon name="replay" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
dataType /* 维护区 */,
|
roomsStation /* 机房站点 */,
|
deviceRecord /*告警信息 */,
|
deviceArarmdel
|
} from "@/pages/alarmMager/js/api"
|
import getLabelByValue from "@/assets/js/tools/getLabelByValue";
|
import getDevAlarm from "@/assets/js/tools/getDevAlarm";
|
export default {
|
components: {},
|
data() {
|
let thistime = new Date();
|
let yy = thistime.getFullYear();
|
let MM = thistime.getMonth() + 1;
|
let DD = thistime.getDate();
|
let day1 = yy + "-" + MM + "-" + DD;
|
let alarmTypes = getDevAlarm().types;
|
let levels = getDevAlarm().levels;
|
return {
|
showPopup: false,
|
showPicker1: false,
|
showPicker2: false,
|
showPicker3: false,
|
/* 维护区 */
|
vindicate: [],
|
/* 机房站点 */
|
newRoms: [],
|
/* 蓄电池租 */
|
selectValue1: "",
|
selectValue2: "",
|
options: alarmTypes,
|
levels: levels,
|
tab: {
|
title: '未确认告警',
|
listData: [],
|
loading: false,
|
finished: false,
|
refreshing: false,
|
page: {
|
pageSize: 6,
|
pageCurr: 0
|
}
|
},
|
/* 日期 */
|
startDrsj: "2000-1-1",
|
startdatetime: new Date(2000, 0, 1),
|
endDrsj: day1,
|
enddatetime: new Date(yy, MM - 1, DD),
|
minDate: new Date(2000, 0, 1),
|
maxDate: new Date(yy + 5, 0, 1),
|
showTimePopup1: false,
|
showTimePopup2: false,
|
}
|
},
|
mounted() {
|
this.vindicateData(); /* 维护区 */
|
this.computerSite(); /*机房站点 */
|
},
|
methods: {
|
/* 维护区 */
|
async vindicateData() {
|
const resType = await dataType();
|
let typeList = JSON.parse(resType.data.result).data.map((item) => {
|
return {
|
label: item,
|
value: item,
|
};
|
});
|
let vindicate = typeList.map((item) => {
|
return item;
|
});
|
this.vindicate = vindicate;
|
},
|
/* 机房站点 */
|
async computerSite() {
|
const roomsSeation = await roomsStation({
|
UNote: this.selectValue1,
|
});
|
if (roomsSeation.data.result) {
|
let newRoms = JSON.parse(roomsSeation.data.result).data.map((item) => {
|
return {
|
label: item,
|
value: item,
|
};
|
});
|
this.newRoms = newRoms;
|
}
|
},
|
changeSelect1(value) {
|
if (value) {
|
this.selectValue1 = value.value
|
}
|
this.selectValue2 = "";
|
this.computerSite(); /*机房站点 */
|
this.showPicker1 = false
|
},
|
changeSelect2(value) {
|
if (value) {
|
this.selectValue2 = value.value
|
}
|
this.showPicker2 = false
|
},
|
selectScreen() {
|
this.showPopup = false
|
this.onRefresh(this.tab)
|
},
|
//请求数据总触发
|
loadData(tab) {
|
if (tab) {
|
this.paramsAlram(tab)
|
} else {
|
this.paramsAlram(this.tab)
|
}
|
},
|
//区管理员请求数据
|
paramsAlram(tab) {
|
// 将 loading 设置为 true，表示处于加载状态
|
tab.loading = true;
|
tab.page.pageCurr++
|
let postData = {
|
page: {
|
pageSize: tab.page.pageSize,
|
pageCurr: tab.page.pageCurr,
|
},
|
binf: {
|
StationName: this.selectValue2,
|
StationName1: this.selectValue1,
|
BattProductDate: this.startDrsj + ' 00:00:00',
|
BattProductDate1: this.endDrsj + ' 23:59:59'
|
},
|
}
|
deviceRecord(postData).then((res) => {
|
const resData = JSON.parse(res.data.result);
|
tab.loading = false;
|
if (resData.data) {
|
let arr = resData.data.map((item, index) => {
|
item.index = index + 1;
|
return {
|
room1: item.index,
|
battery1: item.dev_id,
|
tes1: item.dev_name,
|
tester1: item.dev_ip,
|
sessdion1: item.stationName,
|
monomer1: item.alm_confirmed_time,
|
start1: item.alm_start_time,
|
end1: item.alm_end_time,
|
num: item.num,
|
alm_is_confirmed: item.alm_is_confirmed,
|
alm_level: item.alm_level,
|
alm_level_name: getLabelByValue(item.alm_level, this.levels, "---"),
|
alm_type: item.alm_type,
|
alm_name: getLabelByValue(item.alm_type, this.options, "---"),
|
alm_value: item.alm_value
|
};
|
});
|
tab.listData.push(...arr)
|
}
|
if (tab.page.pageCurr >= resData.data[resData.data.length - 1].usr_id) {
|
tab.finished = true;
|
} else {
|
tab.finished = false;
|
}
|
}).catch((err) => {
|
tab.loading = false;
|
tab.finished = true;
|
console.log(err)
|
});
|
},
|
deleteUser(value) {
|
this.$dialog.confirm({
|
title: '提示',
|
message:
|
'确定删除这条告警记录吗, 是否继续?',
|
}).then(() => {
|
deviceArarmdel([
|
{
|
num: value.num,
|
stationName: value.sessdion1,
|
note: " "
|
}
|
]).then((del) => {
|
if (JSON.parse(del.data.result).code !== 1) {
|
return this.$toast("删除失败");
|
}
|
this.onRefresh();
|
this.$toast("删除成功");
|
}).catch((err) => {
|
|
});
|
}).catch(() => {
|
// on cancel
|
});
|
},
|
onRefresh(tab) {
|
if (tab?.title) {
|
// 清空列表数据
|
tab.finished = false;
|
tab.refreshing = false;
|
tab.page = {
|
pageSize: 12,
|
pageCurr: 0
|
}
|
tab.listData = [];
|
// 重新加载数据
|
this.loadData(tab);
|
} else {
|
// 清空列表数据
|
this.tab.finished = false;
|
this.tab.refreshing = false;
|
this.tab.page = {
|
pageSize: 12,
|
pageCurr: 0
|
}
|
this.tab.listData = [];
|
// 重新加载数据
|
this.loadData(this.tab);
|
}
|
},
|
confirmPicker1(val) {
|
let year = val.getFullYear()
|
let month = val.getMonth() + 1
|
let day = val.getDate()
|
this.startDrsj = `${year}-${month}-${day}`
|
this.showTimePopup1 = false
|
},
|
confirmPicker2(val) {
|
let year = val.getFullYear()
|
let month = val.getMonth() + 1
|
let day = val.getDate()
|
this.endDrsj = `${year}-${month}-${day}`
|
this.showTimePopup2 = false
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.indexWarp {
|
width: 100%;
|
min-height: 100%;
|
background: #f5f5f5;
|
}
|
|
.van-tabs {
|
height: calc(100% - 92px);
|
padding-top: 92px;
|
}
|
|
.van-tabs /deep/ .van-tabs__content {
|
min-height: 100%;
|
background: #f5f5f5;
|
}
|
|
.van-tabs /deep/ .van-tabs__wrap {
|
position: fixed;
|
left: 0;
|
width: 100%;
|
top: 92px;
|
z-index: 9;
|
border-bottom: 1px solid #ededed;
|
}
|
|
.pd-24 {
|
padding: 24px;
|
}
|
|
.listWarp {
|
background: #ffffff;
|
border-radius: 16px;
|
overflow: hidden;
|
box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
|
}
|
|
.van-tabs /deep/ .van-cell__title {
|
width: 90%;
|
}
|
|
.alarmTitle {
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
color: #323233;
|
font-size: 24px;
|
}
|
|
.alarmTitle .tag {
|
font-size: 20px;
|
margin-right: 8px;
|
background-color: #4b88f9;
|
}
|
|
.time {
|
color: #969799;
|
font-size: 20px;
|
}
|
|
.card {
|
background-color: #ffffff;
|
border-radius: 16px;
|
margin: 0 auto;
|
width: 100%;
|
padding: 24px;
|
box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
|
}
|
.lineInput .lineCheckBox{
|
margin-bottom: 8px;
|
}
|
.lineInput .lineCheckBox:nth-of-type(2n){
|
margin-left: 18px;
|
}
|
|
.lineInput /deep/ .van-field__control--custom{
|
flex-wrap: wrap;
|
}
|
|
.subBtn {
|
flex: 1;
|
height: 98px;
|
background: #4b88f9;
|
border-radius: 8px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #ffffff;
|
font-size: 36px;
|
margin-top: 48px;
|
}
|
.m-b-24{
|
margin-bottom: 24px;
|
}
|
.commonTitle {
|
font-size: 28px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
line-height: 40px;
|
padding-bottom: 24px;
|
border-bottom: 1px solid #eeeeee;
|
margin-bottom: 22px;
|
display: flex;
|
}
|
|
.cardTitle {
|
font-weight: bold;
|
}
|
|
.refBtn{
|
box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
|
width: 88px;
|
height: 88px;
|
position: fixed;
|
right: 48px;
|
bottom: 48px;
|
border-radius: 50%;
|
background: #ffffff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #4B88F9;
|
font-size: 44px;
|
font-weight: bold;
|
}
|
</style>
|
