更新
This commit is contained in:
273
src/views/taskCenter/taskList/components/detailDrawer.vue
Normal file
273
src/views/taskCenter/taskList/components/detailDrawer.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<!--
|
||||
* @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>
|
||||
Reference in New Issue
Block a user