| | |
| | | <template> |
| | | <div class="processing-info"> |
| | | <div class="step"> |
| | | <el-steps |
| | | v-if="task?.AllProcedures" |
| | | :active="task.CurrentProcedureIndex ?? 0" |
| | | finish-status="success" |
| | | class="steps" |
| | | > |
| | | <el-step v-for="(item, index) in task.AllProcedures" :key="index" icon="" :title="item"></el-step> |
| | | </el-steps> |
| | | <TaskStep :active="task?.CurrentProcedureIndex ?? 0" :steps="task?.AllProcedures ?? []"></TaskStep> |
| | | </div> |
| | | <div class="details"> |
| | | <div class="row"> |
| | | <div class="col">工单编号: {{ task?.Order?.workOrderId || '' }}</div> |
| | | <div class="col">订单编号: {{ task?.Order?.orderId || '' }}</div> |
| | | <div class="col">工单编号: {{ task?.Order?.workOrderId ?? '--' }}</div> |
| | | <div class="col">订单编号: {{ task?.Order?.orderId ?? '--' }}</div> |
| | | </div> |
| | | |
| | | <div class="row"> |
| | | <div class="col">产品名称: {{ task?.Order?.productName || '--' }}</div> |
| | | <div class="col">数量: {{ task?.Order?.amount || 0 }}{{ task?.Order?.unit }}</div> |
| | | <div class="col">数量: {{ task?.Order?.amount ?? '--' }}{{ task?.Order?.unit }}</div> |
| | | </div> |
| | | <div class="row"> |
| | | <div class="col">交货日期: {{ task?.Order?.deliverDate || '--' }}</div> |
| | |
| | | <div class="col">通道: {{ isNumber(task?.Channel) ? CHANNEL_NAME_MAP[task?.Channel] : '--' }}</div> |
| | | </div> |
| | | <div class="row"> |
| | | <div class="col">客户名称: {{ task?.Order?.customer || '' }}</div> |
| | | <div class="col">参数要求: {{ task?.Order?.parameter || '' }}</div> |
| | | <div class="col">客户名称: {{ task?.Order?.customer || '--' }}</div> |
| | | <div class="col">参数要求: {{ task?.Order?.parameter || '--' }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="process"> |
| | |
| | | <script setup lang="ts"> |
| | | // 加工信息组件 |
| | | import type { Task } from '@/api/task' |
| | | import { computed, onUnmounted, toRefs, watch } from 'vue' |
| | | import { computed, toRefs } from 'vue' |
| | | import { useDateFormat } from '@vueuse/core' |
| | | import { useRequest } from 'vue-hooks-plus' |
| | | import { getProductProgress } from '@/api' |
| | | import type { ProductProgressParams } from '@/api' |
| | | import { isNumber } from 'lodash-es' |
| | | import { CHANNEL_NAME_MAP } from '@/common/constants' |
| | | import { usePLCStore } from '@/stores/plc' |
| | | import TaskStep from '@/views/dashboard/components/TaskStep.vue' |
| | | |
| | | const props = defineProps<{ |
| | | task?: Task |
| | |
| | | * 计算完成进度, 任务状态未生产固定为 0% 已完成固定为 100% 生产中则从plc获取 |
| | | */ |
| | | const processingPercent = computed(() => { |
| | | if (task?.value?.Procedure?.Status === 1) { |
| | | return 0 |
| | | } |
| | | // if (task?.value?.Procedure?.Status === 1) { |
| | | // return 0 |
| | | // } |
| | | |
| | | if (task?.value?.Procedure?.Status === 3) { |
| | | return 100 |
| | | } |
| | | // if (task?.value?.Procedure?.Status === 2 || task?.value?.Procedure?.Status === 1) { |
| | | // return calculateProgress(plcStore.plcInfo as Statistics) |
| | | // } |
| | | |
| | | if (task?.value?.Procedure?.Status === 2) { |
| | | return calculateProgress(plcStore.plcInfo as Statistics) |
| | | } |
| | | |
| | | return 0 |
| | | return calculateProgress(plcStore.plcInfo as Statistics) |
| | | }) |
| | | |
| | | /** |
| | |
| | | if (!timestamp) { |
| | | return '--' |
| | | } |
| | | const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD', { locales: 'zh-cn' }) |
| | | const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD HH:mm:ss', { locales: 'zh-cn' }) |
| | | return time.value |
| | | } |
| | | </script> |
| | |
| | | |
| | | .step { |
| | | width: 100%; |
| | | height: 66px; |
| | | height: 46px; |
| | | overflow-x: auto; |
| | | margin-top: -5px; |
| | | padding: 0 20px; |
| | | .steps { |
| | | height: 100%; |
| | |
| | | } |
| | | } |
| | | .details { |
| | | font-size: 18px; |
| | | font-size: 17px; |
| | | padding: 10px 20px; |
| | | color: $text-color; |
| | | .row { |
| | |
| | | } |
| | | } |
| | | .process { |
| | | font-size: 18px; |
| | | font-size: 17px; |
| | | padding: 10px 20px; |
| | | color: $text-color; |
| | | display: flex; |
| | |
| | | } |
| | | :deep(.el-progress-bar__outer) { |
| | | border-radius: 8px; |
| | | background-color: #13235a; |
| | | } |
| | | :deep(.el-progress-bar__inner) { |
| | | border-radius: 8px; |
| | | } |
| | | :deep(.el-step__icon .is-icon) { |
| | | background-color: transparent; |
| | | } |
| | | </style> |