557 lines
17 KiB
Vue
557 lines
17 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, nextTick } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
import { defineEmits, watch } from 'vue'
|
|
import { getDeviceByType } from "@/api/device";
|
|
import { setAlarmLogStatus } from "@/api/alarmInfo";
|
|
import { useUserStore } from '@/store/modules/user';
|
|
import { getAlarmLogById } from "@/api/home";
|
|
import Editvideo from "@/views/linkagecontrol/Intelligentlinkage/editvideo.vue";
|
|
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
|
|
const emit = defineEmits(['closeAlarm']);
|
|
const userStore = useUserStore();
|
|
const url = userStore.webApiBaseUrl;
|
|
function getInit() {
|
|
let params = {
|
|
id: props.alarminInfo.id,
|
|
systemType:props.alarminInfo.systemType
|
|
}
|
|
//异常事件统计
|
|
getAlarmLogById(params).then((res: any) => {
|
|
res.data.checkResult = '1'
|
|
examinationInfo.value = res.data
|
|
})
|
|
|
|
}
|
|
const props = defineProps({
|
|
alarminInfo: {
|
|
required: false,
|
|
type: Object,
|
|
default: 0
|
|
},
|
|
});
|
|
const doubleHit = ref(false)
|
|
const examinationInfo: any = ref({})
|
|
function confirmClick() {
|
|
if (doubleHit.value == true) {
|
|
return
|
|
}
|
|
doubleHit.value = true
|
|
const temporaryInfo = {
|
|
id: examinationInfo.value.id,
|
|
checkFlag: 1,
|
|
checkResult: examinationInfo.value.checkResult,
|
|
checkComment: examinationInfo.value.checkComment,
|
|
custom1: num.value,
|
|
taskAlarmType: examinationInfo.value.taskAlarmType,
|
|
deviceId:examinationInfo.value.deviceid
|
|
}
|
|
setAlarmLogStatus(temporaryInfo).then((res: any) => {
|
|
if (res != undefined && res.code == '0') {
|
|
emit("closeAlarm", true)
|
|
}
|
|
}).catch(() => {
|
|
doubleHit.value = false
|
|
})
|
|
}
|
|
function closeClick() {
|
|
emit("closeAlarm", false)
|
|
}
|
|
|
|
const AlarmLevelList: any = ref([]) // 告警等级
|
|
const AlarmSourceList: any = ref([])
|
|
function currency(list: any, itemcode: any) {
|
|
let dictname = ''
|
|
list.forEach((element: any) => {
|
|
if (element.itemcode == itemcode) {
|
|
dictname = element.dictname
|
|
}
|
|
})
|
|
return dictname
|
|
}
|
|
function getArrType() { // 查询字典方法
|
|
const paramstype = {
|
|
dictcode: 'AlarmLevel'
|
|
}
|
|
getDeviceByType(paramstype).then((res: any) => {
|
|
AlarmLevelList.value = res.data
|
|
})
|
|
|
|
const paramstypes = {
|
|
dictcode: 'AlarmSource'
|
|
}
|
|
getDeviceByType(paramstypes).then((res: any) => {
|
|
AlarmSourceList.value = res.data
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
getArrType()
|
|
getInit()
|
|
// examinationInfo.value = props.alarminInfo
|
|
|
|
})
|
|
const isVideo = ref(false)
|
|
const num = ref(0)
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="public-overlay">
|
|
<div class="newexamination">
|
|
<div class="public-examination" :style="examinationInfo.systemType == '02'?'' : 'height: 520px;'" >
|
|
<img v-if="examinationInfo.checkFlag == 1" style="position:absolute;top: 0px;left: 0px;"
|
|
src="@/assets/giveanalarm/hecha.png" alt="">
|
|
<img style="position:absolute;top: 15px;right: 20px;cursor:pointer;" src="@/assets/giveanalarm/x.png" alt=""
|
|
@click="closeClick">
|
|
<div style="padding:0px 15px ;">
|
|
<div style="display:flex;align-items: center;margin-bottom: 10px;padding-top: 20px;">
|
|
<div class="public-details-line"></div>
|
|
<div class="public-details-title">告警信息{{ examinationInfo.status }}</div>
|
|
</div>
|
|
<div style="display: flex;">
|
|
<div :style="examinationInfo.systemType == '02'?'width:370px;height: 250px;' : 'width:370px;height: 150px;'">
|
|
<div class="public-details-conent" v-if="examinationInfo.systemType == '02'">
|
|
<div class="public-details-name">点位名称：</div>
|
|
<div>{{ examinationInfo.bayName }}</div>
|
|
</div>
|
|
<div class="public-details-conent" v-if="examinationInfo.systemType == '01'">
|
|
<div class="public-details-name">信号名称：</div>
|
|
<div>{{ examinationInfo.signalName }}</div>
|
|
</div>
|
|
<div class="public-details-conent" v-if="examinationInfo.systemType == '02'" >
|
|
<div class="public-details-name">设备名称：</div>
|
|
<div>{{ examinationInfo.patroldeviceName }}</div>
|
|
</div>
|
|
<div class="public-details-conent" v-if="examinationInfo.systemType == '01'" >
|
|
<div class="public-details-name">主设备名称：</div>
|
|
<div>{{ examinationInfo.mainDeviceName }}</div>
|
|
</div>
|
|
<div class="public-details-conent">
|
|
<div class="public-details-name">部件名称：</div>
|
|
<div>{{ examinationInfo.componentName }}</div>
|
|
</div>
|
|
<div class="public-details-conent" v-if="examinationInfo.systemType == '02'">
|
|
<div class="public-details-name">告警来源：</div>
|
|
<div>{{ currency(AlarmSourceList, examinationInfo.taskAlarmType) }}</div>
|
|
</div>
|
|
<div class="public-details-conent" v-if="examinationInfo.systemType == '02'">
|
|
<div class="public-details-name">告警阈值：</div>
|
|
<span style="display:block;" >
|
|
<span style="display: inline-block;width: 50%;text-align: left;"><span>预警：</span><span>{{
|
|
examinationInfo.earlyMin }}-{{ examinationInfo.earlyMax }}</span></span>
|
|
<span style="display: inline-block;width: 50%;text-align: left;"><span>一般：</span><span>{{
|
|
examinationInfo.sameMin }}-{{ examinationInfo.sameMax }}</span></span>
|
|
<span style="display: inline-block;width: 50%;text-align: left;"><span>严重：</span><span>{{
|
|
examinationInfo.seriousMin }}-{{ examinationInfo.seriousMax }}</span></span>
|
|
<span style="display: inline-block;width: 50%;text-align: left;"><span>危急：</span><span>{{
|
|
examinationInfo.criticalMin }}-{{ examinationInfo.criticalMax }}</span></span>
|
|
</span>
|
|
</div>
|
|
<div class="public-details-conent">
|
|
<div class="public-details-name">告警等级：</div>
|
|
<div>{{ currency(AlarmLevelList, examinationInfo.alarmLevel) }}</div>
|
|
</div>
|
|
|
|
<div class="public-details-conent">
|
|
<div class="public-details-name">告警时间：</div>
|
|
<div v-if="examinationInfo.systemType == '02'" >{{ examinationInfo.alarmDate }}</div>
|
|
<div v-if="examinationInfo.systemType == '01'" >{{ examinationInfo.alarmTime }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="examinationInfo.systemType == '02'" style="width:290px;height: 200px;">
|
|
<div style="width:100%;height:100%; position: relative;">
|
|
<div title="查看图片" style="position: absolute;
|
|
right: 5px;
|
|
top: 5px;
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background: rgba(0,0,0,0.5);">
|
|
|
|
<img src="@/assets/monitorsystem/region/img.png" alt="">
|
|
<el-image style="position: absolute;width:100%;height:100%; opacity: 0;"
|
|
:src="url + '/previewimage?type=alarm&filename=' + encodeURI(examinationInfo.defectFilePath)" :zoom-rate="1.2"
|
|
:preview-src-list="[url + '/previewimage?type=alarm&filename=' + encodeURI(examinationInfo.defectFilePath)]" :preview-teleported="true" fit="cover" />
|
|
</div>
|
|
<div title="查看视频" style="position: absolute;
|
|
right: 40px;
|
|
top: 5px;
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background: rgba(0,0,0,0.5);">
|
|
<img src="@/assets/monitorsystem/region/video.png" alt="" @click="isVideo = true">
|
|
</div>
|
|
<img style="width:100%;height:100%;" :src="url + '/previewimage?type=alarm&filename=' + encodeURI(examinationInfo.defectFilePath)">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="public-details-conent">
|
|
<div class="public-details-name">告警描述：</div>
|
|
<div v-if="examinationInfo.systemType == '02'" :title="examinationInfo.content" style="height:63px;width: 560px;display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;">{{ examinationInfo.content }}</div>
|
|
<div v-if="examinationInfo.systemType == '01'" :title="examinationInfo.alarmMessage" style="height:63px;width: 560px;display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;">{{ examinationInfo.alarmMessage }}</div>
|
|
</div>
|
|
|
|
<div style="display:flex;align-items: center;">
|
|
<div class="public-details-line"></div>
|
|
<div class="public-details-title" >核查确认</div>
|
|
</div>
|
|
<div class="public-details-conent" style="align-items: center;">
|
|
<div class="public-details-name" style="padding-right: 10px;">是否属实</div>
|
|
<el-radio-group v-model="examinationInfo.checkResult">
|
|
<el-radio label="1" size="large">是</el-radio>
|
|
<el-radio label="0" size="large">否</el-radio>
|
|
</el-radio-group>
|
|
|
|
</div>
|
|
<div class="public-details-conent">
|
|
<div class="public-details-name" style="padding-right: 10px;">反馈意见</div>
|
|
<el-input v-model="examinationInfo.checkComment" style="width: 560px;" :rows="3" resize="none" type="textarea" placeholder="" />
|
|
</div>
|
|
<div style="display:flex;justify-content:center;margin-top:25px">
|
|
<!-- <div class="public-details-button" @click="isVideo=true">查看视频</div> -->
|
|
<div class="public-details-button" @click="closeClick">取消</div>
|
|
<div class="public-details-button" @click="confirmClick">确定</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Eldialog v-if="isVideo" :title="'查看摄像机'" :zIndex="2005" :width="'1200px'"
|
|
@before-close="isVideo = false" :elclass="'ylclass'" >
|
|
<template v-slot:PopFrameContent>
|
|
<Editvideo style="padding-top:10px ;" :_uid="2001" v-if="isVideo == true" :rowInfo="examinationInfo" :online="'1'" />
|
|
</template>
|
|
</Eldialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.giveanalarmBg-box {
|
|
position: absolute;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: url(@/assets/giveanalarm/jg_bj.png);
|
|
background-size: 100% 100%;
|
|
|
|
.giveanalarmContent-box {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
width: 703px;
|
|
height: 353px;
|
|
background: url(@/assets/giveanalarm/jg_bj1.png);
|
|
background-size: 100% 100%;
|
|
|
|
.giveanalarmImgBox {
|
|
position: relative;
|
|
width: 154px;
|
|
height: 154px;
|
|
|
|
.giveanalarmImg1 {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 1;
|
|
width: 154px;
|
|
height: 154px;
|
|
-webkit-animation: rotations 6s infinite linear;
|
|
}
|
|
|
|
.giveanalarmImg2 {
|
|
position: absolute;
|
|
top: 7px;
|
|
left: 7px;
|
|
z-index: 2;
|
|
width: 140px;
|
|
height: 140px;
|
|
}
|
|
}
|
|
|
|
.giveanalarmButton {
|
|
width: 260px;
|
|
height: 83px;
|
|
line-height: 83px;
|
|
margin: 40px auto 0;
|
|
text-align: center;
|
|
background: url(@/assets/giveanalarm/jg_an.png);
|
|
background-size: 100% 100%;
|
|
font-family: 'Arial Normal', 'Arial';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 28px;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes rotations {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rotations {
|
|
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
}
|
|
|
|
}
|
|
|
|
.giveanalarmContent-box1 {
|
|
width: 703px;
|
|
height: 148px;
|
|
background: url(@/assets/giveanalarm/jg_bj2.png);
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.giveanalarmImgBox {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
|
|
.giveanalarmImg1 {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
z-index: 1;
|
|
width: 94px;
|
|
height: 94px;
|
|
-webkit-animation: rotations 6s infinite linear;
|
|
}
|
|
|
|
.giveanalarmImg2 {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 2;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.public-overlay {
|
|
position: fixed;
|
|
z-index: 2023;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 2000;
|
|
height: 100%;
|
|
background: url(@/assets/giveanalarm/jg_bj.png);
|
|
background-size: 100% 100%;
|
|
overflow: auto;
|
|
|
|
// :deep(.el-button.is-disabled) {
|
|
// background-color: transparent !important;
|
|
// color: #007D52 !important;
|
|
// border-color: #007D52 !important;
|
|
// }
|
|
|
|
.public-notification {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
margin: auto;
|
|
/* background: url(/src/assets/monitorsystem/xsri_yltu.png); */
|
|
background-size: 100% 100%;
|
|
|
|
.public-notification-title {
|
|
text-align: center;
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
height: 40px;
|
|
line-height: 38px;
|
|
}
|
|
|
|
.public-notification-body {
|
|
position: absolute;
|
|
bottom: 15px;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.newexamination {
|
|
width: 700px;
|
|
height: 640px;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.public-examination {
|
|
position: relative;
|
|
width: 700px;
|
|
height: 640px;
|
|
background: url(@/assets/giveanalarm/jg_xqbj1.png);
|
|
background-size: 100% 100%;
|
|
|
|
.public-examination-title {
|
|
text-align: center;
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
height: 60px;
|
|
padding-top: 10px;
|
|
line-height: 38px;
|
|
}
|
|
|
|
.public-examination-body {
|
|
position: absolute;
|
|
bottom: 15px;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.public-details-line {
|
|
width: 4px;
|
|
height: 10px;
|
|
background: inherit;
|
|
background-color: #409eff;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.public-details-title {
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #409eff;
|
|
}
|
|
|
|
.public-details-conent {
|
|
font-family: 'Arial Normal', 'Arial';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
padding: 5px 0;
|
|
display: flex;
|
|
}
|
|
|
|
.public-details-name {
|
|
min-width: 105px;
|
|
text-align: right;
|
|
}
|
|
|
|
:deep(.is-checked .el-radio__inner) {
|
|
border-color: #409eff !important;
|
|
background: #409eff !important;
|
|
}
|
|
|
|
:deep(.el-radio__label) {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
:deep(.is-checked .el-radio__label) {
|
|
color: rgba(255, 255, 255, 1) !important;
|
|
}
|
|
|
|
:deep(.is-checked .el-radio__inner::after) {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: var(--el-radio-input-border-radius);
|
|
background-color: rgb(15, 51, 42)
|
|
}
|
|
|
|
.public-details-button {
|
|
width: 112px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
font-family: 'Arial Normal', 'Arial';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #409eff;
|
|
text-align: center;
|
|
background: url(@/assets/monitorsystem/xsri_an.png);
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
margin: 0 15px;
|
|
}
|
|
|
|
.public-details-button:hover {
|
|
background: url(@/assets/monitorsystem/xsri_an1.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
|
|
.examination {
|
|
width: 1200px;
|
|
height: 880px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
background: url(@/assets/monitorsystem/ejectbg/glbj.png);
|
|
background-size: 100% 100%;
|
|
z-index: 2;
|
|
|
|
.examination-title {
|
|
text-align: center;
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
height: 40px;
|
|
line-height: 38px;
|
|
}
|
|
|
|
}
|
|
|
|
.ylclass{
|
|
|
|
}
|
|
</style>
|