<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" :disabled="task?.Procedure.Status === 3">打印</BigButton>
|
<BigButton class="btn" bg-color="#00cc33" :disabled="task?.Procedure.Status === 3" @click="openReportModal">
|
报工
|
</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" :disabled="task?.Procedure.Status === 3">完成</BigButton>
|
</template>
|
</el-popconfirm>
|
</template>
|
</div>
|
</div>
|
<TaskControlModal v-model="showTaskControlModal" :task="task" @produce-start="onProduceStart"></TaskControlModal>
|
<ReportProductionModal
|
v-model="showReportModal"
|
:amount="plcInfo?.finishNumber ?? 0"
|
@close="showReportModal = false"
|
@submit="onReportProduction"
|
></ReportProductionModal>
|
</template>
|
<script setup lang="ts">
|
import type { Task, Worker } 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 { apiReportWork, finishTask } from '@/api'
|
import { ElMessage } from 'element-plus'
|
import ReportProductionModal from '@/views/dashboard/components/ReportProductionModal.vue'
|
import { usePLCStore } from '@/stores/plc'
|
import { storeToRefs } from 'pinia'
|
|
const props = defineProps<{
|
task?: Task
|
workers: Worker[]
|
}>()
|
const { task, workers } = toRefs(props)
|
|
const emit = defineEmits<{
|
shouldReload: [task: Task]
|
}>()
|
|
const showTaskControlModal = ref(false)
|
|
/**
|
* 开始生产
|
*/
|
function startProduce() {
|
showTaskControlModal.value = true
|
}
|
|
/**
|
* 完成任务
|
*/
|
function finishTaskProduce() {
|
if (task?.value && task.value?.Procedure?.ID) {
|
//点击的时候不能比实际开始时间大于1分钟
|
let realStartTime = task.value?.Procedure?.realStartTime
|
if (realStartTime) {
|
realStartTime = realStartTime * 1000
|
let time = Date.now()
|
let differ = Math.abs(time - realStartTime) / 1000
|
if (differ > 60) {
|
ElMessage({
|
message: '工序制造时间太短，请检查！',
|
type: 'warning'
|
})
|
return true
|
}
|
}
|
finishTask({ id: task!.value.Procedure.ID }).then(
|
(res) => {
|
ElMessage({
|
message: '操作成功！',
|
type: 'success'
|
})
|
emit('shouldReload', task.value as Task)
|
},
|
(err) => {
|
console.error(err)
|
ElMessage({
|
message: '操作失败！',
|
type: 'warning'
|
})
|
}
|
)
|
} else {
|
ElMessage({
|
message: '当前设备没有工序！',
|
type: 'warning'
|
})
|
}
|
}
|
|
function onProduceStart() {
|
emit('shouldReload', task!.value as Task)
|
}
|
|
/**
|
* 格式化时间戳
|
* @param timestamp 后端返的10位时间戳
|
*/
|
function formatDate(timestamp?: number) {
|
if (!timestamp) {
|
return '--'
|
}
|
const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD HH:mm:ss', { locales: 'zh-cn' })
|
return time.value
|
}
|
|
const plcStore = usePLCStore()
|
const { plcInfo } = storeToRefs(plcStore)
|
// 报工
|
const showReportModal = ref(false)
|
function openReportModal() {
|
// 有人员才可以报工
|
if (workers.value[0].workerId) {
|
showReportModal.value = true
|
} else {
|
ElMessage({
|
message: '没有人员信息不允许手动报工！',
|
type: 'error',
|
duration: 3000
|
})
|
}
|
}
|
|
/**
|
* 上报加工数
|
* @param amount 加工数
|
*/
|
function onReportProduction(amount: number) {
|
if (!task?.value) {
|
return
|
}
|
// 有人员才可以报工
|
if (workers.value[0].workerId) {
|
apiReportWork({
|
procedureId: task.value?.Procedure.ID,
|
reportAmount: amount,
|
workerID: workers.value[0].workerId
|
})
|
.then((res) => {
|
if (res.code === 200) {
|
ElMessage({
|
message: '报工成功',
|
type: 'success',
|
duration: 2000
|
})
|
showReportModal.value = false
|
} else {
|
ElMessage({
|
message: '报工失败',
|
type: 'error',
|
duration: 3000
|
})
|
}
|
})
|
.catch((err) => {
|
console.error(err)
|
})
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
$title-text-color: #9599af;
|
$content-text-color: #d7d7d7;
|
|
.task-control {
|
display: flex;
|
align-items: start;
|
width: 100%;
|
}
|
.task-info {
|
flex: 1;
|
height: 100%;
|
}
|
.produce-btn {
|
flex-shrink: 0;
|
height: 100%;
|
}
|
.produce-btn {
|
padding: 16px 0;
|
& > .btn {
|
margin-bottom: 14px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
|
.task-info-item {
|
padding: 10px 20px;
|
}
|
.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: 4px;
|
}
|
.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>
|
