<template>
<div class="job-form">
<el-form v-loading="loading" ref="dataForm" :label-position="labelPosition" :model="jobForm" label-width="120px">
<el-row :gutter="20">
<el-col :span="9">
<el-form-item label="工单编号">
<el-input v-model="jobForm.jobCode" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<el-col :span="9" :offset="3">
<el-form-item label="窨井编号">
<el-input v-model="jobForm.wellCode" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="9">
<el-form-item label="设备编号">
<el-input v-model="jobForm.devcode" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<el-col :span="9" :offset="3">
<el-form-item label="详细地址">
<el-input v-model="jobForm.position" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="9">
<el-form-item label="告警类型">
<el-input v-model="jobForm.alarmTypeName" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<el-col :span="9" :offset="3">
<el-form-item label="告警内容">
<el-input v-model="jobForm.alarmContentName" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="9">
<el-form-item label="告警详情">
<el-input v-model="jobForm.alarmMessage" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<el-col :span="9" :offset="3">
<el-form-item label="处理状态">
<el-input v-model="jobForm.jobStatusName" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="jobForm.firstState" :gutter="20">
<el-col :span="20">
<el-form-item label="现场情况">
<el-input v-model="jobForm.firstState" :rows="3" type="textarea" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="firstImageList.length>0" :gutter="20">
<el-col :span="20">
<el-form-item label="现场图片">
<el-image
v-for="firstImage in firstImageList"
:key="firstImage"
:src="firstImage"
:preview-src-list="firstImageList"
fit="fill"
style="width:150px;height: 150px;border-radius: 5px; margin-right:10px;"/>
<!--<el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>-->
<!--<div class="imgBox">-->
<!--<img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">-->
<!--</div>-->
<!--</el-dialog>-->
</el-form-item>
</el-col>
</el-row>
<el-row v-if="jobForm.handleMessage" :gutter="20">
<el-col :span="20">
<el-form-item label="维护情况">
<el-input v-model="jobForm.handleMessage" :rows="3" type="textarea" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="handleImageList.length>0">
<el-col :span="24">
<el-form-item label="维护图片">
<el-image
v-for="handleImage in handleImageList"
:key="handleImage"
:src="handleImage"
:preview-src-list="firstImageList"
fit="fill"
style="width:150px;height: 150px;border-radius: 5px; margin-right:10px;"/>
<!--<el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>-->
<!--<div class="imgBox">-->
<!--<img :src="dialogImageUrl" alt="" style="margin:0 auto; max-height: 400px; max-width: 700px">-->
<!--</div>-->
<!--</el-dialog>-->
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="14">
<div>
<div class="table-label">
工单动态
</div>
<div class="table-content">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.time"
color="#0bbd87">
{{ activity.name }}
</el-timeline-item>
</el-timeline>
</div>
<div class="clear-float"/>
</div>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import { getJobInfo } from '@/api/job'
import { compareCalendar } from '@/utils/string'
export default {
name: 'DetailJob',
data() {
return {
dialogFormVisible: false, // 对话框是否显示
dialogStatus: '', // 对话框类型：create,update
jobForm: {
jobCode: '', // 工单编号
wellCode: '', // 窨井编号
devcode: '', // 设备编号
position: '', // 详细地址
coordinateX: '',
coordinateY: '',
latBaidu: '',
lngBaidu: '',
latGaode: '',
lngGaode: '',
alarmType: '',
alarmTypeName: '', // 告警类型
alarmContentName: '', // 报警内容
alarmMessage: '', // 告警详情
jobStatusName: '', // 工单处理状态
firstState: '', // 现场情况描述
firstStatePhotos: '', // 现场情况图片
handleMessage: '', // 维护情况描述
handleStatePhotos: '', // 维护图片
getJobPerson: '', // 接单人员名称
getJobTime: '', // 接单时间
confirmJobPerson: '', // 确认人员名称
confirmJobTime: '', // 确认时间
handleJobPerson: '', // 完成人员名称
handleJobTime: '', // 完成时间
flow: '' // 工单流转记录
}, // 表单
deptProps: {
parent: 'pid',
value: 'id',
label: 'name',
children: 'children'
},
activeStep: 0,
activities: [], // 工单记录
hideUpload: true,
firstImageList: [], // 现场图片列表
handleImageList: [], // 处理图片列表
dialogImageUrl: '', // 图片预览路径
dialogVisible: false, // 图片预览框是否显示
labelPosition: 'right', // labe对齐方式
mapShow: false, // 是否显示地图
loading: true
}
},
created() {
const jobId = this.$route.query.jobId
if (jobId) {
this.getJobInfo(jobId)
} else {
this.$message.error('参数加载错误')
}
},
activated() {
const jobId = this.$route.query.jobId
if (jobId) {
this.getJobInfo(jobId)
} else {
this.$message.error('参数加载错误')
}
},
methods: {
// 初始化对话框
initDialog: function(jobId) {
this.getJobInfo(jobId)
},
// 获取工单详情
getJobInfo: function(jobId) {
this.loading = true
const base_url = process.env.BASE_API + '/static/'
getJobInfo(jobId).then(response => {
this.loading = false
if (response.code === 200) {
if (response.data.length <= 0) {
return
}
const job = response.data[0]
this.jobForm = job
// 处理现场图片
if (job.firstStatePhotos !== '') {
this.firstImageList = []
const urls = job.firstStatePhotos.split(';')
for (const url of urls) {
if (url) {
// this.firstImageList.push({ name: url, url: base_url + url })
this.firstImageList.push(base_url + url)
}
}
} else {
this.firstImageList = []
}
// 处理维护图片
if (job.handlePhotos.length !== '') {
this.handleImageList = []
const urls = job.handlePhotos.split(';')
for (const url of urls) {
if (url) {
// this.handleImageList.push({ name: url, url: base_url + url })
this.handleImageList.push(base_url + url)
}
}
} else {
this.handleImageList = []
}
// 处理工单动态
// 若有getJobTime有值，表示有人接单
const activities = []
const jobForm = job
if (jobForm.createTime && jobForm.createTime !== '0000-00-00 00:00:00') {
activities.push({ time: jobForm.createTime, name: '创建工单', num: 1 })
}
if (jobForm.getJobTime && jobForm.getJobTime !== '0000-00-00 00:00:00') {
let getName = jobForm.getJobPerson ? jobForm.getJobPerson : '系统'
getName = getName + '接单'
activities.push({ time: jobForm.getJobTime, name: getName, num: 2 })
}
if (jobForm.confirmJobTime && jobForm.confirmJobTime !== '0000-00-00 00:00:00') {
let confirmName = jobForm.confirmJobPerson ? jobForm.confirmJobPerson : '系统'
confirmName = confirmName + '确认工单'
activities.push({ time: jobForm.confirmJobTime, name: confirmName, num: 3 })
}
if (jobForm.handleJobTime && jobForm.handleJobTime !== '0000-00-00 00:00:00') {
if (jobForm.jobStatus === '4') {
let handleName = jobForm.handleJobPerson ? jobForm.handleJobPerson : '系统'
handleName = handleName + '取消工单'
activities.push({ time: jobForm.handleJobTime, name: handleName, num: 4 })
} else {
let handleName = jobForm.handleJobPerson ? jobForm.handleJobPerson : '系统'
handleName = handleName + '完成工单'
activities.push({ time: jobForm.handleJobTime, name: handleName, num: 4 })
}
}
if (jobForm.flow && jobForm.flow.length > 0) {
for (const item of jobForm.flow) {
const transName = item.from + '转单给' + item.to
activities.push({ time: item.time, name: transName, num: 4 })
}
}
if (activities.length > 1) {
activities.sort((b, a) => {
const cmp = compareCalendar(a.time, b.time)
if (cmp === 0) {
if (a.num > b.num) return -1
else return 1
} else {
return compareCalendar(a.time, b.time)
}
})
}
this.activities = activities
}
})
},
// 图片预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" >
.job-form {
margin:20px 20px;
padding-bottom: 30px;
.hide .el-upload--picture-card {
display: none;
}
.main-form {
margin: 20px 30px;
padding: 10px;
}
.el-dialog {
width: 700px
}
.el-select {
width: 100%;
}
.line {
width: 50px;
margin-left: 5px;
}
.hide .el-upload-–picture-card {
display: none;
}
.imgBox {
width: 100%;
text-align: center;
}
.el-step.is-horizontal .el-step__line{
top:17px;
}
.table-label{
width: 120px;
float: left;
text-align: right;
font-size: 14px;
font-weight: 700;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.table-content{
float:left;
padding-top: 15px;
}
}
</style>
