<template>
<transition name="slide">
<div class="index-container">
<!--标题-->
<mt-header class="header" title="工单详情" fixed>
<div slot="left">
<mt-button icon="back" @click="$router.back(-1)"></mt-button>
</div>
</mt-header>
<div class="listbody">
<Loading v-if="isLoading"/>
<div class="well-info-card">
<div class="well-title">
<span class="title-left">{{jobForm.alarmContentName}}</span>
<span class="title-right">{{jobForm.createTime}}</span>
</div>
<div v-for="item in jobInfo" :key="item.title" class="well-info">
<span class="info-name">{{item.title}}</span>
<span v-if="item.islink" class="info-value" :class="item.class" @click="showWellDetail(item)">{{item.value}}</span>
<span v-else class="info-value" :class="item.class">{{item.value}}</span>
</div>
</div>
<!--待确认必填项-->
<div class="well-info-card" v-if="winType=='waitConfirmJob'">
<div class="well-info-button">
<span class="info-name">现场情况</span>
</div>
<div class="img-area">
<textarea v-model="jobForm.firstState" rows="5" placeholder="请输入现场情况"/>
</div>
<div class="well-info-button">
<span class="info-name">上传现场图片</span>
</div>
<div class="img-area">
<updatefile class="imgzip" :multiple="multiple" :max="maxPhotos" :list="firstStateImgs" ref="upload"></updatefile>
</div>
<div class="well-info-button">
<span class="title-left">闸井当前情况</span><span class="grey"> ( 若选择正常，则工单将直接结束 )</span>
<mt-radio
v-model="needHandle"
:options="wellStatusNow">
</mt-radio>
</div>
</div>
<!--处理中工单显示现场情况-->
<div class="well-info-card" v-if="(winType=='inHandleJob'||winType=='overJob')&& jobForm.firstState">
<div v-if="jobForm.firstState" class="well-info firststate" >
<span class="info-name">现场情况</span>
<span class="info-value">{{jobForm.firstState}}</span>
</div>
<div v-if="firstStateImgs.length>0" class="well-info-button firststate">
<span class="info-name">现场图片</span>
</div>
<div v-if="firstStateImgs.length>0" class="img-area">
<img class="img-show" v-for="img in firstStateImgs" :src="img" @click="showBigImage(img)"/>
</div>
</div>
<!--处理中必填项-->
<div class="well-info-card" v-if="winType=='inHandleJob'">
<div class="well-info-button">
<span class="info-name">维护情况</span>
</div>
<div class="img-area">
<textarea v-model="jobForm.handleMessage" rows="5" placeholder="请输入现场情况"/>
</div>
<div class="well-info-button">
<span class="info-name">上传维护图片</span>
</div>
<div class="img-area">
<updatefile class="imgzip" :multiple="multiple" :max="maxPhotos" :list="handleImgs" ref="upload"></updatefile>
</div>
</div>
<!--完成工单显示维护情况-->
<div class="well-info-card" v-if="winType=='overJob' && jobForm.handleMessage!=''">
<div class="well-info firststate" >
<span class="info-name">维护情况</span>
<span class="info-value">{{jobForm.handleMessage}}</span>
</div>
<div v-if="handleImgs.length>0" class="well-info-button firststate">
<span class="info-name">维护图片</span>
</div>
<div v-if="handleImgs.length>0" class="img-area">
<img class="img-show" v-for="img in handleImgs" :src="img" @click="showBigImage(img)"/>
</div>
</div>
<!--工单相关阶段时间倒序-->
<div class="well-info-card">
<div v-for="item in jobTimes" :key="item.name" class="well-info">
<span class="info-name">{{item.name}}</span>
<span class="info-value">{{item.time}}</span>
</div>
</div>
<div class="button-div">
<mt-button v-if="winType=='waitGetJob'" type="primary" @click="getJob">接单</mt-button>
<mt-button v-if="winType=='waitGetJob'" type="default" @click="goToMap">到这里去</mt-button>
<mt-button v-if="showTransferBtn" type="primary" @click="openTransferWin">转单</mt-button>
<mt-button v-if="winType=='waitConfirmJob'" type="default" @click="confirmJob">提交</mt-button>
<mt-button v-if="winType=='inHandleJob'" type="default" @click="overJob">提交</mt-button>
</div>
<mt-popup
v-model="popupVisible">
<ChoosePeople v-show="popupVisible" ref="choosePeople"/>
</mt-popup>
<mt-popup v-model="bigImageVisible" class="imageShowPopup">
<img :src="bigImageSrc" style="width: 100%; max-height: 100%"/>
</mt-popup>
</div>
</div>
</transition>
</template>
<script>
import {MessageBox, Indicator, Toast} from 'mint-ui'
import Updatefile from '@/components/Updatefile'
import { openMapWindow } from '@/utils/common'
import { getJobInfo, getJob, confirmJob, overJob } from '@/api/job'
import ChoosePeople from "../ChoosePeople";
import Loading from "../../../components/Loading/index";
import {compareCalendar} from '@/utils/string'
export default {
name: "JobDetail",
components:{
Loading,
ChoosePeople,
Updatefile
},
data() {
return {
jobForm: {
id: '', // 工单id
jobCode:'',//工单编号
createTime:'',//工单创建时间
wellId:1,
wellCode: '', // 闸井编号
wellType: '', // 闸井类型
wellTypeName: '', // 闸井类型名称
deptid: '', // 权属单位
deptName: '', // 权属单位名称
deep: '', // 井深，
alarmContentName:'',
alarmValue:'',
position: '', // 位置描述
coordinateX: '', // 经度
coordinateY: '', // 纬度
photos:"",//照片
notes: '', // 备注,
qu: '',
area: '', // 街道
responsibleDept: '', // 维护人员部门
flow:[],
firstState:'',
firstStatePhotos:'',
handleMessage:'',
handlePhotos:''
}, // 表单
isLoading:true, //是否显示加载按钮
multiple:true,//是否允许多张图片
maxPhotos:4,//最大图片数
firstStateImgs:[],//现场情况图片列表
handleImgs:[],//现场情况图片列表
popupVisible:false, //是否显示选择转单人弹窗,
bigImageVisible:false,//是否显示大图
bigImageSrc:'',//大图图片路径
needHandle: '', //是否需要处理
wellStatusNow:[
{
label: '正常',
value: '0'
},
{
label: '异常',
value:'1'
}
],
showTransferBtn:false
}
},
computed:{
jobInfo(){
return [
{
title:'工单编号',
value:this.jobForm.jobCode
},
{
title:'闸井编号',
value:this.jobForm.wellCode,
islink:true,
class:'text-blue'
},
{
title:'告警数值',
value:this.jobForm.alarmValue,
class:'text-red'
},
{
title:'位置描述',
value:this.jobForm.position
}
]
},
winType(){
if(this.jobForm.jobStatus=='0'){//待处理
return 'waitGetJob'
}else if (this.jobForm.jobStatus=='1'){
return 'waitConfirmJob'
}else if (this.jobForm.jobStatus=='2'){
return 'inHandleJob'
}else if (this.jobForm.jobStatus=='3'){
return 'overJob'
}
},
jobTimes(){
const timeList = []
const jobForm = this.jobForm
if(jobForm.createTime && jobForm.createTime!='0000-00-00 00:00:00'){
timeList.push({time:jobForm.createTime,name:'派单时间'})
}
if(jobForm.getJobTime && jobForm.getJobTime!='0000-00-00 00:00:00'){
timeList.push({time:jobForm.getJobTime,name:'接单时间'})
}
if(jobForm.confirmJobTime && jobForm.confirmJobTime!='0000-00-00 00:00:00'){
timeList.push({time:jobForm.confirmJobTime,name:'确认时间'})
}
if(jobForm.handleJobTime && jobForm.handleJobTime!='0000-00-00 00:00:00'){
timeList.push({time:jobForm.handleJobTime,name:'完成时间'})
}
if(jobForm.flow && jobForm.flow.length>0){
for(const item of jobForm.flow){
timeList.push({time:item.time, name:'转单时间'})
}
}
if(timeList.length>1){
timeList.sort((a,b)=>{
console.log(compareCalendar(a.time,b.time))
return compareCalendar(a.time,b.time)
})
}
return timeList
}
},
mounted(){
if(this.$route.params.id && this.$route.params.id!=''){
this.fetchData(this.$route.params.id)
}
},
methods:{
//跳转地图
goToMap(){
openMapWindow(this.jobForm.lngGaode,this.jobForm.latGaode,this.jobForm.wellName)
},
//获取工单详情
fetchData(id){
getJobInfo(id).then(response=>{
if(response.code==200){
this.jobForm = response.data[0]
this.isLoading = false
// 现场照片
if (this.jobForm.firstStatePhotos && this.jobForm.firstStatePhotos != '') {
const urls = this.jobForm.firstStatePhotos.split(';')
const base_url = process.env.BASE_API + '/static/'
for (const url of urls) {
if (url) {
this.firstStateImgs.push(base_url + url)
}
}
}
// 处理照片
if (this.jobForm.handlePhotos && this.jobForm.handlePhotos != '') {
const urls = this.jobForm.handlePhotos.split(';')
const base_url = process.env.BASE_API + '/static/'
for (const url of urls) {
if (url) {
this.handleImgs.push(base_url + url)
}
}
}
//判断是否显示转单按钮
if(this.jobForm.jobStatus=='1' || this.jobForm.jobStatus=='2'){
if(this.jobForm.flow && this.jobForm.flow.length>0 ){
this.showTransferBtn = false
}else{
this.showTransferBtn = true
}
} else{
this.showTransferBtn = false
}
}
})
},
//跳转显示闸井详情
showWellDetail(){
const id = this.jobForm.wellId
this.$router.push({
path :`/wellDetail/${id}`
})
},
//接单
getJob(){
MessageBox.confirm('确定要接单吗?').then(action => {
if(action=='confirm'){
getJob(this.jobForm.id).then(response => {
if(response.code==200){
Toast({
message: '接单成功',
position: 'bottom',
})
this.$router.push({name: 'job'})
}
})
}
})
},
//现场确认工单
confirmJob(){
if(this.jobForm.firstState.trim().length<1){
Toast({
message: '请输入现场情况',
position: 'bottom',
})
return
}else if(this.jobForm.firstState.trim().length>50){
Toast({
message: '现场情况字数不得超过50字',
position: 'bottom',
})
return
}
if(this.firstStateImgs.length<1){
Toast({
message: '请拍摄现场图片',
position: 'bottom',
})
return
}else{
this.jobForm.firstStatePhotos = ''
for(const img of this.firstStateImgs){
let index = img.indexOf('/static/')
if (index !== -1) {
index += 8
}
this.jobForm.firstStatePhotos+=img.substring(index)+';'
}
}
if(this.needHandle.trim().length<1){
Toast({
message: '请选择闸井当前情况',
position: 'bottom',
})
return
}
MessageBox.confirm('确定要提交吗?').then(action => {
if(action=='confirm'){
const data = {
id : this.jobForm.id,
firstState: this.jobForm.firstState,
firstStatePhotos: this.jobForm.firstStatePhotos,
needHandle: this.needHandle
}
confirmJob(data).then(response => {
if(response.code==200){
Toast({
message: '现场确认成功',
position: 'bottom',
})
this.$router.push({name: 'job'})
}
})
}
})
},
openTransferWin(){
this.popupVisible = true
this.$refs.choosePeople.initDialog(true,this.jobForm.id)
},
//结束工单
overJob(){
if(this.jobForm.handleMessage.trim().length<1){
Toast({
message: '请输入维护情况',
position: 'bottom',
})
return
}else if(this.jobForm.handleMessage.trim().length>50){
Toast({
message: '维护情况字数不得超过50字',
position: 'bottom',
})
return
}
if(this.handleImgs.length<1){
Toast({
message: '请拍摄维护图片',
position: 'bottom',
})
return
}else{
this.jobForm.handlePhotos = ''
for(const img of this.handleImgs){
let index = img.indexOf('/static/')
if (index !== -1) {
index += 8
}
this.jobForm.handlePhotos+=img.substring(index)+';'
}
}
MessageBox.confirm('确定要结束工单吗?').then(action => {
const data = {
id : this.jobForm.id,
handleMessage: this.jobForm.handleMessage,
handlePhotos: this.jobForm.handlePhotos,
}
if(action=='confirm'){
overJob(data).then(response => {
if(response.code==200){
Toast({
message: '结束工单成功',
position: 'bottom',
})
this.$router.push({name: 'job'})
}
})
}
})
},
//显示大图
showBigImage(src){
this.bigImageVisible = true
this.bigImageSrc = src
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.listbody{
margin-top 40px
padding 0.4rem 0
.well-info-card{
margin 5px 1vw 0px 1vw
background-color #ffffff
border 1px solid #f0f0f0
border-radius 4px
padding 1rem 1rem
.well-title{
padding-left 1rem
line-height 2rem
margin-bottom 0.6rem
.title-left{
font-size 1.2rem
font-weight 600
color: #000
}
.title-right{
font-size 0.8rem
float right
margin-right 1rem
color: #a7a7a7
}
}
.well-info{
overflow auto
border-bottom 1px solid #f0f0f0
padding 0.7rem 1rem 0.2rem 1rem
line-height:1.5rem
font-size:0.9rem
.info-name{
float left
}
.info-value{
float right
color #4b4b4b
max-width 70%
text-align right
}
.text-red{
color: red
}
.text-blue{
color: #1d55c6
}
}
}
.well-info-button{
overflow auto
padding 0.2rem 1rem 0.2rem 1rem
line-height:1.2rem
font-size:0.9rem
.info-name{
float left
}
.info-value{
float right
color #4b4b4b
max-width 60%
text-align right
}
}
.mint-cell{
font-size:0.9rem
}
.well-info:last-child{
border-bottom none
}
textarea{
width: 80vw
margin-left 5px
}
.img-area{
padding 0.5rem 0.5rem
}
.imgzip{
height 20vw
margin 0.2rem
}
.firststate{
padding-top 0.4rem
}
.button-div{
text-align center
padding 0px 15vw
.mint-button{
width 30vw
margin 10px 2vw
}
.mint-button--primary{
background-color #1d55c6
}
.mint-button--default{
background-color #ffffff
}
}
.mint-popup{
width: 50vw
}
.mint-cell{
diaplay:inline
}
.mint-cell-wrapper{
float left
width 30%
}
.mint-radiolist-label{
font-size:0.8rem
}
.grey{
color: #7c7c7c
font-size 0.8rem
}
.img-show{
width: 50px
height: 50px
margin: 10px
}
.imageShowPopup{
width:80%
}
}
</style>
