<template>
|
<div class="task-info" :class="{ active }">
|
<div
|
class="task-info-title"
|
:class="{
|
'status-ready': task.Procedure.Status === 1,
|
'status-running': task.Procedure.Status === 2,
|
'status-done': task.Procedure.Status === 3
|
}"
|
>
|
{{ TASK_STATUS_MAP[task.Procedure.Status] }}
|
</div>
|
<div class="task-info-content">
|
<div class="row">
|
<div class="col">
|
工单号:
|
<span>{{ task.Order.workOrderId }}</span>
|
</div>
|
<div class="col">
|
生产数量: <span>{{ task.Order.amount || 0 }}{{ task.Order.unit }}</span>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col">
|
当前任务:
|
<span>{{ task.Procedure.procedure.procedureName || '' }}</span>
|
</div>
|
<div class="col">
|
产品名称:
|
<span>{{ task.Order.productName || '' }}</span>
|
</div>
|
</div>
|
<div class="row">计划时间:{{ planTimeText }}</div>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import type { Task } from '@/api/task'
|
import { computed, toRefs } from 'vue'
|
import { TASK_STATUS_MAP } from '@/common/constants'
|
import { useDateFormat } from '@vueuse/core'
|
|
export interface TaskInfoProps {
|
task: Task
|
active?: boolean
|
}
|
|
const props = withDefaults(defineProps<TaskInfoProps>(), {
|
active: false
|
})
|
const { task, active } = toRefs(props)
|
|
const planTimeText = computed(() => {
|
const format = (date: number) => {
|
return useDateFormat(date, 'YYYY-MM-DD HH:mm:ss', { locales: 'zh-cn' })
|
}
|
|
const startTime = task.value.Procedure?.startTime
|
const endTime = task.value.Procedure?.endTime
|
return `${startTime ? format(startTime * 1000).value : '--'} - ${startTime ? format(endTime * 1000).value : '--'}`
|
})
|
</script>
|
|
<style scoped lang="scss">
|
$status-default: #13235a;
|
$status-running: #ffcc00;
|
$status-ready: #13235a;
|
$status-done: #13235a;
|
$text-color: #d7d7d7;
|
$active-color: #00dfdf;
|
.task-info {
|
background-color: #6b83ff;
|
border-radius: 4px;
|
overflow: initial;
|
cursor: pointer;
|
}
|
.task-info-title {
|
height: 34px;
|
border-radius: 4px;
|
background-color: $status-default;
|
display: flex;
|
align-items: center;
|
padding-left: 20px;
|
font-size: 14px;
|
}
|
.status-running {
|
color: var(--vt-v-blue);
|
background-color: $status-running;
|
}
|
.status-ready {
|
background-color: $status-ready;
|
}
|
.status-done {
|
background-color: $status-done;
|
}
|
.task-info-content {
|
font-size: 12px;
|
padding: 10px 15px;
|
color: $text-color;
|
.row {
|
width: 100%;
|
height: 24px;
|
display: flex;
|
align-items: center;
|
}
|
.col {
|
width: 50%;
|
flex: 1;
|
span {
|
width: calc(100% - 60px);
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: inline-block;
|
vertical-align: middle;
|
}
|
}
|
}
|
.active {
|
position: relative;
|
&:before {
|
content: '';
|
width: 8px;
|
background-color: $active-color;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
border-radius: 6px 0 0 6px;
|
}
|
}
|
</style>
|
