<template>
|
<div>
|
<el-row v-if="!eventgmDetailVisible">
|
<el-button class="backBtn" size="small" type="success" icon="el-icon-back" @click="handleBack">返 回
|
</el-button>
|
<el-col :span="12">
|
<div>
|
<el-card class="trackClass" style="overflow-y: auto">
|
<!--巡检任务信息-->
|
<div
|
style="margin-top: -10px"
|
role="tab"
|
aria-expanded="true"
|
aria-controls="el-collapse-content-823"
|
aria-describedby="el-collapse-content-823"
|
>
|
<div
|
role="button"
|
tabindex="0"
|
class="el-collapse-item__header focusing is-active"
|
>
|
<div class="avue-group__header avue-group">
|
<i class="el-icon-message-solid avue-group__icon"></i>
|
<h1 class="avue-group__title">巡检任务信息</h1>
|
</div>
|
</div>
|
</div>
|
<!--具体内容-->
|
<el-card>
|
<el-form
|
:model="form"
|
label-position="right"
|
size="mini"
|
class="taskinfoForm"
|
label-width="100px"
|
style="
|
margin-top: 20px;
|
margin-left: 10px;
|
margin-right: 10px;
|
height: calc(100% - 40px);
|
width: calc(100% - 20px);
|
"
|
>
|
<el-row>
|
<el-col span="24">
|
<el-form-item label="标题">
|
<el-input disabled="true" v-model="form.title" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="开始时间">
|
<el-input disabled="true" v-model="form.startTime" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="结束时间">
|
<el-input disabled="true" v-model="form.endTime" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col span="24">
|
<el-form-item label="任务内容">
|
<el-input disabled="true" v-model="form.content" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="任务状态">
|
<el-input disabled="true" v-model="form.$state" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="任务来源">
|
<el-input disabled="true" v-model="form.$source" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-card>
|
|
<!--巡检人员信息-->
|
<div
|
style="margin-top: 15px"
|
role="tab"
|
aria-expanded="true"
|
aria-controls="el-collapse-content-823"
|
aria-describedby="el-collapse-content-823"
|
>
|
<div
|
role="button"
|
tabindex="0"
|
class="el-collapse-item__header focusing is-active"
|
>
|
<div class="avue-group__header avue-group">
|
<i class="el-icon-s-custom avue-group__icon"></i>
|
<h1 class="avue-group__title">巡检人员信息</h1>
|
</div>
|
</div>
|
</div>
|
<el-card>
|
<el-table
|
ref="multipleTable"
|
:data="accepterInfo"
|
tooltip-effect="dark"
|
style="width: 100%"
|
max-height="240"
|
>
|
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
|
<el-table-column prop="realName" label="真名" align="center"></el-table-column>
|
<el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
|
</el-table>
|
</el-card>
|
|
<!--事件信息-->
|
<div v-if="eventgmList.length>0">
|
<div
|
style="margin-top: 15px"
|
role="tab"
|
aria-expanded="true"
|
aria-controls="el-collapse-content-823"
|
aria-describedby="el-collapse-content-823"
|
>
|
<div
|
role="button"
|
tabindex="0"
|
class="el-collapse-item__header focusing is-active"
|
>
|
<div class="avue-group__header avue-group">
|
<i class="el-icon-warning avue-group__icon"></i>
|
<h1 class="avue-group__title">相关事件信息</h1>
|
</div>
|
</div>
|
</div>
|
<el-card>
|
<el-table
|
ref="multipleTable"
|
:data="eventgmList"
|
tooltip-effect="dark"
|
style="width: 100%"
|
max-height="240"
|
@row-dblclick="rowDblclick"
|
>
|
<el-table-column prop="title" label="标题" align="center"></el-table-column>
|
<el-table-column prop="stateName" label="状态" align="center"></el-table-column>
|
</el-table>
|
</el-card>
|
</div>
|
|
</el-card>
|
</div>
|
</el-col>
|
|
<el-col :span="12">
|
<open-layers-map ref="OpenLayersMap" @toData="toData" :isDetail="true" :routeRange="form.routeRange"></open-layers-map>
|
</el-col>
|
</el-row>
|
|
<!--显示详情-->
|
<eventgm-detail v-if="eventgmDetailVisible" ref="detailVisible" :detailInfo="eventgmDetailInfo" :taskToEventgm="true" @isDetail="isDetail"></eventgm-detail>
|
</div>
|
</template>
|
|
<script>
|
import OpenLayersMap from "@/components/OpenLayersMap/index";
|
import {getUser} from "@/api/system/user"
|
import {getDetail} from "@/api/taskinfo/taskinfo";
|
import {getDictionary} from "@/api/system/dictbiz";
|
import EventgmDetail from "@/views/eventgm/eventgmDetail";
|
|
export default {
|
name: "taskinfoDetail",
|
components: {EventgmDetail, OpenLayersMap},
|
props:["detailInfo"],
|
data(){
|
return{
|
taskinfo:{},
|
form:{},
|
accepterInfo:[],
|
eventgmList:[],
|
eventgmDetailVisible:false,
|
eventgmDetailInfo:{},
|
}
|
},
|
created() {
|
this.form = this.detailInfo;
|
this.getUser()
|
this.getEventgmList()
|
},
|
methods:{
|
//获取巡检人员信息
|
getUser(){
|
if (this.form.toUserId != -1) {
|
getUser(this.form.toUserId).then(res => {
|
if (res.data.code == 200) {
|
this.accepterInfo.push(res.data.data)
|
}
|
})
|
}
|
},
|
//获取当前任务绑定的相关事件
|
getEventgmList(){
|
getDetail(this.form.id).then(res=>{
|
if(res.data.code == 200){
|
if (res.data.data.eventgmList.length>0){
|
this.eventgmList = res.data.data.eventgmList
|
getDictionary({code:"EVENT_TYPE"}).then(res=>{
|
if(res.data.code == 200){
|
|
this.eventgmList.forEach(e=>{
|
res.data.data.forEach(k=>{
|
if (e.type == k.dictKey){
|
e.typeName = k.dictValue
|
}
|
})
|
})
|
|
}
|
})
|
|
getDictionary({code:"EVENT_STATE"}).then(res=>{
|
if(res.data.code == 200){
|
this.eventgmList.forEach(e=>{
|
res.data.data.forEach(k=>{
|
if (e.state == k.dictKey){
|
e.stateName = k.dictValue
|
}
|
})
|
})
|
}
|
})
|
}
|
}
|
})
|
},
|
handleBack(){
|
this.$emit('isDetail');
|
},
|
rowDblclick(row){
|
this.eventgmDetailInfo = row
|
this.eventgmDetailVisible = true
|
},
|
isDetail(){
|
this.eventgmDetailVisible = !this.eventgmDetailVisible
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
|
/deep/ .el-table tbody tr:hover > td {
|
background-color: #f3ec94 !important
|
}
|
|
.el-col {
|
height: calc(100% - 5px);
|
}
|
|
.trackClass {
|
height: 85vh;
|
overflow: auto;
|
overflow-x: hidden;
|
}
|
|
.receiving-alarm-box {
|
line-height: 32px !important;
|
height: 200px;
|
overflow-y: auto;
|
|
.el-card__body {
|
padding: 0 10px !important;
|
}
|
}
|
|
#old_video::-webkit-media-controls-timeline {
|
display: block;
|
}
|
|
.el-input.is-disabled ::v-deep .el-input__inner {
|
color: #606266;
|
}
|
</style>
|
