<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="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="12">
|
<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">
|
<el-form-item label="任务状态">
|
<el-input disabled="true" v-model="form.$state" 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.location" 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-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-s-order 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>-->
|
<!-- <video-->
|
<!-- :src="videoUrls"-->
|
<!-- style="width: 200px; height: 200px; object-fit: fill"-->
|
<!-- controls-->
|
<!-- v-show="videoUrls != ''"-->
|
<!-- ></video>-->
|
<!-- <span v-show="videoUrls.length == 0">暂无视频</span>-->
|
<!-- </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="repairPersonInfo"
|
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>
|
</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 {getUser} from "@/api/system/user"
|
import {isImage} from "@/util/determiningFileFormat";
|
export default {
|
name: "repairsorderDetail",
|
components: {OpenLayersMap},
|
props:["detailInfo"],
|
data(){
|
return{
|
form:{},
|
pointLonLat: {},
|
repairPersonInfo:[],
|
picUrls:[],
|
videoUrls:[],
|
}
|
},
|
created() {
|
this.form = this.detailInfo;
|
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.getUser()
|
},
|
methods:{
|
// 获取巡检人员信息
|
getUser(){
|
if (this.form.toUserId != -1){
|
getUser(this.form.toUserId).then(res=>{
|
if (res.data.code == 200){
|
this.repairPersonInfo.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>
|
