|
|
|
|
@ -8,7 +8,7 @@
|
|
|
|
|
:close-on-click-modal="false"
|
|
|
|
|
:close-on-press-escape="false"
|
|
|
|
|
class="realtime-alarm-dialog"
|
|
|
|
|
@close="closeRealtimeAlarmDialog"
|
|
|
|
|
@close="closeRealtimeAlarmDialog1"
|
|
|
|
|
>
|
|
|
|
|
<el-tabs v-model="realtimeActiveTab" type="card">
|
|
|
|
|
<!-- 告警详情标签页 -->
|
|
|
|
|
@ -165,20 +165,75 @@
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<div class="almReminder" @click="openAlm" v-if="almData.filter(e=>e.isWaiting).length>0"></div>
|
|
|
|
|
|
|
|
|
|
<div class="scTable1" style="width: 580px">
|
|
|
|
|
<!-- <span style="color:#fff">{{ almData }}</span>-->
|
|
|
|
|
|
|
|
|
|
<div style="background-color: #094170">
|
|
|
|
|
<div class="scrollTable" style="font-weight: bold;width:100px">
|
|
|
|
|
报警设备
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTable" style="font-weight: bold;width: 400px">
|
|
|
|
|
报警信息
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTable" style="font-weight: bold;width: 80px">
|
|
|
|
|
操作
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<vue-seamless-scroll
|
|
|
|
|
:class-option="chart1TableOption"
|
|
|
|
|
:data="almTableData"
|
|
|
|
|
style="height: calc(100% - 33px);overflow:hidden; "
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in almTableData"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
|
|
|
<div class="scrollTable" style=" width:100px;font-size: 14px">
|
|
|
|
|
{{ item.monitorId }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTable" style="width: 400px;font-size: 14px">
|
|
|
|
|
<el-tooltip :content="item.alarmContents[0]" placement="bottom">
|
|
|
|
|
<span>{{ item.alarmContents[0] }}</span>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTable" style="width: 80px;font-size: 14px">
|
|
|
|
|
<el-button @click="openAlm(item)" type="primary" size="mini">处理</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</vue-seamless-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {getByAlarmInfo} from "@/api/board";
|
|
|
|
|
import {getByAlarmInfo, handleExceptions} from "@/api/board";
|
|
|
|
|
import {saveWebSocketAlarmData} from "@/api/ems/record/recordAlarmData";
|
|
|
|
|
import icon5 from "@/assets/images/icon5.jpg";
|
|
|
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {vueSeamlessScroll},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
icon5,
|
|
|
|
|
chart1TableOption: {
|
|
|
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
|
|
|
limitMoveNum: 12, // 开始无缝滚动的数据量 this.dataList.length
|
|
|
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
|
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
|
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
|
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
|
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
|
|
waitTime: 0,
|
|
|
|
|
autoPlay: true,
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
almData: [],
|
|
|
|
|
almTableData: [],
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 弹窗是否开启
|
|
|
|
|
realtimeAlarmDialog: false,
|
|
|
|
|
@ -272,6 +327,7 @@ export default {
|
|
|
|
|
watch: {
|
|
|
|
|
almData: {
|
|
|
|
|
handler() {
|
|
|
|
|
this.almTableData = JSON.parse(JSON.stringify(this.almData.filter(e => e.isWaiting)))
|
|
|
|
|
if (this.almData.filter(e => !e.isWaiting).length > 0 && !this.realtimeAlarmDialog) {
|
|
|
|
|
let arr = this.almData.sort((a, b) => a.alarmRules[0].objid - b.alarmRules[0].objid)
|
|
|
|
|
let data = arr.filter(v => !v.isWaiting)
|
|
|
|
|
@ -286,13 +342,10 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
openAlm() {
|
|
|
|
|
let arr = this.almData.sort((a, b) => a.alarmRules[0].objid - b.alarmRules[0].objid)
|
|
|
|
|
if (arr.length > 0) {
|
|
|
|
|
this.currentRealtimeAlarm = arr[0]
|
|
|
|
|
openAlm(e) {
|
|
|
|
|
this.currentRealtimeAlarm = e
|
|
|
|
|
this.realtimeAlarmDialog = true
|
|
|
|
|
this.getAlm(arr[0])
|
|
|
|
|
}
|
|
|
|
|
this.getAlm(e)
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
// 格式化告警时间
|
|
|
|
|
@ -409,11 +462,11 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
async processRealtimeAlarm() {
|
|
|
|
|
this.alarmProcessing = true
|
|
|
|
|
try {
|
|
|
|
|
// 保存告警数据，状态为0（已处理）
|
|
|
|
|
const success = await this.saveRealtimeAlarmData(this.currentRealtimeAlarm, 0)
|
|
|
|
|
if (success) {
|
|
|
|
|
this.$message.success('告警已确认知晓并标记为已处理')
|
|
|
|
|
console.log(this.currentRealtimeAlarm.alarmRules[0])
|
|
|
|
|
handleExceptions(this.currentRealtimeAlarm.alarmRules[0].alarmId)
|
|
|
|
|
.then(res => {
|
|
|
|
|
|
|
|
|
|
this.$message.success('告警已确认知晓 ')
|
|
|
|
|
let data = this.currentRealtimeAlarm
|
|
|
|
|
let index = this.almData.findIndex(v => v.monitorId === data.monitorId && v.alarmRules[0].objid === data.alarmRules[0].objid)
|
|
|
|
|
|
|
|
|
|
@ -422,14 +475,13 @@ export default {
|
|
|
|
|
this.currentRealtimeAlarm = null
|
|
|
|
|
this.realtimeActiveTab = 'alarmDetail'
|
|
|
|
|
this.realtimeActionSteps = []
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('处理告警失败:', error)
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
this.$message.error('处理告警失败')
|
|
|
|
|
} finally {
|
|
|
|
|
})
|
|
|
|
|
.finally(() => {
|
|
|
|
|
this.alarmProcessing = false
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
getFieldName(fieldCode) {
|
|
|
|
|
const fieldMap = {
|
|
|
|
|
@ -457,6 +509,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
closeRealtimeAlarmDialog() {
|
|
|
|
|
let data = this.currentRealtimeAlarm
|
|
|
|
|
console.log(data)
|
|
|
|
|
let index = this.almData.findIndex(v => v.monitorId === data.monitorId && v.alarmRules[0].objid === data.alarmRules[0].objid)
|
|
|
|
|
|
|
|
|
|
this.$set(this.almData[index], 'isWaiting', true)
|
|
|
|
|
@ -465,6 +518,18 @@ export default {
|
|
|
|
|
this.realtimeActiveTab = 'alarmDetail'
|
|
|
|
|
this.realtimeActionSteps = []
|
|
|
|
|
},
|
|
|
|
|
closeRealtimeAlarmDialog1(done) {
|
|
|
|
|
let data = this.currentRealtimeAlarm
|
|
|
|
|
console.log(data)
|
|
|
|
|
let index = this.almData.findIndex(v => v.monitorId === data.monitorId && v.alarmRules[0].objid === data.alarmRules[0].objid)
|
|
|
|
|
|
|
|
|
|
this.$set(this.almData[index], 'isWaiting', true)
|
|
|
|
|
this.realtimeAlarmDialog = false
|
|
|
|
|
this.currentRealtimeAlarm = null
|
|
|
|
|
this.realtimeActiveTab = 'alarmDetail'
|
|
|
|
|
this.realtimeActionSteps = []
|
|
|
|
|
done()
|
|
|
|
|
},
|
|
|
|
|
PredictionContent() {
|
|
|
|
|
|
|
|
|
|
if (this.currentRealtimeAlarm.monitorId === 'E0012_4300' && this.currentRealtimeAlarm.alarmRules[0].monitorField === 1) {
|
|
|
|
|
@ -535,6 +600,28 @@ export default {
|
|
|
|
|
animation: Zoom 2s infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.scTable1 {
|
|
|
|
|
display: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 16%;
|
|
|
|
|
right: 10%;
|
|
|
|
|
width: 20%;
|
|
|
|
|
height: 45%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.scrollTable {
|
|
|
|
|
color: rgb(185, 186, 192);
|
|
|
|
|
margin: auto 0px;
|
|
|
|
|
padding: 4px 0;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
text-align: center;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes Zoom {
|
|
|
|
|
0% {
|
|
|
|
|
width: 3vw;
|
|
|
|
|
|
夜笙歌
3 weeks ago
