New file |
| | |
| | | <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-col :span="4"> |
| | | <el-date-picker type="date" placeholder="选择日期" v-model="form2.date1" style="width: 100%;"></el-date-picker> |
| | | </el-col> |
| | | <el-col class="line" :span="1" style="text-align: center;">-</el-col> |
| | | <el-col :span="2"> |
| | | <el-time-picker placeholder="选择时间" v-model="form2.date2" style="width: 100%;"></el-time-picker> |
| | | </el-col> |
| | | <!-- <el-date-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-date-time-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-col :span="4"> |
| | | <el-date-picker type="date" placeholder="选择日期" v-model="form3.date1" style="width: 100%;"></el-date-picker> |
| | | </el-col> |
| | | <el-col class="line" :span="1" style="text-align: center;">-</el-col> |
| | | <el-col :span="2"> |
| | | <el-time-picker placeholder="选择时间" v-model="form3.date2" style="width: 100%;"></el-time-picker> |
| | | </el-col> |
| | | <!-- <el-date-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-date-time-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-col :span="4"> |
| | | <el-date-picker type="date" placeholder="选择日期" v-model="form4.date1" style="width: 100%;"></el-date-picker> |
| | | </el-col> |
| | | <el-col class="line" :span="1" style="text-align: center;">-</el-col> |
| | | <el-col :span="2"> |
| | | <el-time-picker placeholder="选择时间" v-model="form4.date2" style="width: 100%;"></el-time-picker> |
| | | </el-col> |
| | | <!-- <el-date-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-date-time-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="流程信息">流程信息</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:"", |
| | | }, |
| | | } |
| | | }, |
| | | 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; |
| | | } |
| | | </style> |