252 lines
9.0 KiB
Vue
252 lines
9.0 KiB
Vue
<template>
|
|
<el-container class="searchBox">
|
|
<el-header class="searchHeader">
|
|
<div class="searchHeaderBack">
|
|
<el-input class="searchInput" v-focus type="text" size="large" v-model="keyword">
|
|
<template #prepend>
|
|
<el-dropdown class="searchDrop" trigger="click">
|
|
<span class="dropTitle el-dropdown-link">
|
|
维保工单 <el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="a">维保工单</el-dropdown-item>
|
|
<el-dropdown-item command="b">维修工单</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
<template #append>
|
|
<div class="searchBtn" @click="searchClick">
|
|
<span class="name">搜索</span>
|
|
<el-icon class="icon"><el-icon-Search/></el-icon>
|
|
</div>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
</el-header>
|
|
<el-main v-loading="loading" element-loading-text="加载中...">
|
|
<el-scrollbar v-model="activeNames" v-if="rows.length>0">
|
|
<div class="collapseHeaderBack">
|
|
<div class="collapseHeaderNav">
|
|
<div class="item seq">序号</div>
|
|
<div class="item" :style="{'width':item.width+'px'}" v-for="(item,index) in orderColumn" :key="index">{{item.label}}</div>
|
|
</div>
|
|
</div>
|
|
<el-collapse class="collapseMain" @change="collapseChange" :accordion="true">
|
|
<template v-for="(item,index) in rows" :key="index">
|
|
<el-collapse-item :title="item.repair_order_no" :name="item.id">
|
|
<template #title>
|
|
<div class="collapseHeader">
|
|
<div class="item seq">{{index+1}}</div>
|
|
<div class="item" :style="{'width':em.width+'px'}" v-for="(em,index) in orderColumn" :key="index">
|
|
<!-- <el-tooltip effect="dark" :content="item[em.prop]"></el-tooltip>-->
|
|
<span v-if="em.prop == 'business_status'">
|
|
<span v-for="(li,ind) in statusList" :key="ind">
|
|
<span :style="{color:li.value==1?`var(--el-order-color-1)`:li.value==2?`var(--el-order-color-2)`:li.value==3?`var(--el-order-color-3)`:li.value==4?`var(--el-order-color-4)`:`var(--el-order-color-5)`}"
|
|
v-if="li.value == item[em.prop]">{{li.label}}</span>
|
|
</span>
|
|
</span>
|
|
<span v-else>{{item[em.prop]}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="collapseBody">
|
|
<div class="title">工单详情</div>
|
|
<div class="stepView">
|
|
<el-steps class="orderSteps" :active="item.process_num" align-center>
|
|
<el-step :status="item.status" v-for="(item,index) in item.process_engine" :key="index" :title="item.description" />
|
|
</el-steps>
|
|
</div>
|
|
<div class="orderInfo">
|
|
<el-row>
|
|
<el-col :span="8" :lg="6">
|
|
<span class="name">维修单ID:</span><span class="text">{{item.id}}</span>
|
|
</el-col>
|
|
<el-col :span="8" :lg="6">
|
|
<span class="name">维修单号:</span><span class="text">{{item.repair_order_no}}</span>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="8" :lg="6">
|
|
<span class="name">是否关机:</span><span class="text">{{item.requires_shutdown}}</span>
|
|
</el-col>
|
|
<el-col :span="8" :lg="6">
|
|
<span class="name">机房城市:</span><span class="text">{{item.city}}</span>
|
|
</el-col>
|
|
<el-col :span="8" :lg="6">
|
|
<span class="name">园区:</span><span class="text">{{item.park_name}}</span>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="8" :lg="6">
|
|
<span class="name">机房:</span><span class="text">{{item.data_center_name}}</span>
|
|
</el-col>
|
|
<el-col :span="8" :lg="6">
|
|
<span class="name">机架位:</span><span class="text">{{item.rack_position}}</span>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="8" :lg="6">
|
|
<span class="name">整机SN:</span><span class="text">{{item.device_sn}}</span>
|
|
</el-col>
|
|
<el-col :span="8" :lg="6">
|
|
<span class="name">整机厂商:</span><span class="text">{{item.device_manufacturer}}</span>
|
|
</el-col>
|
|
<el-col :span="8" :lg="6">
|
|
<span class="name">整机型号:</span><span class="text">{{item.device_model}}</span>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="componentBox">
|
|
<el-table :data="item.component_info" :size="size" stripe :header-cell-style="{'background': '#1367C1','color':'#fff'}">
|
|
<el-table-column type="index" label="序号" align="center"></el-table-column>
|
|
<el-table-column prop="component_serial_no" show-overflow-tooltip label="部件SN/Sp" width="160"></el-table-column>
|
|
<el-table-column prop="component_manufacturer" show-overflow-tooltip label="部件厂商" width="130"></el-table-column>
|
|
<el-table-column prop="component_model" show-overflow-tooltip label="部件型号" width="160"></el-table-column>
|
|
<el-table-column prop="component_pn" show-overflow-tooltip label="部件PN/Sp" width="150"></el-table-column>
|
|
<el-table-column prop="bd_backup_count" show-overflow-tooltip label="剩余BD数" width="120"></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
</template>
|
|
</el-collapse>
|
|
</el-scrollbar>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "",
|
|
data(){
|
|
return{
|
|
size:'small',
|
|
loading:false,
|
|
keyword:"Z240919004",
|
|
params:{
|
|
repair_order_no:{
|
|
operator:"like",
|
|
value:"%Z240919004%"
|
|
},
|
|
component_serial_no:{
|
|
operator:"like",
|
|
value:"%Z240919004%"
|
|
},
|
|
},
|
|
activeNames:[],
|
|
orderColumn:[
|
|
{label:"工单号",prop:"repair_order_no",width:160},
|
|
{label:"客户名称",prop:"customer_name",width:140},
|
|
{label:"故障描述",prop:"fault_description",width:200},
|
|
{label:"生产日期",prop:"created_at",width:120},
|
|
{label:"返厂日期",prop:"warranty_end_date",width:120},
|
|
{label:"维修等级",prop:"maintenance_grade",width:120},
|
|
{label:"维修分类",prop:"fault_classification",width:120},
|
|
{label:"故障类型",prop:"fault_type",width:100},
|
|
{label:"维保等级",prop:"maintenance_plan",width:100},
|
|
{label:"是否开机",prop:"requires_shutdown",width:90},
|
|
{label:"状态",prop:"business_status",width:100},
|
|
],
|
|
planColumn:[
|
|
{label:"工单号",prop:"repair_order_no",width:160},
|
|
{label:"外发日期",prop:"repair_order_no",width:160},
|
|
{label:"维保商场",prop:"repair_order_no",width:160},
|
|
{label:"计划时间",prop:"repair_order_no",width:160},
|
|
{label:"完成时间",prop:"repair_order_no",width:160},
|
|
{label:"故障类型",prop:"repair_order_no",width:160},
|
|
{label:"状态",prop:"repair_order_no",width:160},
|
|
],
|
|
rows:[],
|
|
statusList:[],
|
|
component_info:[]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getStatusList();
|
|
},
|
|
methods:{
|
|
async searchClick() {
|
|
let params = this.setObj();
|
|
this.loading = true;
|
|
const res = await this.$API.orders.order.maintenance.search.post(params);
|
|
this.loading = false;
|
|
if(res.code == 200){
|
|
res.data.forEach(item=>{
|
|
if(item.process_engine){
|
|
let obj = this.processList(item.process_engine);
|
|
item.process_engine = obj.processedList;
|
|
item.process_num = obj.num;
|
|
}
|
|
if(item.component_info && item.component_info.length===0){
|
|
item.component_info = [
|
|
{
|
|
component_serial_no:item.component_serial_no,
|
|
component_manufacturer:item.component_manufacturer,
|
|
component_model:item.component_model,
|
|
component_pn:item.component_pn,
|
|
bd_backup_count:item.bd_backup_count
|
|
}
|
|
]
|
|
}
|
|
})
|
|
console.log(res.data,788)
|
|
this.rows = res.data;
|
|
}
|
|
},
|
|
setObj(){
|
|
for(let i in this.params){
|
|
this.params[i].value = this.keyword===""?"":'%'+this.keyword+'%'
|
|
}
|
|
return this.params
|
|
},
|
|
collapseChange(){
|
|
|
|
},
|
|
async getStatusList() {
|
|
const res = await this.$API.orders.order.maintenance.status.post();
|
|
if (res.code == 200) {
|
|
this.statusList = res.data;
|
|
}
|
|
},
|
|
processList(list) {
|
|
let obj = {
|
|
num:0,
|
|
processedList:this.$TOOL.objCopy(list)
|
|
}
|
|
let foundNodeTrue = false;
|
|
for (let i = 0; i < obj.processedList.length; i++) {
|
|
if (obj.processedList[i].node === true) {
|
|
foundNodeTrue = true;
|
|
obj.processedList[i].status = 'finish';
|
|
obj.num = i;
|
|
} else if (!foundNodeTrue) {
|
|
obj.processedList[i].status = 'success';
|
|
}
|
|
if (foundNodeTrue && obj.processedList[i].node !== true) break;
|
|
}
|
|
return obj;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.searchHeader{
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 70px;
|
|
background: url(https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/search_back.png) no-repeat;
|
|
background-size: cover;
|
|
position: relative;
|
|
}
|
|
.searchHeaderBack{
|
|
height: 100%;width: 100%;
|
|
padding: 0;
|
|
background: rgba(231,243,255,0.4);
|
|
position: absolute;left: 0;top: 0;z-index: 10;
|
|
display: flex;align-items: center;justify-content: center;
|
|
}
|
|
</style>
|