<template lang="pug">
el-dialog(:modal="false" :append-to-body="true" top="5vh" class="dialogClass" width="1390px" :close-on-press-escape="false" :visible.sync="visible" )
div(slot="title")
span.title-bold 报警处理详情
<div style="height:410px; margin-bottom:20px;">
<div class="instruct-list-dialog instruct-list-dialog-left">
<div class="header">基本信息</div>
<div>
el-form(ref="dataForm" :model="dataForm" label-width="100px")
el-form-item.el_form_item(label="报警编码")
el-input(v-model="this.dataForm.eventNumber" size="mini" readonly)
el-form-item.el_form_item(label="报警名称")
el-input(v-model="this.dataForm.eventName" :title='dataForm.eventName' size="mini" readonly)
el-form-item.el_form_item(label="资源点名称")
el-input(v-model="this.dataForm.resourceName" size="mini" readonly)
el-form-item.el_form_item(label="报警类型")
el-input(v-model="this.dataForm.eventTypeName" size="mini" readonly)
//- el-input(v-if="dataForm.eventType == 1" value="红外对射报警" size="mini" readonly)
//- el-input(v-if="dataForm.eventType == 2" value="振动光纤报警" size="mini" readonly)
//- el-input(v-if="dataForm.eventType == 3" value="出入口非法闯入" size="mini" readonly)
//- el-input(v-if="dataForm.eventType == 4" value="黑名单报警" size="mini" readonly)
//- el-input(v-if="dataForm.eventType == 5" value="炸探报警" size="mini" readonly)
//- el-input(v-if="dataForm.eventType == 6" value="一键报警" size="mini" readonly)
//- el-input(v-if="dataForm.eventType == 7" value="安检门报警" size="mini" readonly)
//- el-input(v-if="dataForm.eventType == 8" value="液探报警" size="mini" readonly)
//- el-input(v-if="dataForm.eventType == 9" value="双鉴探测报警" size="mini" readonly)
el-form-item.el_form_item(label="发生时间")
el-input(v-model="this.dataForm.occurrenceTime" size="mini" readonly)
el-form-item.el_form_item(label="报警等级")
el-input(v-if="dataForm.eventLevel === 1" value="特别重大" size="mini" readonly)
el-input(v-if="dataForm.eventLevel === 2" value="重大" size="mini" readonly)
el-input(v-if="dataForm.eventLevel === 3" value="一般" size="mini" readonly)
el-form-item.el_form_item(label="处理状态")
//- font(v-if="dataForm.status === 3") 已处理
//- font(v-if="dataForm.status === 2") 处理中
//- font(v-if="dataForm.status === 1") 未处理
el-input(v-if="dataForm.status === 1" value="未处理" size="mini" readonly)
el-input(v-if="dataForm.status === 2" value="处理中" size="mini" readonly)
el-input(v-if="dataForm.status === 3" value="已处理" size="mini" readonly)
</div>
</div>
<div class="instruct-list-dialog instruct-list-dialog-center">
<div class="header">报警截图</div>
<div style="padding:0px 10px" v-if ="dataForm.eventType != 4">
img(v-if="imgList.length === 0" height="260px" width="430px" src="../../../../assets/images/videoImg.png" alt="")
el-carousel(v-if="imgList.length > 0" height="260px" arrow="always")
el-carousel-item(v-for="(item,index) in imgList")
img(:src="item.src" height="220px" width="430px")
<div class="carousel-name">
<span style="float:left;margin-left:10px;"><span style="font-size:18px;font-weight:bold;color:rgba(33,172,252,1);">{{index+1}}</span>{{'/'+imgList.length}}</span>
//span(style="float:right;margin-right:10px;") 名字
</div>
</div>
<div v-if ="dataForm.eventType == 4" style="padding:0px 10px;float: left;">
img(v-if="imgList.length > 0" height="260px" width="210px" :src="imgList[0].src" alt="" )
//- <span>黑名单库图片</span>
img(v-if="imgList.length > 0" height="260px" width="210px" :src="imgList[1].src" alt="" style="padding-left:5px")
img(v-if="imgList.length === 0" height="260px" width="210px" src="../../../../assets/images/videoImg.png" alt="" )
//- <span>黑名单库图片</span>
img(v-if="imgList.length === 0" height="260px" width="210px" src="../../../../assets/images/videoImg.png" alt="" style="padding-left:5px")
//- <span>抓拍图片</span>
</div>
</div>
<div class="instruct-list-dialog instruct-list-dialog-right">
<div class="header">报警视频</div>
<div style="padding:0px 10px">
img(v-if="videoList.length === 0" height="260px" width="430px" src="../../../../assets/images/videoImg.png" alt="")
el-carousel(v-if="videoList.length > 0" height="260px" arrow="always")
el-carousel-item(v-for="(item,index) in videoList")
video(width="430px" height="220px" :src="item.src" autoplay loop controls muted="true")
<div class="carousel-name">
<span style="float:left;margin-left:10px;"><span style="font-size:18px;font-weight:bold;color:rgba(33,172,252,1);">{{index+1}}</span>{{'/'+videoList.length}}</span>
//span(style="float:right;margin-right:10px;") 名字
</div>
</div>
</div>
</div>
div.alarms-untreated-dialog-bottom(v-if="dataForm.type !== null")
el-tabs(v-model="activeName" type='border-card')
el-tab-pane(v-if="dataForm.type === 1" label="处理报警" name="first")
<div class="instruct-list-dialog" style="width:100%; height:230px">
<div style="margin:20px;" :style="{'width':`${opinionList.length}`*200+'px'}">
el-steps(:space="300" :active="opinionActive")
el-step(v-for="item in opinionList" :key='item.id' icon='el-icon-stepsIcon')
template(slot="description")
div 处理人： {{item.name }}
div 处理时间： {{item.opinionTime}}
div 处理意见：
font(:title="item.content") {{item.content,82|substr}}
</div>
</div>
el-tab-pane(v-if="dataForm.type === 2" label="应急预案" name="second" )
div.instruct-list-dialog(v-if="planStepList.length > 0" style="width:100%; height:230px" v-loading="loading")
div(style="margin:20px;" :style="{'width':`${planStepList.length}`*200+'px'}")
el-steps(:space="300" :active="stepActive")
el-step(v-for="(item,index) in planStepList" :key='index' icon='el-icon-stepsIcon')
template(slot="description")
div(v-if="item.instrId == null")
el-row
el-col(:span="24" v-if="item.runMode === 1") 人为响应：
el-col(:span="24" v-if="item.runMode === 2") 系统响应：
el-row
el-col(:span="24" v-if="item.runMode === 1") 执行单位：{{item.exeName}}
el-col(:span="24" v-if="item.runMode === 2") 资源点：{{item.resName}}
el-row
el-col(:span="24" v-if="item.runMode == 1")
div 动作：
font(:title="item.content" ) {{item.content,25|substr}}
el-col(:span="24" v-if="item.runMode === 2")
div 动作：
font(v-if="item.byx1 === '1'" style="cursor:pointer") {{item.actionName}}
font(v-else) {{item.actionName}}
el-row(v-if="item.runMode === 2 && item.status === 2")
el-col(:span="24" )
div 执行结果：
span(v-if="item.byx1 === '1'")
font(color='#67C23A') 成功
font.action_font(class="el-icon-picture" v-if="item.actionName === '抓图'" @click="queryActionHandle(item.id,1)") 抓图详情
font.action_font(class="el-icon-picture" v-if="item.actionName === '录像下载'" @click="queryActionHandle(item.id,2)") 录像下载详情
font(color='#F56C6C' v-if="item.byx1 === '2'") 失败
font(color='#F56C6C' v-if="item.byx1 === '3'") 中止
el-row
el-col(:span="24") 开始执行：{{item.updateTime}}
el-row
el-col(:span="24") 执行完成：{{item.byx1 === '1' ? item.endTime: item.runMode == 1 ? item.endTime : ''}}
//el-row(v-if="stepActive === index && item.runMode === 1")
el-col(:span="24")
el-button(mini="size" type="primary" @click="nextHandle(item)") 下一步
<span slot="footer" class="dialog-footer">
<el-button size='medium' type='primary' @click="visible = false">关闭</el-button>
</span>
el-dialog(:modal="false" width="35%" :modal-append-to-body="false" class="dialogActionClass" :close-on-press-escape="false" :visible.sync="actionVisible")
div(slot="title")
span.title-bold {{actionType == 0 ? '' : actionType==1 ? '抓图详情' : '录像下载详情'}}
div(v-loading="actionLoading")
img(v-if="actionList.length === 0" height="360px" width="100%" src="../../../../assets/images/videoImg.png" alt="")
el-carousel(v-if="actionList.length > 0" height="360px" arrow="always")
el-carousel-item(v-for="(item,index) in actionList")
img(v-if="item.fileType === 'jpg' && item.path && item.path != 'null'" :src="urlPath+item.path" height="320px" width="100%")
video(v-else-if="item.fileType === 'mp4' && item.path && item.path != 'null'" height="320px" width="100%" :src="urlPath+item.path" autoplay loop controls muted="true")
img(v-else height="360px" width="100%" src="../../../../assets/images/videoImg.png" alt="")
div.action_div
span.action_span(style="") {{index+1}}</span>{{'/'+actionList.length}}
//span.dialog-footer(slot="footer" style="padding:0 20px 0px 20px;")
el-button(size='medium' type='primary' @click="actionVisible = false") 关闭
</template>
<script>
export default {
data() {
return {
visible: false,
loading: false,
actionVisible: false,
actionLoading: false,
actionList: [],
actionType: 0,
dataForm: {}, //基本信息
disposeForm: {}, //处理报警
urlPath: window.CONFIG.urlPath,
planForm: {},
planList: [], //应急预案
opinionList: [], //处理报警步骤集合
stepList: [], //应急预案步骤集合
planStepList: [],
opinionActive: 0,
stepActive: 0,
activeName: 'first',
imgList: [],
videoList: []
}
},
filters: {
substr (val, len) {
if (!val) return ''
if (val.length > len) {
return val.slice(1, len) + '...'
}
return val
}
},
methods: {
queryActionHandle(id, type) {
this.actionType = type
this.actionList = []
this.actionVisible = true
this.actionLoading = true
this.$http({
url: this.$http.adornUrlAlarm(`/orAttachment/queryByAlarmStepId/` + id),
method: 'get'
}).then(data => {
this.actionLoading = false
if (data && data.code === 0) {
this.actionList = data.list
}
})
},
init(bean) {
this.activeName = 'first'
this.visible = true
this.dataForm = {}
this.disposeForm = {}
this.planList = {}
this.planForm = {}
this.opinionList = []
this.stepList = []
this.planStepList = []
this.getById(bean.id)
this.getListByAlarmsId(bean.id)
this.getHmdListByAlarmsId(bean.id)
},
//获取报警基本信息
getById(id) {
this.$http({
url: this.$http.adornUrlAlarm(`/alarmsInfo/getId`),
method: 'get',
params: {
id: id,
stationId: null
}
}).then(data => {
if (data && data.code === 0) {
this.dataForm = data.bean
}
}).then(data => {
//初始化处理报警信息
if (this.dataForm.type === 1) {
this.activeName = 'first'
this.$http({
url: this.$http.adornUrlAlarm(`/alarmsOpinion/getAlarmsId/`),
method: 'get',
params: this.$http.adornParams({
stationId: null,
alarmsId: this.dataForm.id
})
}).then(data => {
if (data && data.code === 0) {
this.opinionList = data.list
this.opinionActive = this.opinionList.length
}
})
}
//应急预案
if (this.dataForm.type === 2) {
this.activeName = 'second'
this.getPlanInfo()
}
})
},
//获取截图和视频
getListByAlarmsId(id) {
this.imgList = []
this.videoList = []
this.$http({
url: this.$http.adornUrlAlarm(`/linkAttachment/queryListByAlarmsId/` + id),
method: 'get'
}).then(data => {
if (data && data.code === 0) {
let arr = data.list
for (let i in arr) {
let val = { 'src': this.urlPath + arr[i].path }
if (arr[i].fileType === 'jpg') {
this.imgList.push(val)
}
if (arr[i].fileType === 'mp4') {
this.videoList.push(val)
}
}
}
})
},
//获取截图和视频
getHmdListByAlarmsId(id) {
// this.num = this.num + 1
this.imgList = []
this.videoList = []
this.$http({
url: this.$http.adornUrlAlarm(`/alarmAttachment/list`),
method: 'post',
params: {
alarmsId: id,
stationId: null
}
}).then(data => {
if (data && data.code === 0) {
let arr = data.list
for (let i in arr) {
let val = { 'src': this.urlPath + arr[i].path }
this.imgList.push(val)
}
}
})
},
//获取应急预案信息
getPlanInfo() {
this.$http({
url: this.$http.adornUrlAlarm(`/alarmsPlanStep/getPlanStepList`),
method: 'get',
params: {
alarmsId: this.dataForm.id,
stationId: null
}
}).then(data => {
if (data && data.code === 0) {
this.planStepList = data.list
for (let i in this.planStepList) {
if (this.planStepList[i].status === 1) {
this.stepActive = Number(i)
break
}
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.action_font{
cursor:pointer;
line-height: 20px;
padding-left:10px;
}
.action_div{
float:left;
width:100%;
height:40px;
background: #F6F7FB;
line-height: 40px;
bottom: 0;
}
.action_span{
float:left;
text-indent: 1rem;
font-size:18px;
font-weight:bold;
color:rgba(33,172,252,1)
}
.dialogActionClass{
/deep/ .el-dialog__body{
padding: 10px;
}
}
.el_form_item{
margin-bottom: 0px !important;
}
.col_style{
height: 2rem;
line-height: 2rem;
}
.row_div{
padding: 1rem 1.5rem 1rem 0rem;
border: 1px #DCDFE6 solid;
/*background-color: #EBEEF5;*/
height: 20rem;
}
.col_div{
padding: 1rem;
border: 1px #DCDFE6 solid;
/*background-color: #EBEEF5;*/
height: 13rem;
max-height: 13rem;
overflow-x:auto;
overflow-y:hidden;
}
.no_img{
text-align: center;
font-size: 36px;
font-weight: bold;
}
.col_div_two{
padding: 1rem;
border: 1px #DCDFE6 solid;
/*background-color: #EBEEF5;*/
border-left: none;
height: 13rem;
}
.row_image_div{
padding: 1.5rem 2rem;
border: 1px #DCDFE6 solid;
border-left: none;
/*background-color: #EBEEF5;*/
height: 20rem;
}
.alarms_font{
color:#409EFF;
line-height: 2rem;
font-weight: bold;
}
.dialogClass {
/deep/ .el-dialog__body{
padding-bottom: 10px;
}
}
.instruct-list-dialog{
height:410px; width: 450px; float: left;background: #fff; box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.2); overflow: auto;
.header{
height: 40px; background: #EEF8FF; line-height: 40px; padding-left: 15px;font-weight:400;margin-bottom: 20px;
}
.el-tree{
background:rgba(255,255,255,0);
}
.el-tree-node__content:hover{
background: #35AFF8
}
.el-input{
width: 90%;
}
.el-carousel__container{
width:300px; margin:0 auto;
}
.el-carousel__arrow--left {
left:-50px;
}
.el-carousel__arrow--right{
right:-50px;
}
.carousel-name{
position: absolute;
width:100%; height:40px;background:#F6F7FB;bottom:0; line-height:40px;
}
}
.alarms-untreated-dialog-bottom{
.el-tabs__nav-scroll {
height: 40px;
padding-top: 10px;
padding-left: 10px;
background: #EEF8FF;
.el-tabs__item{
border-top-color: #DCDFE6 !important;
}
}
}
.alarms-untreated-dialog-bottom{
.el-tabs{
.el-tabs__content{
padding:0 !important;
}
}
}
</style>