<template>
|
<div class="task-control">
|
<div class="task-info">
|
<div class="task-info-item">
|
<div class="task-info-title">计划开始时间</div>
|
<div class="task-info-content">{{ formatDate(task?.Procedure?.startTime) }}</div>
|
</div>
|
<div class="task-info-item">
|
<div class="task-info-title">实际开始时间</div>
|
<div class="task-info-content">{{ formatDate(task?.Procedure?.realStartTime) }}</div>
|
</div>
|
|
<div class="task-info-item">
|
<div class="task-info-title">实际结束时间</div>
|
<div class="task-info-content">{{ formatDate(task?.Procedure?.realEndTime) }}</div>
|
</div>
|
</div>
|
|
<div class="produce-btn">
|
<BigButton v-if="task?.Procedure.Status === 1" class="btn" :disabled="!task?.CanStarted" @click="startProduce">
|
开始生产
|
</BigButton>
|
<template v-if="task?.Procedure.Status === 2 || task?.Procedure.Status === 3">
|
<BigButton class="btn" bg-color="#ff9933">打印</BigButton>
|
<BigButton class="btn" bg-color="#00cc33">报工</BigButton>
|
<el-popconfirm
|
width="340"
|
confirm-button-text="确定"
|
cancel-button-text="取消"
|
:icon="CircleCloseFilled"
|
icon-color="red"
|
:hide-after="0"
|
:teleported="false"
|
title="请确认是否已完成此生产任务?"
|
placement="top"
|
@confirm="finishTaskProduce"
|
>
|
<template #reference>
|
<BigButton class="btn" bg-color="#ff0000">完成</BigButton>
|
</template>
|
</el-popconfirm>
|
</template>
|
</div>
|
</div>
|
<TaskControlModal
|
v-model="showTaskControlModal"
|
:task="task"
|
@produce-start="emit('shouldReload', task)"
|
></TaskControlModal>
|
</template>
|
<script setup lang="ts">
|
import type { Task } from '@/api/task'
|
import { ref, toRefs } from 'vue'
|
import BigButton from '@/views/dashboard/components/BigButton.vue'
|
import { useDateFormat } from '@vueuse/core'
|
import TaskControlModal from '@/views/dashboard/components/TaskControlModal.vue'
|
import { CircleCloseFilled } from '@element-plus/icons-vue'
|
import { finishTask } from '@/api'
|
import { ElMessage } from 'element-plus'
|
|
const props = defineProps<{
|
task?: Task
|
}>()
|
const { task } = toRefs(props)
|
|
const emit = defineEmits<{
|
shouldReload: [task: Task]
|
}>()
|
|
const showTaskControlModal = ref(false)
|
|
/**
|
* 开始生产
|
*/
|
function startProduce() {
|
showTaskControlModal.value = true
|
}
|
|
/**
|
* 完成任务
|
*/
|
function finishTaskProduce() {
|
if (task?.value?.Procedure?.ID) {
|
finishTask({ id: task!.value.Procedure.ID }).then(
|
(res) => {
|
ElMessage({
|
message: '操作成功！',
|
type: 'success'
|
})
|
emit('shouldReload', task.value)
|
},
|
(err) => {
|
console.error(err)
|
ElMessage({
|
message: '操作失败！',
|
type: 'warning'
|
})
|
}
|
)
|
} else {
|
ElMessage({
|
message: '当前设备没有工序！',
|
type: 'warning'
|
})
|
}
|
}
|
|
/**
|
* 格式化时间戳
|
* @param timestamp 后端返的10位时间戳
|
*/
|
function formatDate(timestamp?: number) {
|
if (!timestamp) {
|
return '--'
|
}
|
const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD', { locales: 'zh-cn' })
|
return time.value
|
}
|
</script>
|
<style scoped lang="scss">
|
$title-text-color: #9599af;
|
$content-text-color: #d7d7d7;
|
|
.task-control {
|
display: flex;
|
align-items: start;
|
width: 100%;
|
}
|
.task-info,
|
.produce-btn {
|
width: 50%;
|
flex: 1;
|
height: 100%;
|
}
|
.produce-btn {
|
padding: 16px 0;
|
& > .btn {
|
margin-bottom: 14px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
|
.task-info-item {
|
padding: 10px 20px;
|
margin-bottom: 6px;
|
}
|
.task-info-title {
|
font-size: 18px;
|
color: $title-text-color;
|
}
|
.task-info-content {
|
font-size: 19px;
|
color: $content-text-color;
|
font-weight: 600;
|
margin-top: 12px;
|
}
|
.produce-btn {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.start-btn {
|
background-color: #4efefa;
|
}
|
.print-btn {
|
background-color: #ff9933;
|
}
|
.report-btn {
|
background-color: #00cc33;
|
}
|
.finish-btn {
|
background-color: #ff0000;
|
}
|
|
:deep(.el-popper) {
|
background-color: #133f97;
|
color: #fff;
|
}
|
:deep(.el-popconfirm__main) {
|
font-size: 25px;
|
}
|
:deep(.el-popconfirm__icon) {
|
font-size: 38px;
|
}
|
:deep(.el-popconfirm__main) {
|
margin-bottom: 20px;
|
}
|
:deep(.el-popconfirm__action) {
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
}
|
:deep(.el-popconfirm__action .el-button) {
|
font-size: 22px;
|
height: 54px;
|
width: 140px;
|
color: #fff;
|
background-color: #0ae5ec;
|
&:hover {
|
background-color: #0ae5ec;
|
}
|
&.is-text {
|
color: #92a1c0;
|
background-color: #133f97;
|
border: 1px solid #0ae5ec;
|
&:hover {
|
background-color: #133f97;
|
}
|
}
|
}
|
</style>
|
