230 lines
7.7 KiB
Vue
230 lines
7.7 KiB
Vue
|
|
<template>
|
|
<div v-loading="loading" class="ems-dashboard-editor-container ems-content-container-padding">
|
|
<!-- 搜索栏-->
|
|
<el-form :inline="true" class="select-container">
|
|
<el-form-item label="设备清单">
|
|
<el-select v-model="search.deviceId" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
|
<el-option :label="item.deviceName" :value="item.deviceId" v-for="(item,key) in deviceOptions" :key="key+'deviceIdOptions'"></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="工单"
|
|
fixed="right"
|
|
width="250"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="mini" v-if="scope.row.ticketNo" @click="toTicket">已生成工单(工单号:{{scope.row.ticketNo}})</el-button>
|
|
<el-button type="primary" size="mini" v-else @click="createTicket(scope.row.id)">生成工单</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>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import {getAlarmDetailList,createTicketNo} from'@/api/ems/dzjk'
|
|
import {getDeviceList} from'@/api/ems/site'
|
|
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'},
|
|
],
|
|
deviceOptions:[],//设备列表
|
|
pickerOptions:{
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
},
|
|
},
|
|
defaultDateRange:[],//默认展示的时间
|
|
dateRange:[],//alarmStartTime,alarmEndTime
|
|
activeBtn:'today',
|
|
search:{deviceId:'',alarmLevel:''},
|
|
// 表格、分页
|
|
tableData:[],
|
|
pageSize:10,//分页栏当前每个数据总数
|
|
pageNum:1,//分页栏当前页数
|
|
totalSize:0,//table表格数据总数
|
|
}
|
|
},
|
|
methods:{
|
|
formatDate,
|
|
toTicket(){
|
|
this.$router.push({path:'/ticket'})
|
|
},
|
|
//生成工单
|
|
createTicket(id){
|
|
this.loading = true
|
|
createTicketNo({id}).then(response=>{
|
|
response?.data && this.toTicket()
|
|
}).finally(()=>{this.loading = false})
|
|
},
|
|
// 判断是否是同一天
|
|
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开始搜索
|
|
this.getData()
|
|
},
|
|
// 重置
|
|
onReset(){
|
|
this.search={deviceId:'',alarmLevel:''}
|
|
this.dateRange=[]
|
|
this.pageNum =1//每次搜索从1开始搜索
|
|
this.getData()
|
|
},
|
|
// 切换今日、历史告警
|
|
changeDataType(id){
|
|
if(id !== this.activeBtn){
|
|
console.log('点击了不同的菜单，更新数据')
|
|
this.activeBtn=id;
|
|
this.getData()
|
|
}
|
|
},
|
|
// 获取数据
|
|
getData(){
|
|
this.$store.dispatch('getSiteAlarmNum',this.siteId)
|
|
this.loading=true
|
|
const {deviceId,alarmLevel} = this.search
|
|
const {siteId,pageNum,pageSize,activeBtn} =this
|
|
const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
|
|
let status = activeBtn === 'today' ? '0' : '1,2'
|
|
getAlarmDetailList({status,deviceId,alarmLevel,siteId,pageSize,pageNum,alarmStartTime:formatDate(alarmStartTime),alarmEndTime:formatDate(alarmEndTime)}).then(response => {
|
|
this.tableData=response?.rows || [];
|
|
this.totalSize = response?.total || 0
|
|
}).finally(() => {this.loading=false})
|
|
},
|
|
getDeviceOptions(){
|
|
getDeviceList(this.siteId).then(response => {
|
|
this.deviceOptions = JSON.parse(JSON.stringify(response?.data || []))
|
|
})
|
|
},
|
|
init(){
|
|
this.getDeviceOptions()
|
|
this.onReset()
|
|
},
|
|
},
|
|
mounted(){
|
|
const now = new Date();
|
|
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
|
this.defaultDateRange = [lastMonth, now];
|
|
}
|
|
}
|
|
</script>
|
|
|