248 lines
8.7 KiB
Vue
248 lines
8.7 KiB
Vue
|
||
<template>
|
||
<el-card v-loading="loading" gshadow="always" class="common-card-container common-card-container-no-title-bg">
|
||
<!-- 搜索栏-->
|
||
<el-form :inline="true" class="select-container">
|
||
<el-form-item label="设备类型">
|
||
<el-select v-model="search.deviceType" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||
<el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.deviceTypeOptions" :key="key+'deviceTypeOptions'"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="告警等级">
|
||
<el-select v-model="search.alarmLevel" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||
<el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.alarmLevelOptions" :key="key+'alarmLevelOptions'"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="时间选择">
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始时间"
|
||
:picker-options="pickerOptions"
|
||
:default-value="defaultDateRange"
|
||
end-placeholder="结束时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button @click="onReset" native-type="button">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="margin:30px 0;">
|
||
<!-- 二个选择按钮-->
|
||
<el-row style="">
|
||
<el-col :xs="24" :sm="24" :lg="24">
|
||
<el-button-group class="ems-btns-group">
|
||
<el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
|
||
</el-button-group>
|
||
</el-col>
|
||
</el-row>
|
||
<!--表格-->
|
||
<el-table
|
||
class="common-table"
|
||
:data="tableData"
|
||
stripe
|
||
max-height="500"
|
||
style="width: 100%;margin-top:25px;">
|
||
<el-table-column
|
||
prop="deviceName"
|
||
label="设备名称">
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="告警等级"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{$store.state.ems.alarmLevelOptions[scope.row.alarmLevel]}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="alarmContent"
|
||
show-overflow-tooltip
|
||
label="告警内容">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="alarmStartTime"
|
||
label="告警发生时间">
|
||
<template slot-scope="scope">
|
||
<span>{{formatDate(scope.row.alarmStartTime,true)}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="alarmEndTime"
|
||
label="告警结束时间">
|
||
<template slot-scope="scope">
|
||
<span>{{formatDate(scope.row.alarmEndTime,true)}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="状态">
|
||
<template slot-scope="scope">
|
||
<span :class="['0','2'].includes(scope.row.status) ? 'warning-status' : ''">{{$store.state.ems.alarmStatusOptions[scope.row.status]}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="工单"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-button type="text" v-if="scope.row.ticketNo" @click="toTicket">已生成工单（工单号：{{scope.row.ticketNo}}）</el-button>
|
||
<el-button type="primary" size="mini" v-else @click="toTicket">生成工单</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
v-show="tableData.length>0"
|
||
background
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageNum"
|
||
:page-size="pageSize"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="totalSize"
|
||
style="margin-top:15px;text-align: center"
|
||
>
|
||
</el-pagination>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import {getAlarmDetailList} from'@/api/ems/dzjk'
|
||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||
import { formatDate } from '@/filters/ems'
|
||
export default {
|
||
name:'DzjkGzgj',
|
||
mixins:[getQuerySiteId],
|
||
data() {
|
||
return {
|
||
loading:false,
|
||
btnList:[
|
||
{name:'今日告警',id:'today'},
|
||
{name:'历史告警',id:'history'},
|
||
],
|
||
pickerOptions:{
|
||
disabledDate(time) {
|
||
return time.getTime() > Date.now();
|
||
},
|
||
},
|
||
defaultDateRange:[],//默认展示的时间
|
||
dateRange:[],//alarmStartTime,alarmEndTime
|
||
activeBtn:'today',
|
||
search:{deviceType:'',alarmLevel:''},
|
||
// 表格、分页
|
||
tableData:[],
|
||
pageSize:10,//分页栏当前每个数据总数
|
||
pageNum:1,//分页栏当前页数
|
||
totalSize:0,//table表格数据总数
|
||
}
|
||
},
|
||
methods:{
|
||
formatDate,
|
||
toTicket(){
|
||
this.$router.push({path:'/ticket'})
|
||
},
|
||
// 判断是否是同一天
|
||
isSameDay(day1, day2) {
|
||
const date1 = new Date(day1),date2 = new Date(day2)
|
||
return date1.getFullYear() === date2.getFullYear() &&
|
||
date1.getMonth() === date2.getMonth() &&
|
||
date1.getDate() === date2.getDate();
|
||
},
|
||
// 分页
|
||
handleSizeChange(val) {
|
||
this.pageSize = val;
|
||
this.$nextTick(()=>{
|
||
this.getData()
|
||
})
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.pageNum = val
|
||
this.$nextTick(()=>{
|
||
this.getData()
|
||
})
|
||
},
|
||
// 搜索
|
||
onSearch(){
|
||
this.pageNum =1//每次搜索从1开始搜索
|
||
const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
|
||
// 选中了时间范围
|
||
if(alarmStartTime && alarmStartTime){
|
||
// 如果选择的时间范围是今天
|
||
if(this.isSameDay(alarmStartTime,alarmEndTime) && this.isSameDay(alarmStartTime,new Date())){
|
||
this.activeBtn = 'today'
|
||
}else {
|
||
this.activeBtn = 'history'
|
||
}
|
||
}else{
|
||
//没有选择时间范围 还是按照选中的今日告警、历史告警查询
|
||
}
|
||
this.getData()
|
||
},
|
||
// 重置
|
||
onReset(){
|
||
this.search={deviceType:'',alarmLevel:''}
|
||
this.dateRange=[]
|
||
this.pageNum =1//每次搜索从1开始搜索
|
||
this.getData()
|
||
},
|
||
// 切换今日、历史告警
|
||
changeDataType(id){
|
||
if(id !== this.activeBtn){
|
||
console.log('点击了不同的菜单，更新数据')
|
||
this.activeBtn=id;
|
||
const [alarmStartTime,alarmEndTime]=(this.dateRange || [])
|
||
// 切换到今日告警，如果已经选择了时间范围清空
|
||
if(alarmStartTime && alarmEndTime){
|
||
// 如果切换到了今日告警，时间范围不相等或者相等但是不是今天 清空时间选择范围
|
||
if(id === 'today' && !this.isSameDay(alarmStartTime,alarmEndTime) || (this.isSameDay(alarmStartTime,alarmEndTime) && !this.isSameDay(alarmStartTime,new Date()))){
|
||
this.dateRange = []
|
||
}else if(id === 'history' && this.isSameDay(alarmStartTime,alarmEndTime) && this.isSameDay(alarmStartTime,new Date())){
|
||
// 切换成历史告警，但是选择时间范围是当天，清空时间范围
|
||
this.dateRange = []
|
||
}
|
||
}
|
||
this.getData()
|
||
}
|
||
},
|
||
// 获取数据
|
||
getData(){
|
||
this.loading=true
|
||
const {deviceType,alarmLevel} = this.search
|
||
const {siteId,pageNum,pageSize,activeBtn} =this
|
||
const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
|
||
let start='',end = '',now =new Date()
|
||
if(activeBtn === 'today'){
|
||
start = end = now
|
||
}else{
|
||
if(alarmStartTime && alarmEndTime){
|
||
start = alarmStartTime
|
||
end = alarmEndTime
|
||
}else{
|
||
start=''
|
||
end = ''
|
||
// now
|
||
// end.setDate(end.getDate() - 1);
|
||
}
|
||
}
|
||
getAlarmDetailList({deviceType,alarmLevel,siteId,pageSize,pageNum,alarmStartTime:formatDate(start),alarmEndTime:formatDate(end)}).then(response => {
|
||
this.tableData=response?.rows || [];
|
||
this.totalSize = response?.total || 0
|
||
}).finally(() => {this.loading=false})
|
||
},
|
||
init(){
|
||
this.onReset()
|
||
},
|
||
},
|
||
mounted(){
|
||
const now = new Date();
|
||
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||
this.defaultDateRange = [lastMonth, now];
|
||
}
|
||
}
|
||
</script>
|
||
|