<template>
|
<GlobalWindow
|
:title="title"
|
width="85%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm">
|
<div class="modal_wrap">
|
<div class="modal_content">
|
<div class="header">
|
<img v-if="info.status == '3'" class="head_bg"
|
src="@/assets/task/bg_shenhe_fail@2x.png" alt="">
|
<img v-else-if="info.status == '4'" class="head_bg"
|
src="@/assets/task/bg_shenhe_pass@2x.png" alt="">
|
<img v-else class="head_bg" src="@/assets/task/bg_shenhe@2x.png" alt="">
|
<div class="left">
|
<div class="h1">{{ cateList[type] }}</div>
|
<div class="time">提交时间：{{ info.createDate }}</div>
|
</div>
|
</div>
|
<div class="info"> <div class="title">工单信息</div>
|
<div class="list">
|
<div class="item">
|
<div class="label">员工姓名</div>
|
<div class="value">{{ info.memberName }} - {{ info.memberPhone || '[无手机号]' }}</div>
|
</div>
|
<div class="item">
|
<div class="label">所属部门</div>
|
<div class="value">{{ info.companyName }} </div>
|
</div>
|
<div class="item">
|
<div class="label">观察主题</div>
|
<div class="value">{{ info.typeName }}</div>
|
</div>
|
<div class="item">
|
<div class="label">上报时间</div>
|
<div class="value">{{ info.submitDate }}</div>
|
</div>
|
<div class="item">
|
<div class="label">发现时间</div>
|
<div class="value">{{ info.happenTime}}</div>
|
</div>
|
<div class="item">
|
<div class="label">位置</div>
|
<div class="value">{{ info.locationName }}</div>
|
</div>
|
<div class="item">
|
<div class="label">通知人</div>
|
<div class="value">{{ info.memberNames }}</div>
|
</div>
|
<div class="item">
|
<div class="label">观察项统计</div>
|
<div class="value" style="color: #1562e2" >符合：【{{ info.dcaYesNum || 0 }}】 不符合：【 <span style="color: red" >{{(info.dcaNoNum||0)}}</span> 】</div>
|
</div>
|
<div class="item" style="width: 100%">
|
<div class="label">图片</div>
|
<div class="value" v-if="info.multifileList ==null || !info.multifileList.length">无</div>
|
<div class="value" v-if="info.multifileList !=null && info.multifileList.length">
|
<div v-for="item in info.multifileList" :key="item.id" style="display: inline;margin-right: 20px">
|
<video
|
v-if="item.fileurlFull && item.fileurlFull.endsWith('.mp4')"
|
ref="videoRef"
|
controls
|
preload="auto"
|
style="width: 80px;height: 80px;object-fit: contain;"
|
:src="item.fileurlFull"
|
/>
|
<el-image
|
v-else-if="item.fileurlFull"
|
style="width:80px; height: 80px"
|
:src="item.fileurlFull"
|
:preview-src-list="[item.fileurlFull]">
|
</el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="table_info">
|
<div class="title">不符合项工单列表</div>
|
<el-table :data="info.dcaChildList" border fit>
|
<el-table-column prop="index" label="序号" width="55" fixed="left">
|
<template slot-scope="scope">{{ scope.$index+1}}</template>
|
</el-table-column>
|
<el-table-column label="工单号" prop="code" min-width="100">
|
<template slot-scope="{row}">
|
<span style="color: #2E68EC;cursor: pointer" @click="$refs.OperaWorkorderDetailDcaInfoWindow.open('DCA不符合项工单详情', row)" >{{ row.code || '-'}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="一级主题" prop="typeName" min-width="60"> </el-table-column>
|
<el-table-column label="二级主题" prop="categoryName" min-width="60"> </el-table-column>
|
<el-table-column label="观察项" prop="problemTitle" min-width="100"> </el-table-column>
|
<el-table-column label="不符合原因" prop="eventInfo" min-width="120" />
|
<el-table-column label="处理状态" prop="status" min-width="80">
|
<template slot-scope="{row}">
|
<!-- <span :class="'statusInfo'+row.status" v-if="row.status ==0">待处理</span>-->
|
<span :class="'statusInfo'+row.status" v-if="row.status ==3 ||row.status ==4||row.status ==5">已处理</span>
|
<span :class="'statusInfo'+row.status" v-else>处理中</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" prop="status" min-width="80">
|
<template slot-scope="{row}">
|
<el-button type="text" @click="$refs.OperaWorkorderDetailDcaInfoWindow.open('DCA不符合项工单详情', row)" icon="el-icon-zoom-out" >查看详情</el-button>
|
<!--<el-button type="text" @click="deleteById(row)" icon="el-icon-delete" v-permissions="['business:workorder:delete']">删除</el-button>-->
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="table_info">
|
<div class="title">符合项列表</div>
|
<el-table :data="dataList2" border fit>
|
<el-table-column prop="index" label="序号" width="55" fixed="left">
|
<template slot-scope="scope">{{ scope.$index+1}}</template>
|
</el-table-column>
|
<el-table-column label="一级主题" prop="typeName" min-width="160"> </el-table-column>
|
<el-table-column label="二级主题" prop="categoryName" min-width="150"> </el-table-column>
|
<el-table-column label="观察项" prop="problemTitle" min-width="400"> </el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
</div>
|
<!-- -->
|
<template v-slot:footer>
|
<el-button @click="close">返回</el-button>
|
</template>
|
<OperaWorkorderDetailDcaInfoWindow ref="OperaWorkorderDetailDcaInfoWindow" />
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import OperaWorkorderDetailDcaInfoWindow from '@/components/business/OperaWorkorderDetailDcaInfoWindow'
|
import { getById } from '@/api/business/workorder'
|
export default {
|
name: 'OperaWorkorderDetailDbhWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow ,OperaWorkorderDetailDcaInfoWindow},
|
data () {
|
return {
|
id: '',
|
type: null,
|
title: '工单详情',
|
info: {},
|
dataList2: [],
|
statusMap: {
|
0: '待分配WTS',
|
1: '待分配任务',
|
2: '待工程师处理',
|
3: '已解决',
|
4: '已解决',
|
5: '已解决'
|
},
|
cateList: {
|
0: 'SHE事件工单',
|
1: 'DCA事件提交记录',
|
2: 'DCA事件工单',
|
3: '跌绊滑事件工单'
|
}
|
}
|
},
|
methods: {
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
this.info = target
|
this.getDetail()
|
this.type = this.info.type
|
},
|
close () {
|
this.visible = false
|
},
|
getDetail () {
|
getById(this.info.id).then(res => {
|
this.info = res
|
this.getDataListByRemak()
|
if (this.info.logList && this.info.logList.length > 0) {
|
this.info.logList.forEach(item => {
|
if (item.approveList && item.approveList.length == 1 && item.type !== 1) {
|
item.title = item.approveList[0].title
|
item.faceImg = item.approveList[0].faceImg
|
item.memberName = item.approveList[0].memberName
|
item.statusInfo = item.approveList[0].statusInfo
|
item.approveList = []
|
}
|
})
|
}
|
})
|
},
|
getDataListByRemak () {
|
this.dataList2 =[]
|
if(this.info.remark){
|
var obj = JSON.parse(this.info.remark)
|
console.log(obj)
|
if(obj && obj.childMapList){
|
obj.childMapList.forEach(item =>{
|
if(item && item.problemMapList){
|
item.problemMapList.forEach(item1 =>{
|
if(item1 && item1.status === 1){
|
this.dataList2.push({'typeName':this.info.typeName, 'categoryName':item.childTitle,'problemTitle':item1.title})
|
}
|
})
|
}
|
})
|
}
|
|
}
|
},
|
reject () { },
|
handleAvatarSuccess () { },
|
beforeAvatarUpload () { }
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/variables.scss";
|
|
.upload_box {
|
width: 84px;
|
height: 84px;
|
border-radius: 4px;
|
background-color: #f7f7f7;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
color: #999999;
|
border: 1px solid #e4e4e4;
|
|
.icon {
|
font-size: 24px;
|
}
|
|
.text {
|
font-size: 12px;
|
}
|
}
|
|
.side_title {
|
font-weight: 600;
|
font-size: 18px;
|
color: #111111;
|
margin-bottom: 20px;
|
margin-left: 20px;
|
margin-top: 20px;
|
}
|
|
.modal_wrap {
|
display: flex;
|
height: 100%;
|
|
.modal_content {
|
flex: 1;
|
padding: 0px 30px;
|
border-radius: 8px;
|
overflow: hidden;
|
height: 100%;
|
|
.title {
|
font-weight: 600;
|
font-size: 18px;
|
color: #333333;
|
margin-bottom: 20px;
|
margin-top: 30px;
|
}
|
|
.info {
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
.item {
|
display: flex;
|
width: 50%;
|
font-size: 14px;
|
margin-bottom: 20px;
|
|
&:nth-of-type(2n) {
|
width: 50%;
|
}
|
|
.label {
|
color: #888888;
|
width: 100px;
|
}
|
|
.value {
|
width: calc(100% - 100px);
|
color: #111111;
|
}
|
}
|
}
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
vertical-align: center;
|
padding: 20px 30px;
|
margin: 0 -30px;
|
border-radius: 8px 8px 0 0;
|
position: relative;
|
|
.head_bg {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
top: 0;
|
z-index: 9;
|
}
|
|
.h1 {
|
font-weight: 600;
|
font-size: 22px;
|
color: #111111;
|
margin-bottom: 8px;
|
}
|
|
.time {
|
font-size: 14px;
|
color: #999999;
|
}
|
|
.right {
|
height: 40px;
|
font-size: 16px;
|
color: #ffffff;
|
line-height: 40px;
|
padding: 0 20px;
|
background: #207ff7;
|
box-shadow: 4px 4px 0px 0px rgba(32, 127, 247, 0.16);
|
border-radius: 16px 0px 16px 0px;
|
position: relative;
|
z-index: 99;
|
}
|
|
.scs {
|
background-color: #00BA67;
|
}
|
|
.msg {
|
background-color: #ED4545;
|
}
|
}
|
|
.table_info {
|
.name_wrap {
|
display: flex;
|
align-items: center;
|
|
.avatar {
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
margin-right: 12px;
|
}
|
|
.content {
|
.line {
|
display: flex;
|
}
|
.tag {
|
color: #b2cbf9;
|
border: 1px solid #b2cbf9;
|
padding: 0px 4px;
|
border-radius: 4px;
|
margin-left: 6px;
|
}
|
}
|
}
|
}
|
}
|
|
.side {
|
height: 100%;
|
width: 420px;
|
background: #ffffff;
|
border-left: 20px solid #f7f7f7;
|
|
.list {
|
.item {
|
padding: 8px 0;
|
position: relative;
|
|
.separate {
|
position: absolute;
|
border-left: 2px dashed #cccccc;
|
left: 31px;
|
height: calc(100% - 0px);
|
top: 30px;
|
}
|
|
.avatar {
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
margin: 0 12px 0 16px;
|
//border: 1px solid;
|
}
|
|
.childList {
|
display: flex;
|
flex-wrap: wrap;
|
margin-left: 100px;
|
}
|
|
.company {
|
font-size: 13px;
|
color: #888888;
|
width: calc(100% - 20px);
|
.status {
|
color: $primaryColor;
|
}
|
/* span{
|
color: black;
|
}*/
|
.dealinfo{
|
background-color: #f2f2f2;
|
padding: 8px;
|
display: block;
|
margin-top: 5px;
|
width: calc(100% - 20px);
|
}
|
}
|
|
.m_content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 4px;
|
}
|
|
.info {
|
display: flex;
|
/*align-items: center;*/
|
margin-left: 20px;
|
|
.icon {
|
position: relative;
|
z-index: 11;
|
color: #53b76f;
|
font-size: 24px;
|
}
|
|
.icon1 {
|
position: relative;
|
z-index: 11;
|
color: deepskyblue;
|
font-size: 24px;
|
}
|
|
.icon2 {
|
position: relative;
|
z-index: 11;
|
color: #dc362e;
|
font-size: 24px;
|
}
|
|
.iconnew {
|
width: 24px;
|
height: 24px;
|
}
|
|
.icon3 {
|
position: relative;
|
z-index: 11;
|
color: gray;
|
font-size: 24px;
|
}
|
|
.content {
|
flex: 1;
|
|
.line {
|
display: flex;
|
justify-content: space-between;
|
align-content: center;
|
margin-bottom: 6px;
|
|
.status {
|
color: #888888;
|
}
|
|
.padding {
|
color: $primaryColor;
|
}
|
|
.name {
|
font-weight: 600;
|
font-size: 16px;
|
color: #111111;
|
}
|
|
.time {
|
color: #888888;
|
}
|
}
|
}
|
}
|
|
.remark {
|
background: #f7f7f7;
|
border-radius: 4px;
|
padding: 13px 15px;
|
color: #666666;
|
margin-left: 100px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
