393 lines
10 KiB
Vue
393 lines
10 KiB
Vue
<!--
|
||
* @Author: zwq
|
||
* @Date: 2025-11-07 17:01:51
|
||
* @LastEditors: zwq
|
||
* @LastEditTime: 2025-11-17 15:47:16
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<el-drawer
|
||
:visible.sync="visible"
|
||
:with-header="false"
|
||
size="50%"
|
||
@close="closeD"
|
||
:show-close="false">
|
||
<div class="bgDiv1">
|
||
<el-row :gutter="20" style="margin-bottom: 15px">
|
||
<el-col :span="8" style="font-size: 20px; font-weight: 600">
|
||
{{ infoData.mainTaskCode }}
|
||
</el-col>
|
||
<el-col :span="8">
|
||
{{
|
||
['', '满盘搬运', '空盘搬运', '备料搬运', '临时搬运'][
|
||
infoData.mainTaskType
|
||
] +
|
||
'(' +
|
||
['', '自动', '人工'][infoData.taskAttribute] +
|
||
')'
|
||
}}
|
||
</el-col>
|
||
<el-col :span="8">
|
||
上次刷新：{{ parseTime(nowDate) }}
|
||
<el-button type="text" @click="refresh">刷新</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">任务状态</el-col>
|
||
<el-col :span="8">优先级</el-col>
|
||
<el-col :span="8">执行车辆</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" style="margin-bottom: 15px">
|
||
<el-col :span="8">
|
||
<span
|
||
:style="{
|
||
backgroundColor: statusColor[infoData.mainTaskState].color,
|
||
}"
|
||
class="taskStatus">
|
||
{{ statusColor[infoData.mainTaskState].label }}
|
||
</span>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
{{ ['最高', '较高', '常规', '较低', '最低'][infoData.taskPriority] }}
|
||
</el-col>
|
||
<el-col :span="8">{{ infoData.agv }}</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">创建人</el-col>
|
||
<el-col :span="8">创建时间</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">{{ infoData.creator }}</el-col>
|
||
<el-col :span="8">{{ parseTime(infoData.createTime) }}</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="bgDiv2">
|
||
<el-steps
|
||
:active="stepNum"
|
||
finish-status="success"
|
||
:process-status="stepStatus"
|
||
align-center>
|
||
<el-step title="待下发"></el-step>
|
||
<el-step title="待执行"></el-step>
|
||
<el-step title="执行中"></el-step>
|
||
<el-step title="已完成"></el-step>
|
||
</el-steps>
|
||
<div class="abnormal" v-if="infoData.mainTaskState == 7">
|
||
任务异常：无效路径
|
||
</div>
|
||
</div>
|
||
<div class="bgDiv3">
|
||
<small-title style="margin: 0 0 8px 0" size="sm" :no-padding="true">
|
||
搬运对象
|
||
</small-title>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="pan-info">
|
||
<div class="pan-title">L盘</div>
|
||
<div class="pan-body">
|
||
<el-row :gutter="15">
|
||
<el-col :span="12">物料名称</el-col>
|
||
<el-col :span="12">物料规格</el-col>
|
||
<el-col :span="12" style="color: black">
|
||
{{ infoData.leftMaterialName }}
|
||
</el-col>
|
||
<el-col :span="12" style="color: black">
|
||
{{ infoData.leftMaterial }}
|
||
</el-col>
|
||
<el-col :span="12">物料编码</el-col>
|
||
<el-col :span="12">批次</el-col>
|
||
<el-col :span="12" style="color: black">
|
||
{{ infoData.leftMaterialCode }}
|
||
</el-col>
|
||
<el-col :span="12" style="color: black">
|
||
{{ infoData.leftBatch }}
|
||
</el-col>
|
||
<el-col :span="12">线缆长度</el-col>
|
||
<el-col :span="12">虚拟盘号</el-col>
|
||
<el-col :span="12" style="color: black">
|
||
{{ infoData.leftCableLength }}
|
||
</el-col>
|
||
<el-col :span="12" style="color: black">
|
||
{{ infoData.leftVirtualTrayNumber }}
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="pan-info">
|
||
<div class="pan-title">R盘</div>
|
||
<div class="pan-body">
|
||
<el-row :gutter="15">
|
||
<el-col :span="12">物料名称</el-col>
|
||
<el-col :span="12">物料规格</el-col>
|
||
<el-col :span="12" style="color: black">
|
||
{{ infoData.rightMaterialName }}
|
||
</el-col>
|
||
<el-col :span="12" style="color: black">
|
||
{{ infoData.rightMaterial }}
|
||
</el-col>
|
||
<el-col :span="12">物料编码</el-col>
|
||
<el-col :span="12">批次</el-col>
|
||
<el-col :span="12" style="color: black">
|
||
{{ infoData.rightMaterialCode }}
|
||
</el-col>
|
||
<el-col :span="12" style="color: black">
|
||
{{ infoData.rightBatch }}
|
||
</el-col>
|
||
<el-col :span="12">线缆长度</el-col>
|
||
<el-col :span="12">虚拟盘号</el-col>
|
||
<el-col :span="12" style="color: black">
|
||
{{ infoData.rightCableLength }}
|
||
</el-col>
|
||
<el-col :span="12" style="color: black">
|
||
{{ infoData.rightVirtualTrayNumber }}
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="bgDiv4" v-if="false">
|
||
<small-title style="margin: 0 0 8px 0" size="sm" :no-padding="true">
|
||
回收信息
|
||
</small-title>
|
||
<el-descriptions :column="2" size="medium" border>
|
||
<el-descriptions-item label="回收方式">他车回收</el-descriptions-item>
|
||
<el-descriptions-item label="回收任务编号">
|
||
18100000000
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="回收库位">
|
||
CK-01-A05-L / R
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="执行车辆">AGV-06</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div class="bgDiv5">
|
||
<small-title style="margin: 0 0 8px 0" size="sm" :no-padding="true">
|
||
任务明细
|
||
</small-title>
|
||
<el-descriptions :column="2" size="medium" border>
|
||
<el-descriptions-item label="起点库位( L )(候选)">
|
||
{{ infoData.leftLibraryStartName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="终点库位( L )(候选)">
|
||
{{ infoData.leftLibraryEndName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="起点库位( R )(候选)">
|
||
{{ infoData.rightLibraryStartName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="终点库位( R )(候选)">
|
||
{{ infoData.rightLibraryEndName }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item
|
||
label="起点库位( L )"
|
||
:labelStyle="{ background: '#f1ffe9' }">
|
||
{{ infoData.changeLeftLibraryStartName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item
|
||
label="终点库位( L )"
|
||
:labelStyle="{ background: '#f1ffe9' }">
|
||
{{ infoData.changeLeftLibraryEndName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item
|
||
label="起点库位( R )"
|
||
:labelStyle="{ background: '#f1ffe9' }">
|
||
{{ infoData.changeRightLibraryStartName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item
|
||
label="终点库位( R )"
|
||
:labelStyle="{ background: '#f1ffe9' }">
|
||
{{ infoData.changeRightLibraryEndName }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div class="bgDiv6">
|
||
<small-title style="margin: 0 0 8px 0" size="sm" :no-padding="true">
|
||
任务日志
|
||
</small-title>
|
||
<div class="timelineDiv">
|
||
<el-timeline style="padding: 0">
|
||
<el-timeline-item
|
||
v-for="(activity, index) in activities"
|
||
:key="index"
|
||
:type="index == 0 ? 'primary' : ''"
|
||
:color="activity.color"
|
||
size="large"
|
||
hide-timestamp>
|
||
<span>
|
||
{{ activity.triggerObject + ' | ' + activity.description }}
|
||
</span>
|
||
<span style="float: right">
|
||
{{ parseTime(activity.createTime) }}
|
||
</span>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
|
||
<!-- 底部按钮 -->
|
||
<div class="drawer-body__footer">
|
||
<el-button @click="closeD">返 回</el-button>
|
||
</div>
|
||
</el-drawer>
|
||
</template>
|
||
<script>
|
||
import SmallTitle from './SmallTitle';
|
||
import { getTask, getTaskLogPage } from '@/api/ssdl/taskList';
|
||
|
||
export default {
|
||
name: '',
|
||
data() {
|
||
return {
|
||
visible: false,
|
||
infoID: '',
|
||
infoData: '',
|
||
statusColor: [
|
||
//bgDiv1的任务状态
|
||
{ label: '待下发', color: '#fa8c16' },
|
||
{ label: '待执行', color: '#1890ff' },
|
||
{ label: '执行中', color: '#1890ff' },
|
||
{ label: '取货完成', color: '#52c41a' },
|
||
{ label: '已完成', color: '#52c41a' },
|
||
{ label: '暂停中', color: '#8c8c8c' },
|
||
{ label: '已终止', color: '#faad14' },
|
||
{ label: '异常', color: '#ff4d4f' },
|
||
],
|
||
nowDate: Date.now(),
|
||
//bgDiv2的步骤条
|
||
stepNum: 0,
|
||
stepStatus: 'finish',
|
||
//bgDiv6的时间线
|
||
|
||
activities: [],
|
||
};
|
||
},
|
||
components: {
|
||
SmallTitle,
|
||
},
|
||
created() {},
|
||
methods: {
|
||
init(id) {
|
||
this.visible = true;
|
||
this.infoID = id;
|
||
this.$nextTick(() => {
|
||
this.getInfoData();
|
||
});
|
||
},
|
||
getInfoData() {
|
||
getTask(this.infoID).then(({ data }) => {
|
||
this.infoData = data;
|
||
if (data.mainTaskState < 3) {
|
||
this.stepNum = data.mainTaskState;
|
||
} else if (data.mainTaskState == 4) {
|
||
this.stepNum = 3;
|
||
}
|
||
getTaskLogPage({
|
||
mainTaskId: this.infoID,
|
||
pageNo: 1,
|
||
pageSize: 100,
|
||
}).then(({ data }) => {
|
||
this.activities = data.list.sort((a, b) => a.timestamp - b.timestamp);
|
||
});
|
||
});
|
||
},
|
||
//刷新
|
||
refresh() {
|
||
this.nowDate = Date.now();
|
||
this.getInfoData();
|
||
},
|
||
closeD() {
|
||
this.visible = false;
|
||
this.$emit('closeDrawer');
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.bgDiv1 {
|
||
background-color: #f1f9ff;
|
||
padding: 20px;
|
||
line-height: 25px;
|
||
font-size: 15px;
|
||
.taskStatus {
|
||
text-align: center;
|
||
border-radius: 3px;
|
||
padding: 2px 5px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.bgDiv2 {
|
||
padding: 18px 0;
|
||
background-image: linear-gradient(
|
||
to right,
|
||
transparent 0%,
|
||
#c5c5c5 10%,
|
||
#c5c5c5 90%,
|
||
transparent 100%
|
||
);
|
||
background-position: bottom;
|
||
background-size: 100% 1px;
|
||
background-repeat: no-repeat;
|
||
padding-bottom: 1px;
|
||
.abnormal {
|
||
width: 80%;
|
||
margin: auto;
|
||
border-radius: 5px;
|
||
height: 40px;
|
||
font-size: 22px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
background-color: rgba(217, 0, 27, 0.1);
|
||
color: rgba(217, 0, 27, 1);
|
||
border: 1px solid rgba(217, 0, 27, 1);
|
||
}
|
||
}
|
||
.bgDiv3 {
|
||
padding: 20px 20px 0;
|
||
.pan-info {
|
||
height: 200px;
|
||
border: 1px solid rgba(121, 121, 121, 0.8);
|
||
border-radius: 5px;
|
||
.pan-title {
|
||
background-color: #d8eeff;
|
||
border-radius: 5px;
|
||
height: 35px;
|
||
font-size: 20px;
|
||
line-height: 35px;
|
||
padding: 0 20px;
|
||
border-bottom: 1px solid rgba(121, 121, 121, 0.5);
|
||
letter-spacing: 2px;
|
||
}
|
||
.pan-body {
|
||
padding: 15px;
|
||
font-size: 16px;
|
||
color: rgba(121, 121, 121, 1);
|
||
}
|
||
}
|
||
}
|
||
.bgDiv4 {
|
||
padding: 20px 20px 0;
|
||
}
|
||
.bgDiv5 {
|
||
padding: 20px 20px 0;
|
||
}
|
||
.bgDiv6 {
|
||
padding: 20px 20px 0;
|
||
.timelineDiv {
|
||
padding: 5px;
|
||
height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
.drawer-body__footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 0 18px 10px;
|
||
}
|
||
</style>
|