<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">工单号: {{ task.Order.workOrderId }}</div>
|
<div class="col">生产数量：{{ task.Order.amount || 0 }}{{ task.Order.unit }}</div>
|
</div>
|
<div class="row">
|
<div class="col">当前任务: {{ task.Procedure.procedure.procedureName || '' }}</div>
|
<div class="col">产品名称：{{ task.Order.productName || '' }}</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: 13px;
|
padding: 10px 20px;
|
color: $text-color;
|
.row {
|
width: 100%;
|
height: 24px;
|
display: flex;
|
align-items: center;
|
}
|
.col {
|
width: 50%;
|
flex: 1;
|
}
|
}
|
.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>
|
