274 lines
7.1 KiB
Vue
274 lines
7.1 KiB
Vue
<!--
|
||
* @Author: zwq
|
||
* @Date: 2025-11-07 17:01:51
|
||
* @LastEditors: zwq
|
||
* @LastEditTime: 2025-11-07 22:31:17
|
||
* @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">
|
||
TSK202510230001
|
||
</el-col>
|
||
<el-col :span="8">满盘搬运（自动）</el-col>
|
||
<el-col :span="8">
|
||
上次刷新：{{ parseTime(Date.now()) }}
|
||
<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[1].color }"
|
||
class="taskStatus">
|
||
{{ statusColor[1].label }}
|
||
</span>
|
||
</el-col>
|
||
<el-col :span="8">中</el-col>
|
||
<el-col :span="8">--</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">
|
||
<el-col :span="8">--</el-col>
|
||
<el-col :span="8">系统/张三</el-col>
|
||
<el-col :span="8">{{ parseTime(Date.now()) }}</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">任务异常：无效路径</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>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="pan-info">
|
||
<div class="pan-title">R盘</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="bgDiv4">
|
||
<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/R)">
|
||
CK-01-A05-L / R
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="终点库位(L/R)">
|
||
CC-02-B03-L/R (候选 )
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="起点策略">--</el-descriptions-item>
|
||
<el-descriptions-item label="终点策略">入库策略</el-descriptions-item>
|
||
<el-descriptions-item label="FMS任务号">--</el-descriptions-item>
|
||
<el-descriptions-item label="车辆位置">--</el-descriptions-item>
|
||
<el-descriptions-item label="电量">--</el-descriptions-item>
|
||
<el-descriptions-item label="是否载货">--</el-descriptions-item>
|
||
<el-descriptions-item label="创建方式">自动/人工</el-descriptions-item>
|
||
<el-descriptions-item label="任务来源">
|
||
PDA/PC/系统
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="关联叫料单">--</el-descriptions-item>
|
||
<el-descriptions-item label=""></el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div class="bgDiv6">
|
||
<small-title style="margin: 0 0 8px 0" size="sm" :no-padding="true">
|
||
任务日志
|
||
</small-title>
|
||
<el-timeline style="padding: 0">
|
||
<el-timeline-item
|
||
v-for="(activity, index) in activities"
|
||
:key="index"
|
||
:type="activity.type"
|
||
:color="activity.color"
|
||
size="large"
|
||
hide-timestamp>
|
||
<span>{{ activity.content }}</span>
|
||
<span style="float: right">{{ activity.timestamp }}</span>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</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';
|
||
|
||
export default {
|
||
name: '',
|
||
data() {
|
||
return {
|
||
visible: false,
|
||
title: '',
|
||
statusColor: [
|
||
//bgDiv1的任务状态
|
||
{ label: '待下发', color: '#fa8c16' },
|
||
{ label: '待执行', color: '#1890ff' },
|
||
{ label: '执行中', color: '#1890ff' },
|
||
{ label: '已完成', color: '#52c41a' },
|
||
{ label: '暂停中', color: '#8c8c8c' },
|
||
{ label: '已终止', color: '#faad14' },
|
||
{ label: '异常', color: '#ff4d4f' },
|
||
{ label: '禁用', color: '#d9d9d9' },
|
||
],
|
||
//bgDiv2的步骤条
|
||
stepNum: 2,
|
||
stepStatus: 'finish',
|
||
//bgDiv6的时间线
|
||
|
||
activities: [
|
||
{
|
||
content: 'FMS | 卸货完成，任务完成',
|
||
timestamp: '2018-04-12 20:46',
|
||
type: 'primary',
|
||
},
|
||
{
|
||
content: 'FMS | 取货完成',
|
||
timestamp: '2018-04-03 20:46',
|
||
},
|
||
{
|
||
content: 'FMS | 派车AGV-03，前往起点取货',
|
||
timestamp: '2018-04-03 20:46',
|
||
},
|
||
{
|
||
content: '张三 | 任务扫码配对完成，进入待下发',
|
||
timestamp: '2018-04-03 20:46',
|
||
},
|
||
],
|
||
};
|
||
},
|
||
components: {
|
||
SmallTitle,
|
||
},
|
||
created() {},
|
||
methods: {
|
||
init(val) {
|
||
this.visible = true;
|
||
},
|
||
//刷新
|
||
refresh() {},
|
||
closeD() {
|
||
this.visible = false
|
||
this.$emit('closeDrawer');
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.bgDiv1 {
|
||
background-color: rgba(242, 242, 242, 0.5);
|
||
padding: 20px;
|
||
line-height: 25px;
|
||
font-size: 15px;
|
||
border-bottom: 1px solid rgba(121, 121, 121, 0.5);
|
||
.taskStatus {
|
||
text-align: center;
|
||
border-radius: 3px;
|
||
padding: 2px 5px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.bgDiv2 {
|
||
border-bottom: 1px solid rgba(121, 121, 121, 0.5);
|
||
padding: 18px 0;
|
||
.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: 350px;
|
||
border: 1px solid rgba(121, 121, 121, 0.8);
|
||
border-radius: 5px;
|
||
.pan-title {
|
||
background-color: rgba(242, 242, 242, 0.5);
|
||
height: 35px;
|
||
font-size: 20px;
|
||
line-height: 35px;
|
||
padding: 0 20px;
|
||
border-bottom: 1px solid rgba(121, 121, 121, 0.5);
|
||
letter-spacing: 2px;
|
||
}
|
||
}
|
||
}
|
||
.bgDiv4 {
|
||
padding: 20px 20px 0;
|
||
}
|
||
.bgDiv5 {
|
||
padding: 20px 20px 0;
|
||
}
|
||
.bgDiv6 {
|
||
padding: 20px 20px 0;
|
||
}
|
||
.drawer-body__footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 0 18px 10px;
|
||
}
|
||
</style>
|