<template>
|
<div class="main">
|
<!-- 工单基本信息详情页面 -->
|
<el-row type="flex" class="row-bg" justify="space-between">
|
<el-col :span="6"><div class="grid-content bg-purple">工单编号：{{ workInfo.orderId }}</div></el-col>
|
<el-col :span="8"><div class="grid-content">工单生成时间：{{ workInfo.createTime }}</div></el-col>
|
<el-col :span="6"><div class="grid-content bg-purple">当前状态：<span class="color_red">{{ workInfo.status }}</span></div></el-col>
|
</el-row>
|
<div class="list_box">
|
<el-tabs type="border-card">
|
<el-tab-pane label="工单基本信息">
|
<p class="title_p">工单信息</p>
|
<div class="info_box">
|
<p>
|
<el-row type="flex" class="row-bg" justify="space-between">
|
<el-col :span="8"><div class="grid-content bg-purple"><span class="label_box">工单标题：</span>{{ workInfo.title }}</div></el-col>
|
<el-col :span="8"><div class="grid-content">剩余时间：{{ workInfo.countdown }}</div></el-col>
|
<el-col :span="6"><div class="grid-content bg-purple">工单完成限时：24小时</div></el-col>
|
</el-row>
|
</p>
|
<p><span class="label_box">告警描述：</span></p>
|
<p>{{ workInfo.taskDesc }}</p>
|
<p><span class="label_box">告警发生时间：</span>{{ workInfo.alarmTime }}</p>
|
<!-- <p><span class="label_box">告警结束时间：{{ workInfo.planEndTime }}</span></p> -->
|
<p><span class="label_box">告警级别：</span><span class="color_red">{{ numList[workInfo.alarmLevel-1] }}级告警</span></p>
|
<!-- <p><span class="label_box">告警附件：</span><a href="#" download>某某文件.txt</a></p> -->
|
</div>
|
|
<div class="select_box">
|
<p>
|
<span class="label_box">处理动作:</span>
|
<el-select v-model="value" placeholder="请选择" @change="getSelectVal">
|
<el-option
|
v-for="item in selectList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</p>
|
</div>
|
<div class="event_box">
|
<!-- 处理分派回复 -->
|
<div class="change_box" v-if="value==1">
|
<el-button size="mini" type="success">通过</el-button>
|
<el-button size="mini" type="info">驳回</el-button>
|
<el-table :data="tableData" stripe style="width: 100%">
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column prop="name" label="分派处理人"></el-table-column>
|
<el-table-column prop="data" label="处理回复内容" ></el-table-column>
|
<el-table-column prop="fj" label="附件"></el-table-column>
|
<el-table-column prop="date" label="日期"></el-table-column>
|
</el-table>
|
</div>
|
<!-- 转派T2处理 -->
|
<div class="change_box" v-if="value==2">
|
<el-form ref="form2" :model="form2" label-width="120px">
|
<el-form-item label="要求完成时间：">
|
<el-date-picker v-model="form2.date2" type="datetime" placeholder="选择日期时间" > </el-date-picker>
|
</el-form-item>
|
<el-form-item label="转派意见：">
|
<el-input type="textarea" v-model="form2.desc" style="width: 40%;"></el-input>
|
</el-form-item>
|
<el-form-item >
|
<el-button size="mini" type="primary">提交</el-button>
|
</el-form-item>
|
</el-form>
|
|
</div>
|
<!-- 分派 -->
|
<div class="change_box" v-if="value==3">
|
<el-form ref="form3" :model="form3" label-width="120px">
|
<el-form-item label="要求完成时间：">
|
<el-date-picker v-model="form3.date2" type="datetime" placeholder="选择日期时间" > </el-date-picker>
|
</el-form-item>
|
<el-form-item label="分派处理人：">
|
<el-input v-model="form3.user" placeholder="请输入" style="width: 40%;"></el-input>
|
</el-form-item>
|
<el-form-item label="转派意见：">
|
<el-input type="textarea" v-model="form3.desc" style="width: 40%;"></el-input>
|
</el-form-item>
|
<el-form-item >
|
<el-button size="mini" type="primary">提交</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 移交 -->
|
<div class="change_box" v-if="value==4">
|
<el-form ref="form4" :model="form4" label-width="120px">
|
<el-form-item label="要求完成时间：">
|
<el-date-picker v-model="form4.date2" type="datetime" placeholder="选择日期时间" > </el-date-picker>
|
</el-form-item>
|
<el-form-item label="移交处理组：">
|
<el-input v-model="form4.user" placeholder="请选择" style="width: 40%;"></el-input>
|
</el-form-item>
|
<el-form-item label="移交意见：">
|
<el-input type="textarea" v-model="form4.desc" style="width: 40%;"></el-input>
|
</el-form-item>
|
<el-form-item >
|
<el-button size="mini" type="primary">提交</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 回复 -->
|
<div class="change_box" v-if="value==5">
|
<el-form ref="form5" :model="form5" label-width="120px">
|
<el-form-item label="处理意见：">
|
<el-input type="textarea" v-model="form5.desc" style="width: 40%;"></el-input>
|
</el-form-item>
|
<el-form-item >
|
<el-button size="mini" type="primary">提交</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 处理并归档 -->
|
<div class="change_box" v-if="value==6">
|
<el-form ref="form6" :model="form6" label-width="120px">
|
<el-form-item label="归档意见：">
|
<el-input type="textarea" v-model="form6.desc" style="width: 40%;"></el-input>
|
</el-form-item>
|
<el-form-item >
|
<el-button size="mini" type="primary">提交</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="流程信息">
|
<p class="title_p">流程信息</p>
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<p>工单派发</p>
|
</el-col>
|
<el-col :span="10">
|
<p>处理人：系统自动派</p>
|
</el-col>
|
<el-col :span="8">
|
<p>处理时间：2021/9/7 12:35:11</p>
|
</el-col>
|
</el-row>
|
<div class="details_box">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<p>T1处理 处理人：李某某</p>
|
</el-col>
|
<el-col :span="6">
|
<p>处理角色：区域一管理员</p>
|
</el-col>
|
<el-col :span="4">
|
<p>处理动作：移交</p>
|
</el-col>
|
<el-col :span="8">
|
<p>处理时间：2021/9/7 14:41:59</p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="16">
|
<p>移交处理角色：区域二管理员 </p>
|
</el-col>
|
<el-col :span="8">
|
<p>要求完成时间：2021/9/8 14:41:59</p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="20">
|
<p>移交意见：此告警不属于本区域，请区域二处理。 </p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="16">
|
<p>分派处理人：张某某、程某某 </p>
|
</el-col>
|
<el-col :span="8">
|
<p>要求完成时间：2021/9/8 14:41:59</p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="20">
|
<p>分派意见：请配合处理。 </p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="16">
|
<p>回复移交：无法处理，请移交到T2处理</p>
|
</el-col>
|
<el-col :span="8">
|
<p>要求完成时间：2021/9/8 14:41:59</p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="20">
|
<p>附件：test.txt </p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="20">
|
<p>处理结果：处理意见通过。 </p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="16">
|
<p>移交处理角色：蓄电池维护班组2</p>
|
</el-col>
|
<el-col :span="8">
|
<p>要求完成时间：2021/9/8 14:41:59</p>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="details_box">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<p>T1处理 处理人：李某某</p>
|
</el-col>
|
<el-col :span="6">
|
<p>处理角色：区域一管理员</p>
|
</el-col>
|
<el-col :span="4">
|
<p>处理动作：移交</p>
|
</el-col>
|
<el-col :span="8">
|
<p>处理时间：2021/9/7 14:41:59</p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="16">
|
<p>移交处理角色：区域二管理员 </p>
|
</el-col>
|
<el-col :span="8">
|
<p>要求完成时间：2021/9/8 14:41:59</p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="20">
|
<p>移交意见：此告警不属于本区域，请区域二处理。 </p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="16">
|
<p>分派处理人：张某某、程某某 </p>
|
</el-col>
|
<el-col :span="8">
|
<p>要求完成时间：2021/9/8 14:41:59</p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="20">
|
<p>分派意见：请配合处理。 </p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="16">
|
<p>回复移交：无法处理，请移交到T2处理</p>
|
</el-col>
|
<el-col :span="8">
|
<p>要求完成时间：2021/9/8 14:41:59</p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="20">
|
<p>附件：test.txt </p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="20">
|
<p>处理结果：处理意见通过。 </p>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="16">
|
<p>移交处理角色：蓄电池维护班组2</p>
|
</el-col>
|
<el-col :span="8">
|
<p>要求完成时间：2021/9/8 14:41:59</p>
|
</el-col>
|
</el-row>
|
</div>
|
|
</el-tab-pane>
|
<el-tab-pane label="流程图">流程图</el-tab-pane>
|
</el-tabs>
|
|
<el-button size="mini" type="primary" @click="basicInfo">查询</el-button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { login,basicInfo } from './js/workInfo/workInfo'
|
import {STATUS} from './js/const'
|
export default {
|
data(){
|
return {
|
value:"",
|
workInfo:{
|
status:0,
|
title:"",
|
orderId:"",
|
createTime:"",
|
alarmTime:"",
|
taskDesc:"",
|
alarmLevel:"",
|
countdown:"",
|
},
|
numList:["一","二","三","四","五","六","七","八","九","十"],
|
selectList:[
|
{value:1,label:"处理分派回复"},
|
{value:2,label:"转派T2处理"},
|
{value:3,label:"分派"},
|
{value:4,label:"移交"},
|
{value:5,label:"回复"},
|
{value:6,label:"处理并归档"},
|
],
|
tableData:[
|
{name:"张三",data:"已处理，故障已恢复",fj:"xxx.txt",date:"2021-10-08 15:51:43"},
|
{name:"李四",data:"已处理，故障已恢复",fj:"xxx.txt",date:"2021-10-08 15:51:43"},
|
{name:"王五",data:"已处理，故障已恢复",fj:"xxx.txt",date:"2021-10-08 15:51:43"}
|
],
|
form2:{
|
date1:"",
|
date2:"",
|
desc:""
|
},
|
form3:{
|
date1:"",
|
date2:"",
|
desc:"",
|
user:""
|
},
|
form4:{
|
date1:"",
|
date2:"",
|
desc:"",
|
user:""
|
},
|
form5:{
|
desc:"",
|
},
|
form6:{
|
desc:"",
|
},
|
detailsData:[],
|
time: null
|
}
|
},
|
mounted(){
|
// this.time = setInterval(this.showTime(),1000);
|
this.basicInfo();
|
},
|
methods: {
|
// 获取处理动作选择
|
getSelectVal:function(val){
|
console.log(val)
|
console.log("val:" + this.value)
|
},
|
// 查询工单基本信息
|
basicInfo:function(){
|
let self = this;
|
|
// login();
|
basicInfo({mainId:31}).then((res)=>{
|
let resdata = res.data.data;
|
self.workInfo.status = STATUS[resdata.status];
|
self.workInfo.title = resdata.title;//标题
|
self.workInfo.orderId = resdata.orderId;//工单编号
|
self.workInfo.createTime = resdata.createTime;//工单生成时间
|
self.workInfo.alarmTime = resdata.workflowAlarm.alarmTime;//告警开始时间
|
self.workInfo.alarmLevel = resdata.workflowAlarm.alarmLevel;//告警等级
|
self.workInfo.taskDesc = resdata.taskDesc;//告警描述
|
console.log(resdata)
|
// 倒计时
|
self.time = setInterval(function(){self.showTime()},1000);
|
// self.time;
|
}).catch((err)=>{
|
|
})
|
},
|
// 查询处理动作
|
|
// 倒计时
|
checkTime:function (i){
|
if(i<10)
|
{
|
i="0"+i;
|
}
|
return i;
|
},
|
showTime:function(){
|
let self = this;
|
let timedate= new Date("2021/11/8,16:03:55"); //自定义结束时间
|
let now = new Date(); //获取当前时间
|
let date = parseInt(timedate.getTime() - now.getTime())/1000; //得出的为秒数；
|
// let day = parseInt(date/60/60/24);
|
let hour = parseInt(date/60/60%24);
|
let minute = parseInt(date/60%60);
|
let second = parseInt(date%60);
|
hour = self.checkTime(hour);
|
minute = self.checkTime(minute);
|
second = self.checkTime(second);
|
let leftTime = hour+"时"+minute+"分"+second+"秒";
|
if(date <= 0){
|
hour = hour.split("-")[1]||0;
|
minute = minute.split("-")[1]||0;
|
second = second.split("-")[1]||0;
|
leftTime ="-" + hour+"小时"+minute+"分"+second+"秒";
|
}
|
self.workInfo.countdown = leftTime;
|
},
|
|
},
|
|
}
|
</script>
|
<style scoped>
|
.main{
|
height: 100%;
|
padding: 10px 15px;
|
background-color: #fff;
|
}
|
.title{
|
margin: 5px 0;
|
}
|
.list_box{
|
height: 95%;
|
border:1px #ccc solid;
|
padding: 5px 10px;
|
overflow: auto;
|
}
|
.list_box p{
|
margin: 10px;
|
}
|
.color_red{
|
color: red;
|
}
|
.label_box{
|
font-weight: bold;
|
font-size: 20px;
|
}
|
.title_p{
|
/* border-bottom: 2px #ccc solid; */
|
color: #ccc;
|
font-weight: bold;
|
}
|
.select_box{
|
/* border-top: 2px #ccc solid; */
|
/* border-bottom: 2px #ccc solid; */
|
margin: 20px 0;
|
padding: 15px 0;
|
}
|
.el-tabs--border-card>/deep/.el-tabs__content{
|
padding: 0;
|
}
|
.info_box{
|
border-bottom: 2px #ccc solid;
|
border-top: 2px #ccc solid;
|
}
|
.event_box{
|
padding: 15px 5px;
|
border-top: 2px #ccc solid;
|
border-bottom: 2px #ccc solid;
|
}
|
.details_box{
|
border-bottom: 2px #ccc solid;
|
border-top: 2px #ccc solid;
|
padding: 5px;
|
margin-bottom: 20px;
|
}
|
</style>
|
