<template>
|
<!-- 告警和事件的详情 -->
|
<div class="reacrd-modal">
|
<a-modal
|
centered
|
:footer="null"
|
width="60%"
|
v-model="visibleShow"
|
:title="isAddress + '信息'"
|
@cancel="cancelClick"
|
>
|
<div class="content-card">
|
<div class="left-content">
|
<video ref="videoRef" class="left-video" :src="infoObj.videoPath" controls autoplay loop></video>
|
<div class="icon-text">
|
<!--<span></span>-->
|
{{ infoObj.cameraName }}
|
</div>
|
</div>
|
<div class="right-content">
|
<div class="color5c8 top-title">{{ isAddress }}信息</div>
|
<div class="trailColor">
|
<div class="strokeColor"></div>
|
</div>
|
<!-- 告警内容 -->
|
<div class="report-info">
|
<div class="report-info" style="justify-content: flex-start">
|
<span style="color: #5e636e"> {{ isAddress }}类型: </span>
|
<div style="color: #bdbfc4; margin-left: 5px">
|
{{ infoObj.algorithmName }}
|
</div>
|
</div>
|
</div>
|
<div class="report-info">
|
<div class="report-content">
|
<span class="let-item"> 所属机构: </span>
|
<div :title="infoObj.orgName" class="right-text">{{ infoObj.orgName }}</div>
|
</div>
|
<div class="report-content">
|
<span class="let-item"> 所属{{ infoObj.eventAddress ? '区域' : '阶段' }}: </span>
|
<div class="right-text">
|
<span v-if="infoObj.eventAddress">
|
{{ infoObj.eventAddress | filterAddress }}
|
</span>
|
<span v-else> {{ infoObj.eventPhrase_dictText }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="report-info" style="justify-content: flex-start">
|
<span style="color: #5e636e"> {{ isAddress }}时间: </span>
|
<div style="color: #bdbfc4; margin-left: 5px">{{ infoObj.eventTime }}</div>
|
</div>
|
<div class="color5c8 top-title" style="margin-top: 8px">{{ isAddress }}图片</div>
|
<div class="trailColor">
|
<div class="strokeColor"></div>
|
</div>
|
<!-- 告警图片 -->
|
<viewer>
|
<img class="report-img" :src="infoObj.imgPath" alt="" />
|
</viewer>
|
<div class="color5c8 top-title" style="margin-top: 8px">处理结果</div>
|
<div class="trailColor">
|
<div class="strokeColor"></div>
|
</div>
|
<!-- 状态判断 -->
|
<!-- 已处理 -->
|
<div v-show="infoObj.auditResult !== 0">
|
<div class="report-info">
|
<div class="report-content">
|
<span class="let-item"> 处理结果: </span>
|
<div class="right-text" :style="{ color: infoObj.auditResult == 1 ? 'red' : '' }">
|
{{ infoObj.auditResult | filterAudit }}
|
</div>
|
</div>
|
<div class="report-content">
|
<span class="let-item"> 处理人: </span>
|
<div class="right-text">{{ infoObj.auditUser }}</div>
|
</div>
|
</div>
|
<div class="report-info isResult">
|
<span style="color: #5e636e"> 处理时间: </span>
|
<div style="color: #bdbfc4; margin-left: 5px">{{ infoObj.auditTime }}</div>
|
</div>
|
<div class="report-info isResult">
|
<span style="color: #5e636e"> 处理意见: </span>
|
<div style="color: #bdbfc4; margin-left: 5px; width: 70%" class="text-ellipsis">
|
{{ infoObj.auditComment }}
|
</div>
|
</div>
|
</div>
|
<!-- 未处理 -->
|
<div v-show="infoObj.auditResult == 0" v-has="'event:audit'">
|
<div class="report-info isResult">
|
<span style="color: #5e636e"> 审核意见: </span>
|
<div style="color: #bdbfc4; margin-left: 5px">
|
<a-input style="width: 200px" placeholder="请输入审核意见" v-model="queryFrom.auditComment" />
|
</div>
|
</div>
|
<div class="report-info isResult">
|
<span style="color: #5e636e"> 审核结果: </span>
|
<div class="submit">
|
<a-button type="primary" block @click="submitForm(2)"> 误判 </a-button>
|
<a-button type="danger" block @click="submitForm(1)"> 属实 </a-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</a-modal>
|
</div>
|
</template>
|
<script>
|
import { postAction } from '@tievd/cube-block/lib/api/manage'
|
export default {
|
created() {},
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
fromWhich: {
|
type: String,
|
default: '',
|
},
|
// 详情
|
infoObj: {
|
type: Object,
|
default: {},
|
},
|
},
|
data() {
|
return {
|
visibleShow: false,
|
queryFrom: {
|
auditComment: '',
|
auditResult: 0,
|
},
|
url: {
|
oilAudit: '/jyz/oilEvent/audit', //事件审核
|
outAudit: '/jyz/oiloutEvent/audit', // 告警审核
|
},
|
}
|
},
|
computed: {
|
isAddress() {
|
return this.infoObj.eventAddress ? '事件' : '告警'
|
},
|
},
|
filters: {
|
filterAudit(val) {
|
let text = ''
|
switch (val) {
|
case 1:
|
text = '属实'
|
break
|
case 2:
|
text = '误报'
|
break
|
case 0:
|
text = '未处理'
|
break
|
default:
|
break
|
}
|
return text
|
},
|
filterAddress(val) {
|
let text = ''
|
switch (val) {
|
case 1:
|
text = '卸油区'
|
break
|
case 2:
|
text = '加油区'
|
break
|
case 3:
|
text = '便利店'
|
break
|
default:
|
break
|
}
|
return text
|
},
|
},
|
watch: {
|
visible(val) {
|
this.visibleShow = val
|
this.queryFrom.auditComment = ''
|
// console.log(this.infoObj)
|
},
|
},
|
methods: {
|
// 点击关闭或者是遮罩发射关闭信号给父组件，控制关闭
|
cancelClick(data = null) {
|
this.$refs.videoRef.pause() //暂停
|
this.$emit('modalClose', data)
|
},
|
submitForm(type) {
|
this.queryFrom.id = this.infoObj.id
|
this.queryFrom.auditResult = type
|
if (this.fromWhich == 'spotCheck') {
|
postAction('/jyz/spotcheckEvent/audit', this.queryFrom).then((res) => {
|
if (res.code === 200) {
|
this.$message.success(res.message)
|
this.cancelClick(res.code)
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
} else {
|
const isAddress = this.infoObj.eventAddress ? true : false //是否事件审核
|
const { oilAudit, outAudit } = this.url // oilAudit 事件 outAudit 告警
|
postAction(isAddress ? oilAudit : outAudit, this.queryFrom).then((res) => {
|
if (res.code === 200) {
|
this.$message.success(res.message)
|
this.cancelClick(res.code)
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
}
|
},
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
@import '~@assets/less/dialog.less';
|
.color5c8 {
|
color: #5c84fd;
|
}
|
.content-card {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 17px;
|
font-size: 14px;
|
.left-content {
|
width: 70%;
|
min-height: 402px;
|
position: relative;
|
.left-video {
|
width: 100%;
|
height: 100%;
|
}
|
.icon-text {
|
position: absolute;
|
left: 15px;
|
top: 12px;
|
color: #fff;
|
font-size: 12px;
|
font-family: Adobe Heiti Std;
|
span {
|
display: inline-block;
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
margin-right: 5px;
|
background: #3eb171;
|
}
|
}
|
}
|
.right-content {
|
width: 30%;
|
margin-left: 19px;
|
.top-title {
|
font-weight: bolder;
|
font-size: 14px;
|
}
|
|
.trailColor {
|
margin: 11px 0;
|
width: 100%;
|
height: 2px;
|
background-color: #343a44;
|
position: relative;
|
.strokeColor {
|
width: 56px;
|
height: 2px;
|
background-color: #5c84fd;
|
position: absolute;
|
left: 0;
|
top: 0;
|
}
|
}
|
.report-info {
|
font-size: 13px;
|
font-family: SimHei;
|
font-weight: 400;
|
display: flex;
|
justify-content: space-between;
|
line-height: 25px;
|
width: 100%;
|
.text-ellipsis {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
/*! autoprefixer: off */ // 使用控制注释来禁用Autoprefixer
|
-webkit-box-orient: vertical;
|
/*autoprefixer: on */
|
-webkit-line-clamp: 3;
|
word-break: break-all;
|
}
|
|
.let-item {
|
width: 40%;
|
display: inline-block;
|
color: #5e636e;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
.right-text {
|
width: 50%;
|
overflow: hidden;
|
color: #bdbfc4;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
.report-content {
|
width: 50%;
|
display: flex;
|
}
|
}
|
.isResult {
|
justify-content: flex-start !important;
|
align-items: center;
|
margin-bottom: 15px;
|
.submit {
|
display: flex;
|
color: #bdbfc4;
|
margin-left: 5px;
|
button {
|
margin-left: 10px;
|
}
|
}
|
}
|
.report-img {
|
width: 100%;
|
height: 156px;
|
object-fit: cover;
|
}
|
}
|
}
|
</style>
|
