|
|
|
|
@ -1,16 +1,16 @@
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<el-card shadow="always" class="common-card-container common-card-container-no-title-bg">
|
|
|
|
|
<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" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
|
|
|
|
<el-option :label="item.name" :value="item.id" v-for="(item,index) in deviceTypeOptions" :key="index+'deviceTypeOptions'"></el-option>
|
|
|
|
|
<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" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
|
|
|
|
<el-option :label="item.name" :value="item.id" v-for="(item,index) in alarmLevelOptions" :key="index+'alarmLevelOptions'"></el-option>
|
|
|
|
|
<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="时间选择">
|
|
|
|
|
@ -56,14 +56,14 @@
|
|
|
|
|
label="告警等级"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span>{{scope.row.alarmLevel}}</span>
|
|
|
|
|
<span>{{$store.state.ems.alarmLevelOptions[scope.row.alarmLevel]}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="alarmContent"
|
|
|
|
|
min-width="400"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
label="告警内容">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span>{{scope.row.alarmContent}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="alarmStartTime"
|
|
|
|
|
@ -76,20 +76,37 @@
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="状态">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span :class="scope.row.status === 2 ? 'warning-status' : ''">{{scope.row.status === 2 ? '告警中' :'已结束'}}</span>
|
|
|
|
|
<span :class="['0','2'].includes(scope.row.status) ? 'warning-status' : ''">{{$store.state.ems.alarmStatusOptions[scope.row.status]}}</span>
|
|
|
|
|
</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";
|
|
|
|
|
export default {
|
|
|
|
|
name:'DzjkGzgj',
|
|
|
|
|
mixins:[getQuerySiteId],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
loading:false,
|
|
|
|
|
btnList:[
|
|
|
|
|
{name:'今日告警',id:'today'},
|
|
|
|
|
{name:'历史告警',id:'yesterday'},
|
|
|
|
|
@ -102,7 +119,6 @@ export default {
|
|
|
|
|
defaultDateRange:[],//默认展示的时间
|
|
|
|
|
dateRange:[],//alarmStartTime,alarmEndTime
|
|
|
|
|
activeBtn:'today',
|
|
|
|
|
loading:false,
|
|
|
|
|
search:{deviceType:'',alarmLevel:''},
|
|
|
|
|
deviceTypeOptions:[
|
|
|
|
|
{name:'类型一',id:1},
|
|
|
|
|
@ -113,15 +129,27 @@ export default {
|
|
|
|
|
{name:'等级一',id:1},
|
|
|
|
|
{name:'等级二',id:2},
|
|
|
|
|
],
|
|
|
|
|
tableData:[
|
|
|
|
|
{name:'告警一',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
|
|
|
|
|
{name:'告警二',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2},
|
|
|
|
|
{name:'告警三',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
|
|
|
|
|
{name:'告警四',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2}
|
|
|
|
|
]
|
|
|
|
|
// 表格、分页
|
|
|
|
|
tableData:[],
|
|
|
|
|
pageSize:10,//分页栏当前每个数据总数
|
|
|
|
|
pageNum:1,//分页栏当前页数
|
|
|
|
|
totalSize:0,//table表格数据总数
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
// 分页
|
|
|
|
|
handleSizeChange(val) {
|
|
|
|
|
this.pageSize = val;
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
this.getTableData()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
this.pageNum = val
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
this.getTableData()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 搜索
|
|
|
|
|
onSearch(){
|
|
|
|
|
this.getData()
|
|
|
|
|
@ -132,20 +160,31 @@ export default {
|
|
|
|
|
this.dateRange=[]
|
|
|
|
|
this.getData()
|
|
|
|
|
},
|
|
|
|
|
// 获取数据
|
|
|
|
|
getData(){
|
|
|
|
|
this.loading=false
|
|
|
|
|
},
|
|
|
|
|
// 切换今日、历史告警
|
|
|
|
|
changeDataType(id){
|
|
|
|
|
if(id !== this.activeBtn){
|
|
|
|
|
console.log('点击了不同的菜单,更新数据')
|
|
|
|
|
this.activeBtn=id;
|
|
|
|
|
this.getData()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 获取数据
|
|
|
|
|
getData(){
|
|
|
|
|
this.loading=true
|
|
|
|
|
const {deviceType,alarmLevel} = this.search
|
|
|
|
|
const {siteId,pageNum,pageSize,activeBtn} =this
|
|
|
|
|
const [alarmStartTime='',alarmEndTime='']=this.dateRange
|
|
|
|
|
const todayFlag = activeBtn === 'today'
|
|
|
|
|
getAlarmDetailList({deviceType,alarmLevel,siteId,pageSize,pageNum,alarmStartTime,alarmEndTime,todayFlag}).then(response => {
|
|
|
|
|
this.tableData=response?.data || [];
|
|
|
|
|
this.totalSize = response?.total || 0
|
|
|
|
|
}).finally(() => {this.loading=false})
|
|
|
|
|
},
|
|
|
|
|
init(){
|
|
|
|
|
this.onReset()
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
this.getData()
|
|
|
|
|
const now = new Date();
|
|
|
|
|
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
|
|
|
|
this.defaultDateRange = [lastMonth, now];
|
|
|
|
|
|