<template>
|
<flex-layout :loading="loading">
|
<div class="table-layout filter-box-table" slot="header">
|
<div class="table-row">
|
<div class="table-cell text-right">机房名称：</div>
|
<div class="table-cell w500">
|
<el-select
|
v-model="home.value"
|
filterable
|
size="small"
|
placeholder="请选择机房名称">
|
<el-option
|
v-for="item in home.list"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"></el-option>
|
</el-select>
|
</div>
|
<div class="table-cell text-right">记录时间段：</div>
|
<div class="table-cell">
|
<el-date-picker
|
v-model="valueTime1"
|
size="small"
|
class="time_box"
|
:picker-options="pickerOptions0"
|
type="date"
|
placeholder="选择日期"
|
value-format="yyyy-MM-dd"></el-date-picker>
|
至
|
<el-date-picker
|
v-model="valueTime2"
|
size="small"
|
class="time_box"
|
:picker-options="pickerOptions1"
|
type="date"
|
placeholder="选择日期"
|
value-format="yyyy-MM-dd"></el-date-picker>
|
<div class="page-tools">
|
<el-button type="primary" size="mini" @click="searchAlarmCount">查询</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-tabs
|
v-model="acTabs"
|
type="border-card"
|
class="flex-layout">
|
<el-tab-pane label="电源告警" name="power">
|
<el-table
|
stripe
|
size="mini"
|
header-row-class-name="header-primary"
|
height="100%"
|
:data="tbl.power">
|
<el-table-column
|
v-for="(item, idx) in tbl.headers"
|
:key="'theader_' + idx"
|
:prop="item.prop"
|
:label="item.label"
|
:min-width="item.minWidth"
|
:resizable="false"
|
:sortable="item.sortable"
|
align="center">
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane label="电池告警" name="batt">
|
<el-table
|
stripe
|
size="mini"
|
header-row-class-name="header-primary"
|
height="100%"
|
:data="tbl.batt">
|
<el-table-column
|
v-for="(item, idx) in tbl.headers"
|
:key="'theader_' + idx"
|
:prop="item.prop"
|
:label="item.label"
|
:min-width="item.minWidth"
|
:resizable="false"
|
:sortable="item.sortable"
|
align="center">
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane label="设备告警" name="dev">
|
<el-table
|
stripe
|
size="mini"
|
header-row-class-name="header-primary"
|
height="100%"
|
:data="tbl.dev">
|
<el-table-column
|
v-for="(item, idx) in tbl.headers"
|
:key="'theader_' + idx"
|
:prop="item.prop"
|
:label="item.label"
|
:min-width="item.minWidth"
|
:resizable="false"
|
:sortable="item.sortable"
|
align="center">
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</flex-layout>
|
</template>
|
|
<script>
|
|
import {getExistStations} from "@/assets/js/api";
|
import {searchAlarmCount} from "@/views/OpsAllocation/js/flowManage";
|
export default {
|
name: "alarmCount",
|
data() {
|
let thieTime = new Date().format("yyyy-MM-dd");
|
let newTime = new Date(
|
new Date(thieTime).getTime() + 1 * 24 * 3600 * 1000
|
).format("yyyy-MM-dd");
|
let oldTime = new Date(
|
new Date(thieTime).getTime() - 7 * 24 * 3600 * 1000
|
).format("yyyy-MM-dd");
|
return {
|
loading: false,
|
home: {
|
value: "",
|
list: []
|
},
|
/* 日期 */
|
valueTime1: oldTime,
|
valueTime2: newTime,
|
pickerOptions0: {
|
disabledDate: (time) => {
|
let vm = this;
|
if (vm.valueTime2) {
|
return new Date(time.getTime()) > new Date(vm.valueTime2);
|
} else {
|
// return time.getTime() > Date.now();
|
}
|
},
|
},
|
pickerOptions1: {
|
disabledDate: (time) => {
|
return (
|
new Date(time.getTime() + 24 * 60 * 60 * 1000) <
|
new Date(this.valueTime1)
|
);
|
},
|
},
|
acTabs: "power",
|
tbl: {
|
headers: [
|
{
|
prop: "alarmName",
|
label: "告警名称",
|
minWidth: 150,
|
},
|
{
|
prop: "preAlarmNum",
|
label: "预告警数",
|
minWidth: 150,
|
},
|
{
|
prop: "alarmNum",
|
label: "告警数",
|
minWidth: 150,
|
}
|
],
|
power: [],
|
batt: [],
|
dev: []
|
},
|
}
|
},
|
methods: {
|
async searchHome() {
|
const searchParams = {
|
stationName1: "",
|
stationName2: "",
|
stationName5: "",
|
};
|
try {
|
// 请求后台
|
const res = await getExistStations(searchParams);
|
let rs = res.data;
|
let list = [];
|
if(rs.code === 1) {
|
list = rs.data.map((v) => {
|
return {
|
label: v.stationName3,
|
value: v.stationId,
|
};
|
});
|
}
|
let len = list.length;
|
// 设置第一笔数据
|
list.unshift({
|
label: "全部（共" + len + "种)",
|
value: "",
|
});
|
this.home.list = list;
|
}catch (error){
|
console.log(error);
|
}
|
},
|
async searchAlarmCount() {
|
this.loading = true;
|
try {
|
let stationId = this.home.value;
|
let startTime = this.valueTime1 + " 00:00:00";
|
let endTime = this.valueTime2 + " 23:59:59";
|
const res = await searchAlarmCount(stationId, startTime, endTime);
|
this.loading = false;
|
let rs = res.data;
|
let power = [];
|
let batt = [];
|
let device = [];
|
if(rs.code === 1) {
|
let data = rs.data;
|
power = this.getList(data.power);
|
batt = this.getList(data.batt);
|
device = this.getList(data.device);
|
}
|
this.tbl.power = power;
|
this.tbl.batt = batt;
|
this.tbl.dev = device;
|
}catch (error){
|
this.loading = false;
|
}
|
},
|
getList(data) {
|
let list = [];
|
if(data) {
|
Object.keys(data).forEach(key=>{
|
let item = data[key];
|
list.push({
|
alarmName: key,
|
preAlarmNum: item[0]?item[0].num:0,
|
alarmNum: item[1]?item[1].num:0,
|
})
|
});
|
}
|
return list;
|
}
|
},
|
mounted() {
|
// 查询机房列表
|
this.searchHome();
|
}
|
}
|
</script>
|
|
<style scoped>
|
.page-tools {
|
display: inline-block;
|
margin-left: 12px;
|
}
|
</style>
|
