<template>
|
<div class="main">
|
<!-- 工单基本信息 -->
|
<el-row type="flex" class="row-bg" justify="space-between">
|
<el-col :span="6"><div class="grid-content bg-purple">工单编号：WS-211008-00001</div></el-col>
|
<el-col :span="8"><div class="grid-content">工单生成时间：2021-10-08 15:02:00</div></el-col>
|
<el-col :span="6"><div class="grid-content bg-purple">当前状态：<span class="color_red">TI待处理</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>GB-U800设备发生告警，请及时处理</div></el-col>
|
<el-col :span="8"><div class="grid-content">剩余时间：22小时56分</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>RBS常见故障处理掉站或小区不可用类告警:IMA Group Insufficient Links(at Far End)NbapDedicated_RncRbsControlLinkDown:这是一个NbapD信令承载的告警,RNC对RBS</p>
|
<p><span class="label_box">告警发生时间：</span>2021-09-07 17:09:35</p>
|
<p><span class="label_box">告警结束时间：</span></p>
|
<p><span class="label_box">告警级别：</span><span class="color_red">严重告警</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>
|
|
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data(){
|
return {
|
value:"",
|
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:[],
|
}
|
},
|
mounted(){
|
|
},
|
methods: {
|
getSelectVal:function(val){
|
console.log(val)
|
console.log("val:" + this.value)
|
}
|
},
|
}
|
</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>
|
