<template>
|
<div class="app-container">
|
<el-tabs type="border-card" v-model="selectedTab" @tab-click="changeTab" style="min-height: 500px">
|
<el-tab-pane v-loading="loading1" name="workorder" label="工单信息">
|
<div class="work-order-info">
|
<div class="info-item weight1">
|
<div class="title">
|
<div><svg t="1725865334222" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1032" width="24" height="24"><path d="M701.639111 56.888889H231.338667c-75.093333 0-136.533333 61.44-136.533334 136.533333v637.155556c0 75.093333 61.44 136.533333 136.533334 136.533333h561.294222a136.931556 136.931556 0 0 0 136.561778-136.533333V284.444444l-227.555556-227.555555zM853.333333 830.577778a60.871111 60.871111 0 0 1-60.700444 60.672H231.338667A60.842667 60.842667 0 0 1 170.666667 830.577778V193.422222a60.871111 60.871111 0 0 1 60.672-60.672h364.117333V329.955556a60.871111 60.871111 0 0 0 60.672 60.672H853.333333V830.577778z m-166.855111-515.783111a15.189333 15.189333 0 0 1-15.160889-15.189334V132.750222l182.016 182.044445h-166.855111z" fill="" p-id="1033"></path><path d="M580.238222 671.288889h-257.877333c-21.219556 0-37.916444 16.696889-37.916445 37.916444s16.696889 37.916444 37.916445 37.916445h257.877333c21.248 0 37.944889-16.696889 37.944889-37.916445s-16.696889-37.916444-37.944889-37.916444zM284.444444 542.350222a37.546667 37.546667 0 0 0 37.916445 37.916445h379.278222c21.219556 0 37.916444-16.696889 37.916445-37.916445s-16.696889-37.916444-37.916445-37.916444H322.360889A37.546667 37.546667 0 0 0 284.444444 542.350222z" fill="" p-id="1034"></path></svg></div>
|
<div style="margin-left: 2px">基本信息</div>
|
</div>
|
<div class="warp">
|
<div class="item-warp">
|
<div>工单编号：</div>
|
<div>{{workOrderInfo.workOrderNo}}</div>
|
</div>
|
<div class="item-warp">
|
<div>故障类型：</div>
|
<div>
|
<el-tag
|
style="margin-right: 5px;height:24px;overflow:auto" effect="dark"
|
v-for="(error, index) in workOrderInfo.errorTypeList"
|
:key="index" size="small"
|
:type="error === '图像异常'
|
|| error === '点位信息错误'
|
|| error === '时钟偏差'
|
|| error === 'OSD异常'
|
? 'danger' : 'warning'">{{ error }}
|
</el-tag>
|
</div>
|
</div>
|
<div class="item-warp">
|
<div>故障点位：</div>
|
<div>{{workOrderInfo.source}}</div>
|
</div>
|
<div class="item-warp">
|
<div>设备编码：</div>
|
<div>{{workOrderInfo.serialNumber}}</div>
|
</div>
|
<div class="item-warp">
|
<div>处理时限：</div>
|
<div v-if="workOrderInfo.processingPeriod">{{workOrderInfo.processingPeriod}}(小时)</div>
|
<div v-else>无</div>
|
</div>
|
<div class="item-warp">
|
<div>下发时间：</div>
|
<div>{{workOrderInfo.distributeTime}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="info-item weight2">
|
<div class="title">
|
<div><svg t="1725865573890" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1195" width="28" height="28"><path d="M898.2 888H127.8c-16.5 0-29.8-13.3-29.8-29.8v-4.6c0-16.5 13.3-29.8 29.8-29.8h770.4c16.5 0 29.8 13.3 29.8 29.8v4.6c0 16.5-13.4 29.8-29.8 29.8z" p-id="1196"></path><path d="M852.8 825.5H576.1V246c0-18.5 17.9-31.8 35.6-26.5L833 285.9c11.7 3.5 19.7 14.3 19.7 26.5v513.1zM742.1 706.8h-55.3c-7.6 0-13.8 6.2-13.8 13.8V776c0 7.6 6.2 13.8 13.8 13.8h55.3c7.6 0 13.8-6.2 13.8-13.8v-55.3c0-7.7-6.2-13.9-13.8-13.9z m0-121h-55.3c-7.6 0-13.8 6.2-13.8 13.8v55.3c0 7.6 6.2 13.8 13.8 13.8h55.3c7.6 0 13.8-6.2 13.8-13.8v-55.3c0-7.7-6.2-13.8-13.8-13.8z m0-121.1h-55.3c-7.6 0-13.8 6.2-13.8 13.8v55.3c0 7.6 6.2 13.8 13.8 13.8h55.3c7.6 0 13.8-6.2 13.8-13.8v-55.3c0-7.6-6.2-13.8-13.8-13.8z m0-121h-55.3c-7.6 0-13.8 6.2-13.8 13.8v55.3c0 7.6 6.2 13.8 13.8 13.8h55.3c7.6 0 13.8-6.2 13.8-13.8v-55.3c0-7.6-6.2-13.8-13.8-13.8zM497.9 136.8l-304.3 93.6c-11.6 3.6-19.5 14.3-19.5 26.4v568.6h359.7V163.3c-0.1-18.7-18.1-32-35.9-26.5zM337.1 776c0 7.6-6.2 13.8-13.8 13.8H268c-7.6 0-13.8-6.2-13.8-13.8v-55.3c0-7.6 6.2-13.8 13.8-13.8h55.3c7.6 0 13.8 6.2 13.8 13.8V776z m0-121.1c0 7.6-6.2 13.8-13.8 13.8H268c-7.6 0-13.8-6.2-13.8-13.8v-55.3c0-7.6 6.2-13.8 13.8-13.8h55.3c7.6 0 13.8 6.2 13.8 13.8v55.3z m0-121c0 7.6-6.2 13.8-13.8 13.8H268c-7.6 0-13.8-6.2-13.8-13.8v-55.3c0-7.6 6.2-13.8 13.8-13.8h55.3c7.6 0 13.8 6.2 13.8 13.8v55.3z m0-121.1c0 7.6-6.2 13.8-13.8 13.8H268c-7.6 0-13.8-6.2-13.8-13.8v-55.3c0-7.6 6.2-13.8 13.8-13.8h55.3c7.6 0 13.8 6.2 13.8 13.8v55.3zM454.6 776c0 7.6-6.2 13.8-13.8 13.8h-55.3c-7.6 0-13.8-6.2-13.8-13.8v-55.3c0-7.6 6.2-13.8 13.8-13.8h55.3c7.6 0 13.8 6.2 13.8 13.8V776z m0-121.1c0 7.6-6.2 13.8-13.8 13.8h-55.3c-7.6 0-13.8-6.2-13.8-13.8v-55.3c0-7.6 6.2-13.8 13.8-13.8h55.3c7.6 0 13.8 6.2 13.8 13.8v55.3z m0-121c0 7.6-6.2 13.8-13.8 13.8h-55.3c-7.6 0-13.8-6.2-13.8-13.8v-55.3c0-7.6 6.2-13.8 13.8-13.8h55.3c7.6 0 13.8 6.2 13.8 13.8v55.3z m0-121.1c0 7.6-6.2 13.8-13.8 13.8h-55.3c-7.6 0-13.8-6.2-13.8-13.8v-55.3c0-7.6 6.2-13.8 13.8-13.8h55.3c7.6 0 13.8 6.2 13.8 13.8v55.3z m-94.2-117l52.7-91.3 52.7 91.3H360.4z" p-id="1197"></path></svg></div>
|
<div style="margin-left: 2px">运维单位</div>
|
</div>
|
<div class="warp">
|
<div class="item-warp">
|
<div>单位名称：</div>
|
<div>{{workOrderInfo.unitName}}</div>
|
</div>
|
<div class="item-warp">
|
<div>联系人：</div>
|
<div>{{workOrderInfo.unitContact}}</div>
|
</div>
|
<div class="item-warp">
|
<div>联系电话：</div>
|
<div>{{workOrderInfo.unitContactPhone}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="info-item weight3">
|
<div class="title">
|
<div>
|
<svg t="1725867141107" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1066" width="22" height="22"><path d="M994.816 964.608h-172.544l188.928-188.928c15.872-15.872 17.408-40.448 4.608-58.368v-0.512l-99.84-99.328c-8.192-8.704-19.456-13.312-31.744-13.312-11.776 0-23.04 4.608-31.232 13.312l-234.496 234.496c-11.776 11.776-13.824 40.96-13.824 40.96v86.528c0 24.576 19.968 44.544 44.544 44.544h346.112c16.384 0 29.184-12.8 29.184-29.184-0.512-16.384-13.824-30.208-29.696-30.208z m-171.52-241.152l81.408 81.408-159.744 159.744-81.408-81.408 159.744-159.744z m120.32 43.008l-81.408-81.408 22.016-22.016 81.408 81.408-22.016 22.016z m-293.888 212.48v-40.448l40.448 40.448h-40.448zM798.72 0H81.92C36.864 0 0 36.864 0 81.92v860.16c0 45.056 36.864 81.92 81.92 81.92h251.904c22.528 0 43.52-9.216 58.88-25.088l464.896-483.328c14.848-15.36 23.04-35.84 23.04-56.832V81.92c0-45.056-36.864-81.92-81.92-81.92z m-250.88 665.6H231.936c-26.112 0-48.64-21.504-47.616-47.104 0.512-25.088 20.992-45.056 46.08-45.056h315.904c26.112 0 48.64 21.504 47.616 47.104-0.512 25.088-20.992 45.056-46.08 45.056z m51.2-194.56H231.936c-26.112 0-48.64-21.504-47.616-47.104 0.512-25.088 20.992-45.056 46.08-45.056h367.104c26.112 0 48.64 21.504 47.616 47.104-0.512 25.088-20.992 45.056-46.08 45.056z m51.2-194.56H231.936c-26.112 0-48.64-21.504-47.616-47.104 0.512-25.088 20.992-45.056 46.08-45.056h418.304c26.112 0 48.64 21.504 47.616 47.104-0.512 25.088-20.992 45.056-46.08 45.056z" fill="#010820" p-id="1067"></path></svg>
|
</div>
|
<div style="margin-left: 2px">是否报备</div>
|
</div>
|
<div class="warp" style="display: flex;flex-direction: row;align-items: center">
|
<div v-if="workOrderInfo.hasReport"><el-link @click type="primary">{{workOrderInfo.hasReport ? '已报备' : '未报备'}}</el-link></div>
|
<div v-else>{{workOrderInfo.hasReport ? '已报备' : '未报备'}}</div>
|
<div v-if="!workOrderInfo.hasReport"><el-link type="primary">(事后报备)</el-link></div>
|
</div>
|
</div>
|
<div class="info-item weight4">
|
<div class="title">
|
<div>
|
<svg t="1725867553187" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1115" width="22" height="22"><path d="M109.202286 658.285714V515.876571L0 498.834286V1024l109.275429-37.302857v-229.961143h174.08L358.4 641.462857 262.802286 583.68l-44.324572 78.043429H109.202286v-3.364572zM1024 515.876571L242.322286 0H153.6L30.72 193.389714v64.512l699.757714 454.729143 58.002286-6.802286L1024 515.803429zM30.72 298.569143v101.814857l706.56 448h64.877714l30.72-34.011429 30.72-98.377142q-88.795429 64.438857-95.597714 64.438857-30.72-23.771429-737.28-481.792z" p-id="1116"></path></svg>
|
</div>
|
<div style="margin-left: 2px">处理结果</div>
|
</div>
|
<div class="warp" style="display: flex;flex-direction: row;align-items: center">
|
<div>{{covertStatus(workOrderInfo.status)}}</div>
|
<div v-if="workOrderInfo.status ==='YW_HANDLE'">
|
<el-link type="primary" @click="handleAuditing">(审核)</el-link>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane v-loading="loading2" name="report" label="报备记录">
|
<div v-if="reportList && reportList.length > 0">
|
<el-timeline>
|
<el-timeline-item
|
placement="top"
|
v-for="(report, index) in reportList"
|
:key="index"
|
:timestamp="report.createTime">
|
<div>
|
<div>
|
<el-tag :type="report.reportType === '事前报备' ? 'warning' : 'danger'">{{report.reportType}}</el-tag>
|
</div>
|
<div style="margin: 8px 0">
|
<div
|
v-for="item in report.reportMaterials != null ? report.reportMaterials.split(',') : report.reportMaterials"
|
:key="item">
|
<el-image
|
v-if="isImageFile(item)"
|
:src="getPreview(item)"
|
:preview-src-list="[getPreview(item)]"
|
fit="cover"
|
style="width: 100px; height: 100px; margin: 5px;"
|
>
|
</el-image>
|
<el-link
|
v-else
|
:underline="false" type="primary" @click="handleDownload(item)">{{
|
item.substring(item.lastIndexOf("/") + 1)
|
}}
|
</el-link>
|
</div>
|
</div>
|
<div v-html="report.reportContent"></div>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
<el-empty v-else description="未查到报备信息"></el-empty>
|
</el-tab-pane>
|
<el-tab-pane v-loading="loading3" name="handle" label="处理记录">
|
<div v-if="ywList && ywList.length > 0">
|
<el-timeline>
|
<el-timeline-item
|
placement="top"
|
v-for="(yw, index) in ywList"
|
:key="index"
|
:timestamp="yw.createTime">
|
<div>
|
<div style="margin: 8px 0">
|
<div
|
v-for="item in yw.ywProofMaterials != null ? yw.ywProofMaterials.split(',') : yw.ywProofMaterials"
|
:key="item">
|
<el-image
|
v-if="isImageFile(item)"
|
:src="getPreview(item)"
|
:preview-src-list="[getPreview(item)]"
|
fit="cover"
|
style="width: 100px; height: 100px; margin: 5px;"
|
>
|
</el-image>
|
<el-link
|
v-else
|
:underline="false" type="primary" @click="handleDownload(item)">{{
|
item.substring(item.lastIndexOf("/") + 1)
|
}}
|
</el-link>
|
</div>
|
</div>
|
<div v-html="yw.ywCondition"></div>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
<el-empty v-else description="未查到运维处理信息"></el-empty>
|
</el-tab-pane>
|
<el-tab-pane v-loading="loading4" name="auditing" label="审核记录">
|
<div v-if="auditingList && auditingList.length > 0">
|
<el-timeline>
|
<el-timeline-item
|
placement="top"
|
v-for="(auditing, index) in auditingList"
|
:key="index"
|
:timestamp="auditing.createTime">
|
<div>
|
<div style="margin: 8px 0"><el-tag :type="auditing.result === '审核通过' ? 'success' : 'warning'">{{auditing.result}}</el-tag></div>
|
<div v-html="auditing.remark"></div>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
<el-empty v-else description="未查到审核信息"></el-empty>
|
</el-tab-pane>
|
</el-tabs>
|
<div class="work-order-img">
|
<div class="img-info" v-for="(img, index) in workOrderInfo.imgList" :key="index">
|
<div>
|
<el-image
|
style="width: 100%; height: auto"
|
:src="getImgUrl(img.imgUrl)"
|
:preview-src-list="workOrderInfo.imgList.map(i => getImgUrl(i.imgUrl))"
|
>
|
</el-image>
|
</div>
|
<div style="margin-top: 8px;text-align: center">{{img.createTime}}</div>
|
</div>
|
</div>
|
|
<WorkOrderAuditing :auditingOpen="auditingOpen" :dataForm="auditingForm" :ywConditions="ywConditions" @close="closeAuditing"/>
|
|
</div>
|
</template>
|
|
<script>
|
import {getWorkOrderInfo, getYwConditionList, getYwAuditingList, getYwCondition, listWorkOrder} from '@/api/platform/work-order'
|
import {getReportByGb} from '@/api/platform/report'
|
import WorkOrderAuditing from "@/components/WorkOrder/WorkOrderAuditing";
|
export default {
|
name: "index",
|
components: {WorkOrderAuditing},
|
data() {
|
return {
|
ywConditions: [],
|
auditingOpen: false,
|
auditingForm: {},
|
selectedTab: 'workorder',
|
loading1: false,
|
loading2: false,
|
loading3: false,
|
loading4: false,
|
workOrderInfo: {
|
id: null,
|
workOrderNo: '',
|
source: '',
|
distributeTime: null,
|
errorTypeList: [],
|
processingPeriod: null,
|
overtime: null,
|
serialNumber: '',
|
unitName: '',
|
unitContact: '',
|
unitContactPhone: '',
|
status: '',
|
hasReport: null
|
},
|
reportList: [],
|
ywList: [],
|
auditingList: [],
|
workOrderNo: ''
|
}
|
},
|
mounted() {
|
this.workOrderInfo.workOrderNo = this.$route.query.workOrderNo;
|
this.getWorkOrder()
|
},
|
methods: {
|
getPreview(url) {
|
// 使用全局配置的图片前缀
|
return this.$img + url;
|
},
|
isImageFile(url) {
|
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
|
return imageExtensions.some(ext =>
|
url.toLowerCase().endsWith(ext)
|
);
|
},
|
closeAuditing() {
|
this.auditingOpen = false
|
},
|
// 审核按钮
|
handleAuditing() {
|
this.auditingForm = this.workOrderInfo
|
getYwCondition(this.workOrderInfo.workOrderNo).then(response => {
|
this.ywConditions = response.data
|
this.auditingOpen = true
|
})
|
},
|
getImgUrl(path) {
|
return this.$img + path;
|
},
|
getWorkOrder() {
|
this.loading1 = true
|
getWorkOrderInfo(this.workOrderInfo.workOrderNo).then(res => {
|
this.workOrderInfo = res.data
|
this.loading1 = false
|
})
|
},
|
getReport() {
|
this.loading2 = true
|
getReportByGb(this.workOrderInfo.serialNumber).then(res => {
|
this.reportList = res.data
|
this.loading2 = false
|
})
|
},
|
getYw() {
|
this.loading3 = true;
|
getYwConditionList(this.workOrderInfo.workOrderNo).then(res => {
|
this.ywList = res.data
|
this.loading3 = false
|
})
|
},
|
getAuditing() {
|
this.loading4 = true;
|
getYwAuditingList(this.workOrderInfo.workOrderNo).then(res => {
|
this.auditingList = res.data
|
this.loading4 = false
|
})
|
},
|
covertStatus(status) {
|
if (status === 'DISTRIBUTED') {
|
return '处理中'
|
} else if (status === 'YW_HANDLE') {
|
return '审核中'
|
} else if (status === 'AUDITING_SUCCESS') {
|
return '审核通过'
|
} else if (status === 'AUDITING_FAIL') {
|
return '审核未通过'
|
}
|
},
|
changeTab(tab) {
|
if (tab.name === 'workorder') {
|
this.getWorkOrder()
|
} else if (tab.name === 'report') {
|
this.getReport()
|
} else if (tab.name === 'handle') {
|
this.getYw()
|
} else if (tab.name === 'auditing') {
|
this.getAuditing()
|
}
|
|
},
|
handleDownload(data) {
|
this.$download.resource(data);
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.img-info {
|
flex: 0 0 calc(20% - 8px); /* 每行五个，所以每个占20%，减去间距 */
|
box-sizing: border-box;
|
}
|
|
.work-order-img {
|
margin-top: 15px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px; /* 可选：设置图片之间的间距 */
|
}
|
.work-order-info {
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
color: #6c6b6b;
|
}
|
.info-item {
|
display: flex;
|
flex-direction: column;
|
}
|
.weight1 {
|
flex: 4;
|
}
|
.weight2 {
|
flex: 3;
|
}
|
.weight3 {
|
flex: 2;
|
}
|
.weight4 {
|
flex: 1;
|
}
|
.item-warp {
|
display: flex;
|
align-items: center;
|
margin-bottom: 8px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.warp {
|
padding-left: 15px;
|
padding-top: 15px;
|
}
|
.title {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
}
|
</style>
|
