<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>
|
</div>
|
<div class="details">
|
<div class="row">
|
<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>
|
<div class="row">
|
<div class="col">交货日期: {{ task?.Order?.deliverDate || '--' }}</div>
|
<div class="col">工时: {{ task?.Procedure?.procedure?.workHours || '--' }}</div>
|
</div>
|
<div class="row">
|
<div class="col">
|
起止时间: {{ formatDate(task?.Procedure?.startTime) }}
|
~
|
{{ formatDate(task?.Procedure?.endTime) }}
|
</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>
|
</div>
|
<div class="process">
|
<div>完成进度:</div>
|
<div class="process-bar">
|
<el-progress
|
define-back-color="#132f6e"
|
color="#00cc66"
|
text-color="#fff"
|
:text-inside="true"
|
:stroke-width="30"
|
:percentage="processingPercent"
|
></el-progress>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
// 加工信息组件
|
import type { Task } from '@/api/task'
|
import { computed, onUnmounted, toRefs, watch } 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'
|
|
const props = defineProps<{
|
task?: Task
|
}>()
|
|
const { task } = toRefs(props)
|
export interface Statistics {
|
totalNumber: number
|
finishNumber: number
|
}
|
|
/**
|
* 计算生产进度
|
* @param statistics
|
* @return 进度,0~100
|
*/
|
function calculateProgress(statistics: Statistics): number {
|
if (!statistics) {
|
return 0
|
}
|
|
if (statistics.finishNumber === 0) {
|
return 0
|
}
|
if (statistics.finishNumber === statistics.totalNumber) {
|
return 100
|
}
|
|
const result = Math.floor((statistics.finishNumber / statistics.totalNumber) * 100)
|
return result > 100 ? 100 : result
|
}
|
|
/**
|
* 计算完成进度, 任务状态未生产固定为 0% 已完成固定为 100% 生产中则从plc获取
|
*/
|
const processingPercent = computed(() => {
|
if (task?.value?.Procedure?.Status === 1) {
|
return 0
|
}
|
|
if (task?.value?.Procedure?.Status === 3) {
|
return 100
|
}
|
|
if (task?.value?.Procedure?.Status === 2) {
|
return calculateProgress(plcResponse?.value?.data as Statistics)
|
}
|
|
return 0
|
})
|
|
/**
|
* 如果任务状态是进行中, 则轮询 plc 取进度
|
*/
|
const {
|
data: plcResponse,
|
run: startPLCPolling,
|
cancel: cancelPLCPolling
|
} = useRequest(
|
() =>
|
getProductProgress({
|
channel: task?.value?.Channel,
|
procedureId: task?.value?.Procedure.ID
|
} as ProductProgressParams),
|
{
|
manual: true,
|
pollingInterval: 6000,
|
pollingWhenHidden: false
|
}
|
)
|
|
/**
|
* 任务状态是生产中则轮询plc取目标数和完成数计算完成进度
|
*/
|
watch(
|
() => task?.value,
|
() => {
|
cancelPLCPolling()
|
if (task?.value?.Procedure?.Status === 2) {
|
startPLCPolling()
|
}
|
}
|
)
|
|
onUnmounted(() => {
|
cancelPLCPolling()
|
})
|
|
/**
|
* 格式化时间戳
|
* @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">
|
$text-color: #d7d7ca;
|
|
.step {
|
width: 100%;
|
height: 66px;
|
overflow-x: auto;
|
margin-top: -5px;
|
padding: 0 20px;
|
.steps {
|
height: 100%;
|
.el-step__icon {
|
width: 16px;
|
height: 16px;
|
}
|
.el-step__title {
|
line-height: 25px;
|
font-size: 14px;
|
}
|
.el-step__title.is-process {
|
color: #a8abb2;
|
}
|
}
|
}
|
.details {
|
font-size: 18px;
|
padding: 10px 20px;
|
color: $text-color;
|
.row {
|
width: 100%;
|
padding: 2px 0;
|
display: flex;
|
align-items: center;
|
}
|
.col {
|
width: 50%;
|
flex: 1;
|
}
|
}
|
.process {
|
font-size: 18px;
|
padding: 10px 20px;
|
color: $text-color;
|
display: flex;
|
}
|
.process-bar {
|
flex: 1;
|
margin-left: 20px;
|
}
|
:deep(.el-progress-bar__outer) {
|
border-radius: 8px;
|
}
|
:deep(.el-progress-bar__inner) {
|
border-radius: 8px;
|
}
|
</style>
|
