<template>
|
<div>
|
<el-button class="backBtn" size="small" type="success" icon="el-icon-back" @click="handleBack">返 回</el-button>
|
<el-row>
|
<el-col :span="12">
|
<div>
|
<el-card class="trackClass" style="overflow-y: auto">
|
<!--事件详情信息开始-->
|
<div
|
style=""
|
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-info 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="70px"
|
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="24">
|
<el-form-item label="地点">
|
<el-input disabled="true" v-model="form.address" 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.$type" 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-row>
|
<el-col span="24">
|
<el-form-item label="内容">
|
<el-input disabled="true" v-model="form.remark" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12" v-if="form.no">
|
<el-form-item label="工单编号">
|
<el-input disabled="true" v-model="form.no" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12" v-if="form.no">
|
<el-form-item label="工单状态">
|
<el-input disabled="true" v-if="repairsDetail.toUserId > 0" value="已派单" autocomplete="off"></el-input>
|
<el-input disabled="true" v-else value="未派单" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-card>
|
<!--事件详情信息结束-->
|
|
<!--事件图片或视频-->
|
<div
|
style=""
|
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-picture avue-group__icon"></i>
|
<h1 class="avue-group__title">图片和视频</h1>
|
</div>
|
</div>
|
</div>
|
<el-card class="scene-image-box">
|
<el-image
|
v-for="(item, index) in picUrls"
|
:key="index"
|
:src="item"
|
:preview-src-list="picUrls"
|
v-show="picUrls.length > 0"
|
></el-image>
|
|
<video
|
v-for="(item) in videoUrls" :key="item.id"
|
:src="item"
|
style="width: 145px; height: 145px; object-fit: fill; margin-right: 10px"
|
controls
|
v-show="item != ''"
|
></video>
|
|
<span v-show="picUrls.length == 0&&videoUrls.length ==0">暂无数据</span>
|
</el-card>
|
<!--事件图片或视频结束-->
|
|
<!--事件轨迹-->
|
<div
|
style=""
|
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-order avue-group__icon"></i>
|
<h1 class="avue-group__title">事件轨迹</h1>
|
</div>
|
</div>
|
</div>
|
<el-card>
|
<el-table
|
ref="multipleTable"
|
:data="eventgmRecord"
|
tooltip-effect="dark"
|
style="width: 100%"
|
max-height="240"
|
>
|
<el-table-column prop="person" label="处理人员" align="center"></el-table-column>
|
<el-table-column prop="remark" label="说明" align="center"></el-table-column>
|
<el-table-column prop="createTime" label="处理时间" align="center"></el-table-column>
|
</el-table>
|
</el-card>
|
<!--事件轨迹结束-->
|
|
<!--是否显示维修信息-->
|
<div v-if="this.form.no">
|
<!--维修人员信息-->
|
<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-s-custom avue-group__icon"></i>
|
<h1 class="avue-group__title">
|
维修人员信息 <span v-if="repairsDetail.toUserId < 0 || repairsDetail.toUserId == null">(未派单)</span>
|
</h1>
|
</div>
|
</div>
|
</div>
|
<el-card>
|
<el-table
|
ref="multipleTable"
|
:data="repairsPersonInfo"
|
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
|
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-order avue-group__icon"></i>
|
<h1 class="avue-group__title">维修轨迹</h1>
|
</div>
|
</div>
|
</div>
|
<el-card>
|
<el-table
|
ref="multipleTable"
|
:data="repairsRecord"
|
tooltip-effect="dark"
|
style="width: 100%"
|
max-height="240"
|
>
|
<el-table-column prop="repairPerson" label="处理人员" align="center"></el-table-column>
|
<el-table-column prop="remark" label="说明" align="center"></el-table-column>
|
<el-table-column prop="createTime" 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" :pointLonLat="pointLonLat" :routeRange="form.routeRange"></open-layers-map>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import OpenLayersMap from "@/components/OpenLayersMap/index";
|
import {getList as getEventgmRecordList} from "@/api/eventgm/eventgmRecord"
|
import {getList as getRepairsorderRecordList} from "@/api/repairsorder/repairsorderRecord";
|
import {getDetail} from "@/api/repairsorder/repairsorder";
|
import {getUser} from "@/api/system/user"
|
import {isImage} from "@/util/determiningFileFormat";
|
|
export default {
|
name: "eventgmDetail",
|
components: {OpenLayersMap},
|
props:["detailInfo","taskToEventgm"],
|
data(){
|
return{
|
eventgmInfo:{},
|
form:{},
|
pointLonLat: {},
|
eventgmRecord:[],
|
repairsRecord:[],
|
repairsDetail:{},
|
repairsPersonInfo:[],
|
picUrls:[],
|
videoUrls:[],
|
}
|
},
|
created() {
|
this.form = this.detailInfo;
|
if(this.taskToEventgm){
|
this.form.$state = this.detailInfo.stateName
|
this.form.$type = this.detailInfo.typeName
|
this.form.$source = this.detailInfo.source
|
}
|
if (this.form.picUrls){
|
this.form.picUrls.forEach(e=>{
|
if (isImage(e.value)){
|
this.picUrls.push(e.value)
|
}else {
|
this.videoUrls.push(e.value)
|
}
|
})
|
}
|
this.pointLonLat = {
|
lon:this.form.longitude,
|
lat:this.form.latitude
|
}
|
this.getEventgmRecordList();
|
this.getRepairsorderRecordList();
|
this.getRepairDetail();
|
},
|
methods:{
|
getEventgmRecordList(){
|
var params = {eventId : this.form.id}
|
getEventgmRecordList(1,100,params).then(res=>{
|
if (res.data.code ==200){
|
this.eventgmRecord = res.data.data.records
|
}
|
})
|
},
|
getRepairsorderRecordList(){
|
if (this.form.no){
|
var params = {no : this.form.no}
|
getRepairsorderRecordList(1,100,params).then(res =>{
|
if (res.data.code ==200){
|
res.data.data.records.forEach(e=>{
|
this.repairsRecord.push(e)
|
})
|
}
|
})
|
}
|
|
},
|
getRepairDetail(){
|
if (this.form.no){
|
getDetail({no:this.form.no}).then(res=>{
|
if (res.data.code == 200){
|
this.repairsDetail = res.data.data
|
if (this.repairsDetail.toUserId > 0) {
|
this.getRepairPersonInfo()
|
}
|
}
|
})
|
}
|
},
|
getRepairPersonInfo(){
|
if (this.repairsDetail.toUserId != -1){
|
getUser(this.repairsDetail.toUserId).then(res=>{
|
if (res.data.code == 200){
|
this.repairsPersonInfo.push(res.data.data)
|
}
|
})
|
}
|
},
|
handleBack(){
|
this.$emit('isDetail');
|
},
|
},
|
}
|
</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;
|
}
|
|
.scene-image-box {
|
line-height: 32px !important;
|
height: auto;
|
max-height: 200px;
|
overflow-y: auto;
|
|
.el-card__body {
|
display: flex;
|
padding: 0 10px !important;
|
flex-wrap: wrap;
|
justify-content: center;
|
align-items: center;
|
|
.x-audio-wrap.inline {
|
margin: 10px;
|
}
|
|
.el-image {
|
margin-right: 10px;
|
width: 145px;
|
height: 145px;
|
}
|
}
|
}
|
|
.el-input.is-disabled ::v-deep .el-input__inner {
|
color: #606266;
|
}
|
</style>
|
